diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml index c6fcb9aca94..50245533992 100644 --- a/.github/workflows/code-check.yml +++ b/.github/workflows/code-check.yml @@ -7,7 +7,7 @@ on: jobs: lint: runs-on: ubuntu-latest - name: Lint + name: pnpm lint steps: - uses: actions/checkout@v3 with: @@ -43,7 +43,7 @@ jobs: format: runs-on: ubuntu-latest - name: Format + name: pnpm format:check steps: - uses: actions/checkout@v3 with: @@ -81,7 +81,7 @@ jobs: tsc: runs-on: ubuntu-latest - name: TypeScript + name: pnpm typecheck steps: - uses: actions/checkout@v3 with: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 79d58c08a23..05349677489 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -7,7 +7,7 @@ on: jobs: test: runs-on: ubuntu-latest - name: Test + name: pnpm test steps: - uses: actions/checkout@v3 with: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f6965d189fe..f45807d242e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -45,15 +45,31 @@ packages ## Development -### Start by cloning the repository: +### Fork this repo +You can fork this repo by clicking the fork button in the top right corner of this page. + +### Clone on your local machine + +```bash +git clone https://github.com/your-username/ui.git ``` -git clone git@github.com:shadcn-ui/ui.git + +### Navigate to project directory + +```bash +cd ui ``` -### Install dependencies +### Create a new Branch +```bash +git checkout -b my-new-branch ``` + +### Install dependencies + +```bash pnpm install ``` @@ -65,13 +81,13 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro 1. To run the `ui.shadcn.com` website: -``` +```bash pnpm --filter=www dev ``` 2. To run the `shadcn-ui` package: -``` +```bash pnpm --filter=shadcn-ui dev ``` @@ -134,13 +150,10 @@ the following categories: e.g. `feat(components): add new prop to the avatar component` - If you are interested in the detailed specification you can visit https://www.conventionalcommits.org/ or check out the [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines). - - ## 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. diff --git a/apps/www/app/examples/music/components/menu.tsx b/apps/www/app/examples/music/components/menu.tsx index b85f16f9662..50c147e3637 100644 --- a/apps/www/app/examples/music/components/menu.tsx +++ b/apps/www/app/examples/music/components/menu.tsx @@ -190,7 +190,7 @@ export function Menu() { Luis - Manage Famliy... + Manage Family... Add Account... diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 1f1352f90a5..a3bad8ebf25 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -152,6 +152,11 @@ export const docsConfig: DocsConfig = { href: "/docs/dark-mode/astro", items: [], }, + { + title: "Remix", + href: "/docs/dark-mode/remix", + items: [], + }, ], }, { diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx index c743279c3c2..79b92985f5c 100644 --- a/apps/www/content/docs/dark-mode/index.mdx +++ b/apps/www/content/docs/dark-mode/index.mdx @@ -43,6 +43,19 @@ description: Adding dark mode to your site.

Astro

+ + + Remix + + +

Remix

+ ## Other frameworks diff --git a/apps/www/content/docs/dark-mode/remix.mdx b/apps/www/content/docs/dark-mode/remix.mdx new file mode 100644 index 00000000000..2b523c5d42a --- /dev/null +++ b/apps/www/content/docs/dark-mode/remix.mdx @@ -0,0 +1,159 @@ +--- +title: Remix +description: Adding dark mode to your remix app. +--- + +## Dark mode + + + +### Modify your tailwind.css file + +Add `:root[class~="dark"]` to your tailwind.css file. This will allow you to use the `dark` class on your html element to apply dark mode styles. + +```css {2} title="app/tailwind.css" +.dark, +:root[class~="dark"] { + ...; +} +``` + +### Install remix-themes + +Start by installing `remix-themes`: + +```bash +npm install remix-themes +``` + +### Create a session storage and theme session resolver + +```tsx title="app/sessions.server.tsx" +import { createThemeSessionResolver } from "remix-themes" + +// You can default to 'development' if process.env.NODE_ENV is not set +const isProduction = process.env.NODE_ENV === "production" + +const sessionStorage = createCookieSessionStorage({ + cookie: { + name: "theme", + path: "/", + httpOnly: true, + sameSite: "lax", + secrets: ["s3cr3t"], + // Set domain and secure only if in production + ...(isProduction + ? { domain: "your-production-domain.com", secure: true } + : {}), + }, +}) + +export const themeSessionResolver = createThemeSessionResolver(sessionStorage) +``` + +### Set up Remix Themes + +Add the `ThemeProvider` to your root layout. + +```tsx {1-3,6-11,15-22,25-26,28,33} title="app/root.tsx" +import clsx from "clsx" +import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from "remix-themes" + +import { themeSessionResolver } from "./sessions.server" + +// Return the theme from the session storage using the loader +export async function loader({ request }: LoaderFunctionArgs) { + const { getTheme } = await themeSessionResolver(request) + return { + theme: getTheme(), + } +} +// Wrap your app with ThemeProvider. +// `specifiedTheme` is the stored theme in the session storage. +// `themeAction` is the action name that's used to change the theme in the session storage. +export default function AppWithProviders() { + const data = useLoaderData() + return ( + + + + ) +} + +export function App() { + const data = useLoaderData() + const [theme] = useTheme() + return ( + + + + + + + + + + + + + + + + ) +} +``` + +### Add an action route + +Create a file in `/routes/action.set-theme.ts`. Ensure that you pass the filename to the ThemeProvider component. This route it's used to store the preferred theme in the session storage when the user changes it. + +```tsx title="app/routes/action.set-theme.ts" +import { createThemeAction } from "remix-themes" + +import { themeSessionResolver } from "./sessions.server" + +export const action = createThemeAction(themeSessionResolver) +``` + +### 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 { Theme, useTheme } from "remix-themes" + +import { Button } from "./ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "./ui/dropdown-menu" + +export function ModeToggle() { + const [, setTheme] = useTheme() + + return ( + + + + + + setTheme(Theme.LIGHT)}> + Light + + setTheme(Theme.DARK)}> + Dark + + + + ) +} +``` + + diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index 505fadfbebe..0e4375bad9b 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -45,10 +45,12 @@ Here's how I configure Inter for Next.js: **1. Import the font in the root layout:** -```js showLineNumbers title=app/layout.tsx {2,4-7,15-16} +```js showLineNumbers title=app/layout.tsx {2,5-8,16-17} import "@/styles/globals.css" import { Inter as FontSans } from "next/font/google" +import { cn } from "../@/lib/utils" + export const fontSans = FontSans({ subsets: ["latin"], variable: "--font-sans", diff --git a/apps/www/public/registry/styles/default/button.json b/apps/www/public/registry/styles/default/button.json index 73861d96e2a..b292cab4316 100644 --- a/apps/www/public/registry/styles/default/button.json +++ b/apps/www/public/registry/styles/default/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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground 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-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground 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-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\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/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json index aac65b09232..70d5d5800a4 100644 --- a/apps/www/public/registry/styles/default/calendar.json +++ b/apps/www/public/registry/styles/default/calendar.json @@ -10,7 +10,7 @@ "files": [ { "name": "calendar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\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 { ChevronLeft, ChevronRight } from \"lucide-react\"\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" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/radio-group.json b/apps/www/public/registry/styles/default/radio-group.json index cff19eba0c9..4a7d7bbe6a3 100644 --- a/apps/www/public/registry/styles/default/radio-group.json +++ b/apps/www/public/registry/styles/default/radio-group.json @@ -6,7 +6,7 @@ "files": [ { "name": "radio-group.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/scroll-area.json b/apps/www/public/registry/styles/default/scroll-area.json index c24fd70f8d0..1ace696e7b5 100644 --- a/apps/www/public/registry/styles/default/scroll-area.json +++ b/apps/www/public/registry/styles/default/scroll-area.json @@ -6,7 +6,7 @@ "files": [ { "name": "scroll-area.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/sheet.json b/apps/www/public/registry/styles/default/sheet.json index 58f5b3b287b..80799b1474c 100644 --- a/apps/www/public/registry/styles/default/sheet.json +++ b/apps/www/public/registry/styles/default/sheet.json @@ -6,7 +6,7 @@ "files": [ { "name": "sheet.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/switch.json b/apps/www/public/registry/styles/default/switch.json index ac4dac95135..5c84749ced2 100644 --- a/apps/www/public/registry/styles/default/switch.json +++ b/apps/www/public/registry/styles/default/switch.json @@ -6,7 +6,7 @@ "files": [ { "name": "switch.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\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 7f667747851..eb0706b9263 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-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" + "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 whitespace-nowrap 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 0998cfa90ae..c31d89448fa 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 .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" + "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:\n \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\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/radio-group.json b/apps/www/public/registry/styles/new-york/radio-group.json index e7dfeb3f57d..e2b9fedd832 100644 --- a/apps/www/public/registry/styles/new-york/radio-group.json +++ b/apps/www/public/registry/styles/new-york/radio-group.json @@ -6,7 +6,7 @@ "files": [ { "name": "radio-group.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/scroll-area.json b/apps/www/public/registry/styles/new-york/scroll-area.json index c24fd70f8d0..1ace696e7b5 100644 --- a/apps/www/public/registry/styles/new-york/scroll-area.json +++ b/apps/www/public/registry/styles/new-york/scroll-area.json @@ -6,7 +6,7 @@ "files": [ { "name": "scroll-area.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/sheet.json b/apps/www/public/registry/styles/new-york/sheet.json index f37dfd486cc..97d979db60e 100644 --- a/apps/www/public/registry/styles/new-york/sheet.json +++ b/apps/www/public/registry/styles/new-york/sheet.json @@ -6,7 +6,7 @@ "files": [ { "name": "sheet.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/switch.json b/apps/www/public/registry/styles/new-york/switch.json index c3e0b9ee528..dc679c4f68b 100644 --- a/apps/www/public/registry/styles/new-york/switch.json +++ b/apps/www/public/registry/styles/new-york/switch.json @@ -6,7 +6,7 @@ "files": [ { "name": "switch.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n" } ], "type": "components:ui" diff --git a/apps/www/registry/default/example/table-demo.tsx b/apps/www/registry/default/example/table-demo.tsx index e29b20ec8ea..3b830de01d8 100644 --- a/apps/www/registry/default/example/table-demo.tsx +++ b/apps/www/registry/default/example/table-demo.tsx @@ -3,6 +3,7 @@ import { TableBody, TableCaption, TableCell, + TableFooter, TableHead, TableHeader, TableRow, @@ -75,6 +76,12 @@ export default function TableDemo() { ))} + + + Total + $2,500.00 + + ) } diff --git a/apps/www/registry/default/ui/alert-dialog.tsx b/apps/www/registry/default/ui/alert-dialog.tsx index 6831ce8c86c..63c1d2e72ac 100644 --- a/apps/www/registry/default/ui/alert-dialog.tsx +++ b/apps/www/registry/default/ui/alert-dialog.tsx @@ -15,7 +15,7 @@ const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( +>(({ className, ...props }, ref) => ( , React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => { +>(({ className, ...props }, ref) => { return ( )) diff --git a/apps/www/registry/default/ui/switch.tsx b/apps/www/registry/default/ui/switch.tsx index 191ef52ea50..bc69cf2dbfc 100644 --- a/apps/www/registry/default/ui/switch.tsx +++ b/apps/www/registry/default/ui/switch.tsx @@ -11,7 +11,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( (({ className, ...props }, ref) => ( tr]:last:border-b-0", + className + )} {...props} /> )) diff --git a/apps/www/registry/new-york/example/table-demo.tsx b/apps/www/registry/new-york/example/table-demo.tsx index a7de45fd016..17a5888505c 100644 --- a/apps/www/registry/new-york/example/table-demo.tsx +++ b/apps/www/registry/new-york/example/table-demo.tsx @@ -3,6 +3,7 @@ import { TableBody, TableCaption, TableCell, + TableFooter, TableHead, TableHeader, TableRow, @@ -75,6 +76,12 @@ export default function TableDemo() { ))} + + + Total + $2,500.00 + + ) } diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx index 801cc8a5166..66636275bfc 100644 --- a/apps/www/registry/new-york/ui/calendar.tsx +++ b/apps/www/registry/new-york/ui/calendar.tsx @@ -37,7 +37,7 @@ function Calendar({ "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: cn( - "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent", + "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50", props.mode === "range" ? "[&:has(>.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" : "[&:has([aria-selected])]:rounded-md" @@ -51,7 +51,8 @@ function Calendar({ day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", - day_outside: "text-muted-foreground opacity-50", + day_outside: + "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", diff --git a/apps/www/registry/new-york/ui/radio-group.tsx b/apps/www/registry/new-york/ui/radio-group.tsx index b50dce1d285..cf016735c0a 100644 --- a/apps/www/registry/new-york/ui/radio-group.tsx +++ b/apps/www/registry/new-york/ui/radio-group.tsx @@ -23,7 +23,7 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => { +>(({ className, ...props }, ref) => { return ( )) diff --git a/apps/www/registry/new-york/ui/switch.tsx b/apps/www/registry/new-york/ui/switch.tsx index 3362b47edb7..5f4117f0f24 100644 --- a/apps/www/registry/new-york/ui/switch.tsx +++ b/apps/www/registry/new-york/ui/switch.tsx @@ -11,7 +11,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( (({ className, ...props }, ref) => ( tr]:last:border-b-0", + className + )} {...props} /> )) diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css index fa85346b9f7..33e164f2e23 100644 --- a/apps/www/styles/globals.css +++ b/apps/www/styles/globals.css @@ -18,7 +18,7 @@ --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: 0 72.22% 50.59%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%;