@neasg/design-system 0.2.1 → 0.4.2

package/README.md

@@ -76,7 +76,42 @@ The package currently includes:
 
 ## AI Usage
 
-If you are using an AI coding assistant, give it these instructions explicitly:
+### MCP Server (recommended)
+
+This design system includes the [Storybook MCP addon](https://storybook.js.org/docs/next/ai/mcp/overview/), which gives AI coding assistants direct access to component documentation, props, stories, and usage examples.
+
+**Setup:**
+
+1. Start the Storybook dev server in this repo:
+   ```bash
+   npm run storybook
+   ```
+   This starts on `http://localhost:6007` with the MCP endpoint at `/mcp`.
+
+2. In your consuming project, add a `.mcp.json` at the project root:
+   ```json
+   {
+     "mcpServers": {
+       "nea-design-system": {
+         "type": "http",
+         "url": "http://localhost:6007/mcp"
+       }
+     }
+   }
+   ```
+
+3. Restart Claude Code (or your MCP-compatible AI tool) in the consuming project. The following tools become available:
+   - **list-all-documentation** — discover all components and their story IDs
+   - **get-documentation** — get full component docs, props, and code examples
+   - **get-documentation-for-story** — get details for a specific story variant
+   - **preview-stories** — generate preview URLs for stories
+   - **get-storybook-story-instructions** — get guidance on writing stories
+
+The MCP server requires the Storybook dev server to be running. Start it before opening your AI tool.
+
+### Manual instructions
+
+If you are not using the MCP server, give your AI coding assistant these instructions explicitly:
 
 ```text
 Use @neasg/design-system as the source of truth for shared UI.
@@ -105,6 +140,7 @@ Use @neasg/design-system as the source of truth for shared UI.
 - `@neasg/design-system/draggable-tabs`
 - `@neasg/design-system/layout`
 - `@neasg/design-system/page-header`
+- `@neasg/design-system/popover`
 - `@neasg/design-system/pagination`
 - `@neasg/design-system/table`
 - `@neasg/design-system/tailwind-preset`

package/dist/alert.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    action?: React.ReactNode;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert, alertVariants };

package/dist/alert.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const alertVariants = cva("relative flex w-full items-start gap-3 rounded-md border px-4 py-3", {
+    variants: {
+        variant: {
+            info: "border-[hsl(var(--status-info-foreground))]/20 bg-[hsl(var(--status-info))] text-[hsl(var(--status-info-foreground))]",
+            success: "border-[hsl(var(--status-success-foreground))]/20 bg-[hsl(var(--status-success))] text-[hsl(var(--status-success-foreground))]",
+            warning: "border-[hsl(var(--status-warning-foreground))]/20 bg-[hsl(var(--status-warning))] text-[hsl(var(--status-warning-foreground))]",
+            destructive: "border-[hsl(var(--status-destructive-foreground))]/20 bg-[hsl(var(--status-destructive))] text-[hsl(var(--status-destructive-foreground))]",
+        },
+    },
+    defaultVariants: {
+        variant: "info",
+    },
+});
+const Alert = React.forwardRef(({ variant, title, description, icon: Icon, action, className, children, role = "alert", ...props }, ref) => {
+    const body = description !== null && description !== void 0 ? description : children;
+    return (_jsxs("div", { ref: ref, role: role, className: cn(alertVariants({ variant }), className), ...props, children: [Icon ? (_jsx(Icon, { className: "mt-0.5 h-4 w-4 shrink-0" })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [title ? (_jsx(Typography, { as: "p", variant: "bodySm", color: "inherit", className: "font-semibold", children: title })) : null, body ? (_jsx(Typography, { as: "div", variant: "caption", color: "inherit", className: "opacity-90", children: body })) : null] }), action ? _jsx("div", { className: "shrink-0 self-start", children: action }) : null] }));
+});
+Alert.displayName = "Alert";
+export { Alert, alertVariants };

package/dist/avatar.d.ts

@@ -3,10 +3,12 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type AvatarSize = "sm" | "md";
 interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarRoot>, "children"> {
     src?: string | null;
     alt?: string;
     fallback: React.ReactNode;
+    size?: AvatarSize;
     imageClassName?: string;
     fallbackClassName?: string;
 }
@@ -14,6 +16,7 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     src?: string | null;
     alt?: string;
     fallback: React.ReactNode;
+    size?: AvatarSize;
     name?: React.ReactNode;
     role?: React.ReactNode;
     rolePlacement?: "above" | "below";
@@ -25,8 +28,8 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     roleClassName?: string;
     avatarOverlay?: React.ReactNode;
 }
-declare function Avatar({ src, alt, fallback, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-declare function AvatarProfile({ src, alt, fallback, name, role, rolePlacement, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ src, alt, fallback, size, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function AvatarProfile({ src, alt, fallback, size, name, role, rolePlacement, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };
 export type AvatarRootProps = React.ComponentPropsWithoutRef<typeof AvatarRoot>;
 export type { AvatarProps, AvatarProfileProps };

package/dist/avatar.js

@@ -9,13 +9,17 @@ const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(Ava
 AvatarImage.displayName = "AvatarImage";
 const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex size-full items-center justify-center rounded-full bg-muted", className), ...props })));
 AvatarFallback.displayName = "AvatarFallback";
-function Avatar({ src, alt = "", fallback, className, imageClassName, fallbackClassName, ...props }) {
-    return (_jsxs(AvatarRoot, { className: cn("h-8 w-8", className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { className: cn("bg-green-100 text-xs font-medium text-green-800", fallbackClassName), children: fallback })] }));
+const avatarSizeClasses = {
+    sm: "h-8 w-8 text-xs",
+    md: "h-10 w-10 text-sm",
+};
+function Avatar({ src, alt = "", fallback, size = "sm", className, imageClassName, fallbackClassName, ...props }) {
+    return (_jsxs(AvatarRoot, { className: cn(avatarSizeClasses[size], className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { className: cn("bg-green-100 font-medium text-green-800", fallbackClassName), children: fallback })] }));
 }
-function AvatarProfile({ src, alt = "", fallback, name, role, rolePlacement = "above", className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }) {
+function AvatarProfile({ src, alt = "", fallback, size = "sm", name, role, rolePlacement = "above", className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }) {
     const hasMeta = name !== undefined || role !== undefined;
     const roleNode = role ? (_jsx("span", { className: cn("text-[10px] font-medium uppercase tracking-wide text-muted-foreground", roleClassName), children: role })) : null;
     const nameNode = name ? (_jsx("span", { className: cn("truncate text-sm font-medium text-foreground", nameClassName), children: name })) : null;
-    return (_jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, className: cn("h-8 w-8", avatarClassName), imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", contentClassName), children: [rolePlacement === "above" ? roleNode : null, nameNode, rolePlacement === "below" ? roleNode : null] })) : null] }));
+    return (_jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: avatarClassName, imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", contentClassName), children: [rolePlacement === "above" ? roleNode : null, nameNode, rolePlacement === "below" ? roleNode : null] })) : null] }));
 }
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };

package/dist/back-button.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+export interface BackButtonProps extends Omit<ButtonProps, "asChild" | "size" | "variant"> {
+}
+declare const BackButton: React.ForwardRefExoticComponent<BackButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { BackButton };

package/dist/back-button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeftIcon } from "./animated-icons/chevron-left";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+const BackButton = React.forwardRef(({ children = "Back", className, type, ...props }, ref) => (_jsxs(Button, { ref: ref, type: type !== null && type !== void 0 ? type : "button", variant: "link", className: cn("h-auto gap-1 px-0", className), ...props, children: [_jsx(ChevronLeftIcon, { "aria-hidden": "true", className: "shrink-0", size: 16 }), _jsx("span", { children: children })] })));
+BackButton.displayName = "BackButton";
+export { BackButton };

package/dist/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "muted" | "outline" | "secondary" | "destructive" | "success" | "warning" | "info" | "accent" | null | undefined;
+    variant?: "muted" | "outline" | "info" | "success" | "warning" | "destructive" | "secondary" | "accent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Visual status label used for short categorical values like case state,
@@ -9,6 +9,8 @@ declare const badgeVariants: (props?: ({
  * surface the full label via `title`.
  */
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /** Show a visible border matching the badge colour. */
+    bordered?: boolean;
 }
-declare function Badge({ className, variant, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, bordered, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/dist/badge.js

@@ -19,12 +19,23 @@ const badgeVariants = cva("inline-flex max-w-[200px] items-center justify-center
         variant: "secondary",
     },
 });
-function Badge({ className, variant, children, ...props }) {
+function Badge({ className, variant, bordered = false, children, ...props }) {
     const textContent = typeof children === "string"
         ? children
         : React.Children.toArray(children)
             .filter((child) => typeof child === "string")
             .join("");
-    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), title: textContent || undefined, ...props, children: children }));
+    const resolvedVariant = variant !== null && variant !== void 0 ? variant : "secondary";
+    const borderedClasses = {
+        secondary: "border-secondary-foreground/30",
+        muted: "border-muted-foreground/30",
+        destructive: "border-[hsl(var(--status-destructive-foreground))]/30",
+        outline: "border-foreground/30",
+        success: "border-[hsl(var(--status-success-foreground))]/30",
+        warning: "border-[hsl(var(--status-warning-foreground))]/30",
+        info: "border-[hsl(var(--status-info-foreground))]/30",
+        accent: "border-[hsl(var(--status-accent-foreground))]/30",
+    };
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), bordered && borderedClasses[resolvedVariant], className), title: textContent || undefined, ...props, children: children }));
 }
 export { Badge, badgeVariants };

package/dist/breadcrumb.js

@@ -11,14 +11,14 @@ const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(
 BreadcrumbItem.displayName = "BreadcrumbItem";
 const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "a";
-    return (_jsx(Comp, { ref: ref, className: cn("transition-colors hover:text-foreground", className), ...props }));
+    return (_jsx(Comp, { ref: ref, className: cn("cursor-pointer transition-colors hover:text-foreground", className), ...props }));
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
 const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props })));
 BreadcrumbPage.displayName = "BreadcrumbPage";
 const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className), ...props, children: children !== null && children !== void 0 ? children : (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M6 3.5 10.5 8 6 12.5" }) })) }));
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [_jsx("span", { className: "text-lg leading-none", children: "\u2026" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", className: cn("flex h-control w-control items-center justify-center", className), ...props, children: [_jsx("span", { className: "text-lg leading-none", children: "\u2026" }), _jsx("span", { className: "sr-only", children: "More" })] }));
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 function Breadcrumb({ items, separator, className, listClassName, itemClassName, linkClassName, currentClassName, ...props }) {
     if (!items.length) {

package/dist/button.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "destructive" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "icon" | "lg" | null | undefined;
+    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**

package/dist/button.js

@@ -14,10 +14,9 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-10 px-4 py-2 [&_svg]:h-4 [&_svg]:w-4",
-            sm: "h-9 rounded-md px-3 text-xs [&_svg]:h-4 [&_svg]:w-4",
-            lg: "h-11 rounded-md px-8 [&_svg]:h-5 [&_svg]:w-5",
-            icon: "h-10 w-10 [&_svg]:h-4 [&_svg]:w-4",
+            sm: "h-9 px-3 text-sm [&_svg]:h-4 [&_svg]:w-4",
+            default: "h-control px-4 py-2 [&_svg]:h-4 [&_svg]:w-4",
+            icon: "h-control w-control [&_svg]:h-4 [&_svg]:w-4",
         },
     },
     defaultVariants: {

package/dist/calendar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayButton, DayPicker } from "react-day-picker";
+import { Button } from "./button";
+declare function CalendarDayButton({ className, day, modifiers, children, disabled, onClick, onFocus, onBlur, onKeyDown, onMouseEnter, onMouseLeave, tabIndex, type, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/calendar.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { buttonVariants } from "./button";
+import { cn } from "./lib/utils";
+function CalendarDayButton({ className, day, modifiers, children, disabled, onClick, onFocus, onBlur, onKeyDown, onMouseEnter, onMouseLeave, tabIndex, type, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (modifiers.focused)
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [modifiers.focused]);
+    return (_jsx("button", { ref: ref, type: type, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: tabIndex, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, "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("inline-flex cursor-pointer items-center justify-center rounded-md text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 aspect-square w-full min-w-[--cell-size] font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", defaultClassNames.day, className), children: children }));
+}
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 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("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border", defaultClassNames.dropdown_root),
+            dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("select-none font-medium", captionLayout === "label"
+                ? "text-sm"
+                : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal", 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-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
+            day: cn("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+            range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+            today: cn("bg-accent text-accent-foreground rounded-md 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: {
+            Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
+            Chevron: ({ className: chevronClassName, orientation }) => {
+                const svgProps = {
+                    className: cn("size-4", chevronClassName),
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                };
+                if (orientation === "left") {
+                    return _jsx("svg", { ...svgProps, children: _jsx("path", { d: "m15 18-6-6 6-6" }) });
+                }
+                if (orientation === "right") {
+                    return _jsx("svg", { ...svgProps, children: _jsx("path", { d: "m9 18 6-6-6-6" }) });
+                }
+                return _jsx("svg", { ...svgProps, children: _jsx("path", { d: "m6 9 6 6 6-6" }) });
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children: children }) })),
+            ...components,
+        }, ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/card.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: "default" | "elevated" | "gradient";
+    size?: "default" | "compact";
+    /** Large value displayed above the title — use for stat/metric cards. */
+    stat?: React.ReactNode;
+    /** Small supporting text below the stat or body — use for sub-metrics. */
+    subMetric?: React.ReactNode;
+    footer?: React.ReactNode;
+    active?: boolean;
+    /** Replaces title/stat/subMetric with skeleton placeholders while data is loading. */
+    loading?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export { Card };

package/dist/card.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+import { Skeleton } from "./skeleton";
+import { Typography } from "./typography";
+const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, loading = false, children, className, onClick, ...props }, ref) => {
+    const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "p", variant: "label", color: variant === "gradient" ? "inherit" : "muted", className: variant === "gradient" ? "opacity-80" : undefined, children: title }));
+    const renderedDescription = description == null ? null : React.isValidElement(description) ? (description) : (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-70" : undefined, children: description }));
+    return (_jsxs("div", { ref: ref, onClick: onClick, className: cn("rounded-lg border text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
+            "border-primary/20 bg-gradient-to-br from-primary to-primary/80 text-primary-foreground", active && "border-primary bg-primary/[0.04] ring-1 ring-primary/20", onClick && "cursor-pointer transition-colors hover:border-primary", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2", size === "default" && "p-6", size === "compact" && "p-3"), children: [loading ? (_jsx(Skeleton, { className: "h-3.5 w-24" })) : (renderedTitle), loading
+                        ? description != null && _jsx(Skeleton, { className: "h-5 w-40" })
+                        : renderedDescription, loading ? (stat !== undefined && _jsx(Skeleton, { className: "h-8 w-20" })) : stat ? (_jsx(Typography, { as: "p", variant: "title", color: variant === "gradient" ? "inherit" : undefined, children: stat })) : null, loading ? (subMetric !== undefined && _jsx(Skeleton, { className: "h-5 w-28" })) : subMetric ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-80" : undefined, children: subMetric })) : null] }), children ? (_jsx("div", { className: cn(size === "default" && "p-6 pt-0", size === "compact" && "p-3 pt-0"), children: children })) : null, footer ? (_jsx("div", { className: cn("flex items-center", size === "default" && "p-6 pt-0", size === "compact" && "p-3 pt-0"), children: footer })) : null] }));
+});
+Card.displayName = "Card";
+export { Card };

package/dist/checkbox.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Renders the checkbox in an indeterminate (mixed) state. */
+    indeterminate?: boolean;
+    /** Visual size of the checkbox. */
+    size?: "sm" | "md" | "lg";
+    /** Label rendered next to the checkbox. When provided, the checkbox and label are wrapped in a `<label>`. */
+    label?: React.ReactNode;
+    /** Description shown below the label in smaller muted text. */
+    description?: React.ReactNode;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/checkbox.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const sizeClasses = {
+    sm: "size-3.5",
+    md: "size-4",
+    lg: "size-5",
+};
+const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "md", checked, disabled, label, description, id, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    const generatedId = React.useId();
+    const inputId = id !== null && id !== void 0 ? id : `checkbox-${generatedId}`;
+    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    const box = (_jsxs("span", { className: cn("relative inline-block shrink-0 rounded-sm border bg-background align-middle text-primary-foreground transition-colors", sizeClasses[size], (checked || indeterminate) && !disabled
+            ? "border-primary bg-primary"
+            : "border-input", disabled && "cursor-not-allowed opacity-50", !label && className), children: [_jsx("input", { ref: innerRef, type: "checkbox", id: inputId, checked: checked, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed", ...props }), indeterminate ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null] }));
+    if (!label)
+        return box;
+    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer items-center gap-2 text-sm", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-1", children: description })) : null] })] }));
+});
+Checkbox.displayName = "Checkbox";
+export { Checkbox };

package/dist/collapsible.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface CollapsibleProps {
+    id?: string;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Element rendered on the right of the header, before the chevron (e.g. an edit button). */
+    headerAction?: React.ReactNode;
+    /** Element rendered inline after the title (e.g. a tooltip icon). */
+    titleAdornment?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+declare function Collapsible({ id, title, children, defaultOpen, open: openProp, onOpenChange, headerAction, titleAdornment, className, headerClassName, contentClassName, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleSection: typeof Collapsible;
+export { Collapsible, CollapsibleSection };

package/dist/collapsible.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronUp } from "lucide-react";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+function Collapsible({ id, title, children, defaultOpen = true, open: openProp, onOpenChange, headerAction, titleAdornment, className, headerClassName, contentClassName, }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolled;
+    const setOpen = (next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    return (_jsxs(CollapsiblePrimitive.Root, { id: id, open: open, onOpenChange: setOpen, className: cn("scroll-mt-24 border-b border-border", className), children: [_jsxs("div", { className: cn("flex items-center gap-2 py-3", headerClassName), children: [_jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex flex-1 cursor-pointer items-center gap-2 text-left text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm", children: [_jsx(Typography, { as: "h3", variant: "subheading", children: title }), titleAdornment] }) }), headerAction, _jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": open ? "Collapse section" : "Expand section", className: "group ml-1 cursor-pointer text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm", children: _jsx(ChevronUp, { "aria-hidden": "true", className: "h-4 w-4 transition-transform duration-150 group-data-[state=closed]:rotate-180" }) }) })] }), _jsx(CollapsiblePrimitive.Content, { "data-slot": "collapsible-content", className: "overflow-hidden", children: _jsx("div", { className: cn("pb-6 pt-4", contentClassName), children: children }) })] }));
+}
+const CollapsibleSection = Collapsible;
+export { Collapsible, CollapsibleSection };

package/dist/command-search.js

@@ -8,6 +8,7 @@ import { SearchIcon } from "./animated-icons/search";
 import { DialogRoot, DialogSurface } from "./dialog-primitive";
 import { FilterToggle } from "./filter-toggle";
 import { cn } from "./lib/utils";
+import { Typography } from "./typography";
 import { SearchHighlight } from "./use-search-highlight";
 function CommandSearchEmptyIcon({ className }) {
     return _jsx(SearchIcon, { className: className, size: 20 });
@@ -57,14 +58,14 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
         }
     }, [isOpen]);
     return (_jsxs("div", { className: className, ...props, children: [_jsxs(Button, { type: "button", onClick: () => setIsOpen(true), variant: "ghost", className: cn(isCollapsed
-                    ? "h-10 w-full justify-center rounded-lg px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"
-                    : "h-10 w-full min-w-[14rem] justify-start gap-3 rounded-lg border border-gray-200 bg-white px-3 !font-normal text-muted-foreground shadow-sm hover:bg-white hover:text-foreground"), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsx(DialogSurface, { className: cn("max-w-xl gap-0 overflow-hidden p-0 sm:max-w-xl", dialogClassName), hideCloseButton: true, children: _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, className: "text-sm" }), allFilter || filters.length ? (_jsxs("div", { className: "flex items-center gap-1 border-b px-3 py-2", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onClick: allFilter.onSelect, children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onClick: filter.onSelect, children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { className: cn("max-h-[400px] p-1", resultsClassName), children: children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
+                    ? "h-control w-full justify-center rounded-lg px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"
+                    : "h-control w-full min-w-[14rem] justify-start gap-3 rounded-lg border border-gray-200 bg-white px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsx(DialogSurface, { className: cn("max-w-xl gap-0 overflow-hidden p-0 sm:max-w-xl", dialogClassName), hideCloseButton: true, children: _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, className: "text-sm" }), allFilter || filters.length ? (_jsxs("div", { className: "flex items-center gap-1 border-b px-3 py-2", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onClick: allFilter.onSelect, children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onClick: filter.onSelect, children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { className: cn("max-h-[400px] p-1", resultsClassName), children: children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
                                                     var _a;
                                                     (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
                                                     if (item.closeOnSelect !== false) {
                                                         setIsOpen(false);
                                                     }
-                                                }, children: _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
+                                                }, children: _jsxs("div", { className: "min-w-0", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: "truncate", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
                                         ? `No results found for "${value}".`
                                         : "Results will appear here as you type." }))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
                                         ? `No results found for "${value}".`

package/dist/copy-button.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onCopy"> {
+    /** Text to copy to the clipboard. */
+    value: string;
+    /** Milliseconds the "copied" state stays visible. */
+    feedbackDuration?: number;
+    /** Optional label rendered next to the icon. When omitted, renders as icon-only. */
+    children?: React.ReactNode;
+    /** Called after a successful copy. */
+    onCopy?: (value: string) => void;
+    /** Called if the clipboard write fails. */
+    onError?: (error: unknown) => void;
+    /** Accessible label for the icon-only button. Defaults to "Copy". */
+    copyLabel?: string;
+    /** Accessible label announced after copy. Defaults to "Copied". */
+    copiedLabel?: string;
+}
+declare function CopyButton({ value, feedbackDuration, children, onCopy, onError, copyLabel, copiedLabel, className, type, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export { CopyButton };

package/dist/copy-button.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Copy } from "lucide-react";
+import { CheckIcon } from "./animated-icons/check";
+import { cn } from "./lib/utils";
+function CopyButton({ value, feedbackDuration = 1500, children, onCopy, onError, copyLabel = "Copy", copiedLabel = "Copied", className, type = "button", ...props }) {
+    const [copied, setCopied] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+    }, []);
+    const handleCopy = React.useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopy === null || onCopy === void 0 ? void 0 : onCopy(value);
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => setCopied(false), feedbackDuration);
+        }
+        catch (error) {
+            onError === null || onError === void 0 ? void 0 : onError(error);
+        }
+    }, [value, feedbackDuration, onCopy, onError]);
+    const iconOnly = children === undefined;
+    const label = copied ? copiedLabel : copyLabel;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: type, onClick: handleCopy, "aria-label": iconOnly ? label : undefined, className: cn("inline-flex cursor-pointer items-center gap-1.5 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50", !iconOnly && "text-sm font-medium", className), ...props, children: [copied ? (_jsx(CheckIcon, { size: 16, className: "text-green-600" })) : (_jsx(Copy, { className: "h-4 w-4", "aria-hidden": "true" })), iconOnly ? null : _jsx("span", { children: copied ? copiedLabel : children })] }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? copiedLabel : "" })] }));
+}
+export { CopyButton };

package/dist/date-input.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface DateInputProps {
+    label: React.ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    hideLabel?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    triggerClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
+    id?: string;
+}
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLButtonElement>>;
+export { DateInput };