@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5

package/src/components/button-group.tsx

@@ -1,14 +1,10 @@
-"use client";
-
-import type { ButtonGroupVariants } from "#/variants/button-group";
+import { Slot } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
+import { Separator } from "#/components/separator";
 import { cn } from "#/lib/utils";
-
+import type { ButtonGroupVariants } from "#/variants/button-group";
 import { buttonGroupVariants } from "#/variants/button-group";
-import { Slot } from "@radix-ui/react-slot";
-
-import { Separator } from "#/components/separator";
 
 /* -----------------------------------------------------------------------------
  * Component: ButtonGroup
@@ -48,22 +44,13 @@ interface ButtonGroupTextProps extends ComponentProps<"div"> {
 /**
  * @since 0.3.16-canary.0
  */
-function ButtonGroupText({
-  asChild = false,
-  className,
-  ...props
-}: ButtonGroupTextProps): JSX.Element {
-  const Component = asChild ? Slot : "div";
+function ButtonGroupText({ asChild = false, className, ...props }: ButtonGroupTextProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "div";
 
   return (
     <Component
       className={cn(
-        "flex items-center gap-2",
-        "px-4",
-        "rounded-lg border",
-        "bg-muted shadow-xs",
-        "text-sm font-medium",
-        "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -90,7 +77,10 @@ function ButtonGroupSeparator({
 }: ButtonGroupSeparatorProps): JSX.Element {
   return (
     <Separator
-      className={cn("relative self-stretch", "bg-input", "data-vertical:h-auto", "!m-0", className)}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
       data-slot="button-group-separator"
       orientation={orientation}
       {...props}

package/src/components/button.tsx

@@ -1,8 +1,7 @@
-import type { ButtonVariants } from "#/variants/button";
+import { Slot } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
-import { Slot } from "@radix-ui/react-slot";
-
+import type { ButtonVariants } from "#/variants/button";
 import { buttonVariants } from "#/variants/button";
 
 /* -----------------------------------------------------------------------------
@@ -21,40 +20,30 @@ type ButtonProps = ComponentProps<"button"> &
 /**
  * @since 0.3.16-canary.0
  */
-function Button({
-  asChild = false,
-  children,
-  className,
-  size,
-  type = "button",
-  variant,
-  ...props
-}: ButtonProps): JSX.Element {
-  const Comp = asChild ? Slot : "button";
+function Button({ asChild = false, className, size, type = "button", variant, ...props }: ButtonProps): JSX.Element {
+  const Comp = asChild ? Slot.Root : "button";
 
   if (asChild) {
     return (
       <Comp
         className={buttonVariants({ className, size, variant })}
+        data-size={size}
         data-slot="button"
         data-variant={variant}
         {...props}
-      >
-        {children}
-      </Comp>
+      />
     );
   }
 
   return (
     <button
       className={buttonVariants({ className, size, variant })}
+      data-size={size}
       data-slot="button"
       data-variant={variant}
       type={type}
       {...props}
-    >
-      {children}
-    </button>
+    />
   );
 }
 

package/src/components/calendar.tsx

@@ -1,14 +1,11 @@
-"use client";
-
-import type { ComponentProps, JSX } from "react";
-import type { Chevron, DayButton, Root, WeekNumber } from "react-day-picker";
-
-import { cn } from "#/lib/utils";
+import type { Chevron, DayButton, Locale, Root, WeekNumber } from "@daypicker/react";
+import { DayPicker, getDefaultClassNames } from "@daypicker/react";
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
 import { useEffect, useRef } from "react";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
 
 import { Button } from "#/components/button";
+import { cn } from "#/lib/utils";
 import { buttonVariants } from "#/variants/button";
 
 /* -----------------------------------------------------------------------------
@@ -32,6 +29,7 @@ function Calendar({
   classNames,
   components,
   formatters,
+  locale,
   showOutsideDays = true,
   ...props
 }: CalendarProps): JSX.Element {
@@ -41,123 +39,92 @@ function Calendar({
     <DayPicker
       captionLayout={captionLayout}
       className={cn(
-        "group/calendar",
-        "p-3",
-        "bg-background",
-        "in-data-[slot=card-content]:bg-transparent",
-        "in-data-[slot=popover-content]:bg-transparent",
-        "rtl:**:[.rdp-button_next>svg]:rotate-180",
-        "rtl:**:[.rdp-button_previous>svg]:rotate-180",
-        "[--cell-size:--spacing(8)]",
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-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,
       )}
       classNames={{
-        button_next: buttonVariants({
-          variant: buttonVariant,
-          className: [
-            "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-            defaultClassNames.button_next,
-          ],
-        }),
-        button_previous: buttonVariants({
-          variant: buttonVariant,
-          className: [
-            "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-            defaultClassNames.button_previous,
-          ],
-        }),
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", 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),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius) border border-input shadow-xs has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
-          "font-medium",
-          "select-none",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+            : "flex h-8 items-center gap-1 rounded-(--cell-radius) ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label,
         ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] 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),
+        week_number: cn("text-[0.8rem] 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",
-          "[&:last-child[data-selected=true]_button]:rounded-r-md",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)",
           props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
           defaultClassNames.day,
         ),
-        disabled: cn("opacity-50", "text-muted-foreground", defaultClassNames.disabled),
-        dropdown: cn("absolute inset-0", "bg-popover", "opacity-0", defaultClassNames.dropdown),
-        dropdown_root: cn(
-          "relative",
-          "rounded-md border border-input shadow-xs",
-          "has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50",
-          defaultClassNames.dropdown_root,
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5",
-          "text-sm font-medium",
-          defaultClassNames.dropdowns,
+        range_start: cn(
+          "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start,
         ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center",
-          "px-(--cell-size)",
-          defaultClassNames.month_caption,
-        ),
-        months: cn("relative flex flex-col gap-4", "md:flex-row", defaultClassNames.months),
-        nav: cn(
-          "absolute flex w-full items-center justify-between gap-1",
-          "inset-x-0 top-0",
-          defaultClassNames.nav,
-        ),
-        outside: cn(
-          "text-muted-foreground",
-          "aria-selected:text-muted-foreground",
-          defaultClassNames.outside,
-        ),
-        range_end: cn("rounded-r-md", "bg-accent", defaultClassNames.range_end),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_start: cn("rounded-l-md", "bg-accent", defaultClassNames.range_start),
-        root: cn("w-fit", defaultClassNames.root),
-        month_grid: "w-full border-collapse",
+        range_end: cn(
+          "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end,
+        ),
         today: cn(
-          "rounded-md",
-          "bg-accent text-accent-foreground",
-          "data-selected:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today,
         ),
-        week: cn("flex w-full", "mt-2", defaultClassNames.week),
-        week_number: cn(
-          "text-[0.8rem] text-muted-foreground",
-          "select-none",
-          defaultClassNames.week_number,
-        ),
-        week_number_header: cn(
-          "w-(--cell-size)",
-          "select-none",
-          defaultClassNames.week_number_header,
-        ),
-        weekday: cn(
-          "flex-1",
-          "rounded-md",
-          "text-[0.8rem] font-normal text-muted-foreground",
-          "select-none",
-          defaultClassNames.weekday,
-        ),
-        weekdays: cn("flex", defaultClassNames.weekdays),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
         Chevron: CalendarChevron,
-        DayButton: CalendarDayButton,
+        DayButton: (dayButtonProps) => <CalendarDayButton locale={locale} {...dayButtonProps} />,
         Root: CalendarRoot,
         WeekNumber: CalendarWeekNumber,
         ...components,
       }}
       formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
         ...formatters,
       }}
+      locale={locale}
       showOutsideDays={showOutsideDays}
       {...props}
     />
@@ -168,17 +135,13 @@ function Calendar({
  * Component: CalendarChevron (internal)
  * -------------------------------------------------------------------------- */
 
-function CalendarChevron({
-  className,
-  orientation,
-  ...props
-}: ComponentProps<typeof Chevron>): JSX.Element {
+function CalendarChevron({ className, orientation, ...props }: ComponentProps<typeof Chevron>): JSX.Element {
   if (orientation === "left") {
-    return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+    return <ChevronLeftIcon className={cn("size-4 rtl:rotate-180", className)} {...props} />;
   }
 
   if (orientation === "right") {
-    return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+    return <ChevronRightIcon className={cn("size-4 rtl:rotate-180", className)} {...props} />;
   }
 
   return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
@@ -188,23 +151,18 @@ function CalendarChevron({
  * Component: CalendarRoot (internal)
  * -------------------------------------------------------------------------- */
 
-function CalendarRoot({ className, rootRef, ...props }: ComponentProps<typeof Root>): JSX.Element {
-  return <div ref={rootRef} className={cn(className)} data-slot="calendar" {...props} />;
+function CalendarRoot({ rootRef, ...props }: ComponentProps<typeof Root>): JSX.Element {
+  return <div ref={rootRef} data-slot="calendar" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Component: CalendarWeekNumber (internal)
  * -------------------------------------------------------------------------- */
 
-function CalendarWeekNumber({
-  children,
-  ...props
-}: ComponentProps<typeof WeekNumber>): JSX.Element {
+function CalendarWeekNumber({ children, ...props }: ComponentProps<typeof WeekNumber>): JSX.Element {
   return (
     <td {...props}>
-      <div className={cn("flex size-(--cell-size) items-center justify-center", "text-center")}>
-        {children}
-      </div>
+      <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
     </td>
   );
 }
@@ -216,17 +174,14 @@ function CalendarWeekNumber({
 /**
  * @since 0.3.16-canary.0
  */
-type CalendarDayButtonProps = ComponentProps<typeof DayButton>;
+type CalendarDayButtonProps = ComponentProps<typeof DayButton> & {
+  locale?: Partial<Locale>;
+};
 
 /**
  * @since 0.3.16-canary.0
  */
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: CalendarDayButtonProps): JSX.Element {
+function CalendarDayButton({ className, day, locale, modifiers, ...props }: CalendarDayButtonProps): JSX.Element {
   const defaultClassNames = getDefaultClassNames();
 
   const ref = useRef<HTMLButtonElement>(null);
@@ -241,26 +196,16 @@ function CalendarDayButton({
     <Button
       ref={ref}
       className={cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal",
-        "group-data-focused/day:relative group-data-focused/day:z-10 group-data-focused/day:border-ring group-data-focused/day:ring-3 group-data-focused/day:ring-ring/50",
-        "data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md 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]:rounded-md data-[range-start=true]:rounded-l-md 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",
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-focused/day:relative group-data-focused/day:z-10 group-data-focused/day:border-ring group-data-focused/day:ring-3 group-data-focused/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) 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-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}
-      data-day={day.date.toLocaleDateString()}
+      data-day={day.date.toLocaleDateString(locale?.code)}
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       data-range-start={modifiers.range_start}
       data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
       }
       size="icon"
       variant="ghost"

package/src/components/card.tsx

@@ -9,20 +9,21 @@ import { cn } from "#/lib/utils";
 /**
  * @since 0.3.16-canary.0
  */
-type CardProps = ComponentProps<"div">;
+type CardProps = ComponentProps<"div"> & {
+  size?: "default" | "sm";
+};
 
 /**
  * @since 0.3.16-canary.0
  */
-function Card({ className, ...props }: CardProps): JSX.Element {
+function Card({ className, size = "default", ...props }: CardProps): JSX.Element {
   return (
     <div
       className={cn(
-        "flex flex-col gap-6 overflow-auto py-6",
-        "rounded-xl border",
-        "bg-card text-card-foreground shadow-sm",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className,
       )}
+      data-size={size}
       data-slot="card"
       {...props}
     />
@@ -45,10 +46,7 @@ function CardHeader({ className, ...props }: CardHeaderProps): JSX.Element {
   return (
     <div
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5",
-        "px-6",
-        "has-[data-slot=card-action]:grid-cols-[1fr_auto]",
-        "[.border-b]:pb-6",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
         className,
       )}
       data-slot="card-header"
@@ -69,11 +67,13 @@ type CardTitleProps = ComponentProps<"div">;
 /**
  * @since 0.3.16-canary.0
  */
-function CardTitle({ children, className, ...props }: CardTitleProps): JSX.Element {
+function CardTitle({ className, ...props }: CardTitleProps): JSX.Element {
   return (
-    <div className={cn("leading-none font-semibold", className)} data-slot="card-title" {...props}>
-      {children}
-    </div>
+    <div
+      className={cn("font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className)}
+      data-slot="card-title"
+      {...props}
+    />
   );
 }
 
@@ -90,13 +90,7 @@ type CardDescriptionProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function CardDescription({ className, ...props }: CardDescriptionProps): JSX.Element {
-  return (
-    <div
-      className={cn("text-sm text-muted-foreground", className)}
-      data-slot="card-description"
-      {...props}
-    />
-  );
+  return <div className={cn("text-sm text-muted-foreground", className)} data-slot="card-description" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -112,7 +106,7 @@ type CardContentProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function CardContent({ className, ...props }: CardContentProps): JSX.Element {
-  return <div className={cn("px-6", className)} data-slot="card-content" {...props} />;
+  return <div className={cn("px-(--card-spacing)", className)} data-slot="card-content" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -130,7 +124,7 @@ type CardFooterProps = ComponentProps<"div">;
 function CardFooter({ className, ...props }: CardFooterProps): JSX.Element {
   return (
     <div
-      className={cn("flex items-center", "px-6", "[.border-t]:pt-6", className)}
+      className={cn("flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", className)}
       data-slot="card-footer"
       {...props}
     />