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

package/dist/components/calendar.mjs

@@ -1,76 +1,73 @@
-"use client";
 import { cn } from "../lib/utils.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) 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 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-s-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)", defaultClassNames.day),
+			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),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			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-(--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, {
@@ -78,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
 	});
@@ -90,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
 		})
 	});
@@ -98,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(() => {
@@ -106,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-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(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,13 +1,13 @@
 import { Button } from "./button.mjs";
 import { ComponentProps, JSX } from "react";
-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: import("@radix-ui/react-context").CreateScope;
+declare const createCarouselScope: Context.CreateScope;
 /**
  * @since 0.3.16-canary.0
  */
@@ -43,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({

package/dist/components/carousel.mjs

@@ -1,14 +1,13 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
 import { Button } from "./button.mjs";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { createContextScope } from "@radix-ui/react-context";
 import useEmblaCarousel from "embla-carousel-react";
+import { Context } from "radix-ui/internal";
 //#region src/components/carousel.tsx
 const CAROUSEL_NAME = "Carousel";
-const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
+const [createCarouselContext, createCarouselScope] = Context.createContextScope(CAROUSEL_NAME);
 const [CarouselContextProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
 /**
 * @since 0.3.16-canary.0
@@ -66,8 +65,10 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
 		scrollNext,
 		scrollPrev: scrollPrevious,
 		children: /* @__PURE__ */ jsx("div", {
+			"aria-roledescription": "carousel",
 			className: cn("relative", className),
 			"data-slot": "carousel",
+			role: "region",
 			onKeyDownCapture: handleKeyDown,
 			...props,
 			children
@@ -76,6 +77,18 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
 }
 const CAROUSEL_CONTENT_NAME = "CarouselContent";
 /**
+* 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
 */
 function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
@@ -85,7 +98,7 @@ function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
 		className: cn("overflow-hidden", classNames?.wrapper),
 		"data-slot": "carousel-content",
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", classNames?.content, className),
+			className: cn("flex", orientation === "horizontal" ? "-ms-4" : "-mt-4 h-full flex-col", classNames?.content, className),
 			...props
 		})
 	});
@@ -98,7 +111,7 @@ function CarouselItem({ __scopeCarousel, className, ...props }) {
 	const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
 	return /* @__PURE__ */ jsx("div", {
 		"aria-roledescription": "slide",
-		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-4" : "pt-4", className),
 		"data-slot": "carousel-item",
 		role: "group",
 		...props
@@ -108,18 +121,18 @@ const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
 /**
 * @since 0.3.16-canary.0
 */
-function CarouselPrevious({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
+function CarouselPrevious({ __scopeCarousel, className, size = "icon-sm", variant = "outline", ...props }) {
 	const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": "Previous slide",
-		className: cn("absolute", "size-8", "shadow-none", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "-start-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "start-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2", className),
 		"data-slot": "carousel-previous",
 		disabled: !canScrollPrev,
 		size,
 		variant,
 		onClick: scrollPrev,
 		...props,
-		children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "rtl:rotate-180" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Previous slide"
 		})]
@@ -129,18 +142,18 @@ const CAROUSEL_NEXT_NAME = "CarouselNext";
 /**
 * @since 0.3.16-canary.0
 */
-function CarouselNext({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
+function CarouselNext({ __scopeCarousel, className, size = "icon-sm", variant = "outline", ...props }) {
 	const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": "Next slide",
-		className: cn("absolute", "size-8", "shadow-none", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "-end-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]" : "start-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2", className),
 		"data-slot": "carousel-next",
 		disabled: !canScrollNext,
 		size,
 		variant,
 		onClick: scrollNext,
 		...props,
-		children: [/* @__PURE__ */ jsx(ArrowRightIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Next slide"
 		})]

package/dist/components/chart.d.mts

@@ -1,5 +1,5 @@
 import { ComponentProps, ComponentType, JSX, ReactNode } from "react";
-import { Scope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 import * as RechartsPrimitive from "recharts";
 import { TooltipContentProps, TooltipProps } from "recharts";
 import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
@@ -25,15 +25,19 @@ type ChartConfig = Record<string, {
   theme?: never;
 })>;
 type ScopedProps<P> = P & {
-  __scopeChart?: Scope;
+  __scopeChart?: Context.Scope;
 };
-declare const createChartScope: import("@radix-ui/react-context").CreateScope;
+declare const createChartScope: Context.CreateScope;
 /**
  * @since 0.3.16-canary.0
  */
 interface ChartContainerProps extends ComponentProps<"div"> {
   children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
   config: ChartConfig;
+  initialDimension?: {
+    height: number;
+    width: number;
+  };
 }
 /**
  * @since 0.3.16-canary.0
@@ -44,6 +48,7 @@ declare function ChartContainer({
   className,
   config,
   id,
+  initialDimension,
   ...props
 }: ScopedProps<ChartContainerProps>): JSX.Element;
 /**

package/dist/components/chart.mjs

@@ -1,35 +1,41 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
-import { createContextScope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 import * as RechartsPrimitive from "recharts";
 //#region src/components/chart.tsx
 const THEMES = {
 	dark: ".dark",
 	light: ""
 };
+const INITIAL_DIMENSION = {
+	height: 200,
+	width: 320
+};
 const CHART_PROVIDER_NAME = "ChartProvider";
-const [createChartContext, createChartScope] = createContextScope(CHART_PROVIDER_NAME);
+const [createChartContext, createChartScope] = Context.createContextScope(CHART_PROVIDER_NAME);
 const [ChartContextProvider, useChartContext] = createChartContext(CHART_PROVIDER_NAME);
 /**
 * @since 0.3.16-canary.0
 */
-function ChartContainer({ __scopeChart, children, className, config, id, ...props }) {
+function ChartContainer({ __scopeChart, children, className, config, id, initialDimension = INITIAL_DIMENSION, ...props }) {
 	const uniqueId = useId();
-	const chartId = `chart-${id ?? uniqueId}`;
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
 	return /* @__PURE__ */ jsx(ChartContextProvider, {
 		config,
 		scope: __scopeChart,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cn("flex aspect-video justify-center text-xs", "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "[&_.recharts-dot[stroke='#fff']]:stroke-transparent", "[&_.recharts-layer]:outline-hidden", "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border", "[&_.recharts-radial-bar-background-sector]:fill-muted", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted", "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border", "[&_.recharts-sector]:outline-hidden", "[&_.recharts-sector[stroke='#fff']]:stroke-transparent", "[&_.recharts-surface]:outline-hidden", className),
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
 			"data-chart": chartId,
 			"data-slot": "chart",
 			...props,
 			children: [/* @__PURE__ */ jsx(ChartStyle, {
 				config,
 				id: chartId
-			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })]
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
 		})
 	});
 }
@@ -79,7 +85,7 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
 	if (!active || payload.length === 0) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5", "rounded-lg border border-border/50", "bg-background text-xs shadow-xl", className),
+		className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
 		children: [nestLabel ? null : tooltipLabel, /* @__PURE__ */ jsx("div", {
 			className: "grid gap-1.5",
 			children: payload.map((item, index) => {
@@ -87,12 +93,12 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
 				const itemConfig = getPayloadConfigFromPayload(config, item, key);
 				const indicatorColor = color ?? (isRecord(item.payload) && "fill" in item.payload && typeof item.payload.fill === "string" ? item.payload.fill : void 0) ?? item.color;
 				return /* @__PURE__ */ jsx("div", {
-					className: cn("flex w-full flex-wrap items-stretch gap-2", "[&>svg]:size-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
 					children: formatter && item.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, [item]) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
-						className: cn("shrink-0", "rounded-xs border-(--color-border)", "bg-(--color-bg)", {
+						className: cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
 							"h-2.5 w-2.5": indicator === "dot",
 							"my-0.5": nestLabel && indicator === "dashed",
-							"border-1.5 w-0 border-dashed bg-transparent": indicator === "dashed",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
 							"w-1": indicator === "line"
 						}),
 						style: {
@@ -100,7 +106,7 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
 							"--color-border": indicatorColor
 						}
 					}), /* @__PURE__ */ jsxs("div", {
-						className: cn("flex flex-1 justify-between", "leading-none", nestLabel ? "items-end" : "items-center"),
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "grid gap-1.5",
 							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
@@ -108,7 +114,7 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
 								children: itemConfig?.label ?? item.name
 							})]
 						}), item.value != null && /* @__PURE__ */ jsx("span", {
-							className: cn("font-mono font-medium text-foreground", "tabular-nums"),
+							className: "font-mono font-medium text-foreground tabular-nums",
 							children: typeof item.value === "number" ? item.value.toLocaleString() : safeToString(item.value)
 						})]
 					})] })
@@ -136,9 +142,9 @@ function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey
 			else if (item.dataKey != null) key = safeToString(item.dataKey);
 			const itemConfig = getPayloadConfigFromPayload(config, item, key);
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center gap-1.5", "[&>svg]:size-3 [&>svg]:text-muted-foreground"),
+				className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
 				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
-					className: cn("size-2 shrink-0", "rounded-md"),
+					className: "h-2 w-2 shrink-0 rounded-xs",
 					style: { backgroundColor: item.color }
 				}), itemConfig?.label]
 			}, nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? ""));

package/dist/components/checkbox-cards.mjs

@@ -1,8 +1,7 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
 import { Label } from "./label.mjs";
 import { CheckboxGroup, CheckboxGroupIndicator, CheckboxGroupItem } from "../primitives/checkbox-group.mjs";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox-cards.tsx
 /**
@@ -19,15 +18,16 @@ function CheckboxCards(props) {
 */
 function CheckboxCardsItem({ checkboxClassName, children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Label, {
-		className: cn("flex items-start gap-3", "p-3", "rounded-lg border border-input", "transition", "hover:not-has-disabled:not-has-aria-checked:bg-secondary", "has-focus-visible:border-ring", "has-disabled:opacity-50", "has-aria-checked:border-primary has-aria-checked:bg-primary/10", className),
+		className: cn("flex items-start gap-3 rounded-md border border-input p-3 transition has-focus-visible:border-ring has-disabled:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-data-indeterminate:border-primary/30 has-data-indeterminate:bg-primary/5", className),
 		"data-slot": "checkbox-card",
 		children: [/* @__PURE__ */ jsx(CheckboxGroupItem, {
-			className: cn("peer flex size-4 shrink-0", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "transition", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", checkboxClassName),
+			className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary", checkboxClassName),
 			"data-slot": "checkbox-card-item",
 			...props,
-			children: /* @__PURE__ */ jsx(CheckboxGroupIndicator, {
+			children: /* @__PURE__ */ jsxs(CheckboxGroupIndicator, {
+				className: "group/checkbox-card-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5",
 				"data-slot": "checkbox-card-indicator",
-				children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "group-data-indeterminate/checkbox-card-indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "hidden group-data-indeterminate/checkbox-card-indicator:block" })]
 			})
 		}), children]
 	});

package/dist/components/checkbox-group.mjs

@@ -1,8 +1,7 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
 import { CheckboxGroup as CheckboxGroup$1, CheckboxGroupIndicator, CheckboxGroupItem as CheckboxGroupItem$1 } from "../primitives/checkbox-group.mjs";
-import { CheckIcon } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox-group.tsx
 /**
 * @since 0.3.16-canary.0
@@ -19,13 +18,13 @@ function CheckboxGroup({ className, ...props }) {
 */
 function CheckboxGroupItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxGroupItem$1, {
-		className: cn("peer flex size-4 shrink-0 items-center justify-center", "rounded-sm border border-input shadow-xs outline-hidden", "text-primary-foreground", "transition", "hover:not-disabled:not-aria-checked:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60", "aria-checked:aria-invalid:bg-destructive", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary", className),
 		"data-slot": "checkbox-group-item",
 		...props,
-		children: /* @__PURE__ */ jsx(CheckboxGroupIndicator, {
-			className: cn("flex items-center justify-center text-current", "transition-none"),
+		children: /* @__PURE__ */ jsxs(CheckboxGroupIndicator, {
+			className: "group/checkbox-group-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5",
 			"data-slot": "checkbox-group-indicator",
-			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "group-data-indeterminate/checkbox-group-indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "hidden group-data-indeterminate/checkbox-group-indicator:block" })]
 		})
 	});
 }

package/dist/components/checkbox.d.mts

@@ -1,11 +1,11 @@
+import { Checkbox as Checkbox$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 //#region src/components/checkbox.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = ComponentProps<typeof Checkbox$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */