@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/dist/components/button-group.d.mts

@@ -1,22 +1,12 @@
-import { VariantProps } from "../lib/utils.mjs";
 import { Separator } from "./separator.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ButtonGroupVariants } from "../variants/button-group.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/button-group.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const buttonGroupVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  orientation: {
-    horizontal: string[];
-    vertical: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-type ButtonGroupProps = ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>;
+type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
 /**
  * @since 0.3.16-canary.0
  */
@@ -52,4 +42,4 @@ declare function ButtonGroupSeparator({
   ...props
 }: ButtonGroupSeparatorProps): JSX.Element;
 //#endregion
-export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps };

package/dist/components/button-group.mjs

@@ -1,34 +1,12 @@
-"use client";
-import { cn, tv } from "../lib/utils.mjs";
-import { Separator } from "./separator.mjs";
-import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils.mjs";
+import { Separator as Separator$1 } from "./separator.mjs";
+import { buttonGroupVariants } from "../variants/button-group.mjs";
+import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button-group.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const buttonGroupVariants = tv({
-	base: [
-		"flex w-fit items-stretch",
-		"has-[>[data-slot=button-group]]:gap-2",
-		"[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
-		"has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg",
-		"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
-		"[&>input]:flex-1"
-	],
-	defaultVariants: { orientation: "horizontal" },
-	variants: { orientation: {
-		horizontal: ["[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0", "[&>*:not(:last-child)]:rounded-r-none"],
-		vertical: [
-			"flex-col",
-			"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0",
-			"[&>*:not(:last-child)]:rounded-b-none"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function ButtonGroup({ className, orientation, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: buttonGroupVariants({
@@ -45,8 +23,8 @@ function ButtonGroup({ className, orientation, ...props }) {
 * @since 0.3.16-canary.0
 */
 function ButtonGroupText({ asChild = false, className, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-		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", className),
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "div", {
+		className: cn("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
 	});
 }
@@ -54,12 +32,12 @@ function ButtonGroupText({ asChild = false, className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx(Separator, {
-		className: cn("relative self-stretch", "bg-input", "data-vertical:h-auto", "!m-0", className),
+	return /* @__PURE__ */ jsx(Separator$1, {
+		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,
 		...props
 	});
 }
 //#endregion
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/components/button.d.mts

@@ -1,33 +1,11 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ButtonVariants } from "../variants/button.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/button.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const buttonVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    "icon-sm": string;
-    icon: string;
-    "icon-lg": string;
-    sm: string[];
-    md: string[];
-    lg: string[];
-  };
-  variant: {
-    default: string[];
-    destructive: string[];
-    ghost: string[];
-    link: string[];
-    outline: string[];
-    secondary: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
   asChild?: boolean;
   type?: ComponentProps<"button">["type"];
 };
@@ -36,7 +14,6 @@ type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants
  */
 declare function Button({
   asChild,
-  children,
   className,
   size,
   type,
@@ -44,4 +21,4 @@ declare function Button({
   ...props
 }: ButtonProps): JSX.Element;
 //#endregion
-export { Button, type ButtonProps, buttonVariants };
+export { Button, type ButtonProps };

package/dist/components/button.mjs

@@ -1,92 +1,22 @@
-import { tv } from "../lib/utils.mjs";
-import { Slot } from "@radix-ui/react-slot";
+import { buttonVariants } from "../variants/button.mjs";
+import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const buttonVariants = tv({
-	base: [
-		"inline-flex shrink-0 items-center justify-center gap-2",
-		"rounded-lg outline-hidden",
-		"text-sm font-medium whitespace-nowrap",
-		"transition select-none",
-		"focus-visible:ring-3",
-		"disabled:opacity-50",
-		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-	],
-	defaultVariants: {
-		size: "md",
-		variant: "default"
-	},
-	variants: {
-		size: {
-			"icon-sm": "size-8",
-			icon: "size-9",
-			"icon-lg": "size-10",
-			sm: ["h-8 px-3", "has-[>svg]:px-2.5"],
-			md: ["h-9 px-4", "has-[>svg]:px-3"],
-			lg: ["h-10 px-6", "has-[>svg]:px-4"]
-		},
-		variant: {
-			default: [
-				"bg-primary text-primary-foreground",
-				"hover:not-disabled:bg-primary/80",
-				"focus-visible:ring-primary/20",
-				"dark:focus-visible:ring-primary/40"
-			],
-			destructive: [
-				"bg-destructive text-white",
-				"hover:not-disabled:bg-destructive/90",
-				"focus-visible:ring-destructive/20",
-				"dark:bg-destructive/60",
-				"dark:focus-visible:ring-destructive/40"
-			],
-			ghost: [
-				"hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-				"focus-visible:ring-ring/50",
-				"dark:hover:not-disabled:bg-secondary/50"
-			],
-			link: [
-				"text-primary underline-offset-4",
-				"hover:not-disabled:underline",
-				"focus-visible:ring-ring/50"
-			],
-			outline: [
-				"border border-input shadow-xs",
-				"hover:not-disabled:border-ring/60 hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-				"focus-visible:border-ring focus-visible:ring-ring/50",
-				"aria-invalid:border-destructive",
-				"focus-within:aria-invalid:ring-destructive/20",
-				"hover:not-disabled:aria-invalid:border-destructive/60",
-				"dark:bg-input/30",
-				"dark:hover:not-disabled:bg-input/50",
-				"dark:aria-invalid:border-destructive/70",
-				"dark:focus-within:aria-invalid:ring-destructive/40"
-			],
-			secondary: [
-				"bg-secondary text-secondary-foreground",
-				"hover:not-disabled:bg-secondary/80",
-				"focus-visible:ring-ring/50"
-			]
-		}
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
-function Button({ asChild = false, children, className, size, type = "button", variant, ...props }) {
-	const Comp = asChild ? Slot : "button";
+function Button({ asChild = false, className, size, type = "button", variant, ...props }) {
+	const Comp = asChild ? Slot.Root : "button";
 	if (asChild) return /* @__PURE__ */ jsx(Comp, {
 		className: buttonVariants({
 			className,
 			size,
 			variant
 		}),
+		"data-size": size,
 		"data-slot": "button",
 		"data-variant": variant,
-		...props,
-		children
+		...props
 	});
 	return /* @__PURE__ */ jsx("button", {
 		className: buttonVariants({
@@ -94,12 +24,12 @@ function Button({ asChild = false, children, className, size, type = "button", v
 			size,
 			variant
 		}),
+		"data-size": size,
 		"data-slot": "button",
 		"data-variant": variant,
 		type,
-		...props,
-		children
+		...props
 	});
 }
 //#endregion
-export { Button, buttonVariants };
+export { Button };

package/dist/components/calendar.d.mts

@@ -1,6 +1,6 @@
 import { Button } from "./button.mjs";
+import { DayButton, DayPicker, Locale } from "@daypicker/react";
 import { ComponentProps, JSX } from "react";
-import { DayButton, DayPicker } from "react-day-picker";
 
 //#region src/components/calendar.d.ts
 /**
@@ -19,19 +19,23 @@ declare function Calendar({
   classNames,
   components,
   formatters,
+  locale,
   showOutsideDays,
   ...props
 }: CalendarProps): JSX.Element;
 /**
  * @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
  */
 declare function CalendarDayButton({
   className,
   day,
+  locale,
   modifiers,
   ...props
 }: CalendarDayButtonProps): JSX.Element;

package/dist/components/calendar.mjs

@@ -1,75 +1,73 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import { Button, buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
+import { Button } from "./button.mjs";
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { DayPicker, getDefaultClassNames } from "@daypicker/react";
 import { useEffect, useRef } from "react";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
 //#region src/components/calendar.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function Calendar({ buttonVariant = "ghost", captionLayout = "label", className, classNames, components, formatters, showOutsideDays = true, ...props }) {
+function Calendar({ buttonVariant = "ghost", captionLayout = "label", className, classNames, components, formatters, locale, showOutsideDays = true, ...props }) {
 	const defaultClassNames = getDefaultClassNames();
 	return /* @__PURE__ */ jsx(DayPicker, {
 		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)]", className),
+		className: cn("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]
-			}),
-			caption_label: cn("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", defaultClassNames.caption_label),
-			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", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", 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),
-			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",
-			today: cn("rounded-md", "bg-accent text-accent-foreground", "data-selected: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),
+			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", captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-(--cell-radius) pr-1 pl-2 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 rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+			range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+			today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+			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) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				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,
 		showOutsideDays,
 		...props
 	});
 }
 function CalendarChevron({ className, orientation, ...props }) {
 	if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
-		className: cn("size-4", className),
+		className: cn("size-4 rtl:rotate-180", className),
 		...props
 	});
 	if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
-		className: cn("size-4", className),
+		className: cn("size-4 rtl:rotate-180", className),
 		...props
 	});
 	return /* @__PURE__ */ jsx(ChevronDownIcon, {
@@ -77,10 +75,9 @@ function CalendarChevron({ className, orientation, ...props }) {
 		...props
 	});
 }
-function CalendarRoot({ className, rootRef, ...props }) {
+function CalendarRoot({ rootRef, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref: rootRef,
-		className: cn(className),
 		"data-slot": "calendar",
 		...props
 	});
@@ -89,7 +86,7 @@ function CalendarWeekNumber({ children, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("flex size-(--cell-size) items-center justify-center", "text-center"),
+			className: "flex size-(--cell-size) items-center justify-center text-center",
 			children
 		})
 	});
@@ -97,7 +94,7 @@ function CalendarWeekNumber({ children, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function CalendarDayButton({ className, day, modifiers, ...props }) {
+function CalendarDayButton({ className, day, locale, modifiers, ...props }) {
 	const defaultClassNames = getDefaultClassNames();
 	const ref = useRef(null);
 	useEffect(() => {
@@ -105,8 +102,8 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
 		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", defaultClassNames.day, className),
-		"data-day": day.date.toLocaleDateString(),
+		className: cn("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-r-(--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-l-(--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(locale?.code),
 		"data-range-end": modifiers.range_end,
 		"data-range-middle": modifiers.range_middle,
 		"data-range-start": modifiers.range_start,

package/dist/components/card.d.mts

@@ -4,12 +4,15 @@ import { ComponentProps, JSX } from "react";
 /**
  * @since 0.3.16-canary.0
  */
-type CardProps = ComponentProps<"div">;
+type CardProps = ComponentProps<"div"> & {
+  size?: "default" | "sm";
+};
 /**
  * @since 0.3.16-canary.0
  */
 declare function Card({
   className,
+  size,
   ...props
 }: CardProps): JSX.Element;
 /**
@@ -31,7 +34,6 @@ type CardTitleProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 declare function CardTitle({
-  children,
   className,
   ...props
 }: CardTitleProps): JSX.Element;

package/dist/components/card.mjs

@@ -4,9 +4,10 @@ import { jsx } from "react/jsx-runtime";
 /**
 * @since 0.3.16-canary.0
 */
-function Card({ className, ...props }) {
+function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col gap-6 overflow-auto py-6", "rounded-xl border", "bg-card text-card-foreground shadow-sm", className),
+		className: cn("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
 	});
@@ -16,7 +17,7 @@ function Card({ className, ...props }) {
 */
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("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", className),
+		className: cn("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",
 		...props
 	});
@@ -24,12 +25,11 @@ function CardHeader({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function CardTitle({ children, className, ...props }) {
+function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("leading-none font-semibold", className),
+		className: cn("font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className),
 		"data-slot": "card-title",
-		...props,
-		children
+		...props
 	});
 }
 /**
@@ -47,7 +47,7 @@ function CardDescription({ className, ...props }) {
 */
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("px-6", className),
+		className: cn("px-(--card-spacing)", className),
 		"data-slot": "card-content",
 		...props
 	});
@@ -57,7 +57,7 @@ function CardContent({ className, ...props }) {
 */
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("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
 	});

package/dist/components/carousel.d.mts

@@ -1,14 +1,13 @@
 import { Button } from "./button.mjs";
 import { ComponentProps, JSX } from "react";
-import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
-import { Scope } from "@radix-ui/react-context";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+import { Context } from "radix-ui/internal";
 
 //#region src/components/carousel.d.ts
 type ScopedProps<P> = P & {
-  __scopeCarousel?: Scope;
+  __scopeCarousel?: Context.Scope;
 };
-declare const createCarouselScope: _$_radix_ui_react_context0.CreateScope;
+declare const createCarouselScope: Context.CreateScope;
 /**
  * @since 0.3.16-canary.0
  */
@@ -44,11 +43,23 @@ declare function Carousel({
  */
 interface CarouselContentProps extends ComponentProps<"div"> {
   classNames?: {
-    content?: string;
+    /** Class applied to the flex track that holds the slides. */content?: string; /** Class applied to the scroll viewport (the `overflow-hidden` element). */
     wrapper?: string;
   };
 }
 /**
+ * The scroll viewport requires `overflow-hidden` (Embla hides off-screen slides
+ * with it), so any ring/shadow on slide content that sits OUTSIDE the slide's
+ * border-box is clipped where the slide meets the viewport edge. This is
+ * inherent to every Embla-based carousel — the active slide is flush with both
+ * scroll-axis edges, so left/right rings (horizontal) cannot show without
+ * revealing the neighbouring slide.
+ *
+ * To give content shadows/rings breathing room on the CROSS axis (top/bottom
+ * for horizontal carousels), add a negative-margin + matching padding via
+ * `classNames.wrapper`, e.g. `classNames={{ wrapper: "-my-2 py-2" }}`. This
+ * shifts no layout but lets the clip happen `n`px further out.
+ *
  * @since 0.3.16-canary.0
  */
 declare function CarouselContent({