From d250109cc4d06a5160512f341a8637a746fcfa80 Mon Sep 17 00:00:00 2001 From: Michael Stramel Date: Mon, 6 Nov 2023 08:30:44 -0600 Subject: [PATCH 01/12] fix(www): destructive contrast increase (#1899) --- apps/www/styles/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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%; From 42e8eaf7cb4b6c6c2e61e0f90b469a3922290b02 Mon Sep 17 00:00:00 2001 From: Kevin Mok <48875246+kevmok@users.noreply.github.com> Date: Sun, 12 Nov 2023 00:16:22 -0600 Subject: [PATCH 02/12] docs(www): add remix dark mode docs (#1920) * docs(www): add remix dark mode docs * docs(www): add modification to tailwindcss file --- apps/www/config/docs.ts | 5 + apps/www/content/docs/dark-mode/index.mdx | 13 ++ apps/www/content/docs/dark-mode/remix.mdx | 157 ++++++++++++++++++++++ 3 files changed, 175 insertions(+) create mode 100644 apps/www/content/docs/dark-mode/remix.mdx 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..d9999472b66 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..33b85af6379 --- /dev/null +++ b/apps/www/content/docs/dark-mode/remix.mdx @@ -0,0 +1,157 @@ +--- +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 { ThemeProvider, useTheme, PreventFlashOnWrongTheme } from 'remix-themes'; +import { themeSessionResolver } from './sessions.server'; +import clsx from 'clsx'; + +// 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 { Button } from './ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from './ui/dropdown-menu'; +import { useTheme, Theme } from 'remix-themes'; + +export function ModeToggle() { + const [, setTheme] = useTheme(); + + return ( + + + + + + setTheme(Theme.LIGHT)}> + Light + + setTheme(Theme.DARK)}> + Dark + + + + ); +} +``` + + From 3fccfeb30154dc73bab3a4c50c3f48657e59c10c Mon Sep 17 00:00:00 2001 From: Innei Date: Sun, 12 Nov 2023 14:17:07 +0800 Subject: [PATCH 03/12] fix(switch): change width unit to rem (#1891) Signed-off-by: Innei Co-authored-by: shadcn --- apps/www/registry/default/ui/switch.tsx | 2 +- apps/www/registry/new-york/ui/switch.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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) => ( Date: Sun, 12 Nov 2023 00:17:56 -0600 Subject: [PATCH 04/12] docs(www): Missing import statement (#1877) Added missing import statement in fonts example in Next.js installation docs --- apps/www/content/docs/installation/next.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index 505fadfbebe..bbedb6c2471 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -45,9 +45,10 @@ 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"], From 3c22784a983f5b7c2321573881cf02eb7a1f314c Mon Sep 17 00:00:00 2001 From: Martini Date: Sun, 12 Nov 2023 07:18:34 +0100 Subject: [PATCH 05/12] docs(www): Fix typo (#1853) --- apps/www/app/examples/music/components/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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... From 6e399abdb470987fa875923713c0ec7d43e2ebe7 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 12 Nov 2023 11:20:18 +0400 Subject: [PATCH 06/12] fix(table): update style for table footer (#1931) * fix(table): update table footer style * chore: run registry * style: fix docs --- apps/www/content/docs/dark-mode/index.mdx | 2 +- apps/www/content/docs/dark-mode/remix.mdx | 62 ++++++++++--------- apps/www/content/docs/installation/next.mdx | 3 +- .../registry/styles/default/button.json | 2 +- .../registry/styles/default/calendar.json | 2 +- .../registry/styles/default/scroll-area.json | 2 +- .../public/registry/styles/default/sheet.json | 2 +- .../registry/styles/default/switch.json | 2 +- .../registry/styles/new-york/button.json | 2 +- .../registry/styles/new-york/scroll-area.json | 2 +- .../registry/styles/new-york/sheet.json | 2 +- .../registry/styles/new-york/switch.json | 2 +- .../registry/default/example/table-demo.tsx | 7 +++ apps/www/registry/default/ui/table.tsx | 5 +- .../registry/new-york/example/table-demo.tsx | 7 +++ apps/www/registry/new-york/ui/table.tsx | 5 +- 16 files changed, 66 insertions(+), 43 deletions(-) diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx index d9999472b66..79b92985f5c 100644 --- a/apps/www/content/docs/dark-mode/index.mdx +++ b/apps/www/content/docs/dark-mode/index.mdx @@ -46,7 +46,7 @@ description: Adding dark mode to your site. ### 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"] { - ... - } +.dark, +:root[class~="dark"] { + ...; +} ``` ### Install remix-themes @@ -28,21 +29,21 @@ npm install remix-themes ### Create a session storage and theme session resolver ```tsx title="app/sessions.server.tsx" -import { createThemeSessionResolver } from 'remix-themes' +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 isProduction = process.env.NODE_ENV === "production" const sessionStorage = createCookieSessionStorage({ cookie: { - name: 'theme', - path: '/', + name: "theme", + path: "/", httpOnly: true, - sameSite: 'lax', - secrets: ['s3cr3t'], + sameSite: "lax", + secrets: ["s3cr3t"], // Set domain and secure only if in production ...(isProduction - ? { domain: 'your-production-domain.com', secure: true } + ? { domain: "your-production-domain.com", secure: true } : {}), }, }) @@ -55,32 +56,33 @@ export const themeSessionResolver = createThemeSessionResolver(sessionStorage) Add the `ThemeProvider` to your root layout. ```tsx {1-3,6-11,15-22,25-26,28,33} title="app/root.tsx" -import { ThemeProvider, useTheme, PreventFlashOnWrongTheme } from 'remix-themes'; -import { themeSessionResolver } from './sessions.server'; -import clsx from 'clsx'; +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); + 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(); + const data = useLoaderData() return ( - ); + ) } export function App() { - const data = useLoaderData(); - const [theme] = useTheme(); + const data = useLoaderData() + const [theme] = useTheme() return ( @@ -97,9 +99,8 @@ export function App() { - ); + ) } - ``` ### Add an action route @@ -107,8 +108,9 @@ export function App() { 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' +import { createThemeAction } from "remix-themes" + +import { themeSessionResolver } from "./sessions.server" export const action = createThemeAction(themeSessionResolver) ``` @@ -118,19 +120,19 @@ export const action = createThemeAction(themeSessionResolver) 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 { Moon, Sun } from "lucide-react" +import { Theme, useTheme } from "remix-themes" -import { Button } from './ui/button'; +import { Button } from "./ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from './ui/dropdown-menu'; -import { useTheme, Theme } from 'remix-themes'; +} from "./ui/dropdown-menu" export function ModeToggle() { - const [, setTheme] = useTheme(); + const [, setTheme] = useTheme() return ( @@ -150,7 +152,7 @@ export function ModeToggle() { - ); + ) } ``` diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index bbedb6c2471..0e4375bad9b 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -48,7 +48,8 @@ Here's how I configure Inter for Next.js: ```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"; + +import { cn } from "../@/lib/utils" export const fontSans = FontSans({ subsets: ["latin"], 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..80a7deaeecf 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/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/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/table.tsx b/apps/www/registry/default/ui/table.tsx index 116d34bb77b..7f3502f8b28 100644 --- a/apps/www/registry/default/ui/table.tsx +++ b/apps/www/registry/default/ui/table.tsx @@ -42,7 +42,10 @@ const TableFooter = React.forwardRef< >(({ 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/table.tsx b/apps/www/registry/new-york/ui/table.tsx index 647c4c299bf..c0df655c0bf 100644 --- a/apps/www/registry/new-york/ui/table.tsx +++ b/apps/www/registry/new-york/ui/table.tsx @@ -42,7 +42,10 @@ const TableFooter = React.forwardRef< >(({ className, ...props }, ref) => ( tr]:last:border-b-0", + className + )} {...props} /> )) From fc3d8288f7372e6807cb749b1d998d1459fd7816 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 12 Nov 2023 11:30:00 +0400 Subject: [PATCH 07/12] ci: update tasks name to make debug easier (#1932) --- .github/workflows/code-check.yml | 6 +++--- .github/workflows/test.yml | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) 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: From 66c7f6d73b4732409b1d7cf8458cfda054ea020a Mon Sep 17 00:00:00 2001 From: Greg Date: Sun, 12 Nov 2023 02:36:35 -0500 Subject: [PATCH 08/12] fix(scroll-area): horizontal scroll bar not visible (#1829) PRs #1515 and #1296 interfere with each other and cause the horizontal scroll bar to not be visible. This removes the conditional `flex-1`, however you could also remove `flex-col` to achieve the same result. before: https://github.com/shadcn-ui/ui/assets/9381099/6514de2e-e353-4d0b-bd24-aff79e0d5161 after: https://github.com/shadcn-ui/ui/assets/9381099/3205baad-569b-4096-8dcd-9beb794de536 --- apps/www/registry/default/ui/scroll-area.tsx | 5 +---- apps/www/registry/new-york/ui/scroll-area.tsx | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/apps/www/registry/default/ui/scroll-area.tsx b/apps/www/registry/default/ui/scroll-area.tsx index 2426616498a..cc6c8f50b2e 100644 --- a/apps/www/registry/default/ui/scroll-area.tsx +++ b/apps/www/registry/default/ui/scroll-area.tsx @@ -41,10 +41,7 @@ const ScrollBar = React.forwardRef< {...props} > )) diff --git a/apps/www/registry/new-york/ui/scroll-area.tsx b/apps/www/registry/new-york/ui/scroll-area.tsx index 2426616498a..cc6c8f50b2e 100644 --- a/apps/www/registry/new-york/ui/scroll-area.tsx +++ b/apps/www/registry/new-york/ui/scroll-area.tsx @@ -41,10 +41,7 @@ const ScrollBar = React.forwardRef< {...props} > )) From a2ed2883ac3d7912f90ff757a979f3e640d8d351 Mon Sep 17 00:00:00 2001 From: Shubhdeep Chhabra Date: Sun, 12 Nov 2023 13:16:21 +0530 Subject: [PATCH 09/12] fix(alert-dialog): removed unused children prop (#1828) --- apps/www/registry/default/ui/alert-dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) => ( Date: Sun, 12 Nov 2023 01:57:25 -0600 Subject: [PATCH 10/12] docs: updated contributing guidelines to easily contribute (#1830) ## Explanation Added detailed info to clone and setup the project to contribute. Following the PR #1650 and suggestion of @shadcn. Thanks! --- CONTRIBUTING.md | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) 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. From 51c8c3d7987dce66e6e3533e80a36fbb4059ca31 Mon Sep 17 00:00:00 2001 From: Gravy59 Date: Sun, 12 Nov 2023 02:28:07 -0700 Subject: [PATCH 11/12] fix(#1686): remove redundant `children` prop (#1717) This pull request resolves #1686. ## Rationale for this PR This PR affects the code for `RadioGroupItem` in both styles by removing the `children` prop from the component. The children prop is automatically passed in by the use of the spread operator (`...props`) and is redundant because it is never used in the component. This PR shouldn't affect tests, representation, etc. and is merely a cosmetic change. There is no urgent need to merge this. --- apps/www/public/registry/styles/default/radio-group.json | 2 +- apps/www/public/registry/styles/new-york/radio-group.json | 2 +- apps/www/registry/default/ui/radio-group.tsx | 2 +- apps/www/registry/new-york/ui/radio-group.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) 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/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/registry/default/ui/radio-group.tsx b/apps/www/registry/default/ui/radio-group.tsx index 7a5450aa69c..e9bde179362 100644 --- a/apps/www/registry/default/ui/radio-group.tsx +++ b/apps/www/registry/default/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 ( , React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => { +>(({ className, ...props }, ref) => { return ( Date: Sun, 12 Nov 2023 15:06:12 +0530 Subject: [PATCH 12/12] refactor(calendar): updated css so date doesn't show up selected twice in DatePickerComponent (#1852) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit React Day Picker also has a unique styling distinction that designates the `day_outside` dates as unselected, and the selection of `day_outside` only highlights the dates in the next month. This PR will fix this issue - https://github.com/shadcn-ui/ui/issues/1762 and help with a cleaner UX ✨
| Old Date Range Picker | New Date Range Picker | | ---------------------- | ---------------------- | | ![old](https://github.com/shadcn-ui/ui/assets/7449806/42e9448f-9e38-486c-b65c-cf00ec1ec7c7) | ![new](https://github.com/shadcn-ui/ui/assets/7449806/804f83d7-1b74-474c-8992-2d6d844dfb35) |
#### React Day Picker image --- apps/www/public/registry/styles/default/calendar.json | 2 +- apps/www/public/registry/styles/new-york/calendar.json | 2 +- apps/www/registry/default/ui/calendar.tsx | 6 ++++-- apps/www/registry/new-york/ui/calendar.tsx | 5 +++-- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json index 80a7deaeecf..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/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/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx index 185158b21bc..e04fe19511f 100644 --- a/apps/www/registry/default/ui/calendar.tsx +++ b/apps/www/registry/default/ui/calendar.tsx @@ -36,15 +36,17 @@ function Calendar({ head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", row: "flex w-full mt-2", - cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", + cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: cn( buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100" ), + day_range_end: "day-range-end", 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/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",