@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/calendar.tsx

@@ -1,17 +1,17 @@
-import { type ReactElement } from "react"
-import * as React from "react"
+import { type ReactElement } from "react";
+import * as React from "react";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from "lucide-react"
+} from "lucide-react";
 import {
   DayPicker,
   getDefaultClassNames,
   type DayButton,
-} from "react-day-picker"
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+} from "react-day-picker";
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
 
 /**
  * Calendar — shadcn/WealthX
@@ -25,16 +25,16 @@ import { Button, buttonVariants } from "@/components/ui/button"
  */
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+};
 
 function CalendarRoot({
   className,
   rootRef,
   ...props
 }: {
-  className?: string
-  rootRef?: React.Ref<HTMLDivElement>
+  className?: string;
+  rootRef?: React.Ref<HTMLDivElement>;
 } & React.ComponentProps<"div">): ReactElement {
   return (
     <div
@@ -43,7 +43,7 @@ function CalendarRoot({
       ref={rootRef}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarChevron({
@@ -51,27 +51,18 @@ function CalendarChevron({
   orientation,
   ...props
 }: {
-  className?: string
-  orientation?: string
+  className?: string;
+  orientation?: string;
 } & React.ComponentProps<"svg">): ReactElement {
   if (orientation === "left") {
-    return (
-      <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-    )
+    return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
   }
 
   if (orientation === "right") {
-    return (
-      <ChevronRightIcon
-        className={cn("size-4", className)}
-        {...props}
-      />
-    )
+    return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
   }
 
-  return (
-    <ChevronDownIcon className={cn("size-4", className)} {...props} />
-  )
+  return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
 }
 
 function CalendarWeekNumber({
@@ -84,7 +75,7 @@ function CalendarWeekNumber({
         {children}
       </div>
     </td>
-  )
+  );
 }
 
 function Calendar({
@@ -97,7 +88,7 @@ function Calendar({
   components,
   ...props
 }: CalendarProps): ReactElement {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
@@ -106,85 +97,82 @@ function Calendar({
         "group/calendar bg-background p-3 font-sans border border-border shadow-sm [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+        className,
       )}
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
           "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
+          defaultClassNames.months,
         ),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
+          defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
           "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-label-small",
+          defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
           "relative border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
-          defaultClassNames.dropdown_root
+          defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
           "absolute inset-0 bg-popover opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdown,
         ),
         caption_label: cn(
-          "font-medium select-none",
+          "select-none",
           captionLayout === "label"
-            ? "text-sm"
-            : "flex h-8 items-center gap-1 pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
-          defaultClassNames.caption_label
+            ? "text-label-small"
+            : "flex h-8 items-center gap-1 pr-1 pl-2 text-label-small [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label,
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 text-[0.8rem] font-normal text-muted-foreground select-none",
-          defaultClassNames.weekday
+          "flex-1 text-caption font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday,
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
           "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
+          defaultClassNames.week_number_header,
         ),
         week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
-          defaultClassNames.week_number
+          "text-caption text-muted-foreground select-none",
+          defaultClassNames.week_number,
         ),
         day: cn(
           "group/day relative aspect-square h-full w-full p-0 text-center select-none",
-          defaultClassNames.day
+          defaultClassNames.day,
         ),
         range_start: cn("bg-accent", defaultClassNames.range_start),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground",
-          defaultClassNames.today
-        ),
+        today: cn("bg-accent text-accent-foreground", defaultClassNames.today),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          defaultClassNames.outside,
         ),
         disabled: cn(
           "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          defaultClassNames.disabled,
         ),
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
@@ -204,10 +192,10 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       {...props}
     />
-  )
+  );
 }
 
-export type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>
+export type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>;
 
 function CalendarDayButton({
   className,
@@ -215,26 +203,24 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: CalendarDayButtonProps): ReactElement {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   const selectedSingle =
-    modifiers.selected &&
-    !modifiers.range_start &&
-    !modifiers.range_end
+    modifiers.selected && !modifiers.range_start && !modifiers.range_end
       ? !modifiers.range_middle
-      : null
+      : null;
 
   return (
     <Button
       className={cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal rounded-none group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-caption [&>span]:opacity-70",
         defaultClassNames.day,
-        className
+        className,
       )}
       data-day={day.date.toLocaleDateString()}
       data-range-end={modifiers.range_end}
@@ -246,7 +232,7 @@ function CalendarDayButton({
       variant="ghost"
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

package/src/components/ui/card.tsx

@@ -1,77 +1,80 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { cn } from "@/lib/utils"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-export type CardProps = React.ComponentProps<"div">
+export type CardProps = React.ComponentProps<"div">;
 
 function Card({ className, ...props }: CardProps): ReactElement {
   return (
     <div
       className={cn(
         "flex flex-col gap-6 border bg-card py-6 text-card-foreground shadow-sm",
-        className
+        className,
       )}
       data-slot="card"
       {...props}
     />
-  )
+  );
 }
 
-export type CardHeaderProps = React.ComponentProps<"div">
+export type CardHeaderProps = React.ComponentProps<"div">;
 
 function CardHeader({ className, ...props }: CardHeaderProps): ReactElement {
   return (
     <div
       className={cn(
         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
+        className,
       )}
       data-slot="card-header"
       {...props}
     />
-  )
+  );
 }
 
-export type CardTitleProps = React.ComponentProps<"div">
+export type CardTitleProps = React.ComponentProps<"div">;
 
 function CardTitle({ className, ...props }: CardTitleProps): ReactElement {
   return (
     <div
-      className={cn("leading-none font-semibold", className)}
+      className={cn("text-label-large", className)}
       data-slot="card-title"
       {...props}
     />
-  )
+  );
 }
 
-export type CardDescriptionProps = React.ComponentProps<"div">
+export type CardDescriptionProps = React.ComponentProps<"div">;
 
-function CardDescription({ className, ...props }: CardDescriptionProps): ReactElement {
+function CardDescription({
+  className,
+  ...props
+}: CardDescriptionProps): ReactElement {
   return (
     <div
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-body-small text-muted-foreground", className)}
       data-slot="card-description"
       {...props}
     />
-  )
+  );
 }
 
-export type CardActionProps = React.ComponentProps<"div">
+export type CardActionProps = React.ComponentProps<"div">;
 
 function CardAction({ className, ...props }: CardActionProps): ReactElement {
   return (
     <div
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
+        className,
       )}
       data-slot="card-action"
       {...props}
     />
-  )
+  );
 }
 
-export type CardContentProps = React.ComponentProps<"div">
+export type CardContentProps = React.ComponentProps<"div">;
 
 function CardContent({ className, ...props }: CardContentProps): ReactElement {
   return (
@@ -80,10 +83,10 @@ function CardContent({ className, ...props }: CardContentProps): ReactElement {
       data-slot="card-content"
       {...props}
     />
-  )
+  );
 }
 
-export type CardFooterProps = React.ComponentProps<"div">
+export type CardFooterProps = React.ComponentProps<"div">;
 
 function CardFooter({ className, ...props }: CardFooterProps): ReactElement {
   return (
@@ -92,7 +95,7 @@ function CardFooter({ className, ...props }: CardFooterProps): ReactElement {
       data-slot="card-footer"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -103,4 +106,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};