diff --git a/apps/v4/app/(create)/components/picker.tsx b/apps/v4/app/(create)/components/picker.tsx index 1a4e7e009b..a8563110a2 100644 --- a/apps/v4/app/(create)/components/picker.tsx +++ b/apps/v4/app/(create)/components/picker.tsx @@ -80,7 +80,7 @@ function PickerLabel({ data-slot="dropdown-menu-label" data-inset={inset} className={cn( - "text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8", + "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8", className )} {...props} @@ -103,7 +103,7 @@ function PickerItem({ data-inset={inset} data-variant={variant} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -128,7 +128,7 @@ function PickerSubTrigger({ data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -180,7 +180,7 @@ function PickerCheckboxItem({ (null) - const resizablePanelRef = React.useRef(null) + const resizablePanelRef = React.useRef(null) // Sync resizable panel with URL param changes. React.useEffect(() => { diff --git a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx index 8f6ed50f02..2ce698b783 100644 --- a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx @@ -8,24 +8,24 @@ export function ResizableDemo() { return (
- +
One
- - - + + +
Two
- +
Three
@@ -34,32 +34,32 @@ export function ResizableDemo() { - +
Sidebar
- +
Content
- +
Header
- +
Content
diff --git a/apps/v4/app/layout.tsx b/apps/v4/app/layout.tsx index c7db90f7ac..9a076b6b99 100644 --- a/apps/v4/app/layout.tsx +++ b/apps/v4/app/layout.tsx @@ -9,7 +9,9 @@ import { ActiveThemeProvider } from "@/components/active-theme" import { Analytics } from "@/components/analytics" import { TailwindIndicator } from "@/components/tailwind-indicator" import { ThemeProvider } from "@/components/theme-provider" +import { TooltipProvider as BaseTooltipProvider } from "@/registry/bases/base/ui/tooltip" import { Toaster } from "@/registry/bases/radix/ui/sonner" +import { TooltipProvider as RadixTooltipProvider } from "@/registry/bases/radix/ui/tooltip" import "@/styles/globals.css" @@ -97,8 +99,12 @@ export default function RootLayout({ - {children} - + + + {children} + + + diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx index 20db7b5931..4d6eb64334 100644 --- a/apps/v4/components/block-viewer.tsx +++ b/apps/v4/components/block-viewer.tsx @@ -16,7 +16,7 @@ import { Tablet, Terminal, } from "lucide-react" -import { type ImperativePanelHandle } from "react-resizable-panels" +import { type PanelImperativeHandle } from "react-resizable-panels" import { type registryItemFileSchema, type registryItemSchema, @@ -68,7 +68,7 @@ type BlockViewerContext = { setView: (view: "code" | "preview") => void activeFile: string | null setActiveFile: (file: string) => void - resizablePanelRef: React.RefObject | null + resizablePanelRef: React.RefObject | null tree: ReturnType | null highlightedFiles: | (z.infer & { @@ -101,7 +101,7 @@ function BlockViewerProvider({ const [activeFile, setActiveFile] = React.useState< BlockViewerContext["activeFile"] >(highlightedFiles?.[0].target ?? null) - const resizablePanelRef = React.useRef(null) + const resizablePanelRef = React.useRef(null) const [iframeKey, setIframeKey] = React.useState(0) return ( @@ -268,19 +268,19 @@ function BlockViewerView({ styleName }: { styleName: Style["name"] }) {
- +
diff --git a/apps/v4/components/code-block-command.tsx b/apps/v4/components/code-block-command.tsx index ee6af1af81..a38a7bba47 100644 --- a/apps/v4/components/code-block-command.tsx +++ b/apps/v4/components/code-block-command.tsx @@ -113,23 +113,16 @@ export function CodeBlockCommand({ })} - - - - - - {hasCopied ? "Copied" : "Copy to Clipboard"} - - + ) } diff --git a/apps/v4/components/code-collapsible-wrapper.tsx b/apps/v4/components/code-collapsible-wrapper.tsx index d9be9e0cb1..a6fd46259b 100644 --- a/apps/v4/components/code-collapsible-wrapper.tsx +++ b/apps/v4/components/code-collapsible-wrapper.tsx @@ -39,7 +39,7 @@ export function CodeCollapsibleWrapper({ {children} diff --git a/apps/v4/components/copy-button.tsx b/apps/v4/components/copy-button.tsx index 26df3d634b..0bf6a0c16d 100644 --- a/apps/v4/components/copy-button.tsx +++ b/apps/v4/components/copy-button.tsx @@ -6,11 +6,6 @@ import { IconCheck, IconCopy } from "@tabler/icons-react" import { trackEvent, type Event } from "@/lib/events" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york-v4/ui/button" -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/registry/new-york-v4/ui/tooltip" export function copyToClipboardWithMeta(value: string, event?: Event) { navigator.clipboard.writeText(value) @@ -24,7 +19,6 @@ export function CopyButton({ className, variant = "ghost", event, - tooltip = "Copy to Clipboard", ...props }: React.ComponentProps & { value: string @@ -35,44 +29,40 @@ export function CopyButton({ const [hasCopied, setHasCopied] = React.useState(false) React.useEffect(() => { - setTimeout(() => { - setHasCopied(false) - }, 2000) - }, []) + if (hasCopied) { + const timer = setTimeout(() => setHasCopied(false), 2000) + return () => clearTimeout(timer) + } + }, [hasCopied]) return ( - - - - - {hasCopied ? "Copied" : tooltip} - + ) } diff --git a/apps/v4/content/docs/components/base/resizable.mdx b/apps/v4/content/docs/components/base/resizable.mdx index cc00257185..7c90653889 100644 --- a/apps/v4/content/docs/components/base/resizable.mdx +++ b/apps/v4/content/docs/components/base/resizable.mdx @@ -71,7 +71,7 @@ import { ``` ```tsx showLineNumbers - + One Two @@ -82,7 +82,7 @@ import { ### Vertical -Use `direction="vertical"` for vertical resizing. +Use `orientation="vertical"` for vertical resizing. @@ -101,3 +101,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl) ## API Reference See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation. + +## Changelog + +### 2025-02-02 `react-resizable-panels` v4 + +Updated to `react-resizable-panels` v4. See the [v4.0.0 release notes](https://github.com/bvaughn/react-resizable-panels/releases/tag/4.0.0) for full details. + +If you're using `react-resizable-panels` primitives directly, note the following changes: + +| v3 | v4 | +| ---------------------------- | ----------------------- | +| `PanelGroup` | `Group` | +| `PanelResizeHandle` | `Separator` | +| `direction` prop | `orientation` prop | +| `defaultSize={50}` | `defaultSize="50%"` | +| `onLayout` | `onLayoutChange` | +| `ImperativePanelHandle` | `PanelImperativeHandle` | +| `ref` prop on Panel | `panelRef` prop | +| `data-panel-group-direction` | `aria-orientation` | + + + The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`, + `ResizableHandle`) remain unchanged. + diff --git a/apps/v4/content/docs/components/base/tooltip.mdx b/apps/v4/content/docs/components/base/tooltip.mdx index 3bddb8a40c..8d1ff4f56a 100644 --- a/apps/v4/content/docs/components/base/tooltip.mdx +++ b/apps/v4/content/docs/components/base/tooltip.mdx @@ -20,10 +20,32 @@ links: + + +Run the following command: + ```bash npx shadcn@latest add tooltip ``` +Add the `TooltipProvider` to the root of your app. + +```tsx title="app/layout.tsx" showLineNumbers {1,7} +import { TooltipProvider } from "@/components/ui/tooltip" + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ) +} +``` + + + @@ -46,6 +68,22 @@ npm install @base-ui/react Update the import paths to match your project setup. +Add the `TooltipProvider` to the root of your app. + +```tsx title="app/layout.tsx" showLineNumbers {1,7} +import { TooltipProvider } from "@/components/ui/tooltip" + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ) +} +``` + diff --git a/apps/v4/content/docs/components/radix/resizable.mdx b/apps/v4/content/docs/components/radix/resizable.mdx index 7eb8442fd8..78ffa09780 100644 --- a/apps/v4/content/docs/components/radix/resizable.mdx +++ b/apps/v4/content/docs/components/radix/resizable.mdx @@ -71,7 +71,7 @@ import { ``` ```tsx showLineNumbers - + One Two @@ -82,7 +82,7 @@ import { ### Vertical -Use `direction="vertical"` for vertical resizing. +Use `orientation="vertical"` for vertical resizing. @@ -101,3 +101,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl) ## API Reference See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation. + +## Changelog + +### 2025-02-02 `react-resizable-panels` v4 + +Updated to `react-resizable-panels` v4. See the [v4.0.0 release notes](https://github.com/bvaughn/react-resizable-panels/releases/tag/4.0.0) for full details. + +If you're using `react-resizable-panels` primitives directly, note the following changes: + +| v3 | v4 | +| ---------------------------- | ----------------------- | +| `PanelGroup` | `Group` | +| `PanelResizeHandle` | `Separator` | +| `direction` prop | `orientation` prop | +| `defaultSize={50}` | `defaultSize="50%"` | +| `onLayout` | `onLayoutChange` | +| `ImperativePanelHandle` | `PanelImperativeHandle` | +| `ref` prop on Panel | `panelRef` prop | +| `data-panel-group-direction` | `aria-orientation` | + + + The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`, + `ResizableHandle`) remain unchanged. + diff --git a/apps/v4/content/docs/components/radix/tooltip.mdx b/apps/v4/content/docs/components/radix/tooltip.mdx index 526e02a9f2..7eaa10c4a8 100644 --- a/apps/v4/content/docs/components/radix/tooltip.mdx +++ b/apps/v4/content/docs/components/radix/tooltip.mdx @@ -20,10 +20,32 @@ links: + + +Run the following command: + ```bash npx shadcn@latest add tooltip ``` +Add the `TooltipProvider` to the root of your app. + +```tsx title="app/layout.tsx" showLineNumbers {1,7} +import { TooltipProvider } from "@/components/ui/tooltip" + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ) +} +``` + + + @@ -46,6 +68,22 @@ npm install radix-ui Update the import paths to match your project setup. +Add the `TooltipProvider` to the root of your app. + +```tsx title="app/layout.tsx" showLineNumbers {1,7} +import { TooltipProvider } from "@/components/ui/tooltip" + +export default function RootLayout({ children }) { + return ( + + + {children} + + + ) +} +``` + diff --git a/apps/v4/examples/base/card-rtl.tsx b/apps/v4/examples/base/card-rtl.tsx index 4ad87df1d5..b581c8e740 100644 --- a/apps/v4/examples/base/card-rtl.tsx +++ b/apps/v4/examples/base/card-rtl.tsx @@ -93,7 +93,7 @@ export function CardRtl() { {t.forgotPassword} diff --git a/apps/v4/examples/base/resizable-demo.tsx b/apps/v4/examples/base/resizable-demo.tsx index aa8d1d71b9..9a719e83df 100644 --- a/apps/v4/examples/base/resizable-demo.tsx +++ b/apps/v4/examples/base/resizable-demo.tsx @@ -7,24 +7,24 @@ import { export default function ResizableDemo() { return ( - +
One
- - - - + + + +
Two
- - + +
Three
diff --git a/apps/v4/examples/base/resizable-handle.tsx b/apps/v4/examples/base/resizable-handle.tsx index 628aa09823..7a3022ef1f 100644 --- a/apps/v4/examples/base/resizable-handle.tsx +++ b/apps/v4/examples/base/resizable-handle.tsx @@ -7,16 +7,16 @@ import { export default function ResizableHandleDemo() { return ( - +
Sidebar
- +
Content
diff --git a/apps/v4/examples/base/resizable-rtl.tsx b/apps/v4/examples/base/resizable-rtl.tsx index a7417a3fd1..9f13a889c7 100644 --- a/apps/v4/examples/base/resizable-rtl.tsx +++ b/apps/v4/examples/base/resizable-rtl.tsx @@ -44,25 +44,25 @@ export function ResizableRtl() { return ( - +
{t.one}
- - - + + +
{t.two}
- +
{t.three}
diff --git a/apps/v4/examples/base/resizable-vertical.tsx b/apps/v4/examples/base/resizable-vertical.tsx index c638dce216..a2c6c9e778 100644 --- a/apps/v4/examples/base/resizable-vertical.tsx +++ b/apps/v4/examples/base/resizable-vertical.tsx @@ -7,16 +7,16 @@ import { export function ResizableVertical() { return ( - +
Header
- +
Content
diff --git a/apps/v4/examples/base/ui-rtl/accordion.tsx b/apps/v4/examples/base/ui-rtl/accordion.tsx index 8e0e34d020..a08db99529 100644 --- a/apps/v4/examples/base/ui-rtl/accordion.tsx +++ b/apps/v4/examples/base/ui-rtl/accordion.tsx @@ -2,8 +2,7 @@ import { cn } from "@/examples/base/lib/utils" import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { return ( @@ -35,28 +34,18 @@ function AccordionTrigger({ {children} - - diff --git a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx index d61d6bb05b..4ad954efb7 100644 --- a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx +++ b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx @@ -2,8 +2,7 @@ import * as React from "react" import { cn } from "@/examples/base/lib/utils" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react" function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) { return ( @@ -21,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
    svg]:size-3.5", className)} {...props} > - {children ?? ( - - )} + {children ?? } ) } @@ -114,13 +104,7 @@ function BreadcrumbEllipsis({ )} {...props} > - + More ) diff --git a/apps/v4/examples/base/ui-rtl/button-group.tsx b/apps/v4/examples/base/ui-rtl/button-group.tsx index b91d02b710..b5eab407a6 100644 --- a/apps/v4/examples/base/ui-rtl/button-group.tsx +++ b/apps/v4/examples/base/ui-rtl/button-group.tsx @@ -5,14 +5,14 @@ import { useRender } from "@base-ui/react/use-render" import { cva, type VariantProps } from "class-variance-authority" const buttonGroupVariants = cva( - "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", + "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", { variants: { orientation: { horizontal: - "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]]:rounded-e-none", + "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0 *:data-slot:rounded-e-none", vertical: - "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none", + "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none", }, }, defaultVariants: { @@ -70,7 +70,7 @@ function ButtonGroupSeparator({ data-slot="button-group-separator" orientation={orientation} className={cn( - "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", + "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className )} {...props} diff --git a/apps/v4/examples/base/ui-rtl/button.tsx b/apps/v4/examples/base/ui-rtl/button.tsx index 3f60035167..7348869c09 100644 --- a/apps/v4/examples/base/ui-rtl/button.tsx +++ b/apps/v4/examples/base/ui-rtl/button.tsx @@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button" import { cva, type VariantProps } from "class-variance-authority" const buttonVariants = cva( - "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", + "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", { variants: { variant: { diff --git a/apps/v4/examples/base/ui-rtl/calendar.tsx b/apps/v4/examples/base/ui-rtl/calendar.tsx index 4ce08f09fb..feaf0817a7 100644 --- a/apps/v4/examples/base/ui-rtl/calendar.tsx +++ b/apps/v4/examples/base/ui-rtl/calendar.tsx @@ -3,6 +3,11 @@ import * as React from "react" import { cn } from "@/examples/base/lib/utils" import { Button, buttonVariants } from "@/examples/base/ui-rtl/button" +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from "lucide-react" import { DayPicker, getDefaultClassNames, @@ -10,8 +15,6 @@ import { type Locale, } from "react-day-picker" -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" - function Calendar({ className, classNames, @@ -31,7 +34,7 @@ function Calendar({ svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className @@ -110,12 +113,12 @@ function Calendar({ defaultClassNames.day ), range_start: cn( - "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 -z-0 isolate", + "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 z-0 isolate", defaultClassNames.range_start ), range_middle: cn("rounded-none", defaultClassNames.range_middle), range_end: cn( - "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 -z-0 isolate", + "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 z-0 isolate", defaultClassNames.range_end ), today: cn( @@ -147,12 +150,7 @@ function Calendar({ Chevron: ({ className, orientation, ...props }) => { if (orientation === "left") { return ( - @@ -161,12 +159,7 @@ function Calendar({ if (orientation === "right") { return ( - @@ -174,15 +167,7 @@ function Calendar({ } return ( - + ) }, DayButton: ({ ...props }) => ( diff --git a/apps/v4/examples/base/ui-rtl/carousel.tsx b/apps/v4/examples/base/ui-rtl/carousel.tsx index 8be7cce091..277b609c2a 100644 --- a/apps/v4/examples/base/ui-rtl/carousel.tsx +++ b/apps/v4/examples/base/ui-rtl/carousel.tsx @@ -6,8 +6,7 @@ import { Button } from "@/examples/base/ui-rtl/button" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react" type CarouselApi = UseEmblaCarouselType[1] type UseCarouselParameters = Parameters @@ -195,14 +194,7 @@ function CarouselPrevious({ onClick={scrollPrev} {...props} > - + Previous slide ) @@ -232,14 +224,7 @@ function CarouselNext({ onClick={scrollNext} {...props} > - + Next slide ) diff --git a/apps/v4/examples/base/ui-rtl/chart.tsx b/apps/v4/examples/base/ui-rtl/chart.tsx index 35feff3fa3..bdb6daafe9 100644 --- a/apps/v4/examples/base/ui-rtl/chart.tsx +++ b/apps/v4/examples/base/ui-rtl/chart.tsx @@ -172,7 +172,7 @@ function ChartTooltipContent({ return (
    diff --git a/apps/v4/examples/base/ui-rtl/checkbox.tsx b/apps/v4/examples/base/ui-rtl/checkbox.tsx index ad69f21295..06464fd654 100644 --- a/apps/v4/examples/base/ui-rtl/checkbox.tsx +++ b/apps/v4/examples/base/ui-rtl/checkbox.tsx @@ -2,15 +2,14 @@ import { cn } from "@/examples/base/lib/utils" import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { CheckIcon } from "lucide-react" function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { return ( - + ) diff --git a/apps/v4/examples/base/ui-rtl/combobox.tsx b/apps/v4/examples/base/ui-rtl/combobox.tsx index b930985e50..c84369fea0 100644 --- a/apps/v4/examples/base/ui-rtl/combobox.tsx +++ b/apps/v4/examples/base/ui-rtl/combobox.tsx @@ -10,8 +10,7 @@ import { InputGroupInput, } from "@/examples/base/ui-rtl/input-group" import { Combobox as ComboboxPrimitive } from "@base-ui/react" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react" const Combobox = ComboboxPrimitive.Root @@ -31,14 +30,7 @@ function ComboboxTrigger({ {...props} > {children} - + ) } @@ -51,14 +43,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { className={cn(className)} {...props} > - + ) } @@ -125,7 +110,7 @@ function ComboboxContent({ data-slot="combobox-content" data-chips={!!anchor} className={cn( - "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target group/combobox-content relative max-h-(--available-height) max-h-72 w-(--anchor-width) max-w-(--available-width) min-w-36 min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", + "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className )} {...props} @@ -157,7 +142,7 @@ function ComboboxItem({ } > - + ) @@ -245,7 +223,7 @@ function ComboboxChips({ - + )} diff --git a/apps/v4/examples/base/ui-rtl/command.tsx b/apps/v4/examples/base/ui-rtl/command.tsx index 0f4aab2d5f..6f841444e6 100644 --- a/apps/v4/examples/base/ui-rtl/command.tsx +++ b/apps/v4/examples/base/ui-rtl/command.tsx @@ -11,8 +11,7 @@ import { } from "@/examples/base/ui-rtl/dialog" import { InputGroup, InputGroupAddon } from "@/examples/base/ui-rtl/input-group" import { Command as CommandPrimitive } from "cmdk" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { CheckIcon, SearchIcon } from "lucide-react" function Command({ className, @@ -79,14 +78,7 @@ function CommandInput({ {...props} /> - +
    @@ -130,7 +122,7 @@ function CommandGroup({ {children} - + ) } diff --git a/apps/v4/examples/base/ui-rtl/context-menu.tsx b/apps/v4/examples/base/ui-rtl/context-menu.tsx index 9d5ca06de5..cb5e590224 100644 --- a/apps/v4/examples/base/ui-rtl/context-menu.tsx +++ b/apps/v4/examples/base/ui-rtl/context-menu.tsx @@ -3,8 +3,7 @@ import * as React from "react" import { cn } from "@/examples/base/lib/utils" import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { CheckIcon, ChevronRightIcon } from "lucide-react" function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) { return @@ -81,7 +80,7 @@ function ContextMenuLabel({ data-slot="context-menu-label" data-inset={inset} className={cn( - "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8", + "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7", className )} {...props} @@ -104,7 +103,7 @@ function ContextMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -131,20 +130,13 @@ function ContextMenuSubTrigger({ data-slot="context-menu-sub-trigger" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} > {children} - + ) } @@ -166,13 +158,17 @@ function ContextMenuCheckboxItem({ className, children, checked, + inset, ...props -}: ContextMenuPrimitive.CheckboxItem.Props) { +}: ContextMenuPrimitive.CheckboxItem.Props & { + inset?: boolean +}) { return ( - + {children} @@ -208,26 +198,24 @@ function ContextMenuRadioGroup({ function ContextMenuRadioItem({ className, children, + inset, ...props -}: ContextMenuPrimitive.RadioItem.Props) { +}: ContextMenuPrimitive.RadioItem.Props & { + inset?: boolean +}) { return ( - + {children} diff --git a/apps/v4/examples/base/ui-rtl/dialog.tsx b/apps/v4/examples/base/ui-rtl/dialog.tsx index 2c3cfe0ed0..89e0371312 100644 --- a/apps/v4/examples/base/ui-rtl/dialog.tsx +++ b/apps/v4/examples/base/ui-rtl/dialog.tsx @@ -4,8 +4,7 @@ import * as React from "react" import { cn } from "@/examples/base/lib/utils" import { Button } from "@/examples/base/ui-rtl/button" import { Dialog as DialogPrimitive } from "@base-ui/react/dialog" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { XIcon } from "lucide-react" function Dialog({ ...props }: DialogPrimitive.Root.Props) { return @@ -70,13 +69,7 @@ function DialogContent({ /> } > - + Close )} diff --git a/apps/v4/examples/base/ui-rtl/drawer.tsx b/apps/v4/examples/base/ui-rtl/drawer.tsx index 69399aa4c2..b43af4ad62 100644 --- a/apps/v4/examples/base/ui-rtl/drawer.tsx +++ b/apps/v4/examples/base/ui-rtl/drawer.tsx @@ -60,7 +60,7 @@ function DrawerContent({ )} {...props} > -
    +
    {children} diff --git a/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx b/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx index a5cd59f2cc..0e3952c816 100644 --- a/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx +++ b/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx @@ -3,8 +3,7 @@ import * as React from "react" import { cn } from "@/examples/base/lib/utils" import { Menu as MenuPrimitive } from "@base-ui/react/menu" - -import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" +import { CheckIcon, ChevronRightIcon } from "lucide-react" function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) { return @@ -68,7 +67,7 @@ function DropdownMenuLabel({ data-slot="dropdown-menu-label" data-inset={inset} className={cn( - "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8", + "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7", className )} {...props} @@ -91,7 +90,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -116,20 +115,13 @@ function DropdownMenuSubTrigger({ data-slot="dropdown-menu-sub-trigger" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} > {children} - + ) } @@ -162,13 +154,17 @@ function DropdownMenuCheckboxItem({ className, children, checked, + inset, ...props -}: MenuPrimitive.CheckboxItem.Props) { +}: MenuPrimitive.CheckboxItem.Props & { + inset?: boolean +}) { return ( - + {children} @@ -205,13 +195,17 @@ function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) { function DropdownMenuRadioItem({ className, children, + inset, ...props -}: MenuPrimitive.RadioItem.Props) { +}: MenuPrimitive.RadioItem.Props & { + inset?: boolean +}) { return ( - + {children} diff --git a/apps/v4/examples/base/ui-rtl/field.tsx b/apps/v4/examples/base/ui-rtl/field.tsx index 77d1bb4ab7..3d4ed83c10 100644 --- a/apps/v4/examples/base/ui-rtl/field.tsx +++ b/apps/v4/examples/base/ui-rtl/field.tsx @@ -42,7 +42,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
    [data-slot=field-group]]:gap-4", + "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className )} {...props} @@ -55,11 +55,11 @@ const fieldVariants = cva( { variants: { orientation: { - vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto", + vertical: "flex-col *:w-full [&>.sr-only]:w-auto", horizontal: - "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", + "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", responsive: - "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", + "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", }, }, defaultVariants: { @@ -105,7 +105,7 @@ function FieldLabel({