diff --git a/.changeset/new-jeans-doubt.md b/.changeset/new-jeans-doubt.md new file mode 100644 index 00000000000..04708eec284 --- /dev/null +++ b/.changeset/new-jeans-doubt.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": patch +--- + +remove duplicate vi call diff --git a/.github/workflows/prerelease-comment.yml b/.github/workflows/prerelease-comment.yml index 51a4e55da87..ad21a549f9b 100644 --- a/.github/workflows/prerelease-comment.yml +++ b/.github/workflows/prerelease-comment.yml @@ -10,7 +10,7 @@ on: jobs: comment: if: | - github.repository_owner == 'shadcn' && + github.repository_owner == 'shadcn-ui' && ${{ github.event.workflow_run.conclusion == 'success' }} runs-on: ubuntu-latest name: Write comment to the PR diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml index d31a8ebaa80..ea414857c6f 100644 --- a/.github/workflows/prerelease.yml +++ b/.github/workflows/prerelease.yml @@ -10,7 +10,7 @@ on: jobs: prerelease: if: | - github.repository_owner == 'shadcn' && + github.repository_owner == 'shadcn-ui' && contains(github.event.pull_request.labels.*.name, '🚀 autorelease') name: Build & Publish a beta release to NPM runs-on: ubuntu-latest diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3ba8d4a6e8e..7ec48407d95 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -9,7 +9,7 @@ on: jobs: release: - if: ${{ github.repository_owner == 'shadcn' }} + if: ${{ github.repository_owner == 'shadcn-ui' }} name: Create a PR for release workflow runs-on: ubuntu-latest steps: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000000..1bf1e22b688 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,128 @@ +# Contributing + +Thanks for your interest in contributing to ui.shadcn.com. We're happy to have you here. + +Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar. + +If you need any help, feel free to reach out to [@shadcn](https://twitter.com/shadcn). + +## About this repository + +This repository is a monorepo. + +- We use [pnpm](https://pnpm.io) and [`workspaces`](https://pnpm.io/workspaces) for development. +- We use [Turborepo](https://turbo.build/repo) as our build system. +- We use [changesets](https://github.com/changesets/changesets) for managing releases. + +## Structure + +This repository is structured as follows: + +``` +apps +└── www + ├── app + ├── components + ├── content + └── registry + ├── default + │ ├── example + │ └── ui + └── new-york + ├── example + └── ui +packages +└── cli +``` + +| Path | Description | +| --------------------- | ---------------------------------------- | +| `apps/www/app` | The Next.js application for the website. | +| `apps/www/components` | The React components for the website. | +| `apps/www/content` | The content for the website. | +| `apps/www/registry` | The registry for the components. | +| `packages/cli` | The `shadcn-ui` package. | + +## Development + +### Start by cloning the repository: + +``` +git clone git@github.com:shadcn-ui/ui.git +``` + +### Install dependencies + +``` +pnpm install +``` + +### Run a workspace + +You can use the `pnpm --filter=[WORKSPACE]` command to start the development process for a workspace. + +#### Examples + +1. To run the `ui.shadcn.com` website: + +``` +pnpm --filter=www dev +``` + +2. To run the `shadcn-ui` package: + +``` +pnpm --filter=shadcn-ui dev +``` + +## Documentation + +The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command: + +```bash +pnpm --filter=www dev +``` + +Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory. + +## Components + +We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles. + +```bash +apps +└── www + └── registry + ├── default + │ ├── example + │ └── ui + └── new-york + ├── example + └── ui +``` + +When adding or modifying components, please ensure that: + +1. You make the changes for every style. +2. You update the documentation. +3. You run `pnpm build:registry` to update the registry. + +## Requests for new components + +If you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out. + +## CLI + +The `shadcn-ui` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli). + +Any changes to the CLI should be made in the `packages/cli` directory. If you can, it would be great if you could add tests for your changes. + +## Testing + +Tests are written using [Vitest](https://vitest.dev). You can run all the tests from the root of the repository. + +```bash +pnpm test +``` + +Please ensure that the tests are passing when submitting a pull request. If you're adding new features, please include tests. diff --git a/README.md b/README.md index 28e10396fa6..cd71f0e800d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ Accessible and customizable components that you can copy and paste into your app Visit http://ui.shadcn.com/docs to view the documentation. +## Contributing + +Please read the [contributing guide](/CONTRIBUTING.md). + ## License Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md). diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 4996505a07d..26fc8aace90 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -1006,6 +1006,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/default/example/mode-toggle")), files: ["registry/default/example/mode-toggle.tsx"], }, + "cards": { + name: "cards", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/cards")), + files: ["registry/default/example/cards/cards.tsx"], + }, }, "new-york": { "accordion": { name: "accordion", @@ -2008,5 +2015,12 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/new-york/example/mode-toggle")), files: ["registry/new-york/example/mode-toggle.tsx"], }, + "cards": { + name: "cards", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/cards")), + files: ["registry/new-york/example/cards/cards.tsx"], + }, }, } diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx index 11443efd0cf..710e5a3a7a0 100644 --- a/apps/www/app/docs/[[...slug]]/page.tsx +++ b/apps/www/app/docs/[[...slug]]/page.tsx @@ -139,9 +139,11 @@ export default async function DocPage({ params }: DocPageProps) { {doc.toc && (
-
+
- +
+ +
diff --git a/apps/www/app/examples/cards/components/payment-method.tsx b/apps/www/app/examples/cards/components/payment-method.tsx index 08f7420c939..0d7e2fffaa1 100644 --- a/apps/www/app/examples/cards/components/payment-method.tsx +++ b/apps/www/app/examples/cards/components/payment-method.tsx @@ -30,42 +30,52 @@ export function DemoPaymentMethod() { - - - + + + + + Card + +
+
+ + +
+
+ + +
diff --git a/apps/www/app/examples/cards/page.tsx b/apps/www/app/examples/cards/page.tsx index 8f3a94bfd51..2a5f91f64d7 100644 --- a/apps/www/app/examples/cards/page.tsx +++ b/apps/www/app/examples/cards/page.tsx @@ -75,7 +75,7 @@ export default function CardsPage() {
-
+
diff --git a/apps/www/app/examples/dashboard/page.tsx b/apps/www/app/examples/dashboard/page.tsx index 72fd6aa8701..95b532947fa 100644 --- a/apps/www/app/examples/dashboard/page.tsx +++ b/apps/www/app/examples/dashboard/page.tsx @@ -25,7 +25,7 @@ import { UserNav } from "@/app/examples/dashboard/components/user-nav" export const metadata: Metadata = { title: "Dashboard", - description: "Example dashboard app using the components.", + description: "Example dashboard app built using the components.", } export default function DashboardPage() { diff --git a/apps/www/app/examples/forms/account/account-form.tsx b/apps/www/app/examples/forms/account/account-form.tsx index 082d29411a9..1f21b7fdd20 100644 --- a/apps/www/app/examples/forms/account/account-form.tsx +++ b/apps/www/app/examples/forms/account/account-form.tsx @@ -184,10 +184,10 @@ export function AccountForm() { {languages.map((language) => ( { - form.setValue("language", value) + onSelect={() => { + form.setValue("language", language.value) }} > - +
{children}
@@ -90,6 +96,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
+ diff --git a/apps/www/app/themes/page.tsx b/apps/www/app/themes/page.tsx new file mode 100644 index 00000000000..d50f7b707d7 --- /dev/null +++ b/apps/www/app/themes/page.tsx @@ -0,0 +1,38 @@ +import { Metadata } from "next" + +import "public/registry/themes.css" +import { + PageHeader, + PageHeaderDescription, + PageHeaderHeading, +} from "@/components/page-header" +import { ThemeCustomizer } from "@/components/theme-customizer" +import { ThemeWrapper } from "@/components/theme-wrapper" +import { ThemesTabs } from "@/app/themes/tabs" + +export const metadata: Metadata = { + title: "Themes", + description: "Hand-picked themes that you can copy and paste into your apps.", +} + +export default function ThemesPage() { + return ( +
+ + + Make it yours. + + Hand-picked themes that you can copy and paste into your apps. + + +
+ +
+ + +
+ ) +} diff --git a/apps/www/app/themes/tabs.tsx b/apps/www/app/themes/tabs.tsx new file mode 100644 index 00000000000..3a6fbd684ae --- /dev/null +++ b/apps/www/app/themes/tabs.tsx @@ -0,0 +1,73 @@ +"use client" + +import * as React from "react" + +import { useConfig } from "@/hooks/use-config" +import { ThemeWrapper } from "@/components/theme-wrapper" +import CardsDefault from "@/registry/default/example/cards" +import { Skeleton } from "@/registry/default/ui/skeleton" +import CardsNewYork from "@/registry/new-york/example/cards" + +export function ThemesTabs() { + const [mounted, setMounted] = React.useState(false) + const [config] = useConfig() + + React.useEffect(() => { + setMounted(true) + }, []) + + return ( +
+ {!mounted ? ( +
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + + +
+
+ + +
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+ +
+ +
+
+ ) : ( + + {config.style === "new-york" && } + {config.style === "default" && } + + )} +
+ ) +} diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx index 6efa2216b0b..f517416b4c1 100644 --- a/apps/www/components/component-preview.tsx +++ b/apps/www/components/component-preview.tsx @@ -102,7 +102,7 @@ export function ComponentPreview({ codeString && )}
- +
{ event?: Event["name"] } -async function copyToClipboardWithMeta(value: string, event?: Event) { +export async function copyToClipboardWithMeta(value: string, event?: Event) { navigator.clipboard.writeText(value) if (event) { trackEvent(event) diff --git a/apps/www/components/drawer.tsx b/apps/www/components/drawer.tsx new file mode 100644 index 00000000000..4fab78df777 --- /dev/null +++ b/apps/www/components/drawer.tsx @@ -0,0 +1,31 @@ +"use client" + +import { forwardRef } from "react" +import { Drawer as DrawerPrimitive } from "vaul" + +import { cn } from "@/lib/utils" + +const DrawerTrigger = DrawerPrimitive.Trigger + +const DrawerContent = forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + +
+ {children} + + +)) +DrawerContent.displayName = "DrawerContent" + +export { DrawerTrigger, DrawerContent } diff --git a/apps/www/components/main-nav.tsx b/apps/www/components/main-nav.tsx index 2deb88fb908..03b0472889f 100644 --- a/apps/www/components/main-nav.tsx +++ b/apps/www/components/main-nav.tsx @@ -7,6 +7,7 @@ import { usePathname } from "next/navigation" import { siteConfig } from "@/config/site" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" +import { Badge } from "@/registry/new-york/ui/badge" export function MainNav() { const pathname = usePathname() @@ -40,6 +41,17 @@ export function MainNav() { > Components + + Themes + ) => ( ), + Link: ({ className, ...props }: React.ComponentProps) => ( + + ), LinkedCard: ({ className, ...props }: React.ComponentProps) => ( +
diff --git a/apps/www/components/theme-component.tsx b/apps/www/components/theme-component.tsx new file mode 100644 index 00000000000..3d56c3825df --- /dev/null +++ b/apps/www/components/theme-component.tsx @@ -0,0 +1,52 @@ +"use client" + +import * as React from "react" +import { Index } from "@/__registry__" + +import { cn } from "@/lib/utils" +import { useConfig } from "@/hooks/use-config" +import { Icons } from "@/components/icons" + +interface ThemeComponentProps extends React.HTMLAttributes { + name: string + extractClassname?: boolean + extractedClassNames?: string + align?: "center" | "start" | "end" +} + +export function ThemeComponent({ name, ...props }: ThemeComponentProps) { + const [config] = useConfig() + + const Preview = React.useMemo(() => { + const Component = Index[config.style][name]?.component + + if (!Component) { + return ( +

+ Component{" "} + + {name} + {" "} + not found in registry. +

+ ) + } + + return + }, [name, config.style]) + + return ( +
+ + + Loading... +
+ } + > + {Preview} + +
+ ) +} diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx new file mode 100644 index 00000000000..380db9a4f97 --- /dev/null +++ b/apps/www/components/theme-customizer.tsx @@ -0,0 +1,629 @@ +"use client" + +import * as React from "react" +import { + CheckIcon, + CopyIcon, + InfoCircledIcon, + MoonIcon, + ResetIcon, + SunIcon, +} from "@radix-ui/react-icons" +import template from "lodash.template" +import { Paintbrush } from "lucide-react" +import { useTheme } from "next-themes" + +import { cn } from "@/lib/utils" +import { useConfig } from "@/hooks/use-config" +import { copyToClipboardWithMeta } from "@/components/copy-button" +import { DrawerContent, DrawerTrigger } from "@/components/drawer" +import { ThemeWrapper } from "@/components/theme-wrapper" +import { Button } from "@/registry/new-york/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/registry/new-york/ui/dialog" +import { Label } from "@/registry/new-york/ui/label" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/registry/new-york/ui/popover" +import { Skeleton } from "@/registry/new-york/ui/skeleton" +import { Theme, themes } from "@/registry/themes" + +import "@/styles/mdx.css" +import { Drawer } from "vaul" + +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/new-york/ui/tooltip" + +export function ThemeCustomizer() { + const [config, setConfig] = useConfig() + const { resolvedTheme: mode } = useTheme() + const [mounted, setMounted] = React.useState(false) + + React.useEffect(() => { + setMounted(true) + }, []) + + return ( +
+ + + + + + + + +
+
+ {mounted ? ( + <> + {["zinc", "rose", "blue", "green", "orange"].map((color) => { + const theme = themes.find((theme) => theme.name === color) + const isActive = config.theme === color + + if (!theme) { + return null + } + + return ( + + + + + + {theme.label} + + + ) + })} + + ) : ( +
+ + + + + +
+ )} +
+ + + + + + + + +
+ +
+ ) +} + +function Customizer() { + const [mounted, setMounted] = React.useState(false) + const { setTheme: setMode, resolvedTheme: mode } = useTheme() + const [config, setConfig] = useConfig() + + React.useEffect(() => { + setMounted(true) + }, []) + + return ( + +
+
+
+ Customize +
+
+ Pick a style and color for your components. +
+
+ +
+
+
+
+ + + + + About styles + + +

+ What is the difference between the New York and Default style? +

+

+ A style comes with its own set of components, animations, + icons and more. +

+

+ The Default style has + larger inputs, uses lucide-react for icons and + tailwindcss-animate for animations. +

+

+ The New York style ships + with smaller buttons and cards with shadows. It uses icons + from Radix Icons. +

+ + +
+
+ + +
+
+
+ +
+ {themes.map((theme) => { + const isActive = config.theme === theme.name + + return mounted ? ( + + ) : ( + + ) + })} +
+
+
+ +
+ {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => { + return ( + + ) + })} +
+
+
+ +
+ {mounted ? ( + <> + + + + ) : ( + <> + + + + )} +
+
+
+ + ) +} + +function CopyCodeButton() { + const [config] = useConfig() + const activeTheme = themes.find((theme) => theme.name === config.theme) + const [hasCopied, setHasCopied] = React.useState(false) + + React.useEffect(() => { + setTimeout(() => { + setHasCopied(false) + }, 2000) + }, [hasCopied]) + + return ( + <> + {activeTheme && ( + + )} + + + + + + + Theme + + Copy and paste the following code into your CSS file. + + + + + {activeTheme && ( + + )} + + + + + ) +} + +function CustomizerCode() { + const [config] = useConfig() + const activeTheme = themes.find((theme) => theme.name === config.theme) + + return ( + +
+ 
+          
+            @layer base {
+              :root {
+            
+                  --background:{" "}
+              {activeTheme?.cssVars.light["background"]};
+            
+            
+                  --foreground:{" "}
+              {activeTheme?.cssVars.light["foreground"]};
+            
+            {[
+              "card",
+              "popover",
+              "primary",
+              "secondary",
+              "muted",
+              "accent",
+              "destructive",
+            ].map((prefix) => (
+              <>
+                
+                      --{prefix}:{" "}
+                  {
+                    activeTheme?.cssVars.light[
+                      prefix as keyof typeof activeTheme.cssVars.light
+                    ]
+                  }
+                  ;
+                
+                
+                      --{prefix}-foreground:{" "}
+                  {
+                    activeTheme?.cssVars.light[
+                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
+                    ]
+                  }
+                  ;
+                
+              
+            ))}
+            
+                  --border:{" "}
+              {activeTheme?.cssVars.light["border"]};
+            
+            
+                  --input:{" "}
+              {activeTheme?.cssVars.light["input"]};
+            
+            
+                  --ring:{" "}
+              {activeTheme?.cssVars.light["ring"]};
+            
+            
+                  --radius: {config.radius}rem;
+            
+              }
+             
+              .dark {
+            
+                  --background:{" "}
+              {activeTheme?.cssVars.dark["background"]};
+            
+            
+                  --foreground:{" "}
+              {activeTheme?.cssVars.dark["foreground"]};
+            
+            {[
+              "card",
+              "popover",
+              "primary",
+              "secondary",
+              "muted",
+              "accent",
+              "destructive",
+            ].map((prefix) => (
+              <>
+                
+                      --{prefix}:{" "}
+                  {
+                    activeTheme?.cssVars.dark[
+                      prefix as keyof typeof activeTheme.cssVars.dark
+                    ]
+                  }
+                  ;
+                
+                
+                      --{prefix}-foreground:{" "}
+                  {
+                    activeTheme?.cssVars.dark[
+                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
+                    ]
+                  }
+                  ;
+                
+              
+            ))}
+            
+                  --border:{" "}
+              {activeTheme?.cssVars.dark["border"]};
+            
+            
+                  --input:{" "}
+              {activeTheme?.cssVars.dark["input"]};
+            
+            
+                  --ring:{" "}
+              {activeTheme?.cssVars.dark["ring"]};
+            
+              }
+            }
+          
+
+
+ + ) +} + +function getThemeCode(theme: Theme, radius: number) { + if (!theme) { + return "" + } + + return template(BASE_STYLES_WITH_VARIABLES)({ + colors: theme.cssVars, + radius, + }) +} + +const BASE_STYLES_WITH_VARIABLES = ` +@layer base { + :root { + --background: <%- colors.light["background"] %>; + --foreground: <%- colors.light["foreground"] %>; + --card: <%- colors.light["card"] %>; + --card-foreground: <%- colors.light["card-foreground"] %>; + --popover: <%- colors.light["popover"] %>; + --popover-foreground: <%- colors.light["popover-foreground"] %>; + --primary: <%- colors.light["primary"] %>; + --primary-foreground: <%- colors.light["primary-foreground"] %>; + --secondary: <%- colors.light["secondary"] %>; + --secondary-foreground: <%- colors.light["secondary-foreground"] %>; + --muted: <%- colors.light["muted"] %>; + --muted-foreground: <%- colors.light["muted-foreground"] %>; + --accent: <%- colors.light["accent"] %>; + --accent-foreground: <%- colors.light["accent-foreground"] %>; + --destructive: <%- colors.light["destructive"] %>; + --destructive-foreground: <%- colors.light["destructive-foreground"] %>; + --border: <%- colors.light["border"] %>; + --input: <%- colors.light["input"] %>; + --ring: <%- colors.light["ring"] %>; + --radius: <%- radius %>rem; + } + + .dark { + --background: <%- colors.dark["background"] %>; + --foreground: <%- colors.dark["foreground"] %>; + --card: <%- colors.dark["card"] %>; + --card-foreground: <%- colors.dark["card-foreground"] %>; + --popover: <%- colors.dark["popover"] %>; + --popover-foreground: <%- colors.dark["popover-foreground"] %>; + --primary: <%- colors.dark["primary"] %>; + --primary-foreground: <%- colors.dark["primary-foreground"] %>; + --secondary: <%- colors.dark["secondary"] %>; + --secondary-foreground: <%- colors.dark["secondary-foreground"] %>; + --muted: <%- colors.dark["muted"] %>; + --muted-foreground: <%- colors.dark["muted-foreground"] %>; + --accent: <%- colors.dark["accent"] %>; + --accent-foreground: <%- colors.dark["accent-foreground"] %>; + --destructive: <%- colors.dark["destructive"] %>; + --destructive-foreground: <%- colors.dark["destructive-foreground"] %>; + --border: <%- colors.dark["border"] %>; + --input: <%- colors.dark["input"] %>; + --ring: <%- colors.dark["ring"] %>; + } +} +` diff --git a/apps/www/components/theme-switcher.tsx b/apps/www/components/theme-switcher.tsx new file mode 100644 index 00000000000..ed5951f24e5 --- /dev/null +++ b/apps/www/components/theme-switcher.tsx @@ -0,0 +1,26 @@ +"use client" + +import * as React from "react" +import { useSelectedLayoutSegment } from "next/navigation" + +import { useConfig } from "@/hooks/use-config" + +export function ThemeSwitcher() { + const [config] = useConfig() + const segment = useSelectedLayoutSegment() + + React.useEffect(() => { + document.body.classList.forEach((className) => { + if (className.match(/^theme.*/)) { + document.body.classList.remove(className) + } + }) + + const theme = segment === "themes" ? config.theme : null + if (theme) { + return document.body.classList.add(`theme-${theme}`) + } + }, [segment, config]) + + return null +} diff --git a/apps/www/components/theme-wrapper.tsx b/apps/www/components/theme-wrapper.tsx index d24b9dbcdc6..d4ac140af48 100644 --- a/apps/www/components/theme-wrapper.tsx +++ b/apps/www/components/theme-wrapper.tsx @@ -3,8 +3,31 @@ import { cn } from "@/lib/utils" import { useConfig } from "@/hooks/use-config" -export function ThemeWrapper({ children }: React.ComponentProps<"div">) { +interface ThemeWrapperProps extends React.ComponentProps<"div"> { + defaultTheme?: string +} + +export function ThemeWrapper({ + defaultTheme, + children, + className, +}: ThemeWrapperProps) { const [config] = useConfig() - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index e41fdf49d89..aa6a49adfd0 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -15,6 +15,10 @@ export const docsConfig: DocsConfig = { title: "Components", href: "/docs/components/accordion", }, + { + title: "Themes", + href: "/themes", + }, { title: "Examples", href: "/examples", @@ -48,6 +52,11 @@ export const docsConfig: DocsConfig = { href: "/docs/installation", items: [], }, + { + title: "components.json", + href: "/docs/components-json", + items: [], + }, { title: "Theming", href: "/docs/theming", @@ -120,6 +129,21 @@ export const docsConfig: DocsConfig = { }, ], }, + { + title: "Dark Mode", + items: [ + { + title: "Next.js", + href: "/docs/dark-mode/next", + items: [], + }, + { + title: "Vite", + href: "/docs/dark-mode/vite", + items: [], + }, + ], + }, { title: "Components", items: [ diff --git a/apps/www/config/site.ts b/apps/www/config/site.ts index 1678d9ecfe0..dd8d8f53fa9 100644 --- a/apps/www/config/site.ts +++ b/apps/www/config/site.ts @@ -6,7 +6,7 @@ export const siteConfig = { "Beautifully designed components built with Radix UI and Tailwind CSS.", links: { twitter: "https://twitter.com/shadcn", - github: "https://github.com/shadcn/ui", + github: "https://github.com/shadcn-ui/ui", }, } diff --git a/apps/www/content/docs/components-json.mdx b/apps/www/content/docs/components-json.mdx new file mode 100644 index 00000000000..87b5f75d24b --- /dev/null +++ b/apps/www/content/docs/components-json.mdx @@ -0,0 +1,163 @@ +--- +title: components.json +description: Configuration for your project. +--- + +The `components.json` file holds configuration for your project. + +We use it to understand how your project is set up and how to generate components customized for your project. + + + Note: The `components.json` file is optional and **only required if you're + using the CLI** to add components to your project. If you're using the copy + and paste method, you don't need this file. + + +You can create a `components.json` file in your project by running the following command: + +```bash +npx shadcn-ui@latest init +``` + +See the CLI section for more information. + +## $schema + +You can see the JSON Schema for `components.json` [here](https://ui.shadcn.com/schema.json). + +```json title="components.json" +{ + "$schema": "https://ui.shadcn.com/schema.json" +} +``` + +## style + +The style for your components. **This cannot be changed after initialization.** + +```json title="components.json" +{ + "style": "default" | "new-york" +} +``` + + + +## tailwind + +Configuration to help the CLI understand how Tailwind CSS is set up in your project. + +See the installation section for how to set up Tailwind CSS. + +### tailwind.config + +Path to where your `tailwind.config.js` file is located. + +```json title="components.json" +{ + "tailwind": { + "config": "tailwind.config.js" | "tailwind.config.ts" + } +} +``` + +### tailwind.css + +Path to the CSS file that imports Tailwind CSS into your project. + +```json title="components.json" +{ + "tailwind": { + "css": "styles/global.css" + } +} +``` + +### tailwind.baseColor + +This is used to generate the default color palette for your components. **This cannot be changed after initialization.** + +```json title="components.json" +{ + "tailwind": { + "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc" + } +} +``` + +### tailwind.cssVariables + +You can choose between using CSS variables or Tailwind CSS utility classes for theming. + +To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`. + +```json title="components.json" +{ + "tailwind": { + "cssVariables": `true` | `false` + } +} +``` + +For more information, see the theming docs. + +**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components. + +## rsc + +Whether or not to enable support for React Server Components. + +The CLI automatically adds a `use client` directive to client components when set to `true`. + +```json title="components.json" +{ + "rsc": `true` | `false` +} +``` + +## tsx + +Choose between TypeScript or JavaScript components. + +Setting this option to `false` allows components to be added as JavaScript with the `.jsx` file extension. + +```json title="components.json" +{ + "tsx": `true` | `false` +} +``` + +## aliases + +The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location. + +Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file. + + + **Important:** If you're using the `src` directory, make sure it is included + under `paths` in your `tsconfig.json` or `jsconfig.json` file. + + +### aliases.utils + +Import alias for your utility functions. + +```json title="components.json" +{ + "aliases": { + "utils": "@/lib/utils" + } +} +``` + +### aliases.components + +Import alias for your components. + +```json title="components.json" +{ + "aliases": { + "components": "@/components" + } +} +``` diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx index 9984b58e5fd..7292ac01dcb 100644 --- a/apps/www/content/docs/components/aspect-ratio.mdx +++ b/apps/www/content/docs/components/aspect-ratio.mdx @@ -58,11 +58,7 @@ import { AspectRatio } from "@/components/ui/aspect-ratio" ```tsx
- Image"" + Image
``` diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx index 536ee713b95..4459f986a5b 100644 --- a/apps/www/content/docs/components/command.mdx +++ b/apps/www/content/docs/components/command.mdx @@ -56,6 +56,7 @@ npm install cmdk ```tsx import { + Command, CommandDialog, CommandEmpty, CommandGroup, @@ -101,7 +102,8 @@ export function CommandMenu() { React.useEffect(() => { const down = (e: KeyboardEvent) => { - if (e.key === "k" && e.metaKey) { + if (e.key === "k" && (e.metaKey || e.ctrlKey)) { + e.preventDefault() setOpen((open) => !open) } } diff --git a/apps/www/content/docs/components/form.mdx b/apps/www/content/docs/components/form.mdx index d80e9ffd863..02824dd1443 100644 --- a/apps/www/content/docs/components/form.mdx +++ b/apps/www/content/docs/components/form.mdx @@ -73,6 +73,14 @@ const form = useForm() ## Installation + + + + CLI + Manual + + + ### Command @@ -83,6 +91,30 @@ npx shadcn-ui@latest add form + + + + + + +Install the following dependencies: + +```bash +npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod +``` + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + ## Usage @@ -94,7 +126,6 @@ Define the shape of your form using a Zod schema. You can read more about using ```tsx showLineNumbers {4,6-8} "use client" -import Link from "next/link" import * as z from "zod" const formSchema = z.object({ @@ -109,7 +140,6 @@ Use the `useForm` hook from `react-hook-form` to create a form. ```tsx showLineNumbers {4,14-20,22-27} "use client" -import Link from "next/link" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" @@ -146,7 +176,6 @@ We can now use the `
` components to build our form. ```tsx showLineNumbers {7-17,28-50} "use client" -import Link from "next/link" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx index 0ab9999fd7d..4acdbe23aca 100644 --- a/apps/www/content/docs/components/toast.mdx +++ b/apps/www/content/docs/components/toast.mdx @@ -61,8 +61,18 @@ npm install @radix-ui/react-toast Copy and paste the following code into your project. +`toast.tsx` + +`toaster.tsx` + + + +`use-toast.tsx` + + + Update the import paths to match your project setup. Add the Toaster component diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx new file mode 100644 index 00000000000..214118d608a --- /dev/null +++ b/apps/www/content/docs/dark-mode/index.mdx @@ -0,0 +1,37 @@ +--- +title: Dark Mode +description: Adding dark mode to your site. +--- + +
+ + + Next.js + + +

Next.js

+ + + + Vite + + +

Vite

+ +
+ +## Other frameworks + +I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/dark-mode.mdx b/apps/www/content/docs/dark-mode/next.mdx similarity index 81% rename from apps/www/content/docs/dark-mode.mdx rename to apps/www/content/docs/dark-mode/next.mdx index 2c85e38da9a..ef7489cad7f 100644 --- a/apps/www/content/docs/dark-mode.mdx +++ b/apps/www/content/docs/dark-mode/next.mdx @@ -1,9 +1,9 @@ --- -title: Dark Mode -description: Adding dark mode to your site. +title: Next.js +description: Adding dark mode to your next app. --- -## Next.js +## Dark mode @@ -51,7 +51,3 @@ Place a mode toggle on your site to toggle between light and dark mode. - -## Other frameworks - -I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/dark-mode/vite.mdx b/apps/www/content/docs/dark-mode/vite.mdx new file mode 100644 index 00000000000..53afa996185 --- /dev/null +++ b/apps/www/content/docs/dark-mode/vite.mdx @@ -0,0 +1,148 @@ +--- +title: Vite +description: Adding dark mode to your vite app. +--- + +## Dark mode + + + +### Create a theme provider + +```tsx title="components/theme-provider.tsx" +import { createContext, useContext, useEffect, useState } from "react" + +type ThemeProviderProps = { + children: React.ReactNode + defaultTheme?: string + storageKey?: string +} + +type ThemeProviderState = { + theme: string + setTheme: (theme: string) => void +} + +const initialState = { + theme: "system", + setTheme: () => null, +} + +const ThemeProviderContext = createContext(initialState) + +export function ThemeProvider({ + children, + defaultTheme = "system", + storageKey = "vite-ui-theme", + ...props +}: ThemeProviderProps) { + const [theme, setTheme] = useState( + () => localStorage.getItem(storageKey) || defaultTheme + ) + + useEffect(() => { + const root = window.document.documentElement + + root.classList.remove("light", "dark") + + if (theme === "system") { + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? "dark" + : "light" + + root.classList.add(systemTheme) + return + } + + root.classList.add(theme) + }, [theme]) + + const value = { + theme, + setTheme: (theme: string) => { + localStorage.setItem(storageKey, theme) + setTheme(theme) + }, + } + + return ( + + {children} + + ) +} + +export const useTheme = () => { + const context = useContext(ThemeProviderContext) + + if (context === undefined) + throw new Error("useTheme must be used within a ThemeProvider") + + return context +} +``` + +### Wrap your root layout + +Add the `ThemeProvider` to your root layout. + +```tsx {1,5-7} title="App.tsx" +import { ThemeProvider } from "@/components/theme-provider" + +function App() { + return ( + + {children} + + ) +} + +export default App +``` + +### Add a mode toggle + +Place a mode toggle on your site to toggle between light and dark mode. + +```tsx title="components/mode-toggle.tsx" +import { Moon, Sun } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { useTheme } from "@/components/theme-provider" + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} +``` + + diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index a680cd2fa32..cd83d6f8f6b 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -106,7 +106,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index 0fe520f5fdc..8cda7fde6fa 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -82,7 +82,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index 2b484a10094..71235ba825e 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -103,7 +103,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "~/components/ui/button" export default function Home() { return ( diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index bf1195037a7..b198b23c30b 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -93,7 +93,7 @@ npx shadcn-ui@latest add button The command above will add the `Button` component to your project. You can then import it like this: ```tsx {1,6} showLineNumbers -import { Button } from "@/components/ui" +import { Button } from "@/components/ui/button" export default function Home() { return ( diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts index 65394c6c14f..7c473bdcabb 100644 --- a/apps/www/hooks/use-config.ts +++ b/apps/www/hooks/use-config.ts @@ -7,11 +7,13 @@ import { Theme } from "@/registry/themes" type Config = { style: Style["name"] theme: Theme["name"] + radius: number } const configAtom = atomWithStorage("config", { style: "default", theme: "zinc", + radius: 0.5, }) export function useConfig() { diff --git a/apps/www/lib/events.ts b/apps/www/lib/events.ts index 3fb46004f48..f50cecec0ab 100644 --- a/apps/www/lib/events.ts +++ b/apps/www/lib/events.ts @@ -7,6 +7,7 @@ const eventSchema = z.object({ "copy_usage_import_code", "copy_usage_code", "copy_primitive_code", + "copy_theme_code", ]), // declare type AllowedPropertyValues = string | number | boolean | null properties: z diff --git a/apps/www/lib/rehype-component.ts b/apps/www/lib/rehype-component.ts index b8d7f39a2c9..3e45c5d780e 100644 --- a/apps/www/lib/rehype-component.ts +++ b/apps/www/lib/rehype-component.ts @@ -10,19 +10,41 @@ import { styles } from "../registry/styles" export function rehypeComponent() { return async (tree: UnistTree) => { visit(tree, (node: UnistNode) => { - const { value: src } = getNodeAttributeByName(node, "src") || {} + // src prop overrides both name and fileName. + const { value: srcPath } = + (getNodeAttributeByName(node, "src") as { + name: string + value?: string + type?: string + }) || {} if (node.name === "ComponentSource") { const name = getNodeAttributeByName(node, "name")?.value as string + const fileName = getNodeAttributeByName(node, "fileName")?.value as + | string + | undefined - if (!name) { + if (!name && !srcPath) { return null } try { for (const style of styles) { - const component = Index[style.name][name] - const src = component.files[0] + let src: string + + if (srcPath) { + src = srcPath + } else { + const component = Index[style.name][name] + src = fileName + ? component.files.find((file: string) => { + return ( + file.endsWith(`${fileName}.tsx`) || + file.endsWith(`${fileName}.ts`) + ) + }) || component.files[0] + : component.files[0] + } // Read the source file. const filePath = path.join(process.cwd(), src) diff --git a/apps/www/package.json b/apps/www/package.json index 5b5b3ff9e68..09273bfbba7 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -70,6 +70,7 @@ "recharts": "^2.6.2", "sharp": "^0.31.3", "tailwind-merge": "^1.12.0", + "vaul": "^0.2.0", "zod": "^3.21.4" }, "devDependencies": { diff --git a/apps/www/pages/api/components.json b/apps/www/pages/api/components.json index cf89b8f3f4f..94ff628884f 100644 --- a/apps/www/pages/api/components.json +++ b/apps/www/pages/api/components.json @@ -17,7 +17,7 @@ { "name": "alert.tsx", "dir": "components/ui", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "ui" diff --git a/apps/www/public/registry/colors/gray.json b/apps/www/public/registry/colors/gray.json index be08990361d..6de69e6d03d 100644 --- a/apps/www/public/registry/colors/gray.json +++ b/apps/www/public/registry/colors/gray.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "gray-950", - "muted": "gray-100", - "muted-foreground": "gray-500", - "popover": "white", - "popover-foreground": "gray-950", - "border": "gray-200", - "input": "gray-200", "card": "white", "card-foreground": "gray-950", + "popover": "white", + "popover-foreground": "gray-950", "primary": "gray-900", "primary-foreground": "gray-50", "secondary": "gray-100", "secondary-foreground": "gray-900", + "muted": "gray-100", + "muted-foreground": "gray-500", "accent": "gray-100", "accent-foreground": "gray-900", "destructive": "red-500", "destructive-foreground": "gray-50", - "ring": "gray-400" + "border": "gray-200", + "input": "gray-200", + "ring": "gray-950" }, "dark": { "background": "gray-950", "foreground": "gray-50", - "muted": "gray-800", - "muted-foreground": "gray-400", - "popover": "gray-950", - "popover-foreground": "gray-50", - "border": "gray-800", - "input": "gray-800", "card": "gray-950", "card-foreground": "gray-50", + "popover": "gray-950", + "popover-foreground": "gray-50", "primary": "gray-50", "primary-foreground": "gray-900", "secondary": "gray-800", "secondary-foreground": "gray-50", + "muted": "gray-800", + "muted-foreground": "gray-400", "accent": "gray-800", "accent-foreground": "gray-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "gray-800" + "destructive-foreground": "gray-50", + "border": "gray-800", + "input": "gray-800", + "ring": "gray-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "224 71.4% 4.1%", - "muted": "220 14.3% 95.9%", - "muted-foreground": "220 8.9% 46.1%", - "popover": "0 0% 100%", - "popover-foreground": "224 71.4% 4.1%", - "border": "220 13% 91%", - "input": "220 13% 91%", "card": "0 0% 100%", "card-foreground": "224 71.4% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "224 71.4% 4.1%", "primary": "220.9 39.3% 11%", "primary-foreground": "210 20% 98%", "secondary": "220 14.3% 95.9%", "secondary-foreground": "220.9 39.3% 11%", + "muted": "220 14.3% 95.9%", + "muted-foreground": "220 8.9% 46.1%", "accent": "220 14.3% 95.9%", "accent-foreground": "220.9 39.3% 11%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "210 20% 98%", - "ring": "217.9 10.6% 64.9%" + "border": "220 13% 91%", + "input": "220 13% 91%", + "ring": "224 71.4% 4.1%" }, "dark": { "background": "224 71.4% 4.1%", "foreground": "210 20% 98%", - "muted": "215 27.9% 16.9%", - "muted-foreground": "217.9 10.6% 64.9%", - "popover": "224 71.4% 4.1%", - "popover-foreground": "210 20% 98%", - "border": "215 27.9% 16.9%", - "input": "215 27.9% 16.9%", "card": "224 71.4% 4.1%", "card-foreground": "210 20% 98%", + "popover": "224 71.4% 4.1%", + "popover-foreground": "210 20% 98%", "primary": "210 20% 98%", "primary-foreground": "220.9 39.3% 11%", "secondary": "215 27.9% 16.9%", "secondary-foreground": "210 20% 98%", + "muted": "215 27.9% 16.9%", + "muted-foreground": "217.9 10.6% 64.9%", "accent": "215 27.9% 16.9%", "accent-foreground": "210 20% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "215 27.9% 16.9%" + "destructive-foreground": "210 20% 98%", + "border": "215 27.9% 16.9%", + "input": "215 27.9% 16.9%", + "ring": "216 12.2% 83.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n \n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n \n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n \n --border: 220 13% 91%;\n --input: 220 13% 91%;\n \n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n \n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n \n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n \n --ring: 217.9 10.6% 64.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n \n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n \n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n \n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n \n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n \n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n \n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n \n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 215 27.9% 16.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n \n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n \n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n \n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n \n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n \n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n \n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n \n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n \n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n \n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n \n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n \n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/index.json b/apps/www/public/registry/colors/index.json index e92b283369a..6b70773e73f 100644 --- a/apps/www/public/registry/colors/index.json +++ b/apps/www/public/registry/colors/index.json @@ -45,9 +45,9 @@ "scale": 300, "hex": "#cbd5e1", "rgb": "rgb(203,213,225)", - "hsl": "hsl(212.7,26.8%,83.9)", + "hsl": "hsl(212.7,26.8%,83.9%)", "rgbChannel": "203 213 225", - "hslChannel": "hsl(212.7,26.8%,83.9)" + "hslChannel": "212.7 26.8% 83.9%" }, { "scale": 400, @@ -1996,4 +1996,4 @@ "hslChannel": "343.1 87.7% 15.9%" } ] -} \ No newline at end of file +} diff --git a/apps/www/public/registry/colors/lime.json b/apps/www/public/registry/colors/lime.json deleted file mode 100644 index 18a9e3dd1fd..00000000000 --- a/apps/www/public/registry/colors/lime.json +++ /dev/null @@ -1,92 +0,0 @@ -{ - "inlineColors": { - "light": { - "background": "white", - "foreground": "lime-950", - "muted": "lime-100", - "muted-foreground": "lime-500", - "popover": "white", - "popover-foreground": "lime-950", - "border": "lime-200", - "input": "lime-200", - "card": "white", - "card-foreground": "lime-950", - "primary": "lime-900", - "primary-foreground": "lime-50", - "secondary": "lime-100", - "secondary-foreground": "lime-900", - "accent": "lime-100", - "accent-foreground": "lime-900", - "destructive": "red-500", - "destructive-foreground": "lime-50", - "ring": "lime-400" - }, - "dark": { - "background": "lime-950", - "foreground": "lime-50", - "muted": "lime-800", - "muted-foreground": "lime-400", - "popover": "lime-950", - "popover-foreground": "lime-50", - "border": "lime-800", - "input": "lime-800", - "card": "lime-950", - "card-foreground": "lime-50", - "primary": "lime-50", - "primary-foreground": "lime-900", - "secondary": "lime-800", - "secondary-foreground": "lime-50", - "accent": "lime-800", - "accent-foreground": "lime-50", - "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "lime-800" - } - }, - "cssVars": { - "light": { - "background": "0 0% 100%", - "foreground": "89.3 80.4% 10%", - "muted": "79.6 89.1% 89.2%", - "muted-foreground": "83.7 80.5% 44.3%", - "popover": "0 0% 100%", - "popover-foreground": "89.3 80.4% 10%", - "border": "80.9 88.5% 79.6%", - "input": "80.9 88.5% 79.6%", - "card": "0 0% 100%", - "card-foreground": "89.3 80.4% 10%", - "primary": "87.6 61.2% 20.2%", - "primary-foreground": "78.3 92% 95.1%", - "secondary": "79.6 89.1% 89.2%", - "secondary-foreground": "87.6 61.2% 20.2%", - "accent": "79.6 89.1% 89.2%", - "accent-foreground": "87.6 61.2% 20.2%", - "destructive": "0 84.2% 60.2%", - "destructive-foreground": "78.3 92% 95.1%", - "ring": "82.7 78% 55.5%" - }, - "dark": { - "background": "89.3 80.4% 10%", - "foreground": "78.3 92% 95.1%", - "muted": "86.3 69% 22.7%", - "muted-foreground": "82.7 78% 55.5%", - "popover": "89.3 80.4% 10%", - "popover-foreground": "78.3 92% 95.1%", - "border": "86.3 69% 22.7%", - "input": "86.3 69% 22.7%", - "card": "89.3 80.4% 10%", - "card-foreground": "78.3 92% 95.1%", - "primary": "78.3 92% 95.1%", - "primary-foreground": "87.6 61.2% 20.2%", - "secondary": "86.3 69% 22.7%", - "secondary-foreground": "78.3 92% 95.1%", - "accent": "86.3 69% 22.7%", - "accent-foreground": "78.3 92% 95.1%", - "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "86.3 69% 22.7%" - } - }, - "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 89.3 80.4% 10%;\n \n --muted: 79.6 89.1% 89.2%;\n --muted-foreground: 83.7 80.5% 44.3%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 89.3 80.4% 10%;\n \n --card: 0 0% 100%;\n --card-foreground: 89.3 80.4% 10%;\n \n --border: 80.9 88.5% 79.6%;\n --input: 80.9 88.5% 79.6%;\n \n --primary: 87.6 61.2% 20.2%;\n --primary-foreground: 78.3 92% 95.1%;\n \n --secondary: 79.6 89.1% 89.2%;\n --secondary-foreground: 87.6 61.2% 20.2%;\n \n --accent: 79.6 89.1% 89.2%;\n --accent-foreground: 87.6 61.2% 20.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 78.3 92% 95.1%;\n \n --ring: 82.7 78% 55.5%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 89.3 80.4% 10%;\n --foreground: 78.3 92% 95.1%;\n \n --muted: 86.3 69% 22.7%;\n --muted-foreground: 82.7 78% 55.5%;\n \n --popover: 89.3 80.4% 10%;\n --popover-foreground: 78.3 92% 95.1%;\n \n --card: 89.3 80.4% 10%;\n --card-foreground: 78.3 92% 95.1%;\n \n --border: 86.3 69% 22.7%;\n --input: 86.3 69% 22.7%;\n \n --primary: 78.3 92% 95.1%;\n --primary-foreground: 87.6 61.2% 20.2%;\n \n --secondary: 86.3 69% 22.7%;\n --secondary-foreground: 78.3 92% 95.1%;\n \n --accent: 86.3 69% 22.7%;\n --accent-foreground: 78.3 92% 95.1%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 86.3 69% 22.7%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file diff --git a/apps/www/public/registry/colors/neutral.json b/apps/www/public/registry/colors/neutral.json index c2488562ac6..2f29127b36d 100644 --- a/apps/www/public/registry/colors/neutral.json +++ b/apps/www/public/registry/colors/neutral.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "neutral-950", - "muted": "neutral-100", - "muted-foreground": "neutral-500", - "popover": "white", - "popover-foreground": "neutral-950", - "border": "neutral-200", - "input": "neutral-200", "card": "white", "card-foreground": "neutral-950", + "popover": "white", + "popover-foreground": "neutral-950", "primary": "neutral-900", "primary-foreground": "neutral-50", "secondary": "neutral-100", "secondary-foreground": "neutral-900", + "muted": "neutral-100", + "muted-foreground": "neutral-500", "accent": "neutral-100", "accent-foreground": "neutral-900", "destructive": "red-500", "destructive-foreground": "neutral-50", - "ring": "neutral-400" + "border": "neutral-200", + "input": "neutral-200", + "ring": "neutral-950" }, "dark": { "background": "neutral-950", "foreground": "neutral-50", - "muted": "neutral-800", - "muted-foreground": "neutral-400", - "popover": "neutral-950", - "popover-foreground": "neutral-50", - "border": "neutral-800", - "input": "neutral-800", "card": "neutral-950", "card-foreground": "neutral-50", + "popover": "neutral-950", + "popover-foreground": "neutral-50", "primary": "neutral-50", "primary-foreground": "neutral-900", "secondary": "neutral-800", "secondary-foreground": "neutral-50", + "muted": "neutral-800", + "muted-foreground": "neutral-400", "accent": "neutral-800", "accent-foreground": "neutral-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "neutral-800" + "destructive-foreground": "neutral-50", + "border": "neutral-800", + "input": "neutral-800", + "ring": "neutral-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "0 0% 3.9%", - "muted": "0 0% 96.1%", - "muted-foreground": "0 0% 45.1%", - "popover": "0 0% 100%", - "popover-foreground": "0 0% 3.9%", - "border": "0 0% 89.8%", - "input": "0 0% 89.8%", "card": "0 0% 100%", "card-foreground": "0 0% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "0 0% 3.9%", "primary": "0 0% 9%", "primary-foreground": "0 0% 98%", "secondary": "0 0% 96.1%", "secondary-foreground": "0 0% 9%", + "muted": "0 0% 96.1%", + "muted-foreground": "0 0% 45.1%", "accent": "0 0% 96.1%", "accent-foreground": "0 0% 9%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "0 0% 98%", - "ring": "0 0% 63.9%" + "border": "0 0% 89.8%", + "input": "0 0% 89.8%", + "ring": "0 0% 3.9%" }, "dark": { "background": "0 0% 3.9%", "foreground": "0 0% 98%", - "muted": "0 0% 14.9%", - "muted-foreground": "0 0% 63.9%", - "popover": "0 0% 3.9%", - "popover-foreground": "0 0% 98%", - "border": "0 0% 14.9%", - "input": "0 0% 14.9%", "card": "0 0% 3.9%", "card-foreground": "0 0% 98%", + "popover": "0 0% 3.9%", + "popover-foreground": "0 0% 98%", "primary": "0 0% 98%", "primary-foreground": "0 0% 9%", "secondary": "0 0% 14.9%", "secondary-foreground": "0 0% 98%", + "muted": "0 0% 14.9%", + "muted-foreground": "0 0% 63.9%", "accent": "0 0% 14.9%", "accent-foreground": "0 0% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "0 0% 14.9%" + "destructive-foreground": "0 0% 98%", + "border": "0 0% 14.9%", + "input": "0 0% 14.9%", + "ring": "0 0% 83.1%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n \n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n \n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n \n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n \n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n \n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n \n --ring: 0 0% 63.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n \n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n \n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n \n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n \n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 0 0% 14.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n \n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n \n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n \n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n \n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n \n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n \n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n \n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n \n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json index 46469cb783a..5db830be4bf 100644 --- a/apps/www/public/registry/colors/slate.json +++ b/apps/www/public/registry/colors/slate.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "slate-950", - "muted": "slate-100", - "muted-foreground": "slate-500", - "popover": "white", - "popover-foreground": "slate-950", - "border": "slate-200", - "input": "slate-200", "card": "white", "card-foreground": "slate-950", + "popover": "white", + "popover-foreground": "slate-950", "primary": "slate-900", "primary-foreground": "slate-50", "secondary": "slate-100", "secondary-foreground": "slate-900", + "muted": "slate-100", + "muted-foreground": "slate-500", "accent": "slate-100", "accent-foreground": "slate-900", "destructive": "red-500", "destructive-foreground": "slate-50", - "ring": "slate-400" + "border": "slate-200", + "input": "slate-200", + "ring": "slate-950" }, "dark": { "background": "slate-950", "foreground": "slate-50", - "muted": "slate-800", - "muted-foreground": "slate-400", - "popover": "slate-950", - "popover-foreground": "slate-50", - "border": "slate-800", - "input": "slate-800", "card": "slate-950", "card-foreground": "slate-50", + "popover": "slate-950", + "popover-foreground": "slate-50", "primary": "slate-50", "primary-foreground": "slate-900", "secondary": "slate-800", "secondary-foreground": "slate-50", + "muted": "slate-800", + "muted-foreground": "slate-400", "accent": "slate-800", "accent-foreground": "slate-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "slate-800" + "destructive-foreground": "slate-50", + "border": "slate-800", + "input": "slate-800", + "ring": "slate-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "222.2 84% 4.9%", - "muted": "210 40% 96.1%", - "muted-foreground": "215.4 16.3% 46.9%", - "popover": "0 0% 100%", - "popover-foreground": "222.2 84% 4.9%", - "border": "214.3 31.8% 91.4%", - "input": "214.3 31.8% 91.4%", "card": "0 0% 100%", "card-foreground": "222.2 84% 4.9%", + "popover": "0 0% 100%", + "popover-foreground": "222.2 84% 4.9%", "primary": "222.2 47.4% 11.2%", "primary-foreground": "210 40% 98%", "secondary": "210 40% 96.1%", "secondary-foreground": "222.2 47.4% 11.2%", + "muted": "210 40% 96.1%", + "muted-foreground": "215.4 16.3% 46.9%", "accent": "210 40% 96.1%", "accent-foreground": "222.2 47.4% 11.2%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "210 40% 98%", - "ring": "215 20.2% 65.1%" + "border": "214.3 31.8% 91.4%", + "input": "214.3 31.8% 91.4%", + "ring": "222.2 84% 4.9%" }, "dark": { "background": "222.2 84% 4.9%", "foreground": "210 40% 98%", - "muted": "217.2 32.6% 17.5%", - "muted-foreground": "215 20.2% 65.1%", - "popover": "222.2 84% 4.9%", - "popover-foreground": "210 40% 98%", - "border": "217.2 32.6% 17.5%", - "input": "217.2 32.6% 17.5%", "card": "222.2 84% 4.9%", "card-foreground": "210 40% 98%", + "popover": "222.2 84% 4.9%", + "popover-foreground": "210 40% 98%", "primary": "210 40% 98%", "primary-foreground": "222.2 47.4% 11.2%", "secondary": "217.2 32.6% 17.5%", "secondary-foreground": "210 40% 98%", + "muted": "217.2 32.6% 17.5%", + "muted-foreground": "215 20.2% 65.1%", "accent": "217.2 32.6% 17.5%", "accent-foreground": "210 40% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "217.2 32.6% 17.5%" + "destructive-foreground": "210 40% 98%", + "border": "217.2 32.6% 17.5%", + "input": "217.2 32.6% 17.5%", + "ring": "212.7 26.8% 83.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n \n --ring: 215 20.2% 65.1%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 217.2 32.6% 17.5%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} \ No newline at end of file + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" +} diff --git a/apps/www/public/registry/colors/stone.json b/apps/www/public/registry/colors/stone.json index 05e92bb5cc3..e06a13460d0 100644 --- a/apps/www/public/registry/colors/stone.json +++ b/apps/www/public/registry/colors/stone.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "stone-950", - "muted": "stone-100", - "muted-foreground": "stone-500", - "popover": "white", - "popover-foreground": "stone-950", - "border": "stone-200", - "input": "stone-200", "card": "white", "card-foreground": "stone-950", + "popover": "white", + "popover-foreground": "stone-950", "primary": "stone-900", "primary-foreground": "stone-50", "secondary": "stone-100", "secondary-foreground": "stone-900", + "muted": "stone-100", + "muted-foreground": "stone-500", "accent": "stone-100", "accent-foreground": "stone-900", "destructive": "red-500", "destructive-foreground": "stone-50", - "ring": "stone-400" + "border": "stone-200", + "input": "stone-200", + "ring": "stone-950" }, "dark": { "background": "stone-950", "foreground": "stone-50", - "muted": "stone-800", - "muted-foreground": "stone-400", - "popover": "stone-950", - "popover-foreground": "stone-50", - "border": "stone-800", - "input": "stone-800", "card": "stone-950", "card-foreground": "stone-50", + "popover": "stone-950", + "popover-foreground": "stone-50", "primary": "stone-50", "primary-foreground": "stone-900", "secondary": "stone-800", "secondary-foreground": "stone-50", + "muted": "stone-800", + "muted-foreground": "stone-400", "accent": "stone-800", "accent-foreground": "stone-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "stone-800" + "destructive-foreground": "stone-50", + "border": "stone-800", + "input": "stone-800", + "ring": "stone-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "20 14.3% 4.1%", - "muted": "60 4.8% 95.9%", - "muted-foreground": "25 5.3% 44.7%", - "popover": "0 0% 100%", - "popover-foreground": "20 14.3% 4.1%", - "border": "20 5.9% 90%", - "input": "20 5.9% 90%", "card": "0 0% 100%", "card-foreground": "20 14.3% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "20 14.3% 4.1%", "primary": "24 9.8% 10%", "primary-foreground": "60 9.1% 97.8%", "secondary": "60 4.8% 95.9%", "secondary-foreground": "24 9.8% 10%", + "muted": "60 4.8% 95.9%", + "muted-foreground": "25 5.3% 44.7%", "accent": "60 4.8% 95.9%", "accent-foreground": "24 9.8% 10%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "60 9.1% 97.8%", - "ring": "24 5.4% 63.9%" + "border": "20 5.9% 90%", + "input": "20 5.9% 90%", + "ring": "20 14.3% 4.1%" }, "dark": { "background": "20 14.3% 4.1%", "foreground": "60 9.1% 97.8%", - "muted": "12 6.5% 15.1%", - "muted-foreground": "24 5.4% 63.9%", - "popover": "20 14.3% 4.1%", - "popover-foreground": "60 9.1% 97.8%", - "border": "12 6.5% 15.1%", - "input": "12 6.5% 15.1%", "card": "20 14.3% 4.1%", "card-foreground": "60 9.1% 97.8%", + "popover": "20 14.3% 4.1%", + "popover-foreground": "60 9.1% 97.8%", "primary": "60 9.1% 97.8%", "primary-foreground": "24 9.8% 10%", "secondary": "12 6.5% 15.1%", "secondary-foreground": "60 9.1% 97.8%", + "muted": "12 6.5% 15.1%", + "muted-foreground": "24 5.4% 63.9%", "accent": "12 6.5% 15.1%", "accent-foreground": "60 9.1% 97.8%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "12 6.5% 15.1%" + "destructive-foreground": "60 9.1% 97.8%", + "border": "12 6.5% 15.1%", + "input": "12 6.5% 15.1%", + "ring": "24 5.7% 82.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n \n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n \n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n \n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n \n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n \n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n \n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n \n --ring: 24 5.4% 63.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n \n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n \n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n \n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n \n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n \n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n \n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n \n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 12 6.5% 15.1%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n \n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n \n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n \n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n \n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n \n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n \n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n \n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n \n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n \n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n \n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n \n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/colors/zinc.json b/apps/www/public/registry/colors/zinc.json index c26bf0e86fc..b13b9e6c59e 100644 --- a/apps/www/public/registry/colors/zinc.json +++ b/apps/www/public/registry/colors/zinc.json @@ -3,90 +3,90 @@ "light": { "background": "white", "foreground": "zinc-950", - "muted": "zinc-100", - "muted-foreground": "zinc-500", - "popover": "white", - "popover-foreground": "zinc-950", - "border": "zinc-200", - "input": "zinc-200", "card": "white", "card-foreground": "zinc-950", + "popover": "white", + "popover-foreground": "zinc-950", "primary": "zinc-900", "primary-foreground": "zinc-50", "secondary": "zinc-100", "secondary-foreground": "zinc-900", + "muted": "zinc-100", + "muted-foreground": "zinc-500", "accent": "zinc-100", "accent-foreground": "zinc-900", "destructive": "red-500", "destructive-foreground": "zinc-50", - "ring": "zinc-400" + "border": "zinc-200", + "input": "zinc-200", + "ring": "zinc-950" }, "dark": { "background": "zinc-950", "foreground": "zinc-50", - "muted": "zinc-800", - "muted-foreground": "zinc-400", - "popover": "zinc-950", - "popover-foreground": "zinc-50", - "border": "zinc-800", - "input": "zinc-800", "card": "zinc-950", "card-foreground": "zinc-50", + "popover": "zinc-950", + "popover-foreground": "zinc-50", "primary": "zinc-50", "primary-foreground": "zinc-900", "secondary": "zinc-800", "secondary-foreground": "zinc-50", + "muted": "zinc-800", + "muted-foreground": "zinc-400", "accent": "zinc-800", "accent-foreground": "zinc-50", "destructive": "red-900", - "destructive-foreground": "red-50", - "ring": "zinc-800" + "destructive-foreground": "zinc-50", + "border": "zinc-800", + "input": "zinc-800", + "ring": "zinc-300" } }, "cssVars": { "light": { "background": "0 0% 100%", "foreground": "240 10% 3.9%", - "muted": "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - "popover": "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - "border": "240 5.9% 90%", - "input": "240 5.9% 90%", "card": "0 0% 100%", "card-foreground": "240 10% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", "primary": "240 5.9% 10%", "primary-foreground": "0 0% 98%", "secondary": "240 4.8% 95.9%", "secondary-foreground": "240 5.9% 10%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", "accent": "240 4.8% 95.9%", "accent-foreground": "240 5.9% 10%", "destructive": "0 84.2% 60.2%", "destructive-foreground": "0 0% 98%", - "ring": "240 5% 64.9%" + "border": "240 5.9% 90%", + "input": "240 5.9% 90%", + "ring": "240 10% 3.9%" }, "dark": { "background": "240 10% 3.9%", "foreground": "0 0% 98%", - "muted": "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - "popover": "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - "border": "240 3.7% 15.9%", - "input": "240 3.7% 15.9%", "card": "240 10% 3.9%", "card-foreground": "0 0% 98%", + "popover": "240 10% 3.9%", + "popover-foreground": "0 0% 98%", "primary": "0 0% 98%", "primary-foreground": "240 5.9% 10%", "secondary": "240 3.7% 15.9%", "secondary-foreground": "0 0% 98%", + "muted": "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", "accent": "240 3.7% 15.9%", "accent-foreground": "0 0% 98%", "destructive": "0 62.8% 30.6%", - "destructive-foreground": "0 85.7% 97.3%", - "ring": "240 3.7% 15.9%" + "destructive-foreground": "0 0% 98%", + "border": "240 3.7% 15.9%", + "input": "240 3.7% 15.9%", + "ring": "240 4.9% 83.9%" } }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", - "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n \n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n \n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n \n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n \n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n \n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n \n --ring: 240 5% 64.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n \n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n \n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n \n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n \n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 240 3.7% 15.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n \n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n \n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n \n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n \n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n \n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n \n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n \n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n \n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n \n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n \n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n \n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" } \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/alert.json b/apps/www/public/registry/styles/default/alert.json index a04a1324a74..e1bc8d0fa79 100644 --- a/apps/www/public/registry/styles/default/alert.json +++ b/apps/www/public/registry/styles/default/alert.json @@ -3,7 +3,7 @@ "files": [ { "name": "alert.tsx", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/card.json b/apps/www/public/registry/styles/default/card.json index a039fbc8042..ef31d3a699f 100644 --- a/apps/www/public/registry/styles/default/card.json +++ b/apps/www/public/registry/styles/default/card.json @@ -3,7 +3,7 @@ "files": [ { "name": "card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/select.json b/apps/www/public/registry/styles/default/select.json index eee0a8e1742..514f67083d1 100644 --- a/apps/www/public/registry/styles/default/select.json +++ b/apps/www/public/registry/styles/default/select.json @@ -6,7 +6,7 @@ "files": [ { "name": "select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n {children}\n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n {children}\n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/textarea.json b/apps/www/public/registry/styles/default/textarea.json index acaa34ddcd7..1b94cf2117b 100644 --- a/apps/www/public/registry/styles/default/textarea.json +++ b/apps/www/public/registry/styles/default/textarea.json @@ -3,7 +3,7 @@ "files": [ { "name": "textarea.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes {}\n\nconst Textarea = React.forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n )\n }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes {}\n\nconst Textarea = React.forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n )\n }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/toast.json b/apps/www/public/registry/styles/default/toast.json index fb034f4d4c4..6c4f7be14e4 100644 --- a/apps/www/public/registry/styles/default/toast.json +++ b/apps/www/public/registry/styles/default/toast.json @@ -6,7 +6,7 @@ "files": [ { "name": "toast.tsx", - "content": "import * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n {\n variants: {\n variant: {\n default: \"border bg-background\",\n destructive:\n \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n" + "content": "import * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n {\n variants: {\n variant: {\n default: \"border bg-background text-foreground\",\n destructive:\n \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n" }, { "name": "use-toast.ts", diff --git a/apps/www/public/registry/styles/new-york/alert.json b/apps/www/public/registry/styles/new-york/alert.json index 2cc9a4ea497..221afd4eae8 100644 --- a/apps/www/public/registry/styles/new-york/alert.json +++ b/apps/www/public/registry/styles/new-york/alert.json @@ -3,7 +3,7 @@ "files": [ { "name": "alert.tsx", - "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n \n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/button.json b/apps/www/public/registry/styles/new-york/button.json index 2efbdfea98f..7f667747851 100644 --- a/apps/www/public/registry/styles/new-york/button.json +++ b/apps/www/public/registry/styles/new-york/button.json @@ -6,7 +6,7 @@ "files": [ { "name": "button.tsx", - "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json index 0977b775b97..0998cfa90ae 100644 --- a/apps/www/public/registry/styles/new-york/calendar.json +++ b/apps/www/public/registry/styles/new-york/calendar.json @@ -10,7 +10,7 @@ "files": [ { "name": "calendar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside: \"text-muted-foreground opacity-50\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/card.json b/apps/www/public/registry/styles/new-york/card.json index 99405269f7d..af7ee0e12e5 100644 --- a/apps/www/public/registry/styles/new-york/card.json +++ b/apps/www/public/registry/styles/new-york/card.json @@ -3,7 +3,7 @@ "files": [ { "name": "card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/input.json b/apps/www/public/registry/styles/new-york/input.json index edd63acf738..937dea44fc1 100644 --- a/apps/www/public/registry/styles/new-york/input.json +++ b/apps/www/public/registry/styles/new-york/input.json @@ -3,7 +3,7 @@ "files": [ { "name": "input.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLAttributes {}\n\nconst Input = React.forwardRef(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLAttributes {}\n\nconst Input = React.forwardRef(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/toast.json b/apps/www/public/registry/styles/new-york/toast.json index 74492e94c8a..69935b01d3d 100644 --- a/apps/www/public/registry/styles/new-york/toast.json +++ b/apps/www/public/registry/styles/new-york/toast.json @@ -6,7 +6,7 @@ "files": [ { "name": "toast.tsx", - "content": "import * as React from \"react\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n {\n variants: {\n variant: {\n default: \"border bg-background\",\n destructive:\n \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n" + "content": "import * as React from \"react\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n {\n variants: {\n variant: {\n default: \"border bg-background text-foreground\",\n destructive:\n \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n" }, { "name": "use-toast.ts", diff --git a/apps/www/public/registry/themes.css b/apps/www/public/registry/themes.css index 6c4d9b8c7d1..e6a22720397 100644 --- a/apps/www/public/registry/themes.css +++ b/apps/www/public/registry/themes.css @@ -1,5 +1,69 @@ - .theme-default { + .theme-zinc { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 5.9% 10%; + + --radius: 0.5rem; + } + + .dark .theme-zinc { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 4.9% 83.9%; + } + + .theme-slate { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; @@ -15,7 +79,7 @@ --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; - --primary: 160 90% 46%; + --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; @@ -27,12 +91,12 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; - --ring: 215 20.2% 65.1%; + --ring: 222.2 84% 4.9%; --radius: 0.5rem; } - .dark .theme-default { + .dark .theme-slate { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; @@ -58,12 +122,268 @@ --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 85.7% 97.3%; + --destructive-foreground: 210 40% 98%; - --ring: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9; } - .theme-zinc { + .theme-stone { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 24 9.8% 10%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20 14.3% 4.1%; + + --radius: 0.95rem; + } + + .dark .theme-stone { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 60 9.1% 97.8%; + --primary-foreground: 24 9.8% 10%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 24 5.7% 82.9%; + } + + .theme-gray { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 220.9 39.3% 11%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 20% 98%; + + --ring: 224 71.4% 4.1%; + + --radius: 0.35rem; + } + + .dark .theme-gray { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 210 20% 98%; + --primary-foreground: 220.9 39.3% 11%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 216 12.2% 83.9%; + } + + .theme-neutral { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 0% 3.9%; + + --radius: ; + } + + .dark .theme-neutral { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 0% 83.1%; + } + + .theme-red { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 72.2% 50.6%; + + --radius: 0.4rem; + } + + .dark .theme-red { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 72.2% 50.6%; + } + + .theme-rose { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -79,8 +399,8 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; @@ -91,43 +411,107 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --ring: 240 5% 64.9%; + --ring: 346.8 77.2% 49.8%; --radius: 0.5rem; } - .dark .theme-zinc { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; + .dark .theme-rose { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; - --muted: 240 3.7% 15.9%; + --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - --accent: 240 3.7% 15.9%; + --accent: 12 6.5% 15.1%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; - --ring: 240 3.7% 15.9%; + --ring: 346.8 77.2% 49.8%; } - .theme-lime { + .theme-orange { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 24.6 95% 53.1%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 24.6 95% 53.1%; + + --radius: 0.95rem; + } + + .dark .theme-orange { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20.5 90.2% 48.2%; + } + + .theme-green { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -143,8 +527,8 @@ --border: 240 5.9% 90%; --input: 240 5.9% 90%; - --primary: 87.6 61.2% 20.2%; - --primary-foreground: 0 0% 98%; + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; @@ -155,38 +539,230 @@ --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --ring: 240 5% 64.9%; + --ring: 142.1 76.2% 36.3%; - --radius: 0.5rem; + --radius: ; } - .dark .theme-lime { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; + .dark .theme-green { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; - --muted: 240 3.7% 15.9%; + --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; - --primary: 82 84.5% 67.1%; - --primary-foreground: 240 5.9% 10%; + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - --accent: 240 3.7% 15.9%; + --accent: 12 6.5% 15.1%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; - --ring: 240 3.7% 15.9%; + --ring: 142.4 71.8% 29.2%; + } + + .theme-blue { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --ring: 221.2 83.2% 53.3%; + + --radius: ; + } + + .dark .theme-blue { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 224.3 76.3% 48%; + } + + .theme-yellow { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 47.9 95.8% 53.1%; + --primary-foreground: 26 83.3% 14.1%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20 14.3% 4.1%; + + --radius: 0.95rem; + } + + .dark .theme-yellow { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 47.9 95.8% 53.1%; + --primary-foreground: 26 83.3% 14.1%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 35.5 91.7% 32.9%; + } + + .theme-violet { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 262.1 83.3% 57.8%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 20% 98%; + + --ring: 262.1 83.3% 57.8%; + + --radius: ; + } + + .dark .theme-violet { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 263.4 70% 50.4%; + --primary-foreground: 210 20% 98%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 263.4 70% 50.4%; } \ No newline at end of file diff --git a/apps/www/public/registry/themes/gray.json b/apps/www/public/registry/themes/gray.json new file mode 100644 index 00000000000..81742502abe --- /dev/null +++ b/apps/www/public/registry/themes/gray.json @@ -0,0 +1,48 @@ +{ + "name": "gray", + "label": "Gray", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "224 71.4% 4.1%", + "card": "0 0% 100%", + "card-foreground": "224 71.4% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "224 71.4% 4.1%", + "primary": "220.9 39.3% 11%", + "primary-foreground": "210 20% 98%", + "secondary": "220 14.3% 95.9%", + "secondary-foreground": "220.9 39.3% 11%", + "muted": "220 14.3% 95.9%", + "muted-foreground": "220 8.9% 46.1%", + "accent": "220 14.3% 95.9%", + "accent-foreground": "220.9 39.3% 11%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 20% 98%", + "border": "220 13% 91%", + "input": "220 13% 91%", + "ring": "224 71.4% 4.1%" + }, + "dark": { + "background": "224 71.4% 4.1%", + "foreground": "210 20% 98%", + "card": "224 71.4% 4.1%", + "card-foreground": "210 20% 98%", + "popover": "224 71.4% 4.1%", + "popover-foreground": "210 20% 98%", + "primary": "210 20% 98%", + "primary-foreground": "220.9 39.3% 11%", + "secondary": "215 27.9% 16.9%", + "secondary-foreground": "210 20% 98%", + "muted": "215 27.9% 16.9%", + "muted-foreground": "217.9 10.6% 64.9%", + "accent": "215 27.9% 16.9%", + "accent-foreground": "210 20% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 20% 98%", + "border": "215 27.9% 16.9%", + "input": "215 27.9% 16.9%", + "ring": "216 12.2% 83.9%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/neutral.json b/apps/www/public/registry/themes/neutral.json new file mode 100644 index 00000000000..e00dec7f4af --- /dev/null +++ b/apps/www/public/registry/themes/neutral.json @@ -0,0 +1,48 @@ +{ + "name": "neutral", + "label": "Neutral", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "0 0% 3.9%", + "card": "0 0% 100%", + "card-foreground": "0 0% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "0 0% 3.9%", + "primary": "0 0% 9%", + "primary-foreground": "0 0% 98%", + "secondary": "0 0% 96.1%", + "secondary-foreground": "0 0% 9%", + "muted": "0 0% 96.1%", + "muted-foreground": "0 0% 45.1%", + "accent": "0 0% 96.1%", + "accent-foreground": "0 0% 9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "border": "0 0% 89.8%", + "input": "0 0% 89.8%", + "ring": "0 0% 3.9%" + }, + "dark": { + "background": "0 0% 3.9%", + "foreground": "0 0% 98%", + "card": "0 0% 3.9%", + "card-foreground": "0 0% 98%", + "popover": "0 0% 3.9%", + "popover-foreground": "0 0% 98%", + "primary": "0 0% 98%", + "primary-foreground": "0 0% 9%", + "secondary": "0 0% 14.9%", + "secondary-foreground": "0 0% 98%", + "muted": "0 0% 14.9%", + "muted-foreground": "0 0% 63.9%", + "accent": "0 0% 14.9%", + "accent-foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + "border": "0 0% 14.9%", + "input": "0 0% 14.9%", + "ring": "0 0% 83.1%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/slate.json b/apps/www/public/registry/themes/slate.json new file mode 100644 index 00000000000..2cd8397f282 --- /dev/null +++ b/apps/www/public/registry/themes/slate.json @@ -0,0 +1,48 @@ +{ + "name": "slate", + "label": "Slate", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "222.2 84% 4.9%", + "card": "0 0% 100%", + "card-foreground": "222.2 84% 4.9%", + "popover": "0 0% 100%", + "popover-foreground": "222.2 84% 4.9%", + "primary": "222.2 47.4% 11.2%", + "primary-foreground": "210 40% 98%", + "secondary": "210 40% 96.1%", + "secondary-foreground": "222.2 47.4% 11.2%", + "muted": "210 40% 96.1%", + "muted-foreground": "215.4 16.3% 46.9%", + "accent": "210 40% 96.1%", + "accent-foreground": "222.2 47.4% 11.2%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 40% 98%", + "border": "214.3 31.8% 91.4%", + "input": "214.3 31.8% 91.4%", + "ring": "222.2 84% 4.9%" + }, + "dark": { + "background": "222.2 84% 4.9%", + "foreground": "210 40% 98%", + "card": "222.2 84% 4.9%", + "card-foreground": "210 40% 98%", + "popover": "222.2 84% 4.9%", + "popover-foreground": "210 40% 98%", + "primary": "210 40% 98%", + "primary-foreground": "222.2 47.4% 11.2%", + "secondary": "217.2 32.6% 17.5%", + "secondary-foreground": "210 40% 98%", + "muted": "217.2 32.6% 17.5%", + "muted-foreground": "215 20.2% 65.1%", + "accent": "217.2 32.6% 17.5%", + "accent-foreground": "210 40% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 40% 98%", + "border": "217.2 32.6% 17.5%", + "input": "217.2 32.6% 17.5%", + "ring": "212.7 26.8 83.9%" + } + } +} diff --git a/apps/www/public/registry/themes/stone.json b/apps/www/public/registry/themes/stone.json new file mode 100644 index 00000000000..8ff9ab5cad9 --- /dev/null +++ b/apps/www/public/registry/themes/stone.json @@ -0,0 +1,48 @@ +{ + "name": "stone", + "label": "Stone", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "20 14.3% 4.1%", + "card": "0 0% 100%", + "card-foreground": "20 14.3% 4.1%", + "popover": "0 0% 100%", + "popover-foreground": "20 14.3% 4.1%", + "primary": "24 9.8% 10%", + "primary-foreground": "60 9.1% 97.8%", + "secondary": "60 4.8% 95.9%", + "secondary-foreground": "24 9.8% 10%", + "muted": "60 4.8% 95.9%", + "muted-foreground": "25 5.3% 44.7%", + "accent": "60 4.8% 95.9%", + "accent-foreground": "24 9.8% 10%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "60 9.1% 97.8%", + "border": "20 5.9% 90%", + "input": "20 5.9% 90%", + "ring": "20 14.3% 4.1%" + }, + "dark": { + "background": "20 14.3% 4.1%", + "foreground": "60 9.1% 97.8%", + "card": "20 14.3% 4.1%", + "card-foreground": "60 9.1% 97.8%", + "popover": "20 14.3% 4.1%", + "popover-foreground": "60 9.1% 97.8%", + "primary": "60 9.1% 97.8%", + "primary-foreground": "24 9.8% 10%", + "secondary": "12 6.5% 15.1%", + "secondary-foreground": "60 9.1% 97.8%", + "muted": "12 6.5% 15.1%", + "muted-foreground": "24 5.4% 63.9%", + "accent": "12 6.5% 15.1%", + "accent-foreground": "60 9.1% 97.8%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "60 9.1% 97.8%", + "border": "12 6.5% 15.1%", + "input": "12 6.5% 15.1%", + "ring": "24 5.7% 82.9%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/registry/themes/zinc.json b/apps/www/public/registry/themes/zinc.json new file mode 100644 index 00000000000..b69bd36288e --- /dev/null +++ b/apps/www/public/registry/themes/zinc.json @@ -0,0 +1,48 @@ +{ + "name": "zinc", + "label": "Zinc", + "cssVars": { + "light": { + "background": "0 0% 100%", + "foreground": "240 10% 3.9%", + "card": "0 0% 100%", + "card-foreground": "240 10% 3.9%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "240 5.9% 10%", + "primary-foreground": "0 0% 98%", + "secondary": "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", + "accent": "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "border": "240 5.9% 90%", + "input": "240 5.9% 90%", + "ring": "240 10% 3.9%" + }, + "dark": { + "background": "240 10% 3.9%", + "foreground": "0 0% 98%", + "card": "240 10% 3.9%", + "card-foreground": "0 0% 98%", + "popover": "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + "primary": "0 0% 98%", + "primary-foreground": "240 5.9% 10%", + "secondary": "240 3.7% 15.9%", + "secondary-foreground": "0 0% 98%", + "muted": "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + "accent": "240 3.7% 15.9%", + "accent-foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + "border": "240 3.7% 15.9%", + "input": "240 3.7% 15.9%", + "ring": "240 4.9% 83.9%" + } + } +} \ No newline at end of file diff --git a/apps/www/registry/colors.ts b/apps/www/registry/colors.ts index 81265173f51..f630f342948 100644 --- a/apps/www/registry/colors.ts +++ b/apps/www/registry/colors.ts @@ -35,7 +35,7 @@ export const colors = { scale: 300, hex: "#cbd5e1", rgb: "rgb(203,213,225)", - hsl: "hsl(212.7,26.8%,83.9)", + hsl: "hsl(212.7,26.8%,83.9%)", }, { scale: 400, @@ -1514,43 +1514,43 @@ export const colorMapping = { light: { background: "white", foreground: "{{base}}-950", - muted: "{{base}}-100", - "muted-foreground": "{{base}}-500", - popover: "white", - "popover-foreground": "{{base}}-950", - border: "{{base}}-200", - input: "{{base}}-200", card: "white", "card-foreground": "{{base}}-950", + popover: "white", + "popover-foreground": "{{base}}-950", primary: "{{base}}-900", "primary-foreground": "{{base}}-50", secondary: "{{base}}-100", "secondary-foreground": "{{base}}-900", + muted: "{{base}}-100", + "muted-foreground": "{{base}}-500", accent: "{{base}}-100", "accent-foreground": "{{base}}-900", destructive: "red-500", "destructive-foreground": "{{base}}-50", - ring: "{{base}}-400", + border: "{{base}}-200", + input: "{{base}}-200", + ring: "{{base}}-950", }, dark: { background: "{{base}}-950", foreground: "{{base}}-50", - muted: "{{base}}-800", - "muted-foreground": "{{base}}-400", - popover: "{{base}}-950", - "popover-foreground": "{{base}}-50", - border: "{{base}}-800", - input: "{{base}}-800", card: "{{base}}-950", "card-foreground": "{{base}}-50", + popover: "{{base}}-950", + "popover-foreground": "{{base}}-50", primary: "{{base}}-50", "primary-foreground": "{{base}}-900", secondary: "{{base}}-800", "secondary-foreground": "{{base}}-50", + muted: "{{base}}-800", + "muted-foreground": "{{base}}-400", accent: "{{base}}-800", "accent-foreground": "{{base}}-50", destructive: "red-900", - "destructive-foreground": "red-50", - ring: "{{base}}-800", + "destructive-foreground": "{{base}}-50", + border: "{{base}}-800", + input: "{{base}}-800", + ring: "{{base}}-300", }, } as const diff --git a/apps/www/registry/default/example/cards/activity-goal.tsx b/apps/www/registry/default/example/cards/activity-goal.tsx new file mode 100644 index 00000000000..a3997a6fed1 --- /dev/null +++ b/apps/www/registry/default/example/cards/activity-goal.tsx @@ -0,0 +1,132 @@ +"use client" + +import * as React from "react" +import { Minus, Plus } from "lucide-react" +import { useTheme } from "next-themes" +import { Bar, BarChart, ResponsiveContainer } from "recharts" + +import { useConfig } from "@/hooks/use-config" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { themes } from "@/registry/themes" + +const data = [ + { + goal: 400, + }, + { + goal: 300, + }, + { + goal: 200, + }, + { + goal: 300, + }, + { + goal: 200, + }, + { + goal: 278, + }, + { + goal: 189, + }, + { + goal: 239, + }, + { + goal: 300, + }, + { + goal: 200, + }, + { + goal: 278, + }, + { + goal: 189, + }, + { + goal: 349, + }, +] + +export function CardsActivityGoal() { + const { theme: mode } = useTheme() + const [config] = useConfig() + + const theme = themes.find((theme) => theme.name === config.theme) + const [goal, setGoal] = React.useState(350) + + function onClick(adjustment: number) { + setGoal(Math.max(200, Math.min(400, goal + adjustment))) + } + + return ( + + + Move Goal + Set your daily activity goal. + + +
+ +
+
{goal}
+
+ Calories/day +
+
+ +
+
+ + + + + +
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/calendar.tsx b/apps/www/registry/default/example/cards/calendar.tsx new file mode 100644 index 00000000000..39785387d89 --- /dev/null +++ b/apps/www/registry/default/example/cards/calendar.tsx @@ -0,0 +1,26 @@ +"use client" + +import { addDays } from "date-fns" + +import { Calendar } from "@/registry/default/ui/calendar" +import { Card, CardContent } from "@/registry/default/ui/card" + +const start = new Date(2023, 5, 5) + +export function CardsCalendar() { + return ( + + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/chat.tsx b/apps/www/registry/default/example/cards/chat.tsx new file mode 100644 index 00000000000..dd2e11e78a1 --- /dev/null +++ b/apps/www/registry/default/example/cards/chat.tsx @@ -0,0 +1,254 @@ +import * as React from "react" +import { Check, Plus, Send } from "lucide-react" + +import { cn } from "@/lib/utils" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/default/ui/avatar" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardFooter, + CardHeader, +} from "@/registry/default/ui/card" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/registry/default/ui/command" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/registry/default/ui/dialog" +import { Input } from "@/registry/default/ui/input" +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/registry/default/ui/tooltip" + +const users = [ + { + name: "Olivia Martin", + email: "m@example.com", + avatar: "/avatars/01.png", + }, + { + name: "Isabella Nguyen", + email: "isabella.nguyen@email.com", + avatar: "/avatars/03.png", + }, + { + name: "Emma Wilson", + email: "emma@example.com", + avatar: "/avatars/05.png", + }, + { + name: "Jackson Lee", + email: "lee@example.com", + avatar: "/avatars/02.png", + }, + { + name: "William Kim", + email: "will@email.com", + avatar: "/avatars/04.png", + }, +] as const + +type User = (typeof users)[number] + +export function CardsChat() { + const [open, setOpen] = React.useState(false) + const [selectedUsers, setSelectedUsers] = React.useState([]) + + const [messages, setMessages] = React.useState([ + { + role: "agent", + content: "Hi, how can I help you today?", + }, + { + role: "user", + content: "Hey, I'm having trouble with my account.", + }, + { + role: "agent", + content: "What seems to be the problem?", + }, + { + role: "user", + content: "I can't log in.", + }, + ]) + + return ( + <> + + +
+ + + OM + +
+

Sofia Davis

+

m@example.com

+
+
+ + + + + + New message + + + + +
+ {messages.map((message, index) => ( +
+ {message.content} +
+ ))} +
+ + + { + event.preventDefault() + setMessages([ + ...messages, + { + role: "user", + content: event.currentTarget.message.value, + }, + ]) + + event.currentTarget.message.value = "" + }} + className="flex w-full items-center space-x-2" + > + + + + + + + + + New message + + Invite a user to this thread. This will create a new group + message. + + + + + + No users found. + + {users.map((user) => ( + { + if (selectedUsers.includes(user)) { + return setSelectedUsers( + selectedUsers.filter( + (selectedUser) => selectedUser !== user + ) + ) + } + + return setSelectedUsers( + [...users].filter((u) => + [...selectedUsers, user].includes(u) + ) + ) + }} + > + + + {user.name[0]} + +
+

+ {user.name} +

+

+ {user.email} +

+
+ {selectedUsers.includes(user) ? ( + + ) : null} + + ))} + + + + + {selectedUsers.length > 0 ? ( +
+ {selectedUsers.map((user) => ( + + + {user.name[0]} + + ))} +
+ ) : ( +

+ Select users to add to this thread. +

+ )} + + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/cookie-settings.tsx b/apps/www/registry/default/example/cards/cookie-settings.tsx new file mode 100644 index 00000000000..11e6df7fcde --- /dev/null +++ b/apps/www/registry/default/example/cards/cookie-settings.tsx @@ -0,0 +1,60 @@ +"use client" + +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Label } from "@/registry/default/ui/label" +import { Switch } from "@/registry/default/ui/switch" + +export function CardsCookieSettings() { + return ( + + + Cookie Settings + Manage your cookie settings here. + + +
+ + +
+
+ + +
+
+ + +
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/create-account.tsx b/apps/www/registry/default/example/cards/create-account.tsx new file mode 100644 index 00000000000..ef7ef5b81ae --- /dev/null +++ b/apps/www/registry/default/example/cards/create-account.tsx @@ -0,0 +1,60 @@ +"use client" + +import { Icons } from "@/components/icons" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" + +export function CardsCreateAccount() { + return ( + + + Create an account + + Enter your email below to create your account + + + +
+ + +
+
+
+ +
+
+ + Or continue with + +
+
+
+ + +
+
+ + +
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/data-table.tsx b/apps/www/registry/default/example/cards/data-table.tsx new file mode 100644 index 00000000000..6df6f05b3ab --- /dev/null +++ b/apps/www/registry/default/example/cards/data-table.tsx @@ -0,0 +1,332 @@ +"use client" + +import * as React from "react" +import { + CaretSortIcon, + ChevronDownIcon, + DotsHorizontalIcon, +} from "@radix-ui/react-icons" +import { + ColumnDef, + ColumnFiltersState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table" + +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Checkbox } from "@/registry/default/ui/checkbox" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/registry/default/ui/dropdown-menu" +import { Input } from "@/registry/default/ui/input" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/registry/default/ui/table" + +const data: Payment[] = [ + { + id: "m5gr84i9", + amount: 316, + status: "success", + email: "ken99@yahoo.com", + }, + { + id: "3u1reuv4", + amount: 242, + status: "success", + email: "Abe45@gmail.com", + }, + { + id: "derv1ws0", + amount: 837, + status: "processing", + email: "Monserrat44@gmail.com", + }, + { + id: "5kma53ae", + amount: 874, + status: "success", + email: "Silas22@gmail.com", + }, + { + id: "bhqecj4p", + amount: 721, + status: "failed", + email: "carmella@hotmail.com", + }, +] + +export type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + /> + ), + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => ( +
{row.getValue("status")}
+ ), + }, + { + accessorKey: "email", + header: ({ column }) => { + return ( + + ) + }, + cell: ({ row }) =>
{row.getValue("email")}
, + }, + { + accessorKey: "amount", + header: () =>
Amount
, + cell: ({ row }) => { + const amount = parseFloat(row.getValue("amount")) + + // Format the amount as a dollar amount + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + }).format(amount) + + return
{formatted}
+ }, + }, + { + id: "actions", + enableHiding: false, + cell: ({ row }) => { + const payment = row.original + + return ( + + + + + + Actions + navigator.clipboard.writeText(payment.id)} + > + Copy payment ID + + + View customer + View payment details + + + ) + }, + }, +] + +export function CardsDataTable() { + const [sorting, setSorting] = React.useState([]) + const [columnFilters, setColumnFilters] = React.useState( + [] + ) + const [columnVisibility, setColumnVisibility] = + React.useState({}) + const [rowSelection, setRowSelection] = React.useState({}) + + const table = useReactTable({ + data, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + }, + }) + + return ( + + + Payments + Manage your payments. + + +
+ + table.getColumn("email")?.setFilterValue(event.target.value) + } + className="max-w-sm" + /> + + + + + + {table + .getAllColumns() + .filter((column) => column.getCanHide()) + .map((column) => { + return ( + + column.toggleVisibility(!!value) + } + > + {column.id} + + ) + })} + + +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + +
+
+ + + ) +} diff --git a/apps/www/registry/default/example/cards/index.tsx b/apps/www/registry/default/example/cards/index.tsx new file mode 100644 index 00000000000..888fa37563c --- /dev/null +++ b/apps/www/registry/default/example/cards/index.tsx @@ -0,0 +1,63 @@ +import { CardsActivityGoal } from "@/registry/default/example/cards/activity-goal" +import { CardsCalendar } from "@/registry/default/example/cards/calendar" +import { CardsChat } from "@/registry/default/example/cards/chat" +import { CardsCookieSettings } from "@/registry/default/example/cards/cookie-settings" +import { CardsCreateAccount } from "@/registry/default/example/cards/create-account" +import { CardsDataTable } from "@/registry/default/example/cards/data-table" +import { CardsMetric } from "@/registry/default/example/cards/metric" +import { CardsPaymentMethod } from "@/registry/default/example/cards/payment-method" +import { CardsReportIssue } from "@/registry/default/example/cards/report-issue" +import { CardsShare } from "@/registry/default/example/cards/share" +import { CardsStats } from "@/registry/default/example/cards/stats" +import { CardsTeamMembers } from "@/registry/default/example/cards/team-members" + +export default function CardsDemo() { + return ( +
+
+ +
+ +
+ +
+
+ +
+
+
+
+ + + +
+
+ + +
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+ +
+ +
+ +
+
+
+ ) +} diff --git a/apps/www/registry/default/example/cards/metric.tsx b/apps/www/registry/default/example/cards/metric.tsx new file mode 100644 index 00000000000..2e6c962c8ed --- /dev/null +++ b/apps/www/registry/default/example/cards/metric.tsx @@ -0,0 +1,142 @@ +import { useTheme } from "next-themes" +import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts" + +import { useConfig } from "@/hooks/use-config" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { themes } from "@/registry/themes" + +const data = [ + { + average: 400, + today: 240, + }, + { + average: 300, + today: 139, + }, + { + average: 200, + today: 980, + }, + { + average: 278, + today: 390, + }, + { + average: 189, + today: 480, + }, + { + average: 239, + today: 380, + }, + { + average: 349, + today: 430, + }, +] + +export function CardsMetric() { + const { theme: mode } = useTheme() + const [config] = useConfig() + + const theme = themes.find((theme) => theme.name === config.theme) + + return ( + + + Exercise Minutes + + Your excercise minutes are ahead of where you normally are. + + + +
+ + + { + if (active && payload && payload.length) { + return ( +
+
+
+ + Average + + + {payload[0].value} + +
+
+ + Today + + + {payload[1].value} + +
+
+
+ ) + } + + return null + }} + /> + + + + +
+ + + ) +} diff --git a/apps/www/registry/default/example/cards/payment-method.tsx b/apps/www/registry/default/example/cards/payment-method.tsx new file mode 100644 index 00000000000..111afcf05b5 --- /dev/null +++ b/apps/www/registry/default/example/cards/payment-method.tsx @@ -0,0 +1,156 @@ +"use client" + +import { Icons } from "@/components/icons" +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" +import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" + +export function CardsPaymentMethod() { + return ( + + + Payment Method + + Add a new payment method to your account. + + + + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + ) +} diff --git a/apps/www/registry/default/example/cards/report-issue.tsx b/apps/www/registry/default/example/cards/report-issue.tsx new file mode 100644 index 00000000000..c2bf1317318 --- /dev/null +++ b/apps/www/registry/default/example/cards/report-issue.tsx @@ -0,0 +1,90 @@ +"use client" + +import * as React from "react" + +import { Button } from "@/registry/default/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/registry/default/ui/card" +import { Input } from "@/registry/default/ui/input" +import { Label } from "@/registry/default/ui/label" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/default/ui/select" +import { Textarea } from "@/registry/default/ui/textarea" + +export function CardsReportIssue() { + const id = React.useId() + + return ( + + + Report an issue + + What area are you having problems with? + + + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +