@locusgraph/components 0.1.1 → 0.2.0

package/dist/action/button-group.js

@@ -6,7 +6,7 @@ import { Separator } from "../display/separator.js";
 const buttonGroupVariants = cva("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-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     variants: {
         orientation: {
-            horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+            horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>input:first-child]:rounded-l-full [&>input:first-child]:pl-4",
             vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
         },
     },

package/dist/action/button.js

@@ -5,9 +5,9 @@ import * as Slot from "radix-ui/slot";
 const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-full text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] duration-150 ease-out outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground shadow-[0_1px_2px_rgb(0_0_0/0.12),inset_0_1px_0_rgb(255_255_255/0.14)] hover:bg-primary/90",
-            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            default: "bg-primary text-primary-foreground shadow-[0_1px_2px_rgb(0_0_0/0.12),inset_0_1px_0_rgb(255_255_255/0.14)] hover:bg-primary/90 disabled:bg-transparent disabled:text-muted-foreground disabled:opacity-100 disabled:shadow-none disabled:ring-1 disabled:ring-input disabled:ring-inset",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 disabled:bg-transparent disabled:text-muted-foreground disabled:opacity-100 disabled:ring-1 disabled:ring-input disabled:ring-inset",
+            outline: "border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
             link: "text-primary underline-offset-4 hover:underline",

package/dist/action/toggle-group.js

@@ -10,13 +10,13 @@ const ToggleGroupContext = React.createContext({
     spacing: 0,
 });
 function ToggleGroup({ className, variant, size, spacing = 0, children, ...props }) {
-    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children: children }) }));
+    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-full data-[spacing=default]:data-[variant=outline]:shadow-xs", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children: children }) }));
 }
 function ToggleGroupItem({ className, children, variant, size, ...props }) {
     const context = React.useContext(ToggleGroupContext);
     return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn(toggleVariants({
             variant: context.variant || variant,
             size: context.size || size,
-        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className), ...props, children: children }));
+        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-full data-[spacing=0]:last:rounded-r-full data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l", className), ...props, children: children }));
 }
 export { ToggleGroup, ToggleGroupItem };

package/dist/action/toggle.js

@@ -3,16 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
 import * as TogglePrimitive from "radix-ui/toggle";
-const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-full text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-foreground/10 data-[state=on]:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-transparent",
-            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-foreground data-[state=on]:border-foreground/30",
         },
         size: {
-            default: "h-9 min-w-9 px-2",
-            sm: "h-8 min-w-8 px-1.5",
-            lg: "h-10 min-w-10 px-2.5",
+            default: "h-9 min-w-9 px-2.5",
+            sm: "h-8 min-w-8 px-2",
+            lg: "h-10 min-w-10 px-3",
         },
     },
     defaultVariants: {

package/dist/display/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "destructive-soft" | "ghost" | "link" | "outline" | "secondary" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/display/badge.js

@@ -7,7 +7,10 @@ const badgeVariants = cva("inline-flex w-fit shrink-0 items-center justify-cente
         variant: {
             default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
             secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-            destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+            destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+            success: "bg-good/10 text-good [a&]:hover:bg-good/15",
+            warning: "bg-warn/10 text-warn [a&]:hover:bg-warn/15",
+            "destructive-soft": "bg-destructive/10 text-destructive [a&]:hover:bg-destructive/15",
             outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
             ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
             link: "text-primary underline-offset-4 [a&]:hover:underline",

package/dist/display/chart/chart-tooltip.js

@@ -27,7 +27,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
         return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (_jsxs("div", { className: cn("grid min-w-[8rem] 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 ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+    return (_jsxs("div", { className: cn("grid min-w-[8rem] items-start gap-1.5 bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-overlay ring-1 ring-border", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
                     .filter((item) => item.type !== "none")
                     .map((item, index) => {
                     const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
@@ -41,7 +41,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                                     }), style: {
                                         "--color-bg": indicatorColor,
                                         "--color-border": indicatorColor,
-                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
+                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between gap-4 leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
                                                 ? item.value.toLocaleString()
                                                 : String(item.value) }))] })] })) }, key));
                 }) })] }));

package/dist/display/chat/attachment/attachment.js

@@ -10,7 +10,7 @@ const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full
         },
         orientation: {
             horizontal: "min-w-40 items-center",
-            vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+            vertical: "w-28 flex-col has-data-[slot=attachment-content]:w-36",
         },
     },
 });

package/dist/display/chat/bubble.js

@@ -11,9 +11,9 @@ const bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0
             default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
             secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
             muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
-            tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+            tinted: "*:data-[slot=bubble-content]:bg-muted *:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:ring-1 *:data-[slot=bubble-content]:ring-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
             outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
-            ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+            ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:py-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
             destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
         },
     },

package/dist/display/chat/message-scroller.js

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown as ArrowDownIcon } from "@carbon/icons-react";
 import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from "@shadcn/react/message-scroller";
 import { cn } from "cn";
-import { ArrowDownIcon } from "lucide-react";
 import { Button } from "../../action/button.js";
 function MessageScrollerProvider(props) {
     return _jsx(MessageScrollerPrimitive.Provider, { ...props });

package/dist/display/chat/message.js

@@ -13,9 +13,9 @@ function MessageContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "message-content", className: cn("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className), ...props }));
 }
 function MessageHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "message-header", className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0", className), ...props }));
+    return (_jsx("div", { "data-slot": "message-header", className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground", className), ...props }));
 }
 function MessageFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "message-footer", className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className), ...props }));
+    return (_jsx("div", { "data-slot": "message-footer", className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-data-[align=end]/message:justify-end", className), ...props }));
 }
 export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/display/content/kbd.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "cn";
 function Kbd({ className, ...props }) {
-    return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", className), ...props }));
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-foreground/80 ring-1 ring-border ring-inset select-none", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:ring-0 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", className), ...props }));
 }
 function KbdGroup({ className, ...props }) {
     return (_jsx("kbd", { "data-slot": "kbd-group", className: cn("inline-flex items-center gap-1", className), ...props }));

package/dist/display/media/carousel-controls.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from "@carbon/icons-react";
 import { cn } from "cn";
-import { ArrowLeft, ArrowRight } from "lucide-react";
 import { Button } from "../../action/button.js";
 import { useCarousel } from "./carousel.js";
 function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {

package/dist/display/rule-grid/rule-grid.d.ts

@@ -8,7 +8,9 @@ declare function RuleGridCell({ className, asChild, interactive, ...props }: Rea
     asChild?: boolean;
     interactive?: boolean;
 }): React.JSX.Element;
+declare function RuleGridHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function RuleGridFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function RuleGridLabel({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function RuleGridTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function RuleGridDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
-export { RuleGrid, RuleGridCell, RuleGridDescription, RuleGridLabel, RuleGridTitle, ruleGridVariants, };
+export { RuleGrid, RuleGridCell, RuleGridDescription, RuleGridFooter, RuleGridHeader, RuleGridLabel, RuleGridTitle, ruleGridVariants, };

package/dist/display/rule-grid/rule-grid.js

@@ -23,8 +23,14 @@ function RuleGridCell({ className, asChild = false, interactive = false, ...prop
     return (_jsx(Comp, { "data-slot": "rule-grid-cell", "data-interactive": interactive || undefined, className: cn("flex min-w-0 flex-col gap-2 bg-card p-6 text-card-foreground ring-1 ring-border", interactive &&
             "transition-colors duration-150 ease-out outline-none hover:bg-accent/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring active:bg-accent", className), ...props }));
 }
+function RuleGridHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "rule-grid-header", className: cn("-mx-6 -mt-6 mb-2 flex min-h-11 items-center gap-2 border-b bg-muted/35 px-6 py-2.5", className), ...props }));
+}
+function RuleGridFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "rule-grid-footer", className: cn("-mx-6 mt-auto -mb-6 flex min-h-12 flex-wrap items-center gap-2 border-t bg-muted/70 px-6 py-3", className), ...props }));
+}
 function RuleGridLabel({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "rule-grid-label", className: cn("font-mono text-[11.5px] text-muted-foreground", className), ...props }));
+    return _jsx("span", { "data-slot": "rule-grid-label", className: cn("eyebrow", className), ...props });
 }
 function RuleGridTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "rule-grid-title", className: cn("text-[15px] font-medium tracking-[-0.01em]", className), ...props }));
@@ -32,4 +38,4 @@ function RuleGridTitle({ className, ...props }) {
 function RuleGridDescription({ className, ...props }) {
     return (_jsx("p", { "data-slot": "rule-grid-description", className: cn("text-sm text-muted-foreground", className), ...props }));
 }
-export { RuleGrid, RuleGridCell, RuleGridDescription, RuleGridLabel, RuleGridTitle, ruleGridVariants, };
+export { RuleGrid, RuleGridCell, RuleGridDescription, RuleGridFooter, RuleGridHeader, RuleGridLabel, RuleGridTitle, ruleGridVariants, };

package/dist/display/skeletons/layouts/skeleton-rule-grid.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+import { RuleGrid } from "../../rule-grid/rule-grid.js";
+type SkeletonRuleGridProps = Omit<React.ComponentProps<typeof RuleGrid>, "children"> & {
+    cells?: number;
+    label?: string;
+};
+declare function SkeletonRuleGrid({ cells, columns, label, ...props }: SkeletonRuleGridProps): React.JSX.Element;
+export { SkeletonRuleGrid };

package/dist/display/skeletons/layouts/skeleton-rule-grid.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuleGrid, RuleGridCell } from "../../rule-grid/rule-grid.js";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+function SkeletonRuleGrid({ cells = 3, columns = 3, label, ...props }) {
+    const count = Math.max(1, Math.floor(cells));
+    return (_jsxs(RuleGrid, { "data-slot": "skeleton-rule-grid", columns: columns, ...skeletonRootProps, ...props, children: [Array.from({ length: count }, (_, index) => (_jsxs(RuleGridCell
+            // biome-ignore lint/suspicious/noArrayIndexKey: placeholder cells have no identity
+            , { "data-slot": "skeleton-rule-grid-cell", "aria-hidden": "true", className: "gap-3", children: [_jsx(SkeletonBar, { className: "h-3 w-20" }), _jsx(SkeletonBar, { className: "h-7 w-28" })] }, index))), _jsx(SkeletonLoadingLabel, { children: label })] }));
+}
+export { SkeletonRuleGrid };

package/dist/display/skeletons/layouts/skeleton-table.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+type SkeletonTableProps = React.ComponentProps<"div"> & {
+    rows?: number;
+    columns?: number;
+    label?: string;
+};
+declare function SkeletonTable({ rows, columns, label, className, ...props }: SkeletonTableProps): React.JSX.Element;
+export { SkeletonTable };

package/dist/display/skeletons/layouts/skeleton-table.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../table.js";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+const cellWidths = ["w-24", "w-32", "w-20", "w-28", "w-16"];
+function cellWidth(column) {
+    return cellWidths[column % cellWidths.length];
+}
+function indexes(count) {
+    return Array.from({ length: Math.max(1, Math.floor(count)) }, (_, index) => index);
+}
+function SkeletonTable({ rows = 5, columns = 4, label, className, ...props }) {
+    const columnIndexes = indexes(columns);
+    return (_jsxs("div", { "data-slot": "skeleton-table", ...skeletonRootProps, className: cn("w-full", className), ...props, children: [_jsxs(Table, { "aria-hidden": "true", children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "hover:bg-transparent", children: columnIndexes.map((column) => (_jsx(TableHead, { children: _jsx(SkeletonBar, { className: "h-3 w-16" }) }, column))) }) }), _jsx(TableBody, { children: indexes(rows).map((row) => (_jsx(TableRow, { "data-slot": "skeleton-table-row", className: "hover:bg-transparent", children: columnIndexes.map((column) => (_jsx(TableCell, { children: _jsx(SkeletonBar, { className: cn("h-4", cellWidth(column)) }) }, column))) }, row))) })] }), _jsx(SkeletonLoadingLabel, { children: label })] }));
+}
+export { SkeletonTable };

package/dist/display/skeletons/shapes/skeleton-avatar.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const skeletonAvatarVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SkeletonAvatarProps = React.ComponentProps<"div"> & VariantProps<typeof skeletonAvatarVariants> & {
+    label?: string;
+};
+declare function SkeletonAvatar({ size, label, className, ...props }: SkeletonAvatarProps): React.JSX.Element;
+export { SkeletonAvatar, skeletonAvatarVariants };

package/dist/display/skeletons/shapes/skeleton-avatar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+const skeletonAvatarVariants = cva("rounded-full", {
+    variants: {
+        size: {
+            sm: "size-6",
+            md: "size-8",
+            lg: "size-10",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+function SkeletonAvatar({ size = "md", label, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "skeleton-avatar", "data-size": size, ...skeletonRootProps, className: cn("inline-flex shrink-0", className), ...props, children: [_jsx(SkeletonBar, { className: skeletonAvatarVariants({ size }) }), _jsx(SkeletonLoadingLabel, { children: label })] }));
+}
+export { SkeletonAvatar, skeletonAvatarVariants };

package/dist/display/skeletons/shapes/skeleton-button.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const skeletonButtonVariants: (props?: ({
+    size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SkeletonButtonProps = React.ComponentProps<"div"> & VariantProps<typeof skeletonButtonVariants> & {
+    label?: string;
+};
+declare function SkeletonButton({ size, label, className, ...props }: SkeletonButtonProps): React.JSX.Element;
+export { SkeletonButton, skeletonButtonVariants };

package/dist/display/skeletons/shapes/skeleton-button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+const skeletonButtonVariants = cva("rounded-full", {
+    variants: {
+        size: {
+            sm: "h-8 w-20",
+            default: "h-9 w-24",
+            lg: "h-10 w-28",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+function SkeletonButton({ size = "default", label, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "skeleton-button", "data-size": size, ...skeletonRootProps, className: cn("inline-flex shrink-0", className), ...props, children: [_jsx(SkeletonBar, { className: skeletonButtonVariants({ size }) }), _jsx(SkeletonLoadingLabel, { children: label })] }));
+}
+export { SkeletonButton, skeletonButtonVariants };

package/dist/display/skeletons/shapes/skeleton-text.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+type SkeletonTextProps = React.ComponentProps<"div"> & {
+    lines?: number;
+    label?: string;
+};
+declare function SkeletonText({ lines, label, className, ...props }: SkeletonTextProps): React.JSX.Element;
+export { SkeletonText };

package/dist/display/skeletons/shapes/skeleton-text.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "../skeleton-parts.js";
+function lineWidth(index, lines) {
+    return lines > 1 && index === lines - 1 ? "w-3/5" : "w-full";
+}
+function SkeletonText({ lines = 3, label, className, ...props }) {
+    const count = Math.max(1, Math.floor(lines));
+    return (_jsxs("div", { "data-slot": "skeleton-text", ...skeletonRootProps, className: cn("flex w-full flex-col gap-2", className), ...props, children: [Array.from({ length: count }, (_, index) => (_jsx(SkeletonBar
+            // biome-ignore lint/suspicious/noArrayIndexKey: placeholder lines have no identity
+            , { "data-slot": "skeleton-text-line", className: cn("h-4", lineWidth(index, count)) }, index))), _jsx(SkeletonLoadingLabel, { children: label })] }));
+}
+export { SkeletonText };

package/dist/display/skeletons/skeleton-parts.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import { Skeleton } from "../status/skeleton.js";
+declare function SkeletonBar({ className, ...props }: React.ComponentProps<typeof Skeleton>): React.JSX.Element;
+declare function SkeletonLoadingLabel({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare const skeletonRootProps: {
+    readonly role: "status";
+    readonly "aria-busy": true;
+};
+export { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps };

package/dist/display/skeletons/skeleton-parts.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Skeleton } from "../status/skeleton.js";
+function SkeletonBar({ className, ...props }) {
+    return (_jsx(Skeleton, { "aria-hidden": "true", className: cn("rounded-none bg-skeleton motion-reduce:animate-none", className), ...props }));
+}
+function SkeletonLoadingLabel({ children = "Loading…" }) {
+    return (_jsx("span", { "data-slot": "skeleton-loading-label", className: "sr-only", children: children }));
+}
+const skeletonRootProps = { role: "status", "aria-busy": true };
+export { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps };

package/dist/display/status/alert.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/display/status/alert.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
-const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5", {
     variants: {
         variant: {
             default: "bg-card text-card-foreground",
-            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+            success: "border-good/30 bg-good/5 text-card-foreground [&>svg]:text-good",
+            warning: "border-warn/30 bg-warn/5 text-card-foreground [&>svg]:text-warn",
+            destructive: "border-destructive/30 bg-destructive/5 text-card-foreground [&>svg]:text-destructive *:data-[slot=alert-title]:text-destructive",
         },
     },
     defaultVariants: {

package/dist/display/status/empty.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
 function Empty({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty", className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-6 text-center text-balance md:p-12", className), ...props }));
 }
 function EmptyHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className), ...props }));

package/dist/display/status/progress.d.ts

@@ -1,4 +1,8 @@
 import * as ProgressPrimitive from "radix-ui/progress";
 import * as React from "react";
-declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+type ProgressTone = "default" | "good" | "warn" | "destructive" | "auto";
+declare function Progress({ className, value, max, tone, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    tone?: ProgressTone;
+}): React.JSX.Element;
+export type { ProgressTone };
 export { Progress };

package/dist/display/status/progress.js

@@ -2,7 +2,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "cn";
 import * as ProgressPrimitive from "radix-ui/progress";
-function Progress({ className, value, ...props }) {
-    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+const indicatorToneClass = {
+    default: "bg-primary",
+    good: "bg-good",
+    warn: "bg-warn",
+    destructive: "bg-destructive",
+};
+function resolveTone(tone, percent) {
+    if (tone !== "auto")
+        return tone;
+    if (percent >= 100)
+        return "destructive";
+    if (percent >= 80)
+        return "warn";
+    return "default";
+}
+function Progress({ className, value, max = 100, tone = "default", ...props }) {
+    const percent = max > 0 ? ((value ?? 0) / max) * 100 : 0;
+    const resolvedTone = resolveTone(tone, percent);
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", "data-tone": resolvedTone, value: value, max: max, className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full w-full flex-1 transition-all", indicatorToneClass[resolvedTone]), style: { transform: `translateX(-${100 - Math.min(percent, 100)}%)` } }) }));
 }
 export { Progress };

package/dist/display/status/skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "cn";
 function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-accent", className), ...props }));
+    return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-skeleton", className), ...props }));
 }
 export { Skeleton };

package/dist/display/status/spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { InProgress as Loader2Icon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { Loader2Icon } from "lucide-react";
 function Spinner({ className, ...props }) {
     return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
 }

package/dist/display/table.js

@@ -16,7 +16,7 @@ function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors duration-150 ease-out hover:bg-muted/40 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-9 px-3 text-left align-middle font-mono sm:px-4 text-[11.5px] font-normal whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn("eyebrow h-9 px-3 text-left align-middle font-normal whitespace-nowrap sm:px-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
 }
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn("px-3 py-2.5 align-middle whitespace-nowrap tabular-nums sm:px-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));

package/dist/feedback/toaster.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
 import { type ToasterProps } from "sonner";
-declare function Toaster({ theme, ...props }: ToasterProps): React.JSX.Element;
+declare function Toaster({ theme, toastOptions, ...props }: ToasterProps): React.JSX.Element;
 export { toast } from "sonner";
 export { Toaster };

package/dist/feedback/toaster.js

@@ -1,26 +1,24 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from "lucide-react";
+import { CheckmarkOutline as CircleCheckIcon, Information as InfoIcon, InProgress as Loader2Icon, ErrorOutline as OctagonXIcon, WarningAlt as TriangleAlertIcon, } from "@carbon/icons-react";
 import { Toaster as Sonner } from "sonner";
-function statusColors(type, color) {
-    return {
-        [`--${type}-bg`]: `color-mix(in srgb, var(${color}) 8%, var(--popover))`,
-        [`--${type}-border`]: `color-mix(in srgb, var(${color}) 30%, var(--popover))`,
-        [`--${type}-text`]: `var(${color})`,
-    };
-}
 const toasterColors = {
     "--normal-bg": "var(--popover)",
     "--normal-text": "var(--popover-foreground)",
     "--normal-border": "var(--border)",
     "--border-radius": "var(--radius)",
-    ...statusColors("success", "--good"),
-    ...statusColors("info", "--info"),
-    ...statusColors("warning", "--warn"),
-    ...statusColors("error", "--bad"),
 };
-function Toaster({ theme = "system", ...props }) {
-    return (_jsx(Sonner, { theme: theme, richColors: true, className: "toaster group", icons: {
+const statusRuleClassNames = {
+    success: "border-l-2! border-l-good! [&_[data-icon]]:text-good",
+    info: "border-l-2! border-l-info! [&_[data-icon]]:text-info",
+    warning: "border-l-2! border-l-warn! [&_[data-icon]]:text-warn",
+    error: "border-l-2! border-l-destructive! [&_[data-icon]]:text-destructive",
+};
+function Toaster({ theme = "system", toastOptions, ...props }) {
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", toastOptions: {
+            ...toastOptions,
+            classNames: { ...statusRuleClassNames, ...toastOptions?.classNames },
+        }, icons: {
             success: _jsx(CircleCheckIcon, { className: "size-4" }),
             info: _jsx(InfoIcon, { className: "size-4" }),
             warning: _jsx(TriangleAlertIcon, { className: "size-4" }),

package/dist/form/advanced/calendar-day-button.js

@@ -14,6 +14,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal 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]: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), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-2 group-data-[focused=true]/day:ring-ring/70 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]:rounded-none 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), ...props }));
 }
 export { CalendarDayButton };

package/dist/form/advanced/calendar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from "@carbon/icons-react";
 import { cn } from "cn";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { buttonVariants } from "../../action/button.js";
 import { CalendarDayButton } from "./calendar-day-button.js";
@@ -19,17 +19,17 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             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-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+            dropdown_root: cn("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-1 has-focus:ring-ring", 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-md 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-md text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            weekday: cn("flex-1 rounded-md text-xs 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),
+            week_number: cn("text-xs 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", props.showWeekNumber
                 ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
                 : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),