@wealthx/shadcn 1.1.0 → 1.2.0

package/src/components/ui/dropdown-menu.tsx

@@ -11,47 +11,44 @@
  *   - DropdownMenuRadioItem: rounded-sm → rounded-none; added data-checked:bg-primary/10
  *   - DropdownMenuSubContent: rounded-md → rounded-none
  */
-import { type ReactElement } from "react"
-import * as React from "react"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
 
-export type DropdownMenuProps = React.ComponentProps<typeof MenuPrimitive.Root>
+export type DropdownMenuProps = React.ComponentProps<typeof MenuPrimitive.Root>;
 
-function DropdownMenu({
-  ...props
-}: DropdownMenuProps): ReactElement {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+function DropdownMenu({ ...props }: DropdownMenuProps): ReactElement {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-export type DropdownMenuPortalProps = React.ComponentProps<typeof MenuPrimitive.Portal>
+export type DropdownMenuPortalProps = React.ComponentProps<
+  typeof MenuPrimitive.Portal
+>;
 
 function DropdownMenuPortal({
   ...props
 }: DropdownMenuPortalProps): ReactElement {
-  return (
-    <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-export type DropdownMenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>
+export type DropdownMenuTriggerProps = React.ComponentProps<
+  typeof MenuPrimitive.Trigger
+>;
 
 function DropdownMenuTrigger({
   ...props
 }: DropdownMenuTriggerProps): ReactElement {
-  return (
-    <MenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
 }
 
-export type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> & {
-  sideOffset?: number
-}
+export type DropdownMenuContentProps = React.ComponentProps<
+  typeof MenuPrimitive.Popup
+> & {
+  sideOffset?: number;
+};
 
 function DropdownMenuContent({
   className,
@@ -66,7 +63,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           className={cn(
             "z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-none border bg-popover p-1 text-popover-foreground shadow-md 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 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            className
+            className,
           )}
           data-slot="dropdown-menu-content"
           style={{ ...themeVars, ...style } as React.CSSProperties}
@@ -74,23 +71,23 @@ function DropdownMenuContent({
         />
       </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
-  )
+  );
 }
 
-export type DropdownMenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>
+export type DropdownMenuGroupProps = React.ComponentProps<
+  typeof MenuPrimitive.Group
+>;
 
-function DropdownMenuGroup({
-  ...props
-}: DropdownMenuGroupProps): ReactElement {
-  return (
-    <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+function DropdownMenuGroup({ ...props }: DropdownMenuGroupProps): ReactElement {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
-export type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}
+export type DropdownMenuItemProps = React.ComponentProps<
+  typeof MenuPrimitive.Item
+> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+};
 
 function DropdownMenuItem({
   className,
@@ -101,18 +98,20 @@ function DropdownMenuItem({
   return (
     <MenuPrimitive.Item
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-body-small outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className,
       )}
       data-inset={inset}
       data-slot="dropdown-menu-item"
       data-variant={variant}
       {...props}
     />
-  )
+  );
 }
 
-export type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof MenuPrimitive.CheckboxItem>
+export type DropdownMenuCheckboxItemProps = React.ComponentProps<
+  typeof MenuPrimitive.CheckboxItem
+>;
 
 function DropdownMenuCheckboxItem({
   className,
@@ -124,8 +123,8 @@ function DropdownMenuCheckboxItem({
     <MenuPrimitive.CheckboxItem
       checked={checked}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-body-small outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       data-slot="dropdown-menu-checkbox-item"
       {...props}
@@ -137,10 +136,12 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </MenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
-export type DropdownMenuRadioGroupProps = React.ComponentProps<typeof MenuPrimitive.RadioGroup>
+export type DropdownMenuRadioGroupProps = React.ComponentProps<
+  typeof MenuPrimitive.RadioGroup
+>;
 
 function DropdownMenuRadioGroup({
   ...props
@@ -150,10 +151,12 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
-export type DropdownMenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem>
+export type DropdownMenuRadioItemProps = React.ComponentProps<
+  typeof MenuPrimitive.RadioItem
+>;
 
 function DropdownMenuRadioItem({
   className,
@@ -163,8 +166,8 @@ function DropdownMenuRadioItem({
   return (
     <MenuPrimitive.RadioItem
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-body-small outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       data-slot="dropdown-menu-radio-item"
       {...props}
@@ -176,12 +179,14 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </MenuPrimitive.RadioItem>
-  )
+  );
 }
 
-export type DropdownMenuLabelProps = React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {
-  inset?: boolean
-}
+export type DropdownMenuLabelProps = React.ComponentProps<
+  typeof MenuPrimitive.GroupLabel
+> & {
+  inset?: boolean;
+};
 
 function DropdownMenuLabel({
   className,
@@ -190,18 +195,17 @@ function DropdownMenuLabel({
 }: DropdownMenuLabelProps): ReactElement {
   return (
     <MenuPrimitive.GroupLabel
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
-        className
-      )}
+      className={cn("px-2 py-1.5 text-label-medium data-inset:pl-8", className)}
       data-inset={inset}
       data-slot="dropdown-menu-label"
       {...props}
     />
-  )
+  );
 }
 
-export type DropdownMenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>
+export type DropdownMenuSeparatorProps = React.ComponentProps<
+  typeof MenuPrimitive.Separator
+>;
 
 function DropdownMenuSeparator({
   className,
@@ -213,10 +217,10 @@ function DropdownMenuSeparator({
       data-slot="dropdown-menu-separator"
       {...props}
     />
-  )
+  );
 }
 
-export type DropdownMenuShortcutProps = React.ComponentProps<"span">
+export type DropdownMenuShortcutProps = React.ComponentProps<"span">;
 
 function DropdownMenuShortcut({
   className,
@@ -225,26 +229,28 @@ function DropdownMenuShortcut({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        "ml-auto text-caption tracking-widest text-muted-foreground",
+        className,
       )}
       data-slot="dropdown-menu-shortcut"
       {...props}
     />
-  )
+  );
 }
 
-export type DropdownMenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>
+export type DropdownMenuSubProps = React.ComponentProps<
+  typeof MenuPrimitive.SubmenuRoot
+>;
 
-function DropdownMenuSub({
-  ...props
-}: DropdownMenuSubProps): ReactElement {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+function DropdownMenuSub({ ...props }: DropdownMenuSubProps): ReactElement {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
-export type DropdownMenuSubTriggerProps = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
-  inset?: boolean
-}
+export type DropdownMenuSubTriggerProps = React.ComponentProps<
+  typeof MenuPrimitive.SubmenuTrigger
+> & {
+  inset?: boolean;
+};
 
 function DropdownMenuSubTrigger({
   className,
@@ -255,8 +261,8 @@ function DropdownMenuSubTrigger({
   return (
     <MenuPrimitive.SubmenuTrigger
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-body-small outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
       )}
       data-inset={inset}
       data-slot="dropdown-menu-sub-trigger"
@@ -265,12 +271,14 @@ function DropdownMenuSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </MenuPrimitive.SubmenuTrigger>
-  )
+  );
 }
 
-export type DropdownMenuSubContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> & {
-  sideOffset?: number
-}
+export type DropdownMenuSubContentProps = React.ComponentProps<
+  typeof MenuPrimitive.Popup
+> & {
+  sideOffset?: number;
+};
 
 function DropdownMenuSubContent({
   className,
@@ -285,7 +293,7 @@ function DropdownMenuSubContent({
         <MenuPrimitive.Popup
           className={cn(
             "z-50 min-w-[8rem] overflow-hidden rounded-none border bg-popover p-1 text-popover-foreground shadow-lg 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 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            className
+            className,
           )}
           data-slot="dropdown-menu-sub-content"
           style={{ ...themeVars, ...style } as React.CSSProperties}
@@ -293,7 +301,7 @@ function DropdownMenuSubContent({
         />
       </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
-  )
+  );
 }
 
 export {
@@ -312,4 +320,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};

package/src/components/ui/empty.tsx

@@ -1,7 +1,7 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 /**
  * Empty — WealthX DS (shadcn registry base)
@@ -11,34 +11,34 @@ import { cn } from "@/lib/utils"
  *   - `rounded-lg` removed — sharp corners per WealthX DS
  */
 
-export type EmptyProps = React.ComponentProps<"div">
+export type EmptyProps = React.ComponentProps<"div">;
 
 function Empty({ className, ...props }: EmptyProps): ReactElement {
   return (
     <div
       className={cn(
         "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 border border-dashed p-6 text-center text-balance md:p-12",
-        className
+        className,
       )}
       data-slot="empty"
       {...props}
     />
-  )
+  );
 }
 
-export type EmptyHeaderProps = React.ComponentProps<"div">
+export type EmptyHeaderProps = React.ComponentProps<"div">;
 
 function EmptyHeader({ className, ...props }: EmptyHeaderProps): ReactElement {
   return (
     <div
       className={cn(
         "flex max-w-sm flex-col items-center gap-2 text-center",
-        className
+        className,
       )}
       data-slot="empty-header"
       {...props}
     />
-  )
+  );
 }
 
 const emptyMediaVariants = cva(
@@ -53,10 +53,11 @@ const emptyMediaVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
-export type EmptyMediaProps = React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>
+export type EmptyMediaProps = React.ComponentProps<"div"> &
+  VariantProps<typeof emptyMediaVariants>;
 
 function EmptyMedia({
   className,
@@ -70,22 +71,22 @@ function EmptyMedia({
       data-variant={variant}
       {...props}
     />
-  )
+  );
 }
 
-export type EmptyTitleProps = React.ComponentProps<"div">
+export type EmptyTitleProps = React.ComponentProps<"div">;
 
 function EmptyTitle({ className, ...props }: EmptyTitleProps): ReactElement {
   return (
     <div
-      className={cn("text-lg font-medium tracking-tight", className)}
+      className={cn("text-h5", className)}
       data-slot="empty-title"
       {...props}
     />
-  )
+  );
 }
 
-export type EmptyDescriptionProps = React.ComponentProps<"div">
+export type EmptyDescriptionProps = React.ComponentProps<"div">;
 
 function EmptyDescription({
   className,
@@ -94,28 +95,31 @@ function EmptyDescription({
   return (
     <div
       className={cn(
-        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
+        "text-body-small leading-relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
       )}
       data-slot="empty-description"
       {...props}
     />
-  )
+  );
 }
 
-export type EmptyContentProps = React.ComponentProps<"div">
+export type EmptyContentProps = React.ComponentProps<"div">;
 
-function EmptyContent({ className, ...props }: EmptyContentProps): ReactElement {
+function EmptyContent({
+  className,
+  ...props
+}: EmptyContentProps): ReactElement {
   return (
     <div
       className={cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        className
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-body-small text-balance",
+        className,
       )}
       data-slot="empty-content"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -125,4 +129,4 @@ export {
   EmptyDescription,
   EmptyContent,
   EmptyMedia,
-}
+};