@wealthx/shadcn 1.1.0 → 1.2.1

package/src/components/ui/dialog.tsx

@@ -9,47 +9,47 @@
  *   - DialogFooter:   `border-t border-border pt-4` — separator above footer
  *   - Close button:   no radius, `hover:bg-foreground/5`, `focus:ring-border`
  */
-import { type ReactElement } from "react"
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
-import { buttonVariants } from "@/components/ui/button"
-
-export type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>
-
-function Dialog({
-  ...props
-}: DialogProps): ReactElement {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+import { type ReactElement } from "react";
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
+import { buttonVariants } from "@/components/ui/button";
+
+export type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+
+function Dialog({ ...props }: DialogProps): ReactElement {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-export type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>
+export type DialogTriggerProps = React.ComponentProps<
+  typeof DialogPrimitive.Trigger
+>;
 
-function DialogTrigger({
-  ...props
-}: DialogTriggerProps): ReactElement {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+function DialogTrigger({ ...props }: DialogTriggerProps): ReactElement {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-export type DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>
+export type DialogPortalProps = React.ComponentProps<
+  typeof DialogPrimitive.Portal
+>;
 
-function DialogPortal({
-  ...props
-}: DialogPortalProps): ReactElement {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+function DialogPortal({ ...props }: DialogPortalProps): ReactElement {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-export type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>
+export type DialogCloseProps = React.ComponentProps<
+  typeof DialogPrimitive.Close
+>;
 
-function DialogClose({
-  ...props
-}: DialogCloseProps): ReactElement {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+function DialogClose({ ...props }: DialogCloseProps): ReactElement {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-export type DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>
+export type DialogOverlayProps = React.ComponentProps<
+  typeof DialogPrimitive.Backdrop
+>;
 
 function DialogOverlay({
   className,
@@ -60,17 +60,19 @@ function DialogOverlay({
       className={cn(
         // WealthX: foreground/50 scrim (matches Figma — foreground token at 50% opacity)
         "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
-        className
+        className,
       )}
       data-slot="dialog-overlay"
       {...props}
     />
-  )
+  );
 }
 
-export type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Popup> & {
-  showCloseButton?: boolean
-}
+export type DialogContentProps = React.ComponentProps<
+  typeof DialogPrimitive.Popup
+> & {
+  showCloseButton?: boolean;
+};
 
 function DialogContent({
   className,
@@ -82,19 +84,20 @@ function DialogContent({
   const themeVars = useThemeVars();
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay style={themeVars as React.CSSProperties} />
       <DialogPrimitive.Popup
         className={cn(
           // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
           "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none 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 sm:max-w-lg",
-          className
+          className,
         )}
         data-slot="dialog-content"
         style={{ ...themeVars, ...style } as React.CSSProperties}
         {...props}
       >
         {children}
-        {showCloseButton ? <DialogPrimitive.Close
+        {showCloseButton ? (
+          <DialogPrimitive.Close
             className="absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
             // WealthX: removed rounded-xs (sharp), replaced opacity fade with hover:bg-foreground/5,
             // focus ring uses border color (subtle, matches Figma DialogClose focus state)
@@ -102,15 +105,19 @@ function DialogContent({
           >
             <XIcon />
             <span className="sr-only">Close</span>
-          </DialogPrimitive.Close> : null}
+          </DialogPrimitive.Close>
+        ) : null}
       </DialogPrimitive.Popup>
     </DialogPortal>
-  )
+  );
 }
 
-export type DialogHeaderProps = React.ComponentProps<"div">
+export type DialogHeaderProps = React.ComponentProps<"div">;
 
-function DialogHeader({ className, ...props }: DialogHeaderProps): ReactElement {
+function DialogHeader({
+  className,
+  ...props
+}: DialogHeaderProps): ReactElement {
   return (
     <div
       // WealthX: always left-aligned (no sm:text-left — no centered variant)
@@ -118,12 +125,12 @@ function DialogHeader({ className, ...props }: DialogHeaderProps): ReactElement
       data-slot="dialog-header"
       {...props}
     />
-  )
+  );
 }
 
 export type DialogFooterProps = React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
-}
+  showCloseButton?: boolean;
+};
 
 function DialogFooter({
   className,
@@ -136,37 +143,40 @@ function DialogFooter({
       className={cn(
         // WealthX: always row layout, right-aligned, separator above footer
         "flex flex-row justify-end gap-2 border-t border-border pt-4",
-        className
+        className,
       )}
       data-slot="dialog-footer"
       {...props}
     >
       {children}
-      {showCloseButton ? <DialogPrimitive.Close
+      {showCloseButton ? (
+        <DialogPrimitive.Close
           className={cn(buttonVariants({ variant: "outline" }))}
         >
           Close
-        </DialogPrimitive.Close> : null}
+        </DialogPrimitive.Close>
+      ) : null}
     </div>
-  )
+  );
 }
 
-export type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>
+export type DialogTitleProps = React.ComponentProps<
+  typeof DialogPrimitive.Title
+>;
 
-function DialogTitle({
-  className,
-  ...props
-}: DialogTitleProps): ReactElement {
+function DialogTitle({ className, ...props }: DialogTitleProps): ReactElement {
   return (
     <DialogPrimitive.Title
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-h5 leading-none", className)}
       data-slot="dialog-title"
       {...props}
     />
-  )
+  );
 }
 
-export type DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>
+export type DialogDescriptionProps = React.ComponentProps<
+  typeof DialogPrimitive.Description
+>;
 
 function DialogDescription({
   className,
@@ -174,11 +184,11 @@ function DialogDescription({
 }: DialogDescriptionProps): ReactElement {
   return (
     <DialogPrimitive.Description
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body-small text-muted-foreground", className)}
       data-slot="dialog-description"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -192,4 +202,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};

package/src/components/ui/drawer.tsx

@@ -8,45 +8,45 @@
  *   - DrawerHeader:   removed `text-center` for top/bottom — always left-aligned per DS rule
  *   - DrawerTitle:    added `text-lg` — matches Figma Text-lg/Semibold
  */
-import { type ReactElement } from "react"
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
 
-export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
 
-function Drawer({
-  ...props
-}: DrawerProps): ReactElement {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+function Drawer({ ...props }: DrawerProps): ReactElement {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
-export type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>
+export type DrawerTriggerProps = React.ComponentProps<
+  typeof DrawerPrimitive.Trigger
+>;
 
-function DrawerTrigger({
-  ...props
-}: DrawerTriggerProps): ReactElement {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+function DrawerTrigger({ ...props }: DrawerTriggerProps): ReactElement {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
-export type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>
+export type DrawerPortalProps = React.ComponentProps<
+  typeof DrawerPrimitive.Portal
+>;
 
-function DrawerPortal({
-  ...props
-}: DrawerPortalProps): ReactElement {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+function DrawerPortal({ ...props }: DrawerPortalProps): ReactElement {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
-export type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>
+export type DrawerCloseProps = React.ComponentProps<
+  typeof DrawerPrimitive.Close
+>;
 
-function DrawerClose({
-  ...props
-}: DrawerCloseProps): ReactElement {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+function DrawerClose({ ...props }: DrawerCloseProps): ReactElement {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
-export type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>
+export type DrawerOverlayProps = React.ComponentProps<
+  typeof DrawerPrimitive.Overlay
+>;
 
 function DrawerOverlay({
   className,
@@ -57,15 +57,17 @@ function DrawerOverlay({
       className={cn(
         // WealthX: foreground/50 scrim — matches Figma overlay token
         "fixed inset-0 z-50 bg-foreground/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
+        className,
       )}
       data-slot="drawer-overlay"
       {...props}
     />
-  )
+  );
 }
 
-export type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>
+export type DrawerContentProps = React.ComponentProps<
+  typeof DrawerPrimitive.Content
+>;
 
 function DrawerContent({
   className,
@@ -85,7 +87,7 @@ function DrawerContent({
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
+          className,
         )}
         data-slot="drawer-content"
         style={{ ...themeVars, ...style } as React.CSSProperties}
@@ -96,12 +98,15 @@ function DrawerContent({
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  )
+  );
 }
 
-export type DrawerHeaderProps = React.ComponentProps<"div">
+export type DrawerHeaderProps = React.ComponentProps<"div">;
 
-function DrawerHeader({ className, ...props }: DrawerHeaderProps): ReactElement {
+function DrawerHeader({
+  className,
+  ...props
+}: DrawerHeaderProps): ReactElement {
   return (
     <div
       // WealthX: always left-aligned — no text-center for any direction
@@ -109,38 +114,42 @@ function DrawerHeader({ className, ...props }: DrawerHeaderProps): ReactElement
       data-slot="drawer-header"
       {...props}
     />
-  )
+  );
 }
 
-export type DrawerFooterProps = React.ComponentProps<"div">
+export type DrawerFooterProps = React.ComponentProps<"div">;
 
-function DrawerFooter({ className, ...props }: DrawerFooterProps): ReactElement {
+function DrawerFooter({
+  className,
+  ...props
+}: DrawerFooterProps): ReactElement {
   return (
     <div
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       data-slot="drawer-footer"
       {...props}
     />
-  )
+  );
 }
 
-export type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>
+export type DrawerTitleProps = React.ComponentProps<
+  typeof DrawerPrimitive.Title
+>;
 
-function DrawerTitle({
-  className,
-  ...props
-}: DrawerTitleProps): ReactElement {
+function DrawerTitle({ className, ...props }: DrawerTitleProps): ReactElement {
   return (
     <DrawerPrimitive.Title
       // WealthX: text-lg matches Figma Text-lg/Semibold
-      className={cn("text-lg font-semibold text-foreground", className)}
+      className={cn("text-h5 text-foreground", className)}
       data-slot="drawer-title"
       {...props}
     />
-  )
+  );
 }
 
-export type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>
+export type DrawerDescriptionProps = React.ComponentProps<
+  typeof DrawerPrimitive.Description
+>;
 
 function DrawerDescription({
   className,
@@ -148,11 +157,11 @@ function DrawerDescription({
 }: DrawerDescriptionProps): ReactElement {
   return (
     <DrawerPrimitive.Description
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body-small text-muted-foreground", className)}
       data-slot="drawer-description"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -166,4 +175,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};