@neasg/design-system 0.3.0 → 0.4.3

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,30 +3,39 @@ 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;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    loading?: boolean;
     imageClassName?: string;
     fallbackClassName?: string;
 }
 interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
     src?: string | null;
     alt?: string;
-    fallback: React.ReactNode;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    loading?: boolean;
     name?: React.ReactNode;
     role?: React.ReactNode;
     rolePlacement?: "above" | "below";
+    topInfo?: React.ReactNode;
+    bottomInfo?: React.ReactNode;
     avatarClassName?: string;
     imageClassName?: string;
     fallbackClassName?: string;
     contentClassName?: string;
     nameClassName?: string;
     roleClassName?: string;
+    topInfoClassName?: string;
+    bottomInfoClassName?: 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, loading, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function AvatarProfile({ src, alt, fallback, size, loading, name, role, rolePlacement, topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, 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

@@ -3,19 +3,36 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "./lib/utils";
+import { Skeleton } from "./skeleton";
 const AvatarRoot = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex shrink-0 overflow-hidden rounded-full", className), ...props })));
 AvatarRoot.displayName = "AvatarRoot";
 const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square size-full", className), ...props })));
 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", loading = false, className, imageClassName, fallbackClassName, ...props }) {
+    if (loading) {
+        return (_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], className), ...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 }) {
-    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] }));
+function AvatarProfile({ src, alt = "", fallback, size = "sm", loading = false, name, role, rolePlacement = "above", topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }) {
+    const resolvedTop = topInfo !== null && topInfo !== void 0 ? topInfo : (rolePlacement === "above" ? role : undefined);
+    const resolvedBottom = bottomInfo !== null && bottomInfo !== void 0 ? bottomInfo : (rolePlacement === "below" ? role : undefined);
+    if (loading) {
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-busy": "true", ...props, children: [_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], avatarClassName) }), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-1.5", contentClassName), children: [resolvedTop !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null, _jsx(Skeleton, { className: "h-4 w-32" }), resolvedBottom !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null] })] }));
+    }
+    const hasMeta = name !== undefined ||
+        resolvedTop !== undefined ||
+        resolvedBottom !== undefined;
+    const infoBaseClass = "truncate text-[10px] leading-tight font-medium uppercase tracking-wide text-muted-foreground";
+    const topNode = resolvedTop !== undefined && resolvedTop !== null ? (_jsx("span", { className: cn(infoBaseClass, topInfo !== undefined ? topInfoClassName : roleClassName), children: resolvedTop })) : null;
+    const bottomNode = resolvedBottom !== undefined && resolvedBottom !== null ? (_jsx("span", { className: cn(infoBaseClass, bottomInfo !== undefined ? bottomInfoClassName : roleClassName), children: resolvedBottom })) : null;
+    const nameNode = name ? (_jsx("span", { className: cn("truncate text-sm leading-tight 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, size: size, className: avatarClassName, imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", contentClassName), children: [topNode, nameNode, bottomNode] })) : 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,

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" | "lg" | "icon" | 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/card.d.ts

@@ -3,12 +3,15 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "t
     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

@@ -2,8 +2,15 @@
 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", stat, subMetric, footer, active, children, className, onClick, ...props }, ref) => (_jsxs("div", { ref: ref, onClick: onClick, className: cn("rounded-xl 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/10 ring-1 ring-primary/20", onClick && "cursor-pointer transition-colors hover:border-primary", className), ...props, children: [_jsxs("div", { className: "flex flex-col gap-2 p-6", children: [_jsx(Typography, { as: "p", variant: "label", color: variant === "gradient" ? "inherit" : "muted", className: variant === "gradient" ? "opacity-80" : undefined, children: title }), description ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-70" : undefined, children: description })) : null, stat ? (_jsx(Typography, { as: "p", variant: "title", color: variant === "gradient" ? "inherit" : undefined, children: stat })) : null, 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: "p-6 pt-0", children: children }) : null, footer ? (_jsx("div", { className: "flex items-center p-6 pt-0", children: footer })) : null] })));
+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

@@ -58,8 +58,8 @@ 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 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) {

package/dist/command.d.ts

@@ -45,7 +45,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;

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.js

@@ -5,7 +5,7 @@ import { format, parse } from "date-fns";
 import { Calendar } from "./calendar";
 import { inputControlClassName } from "./input-control";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { PopoverContent, PopoverRoot, PopoverTrigger } from "./popover-primitive";
 import { cn } from "./lib/utils";
 function parseDateString(dateStr) {
     if (!(dateStr === null || dateStr === void 0 ? void 0 : dateStr.trim()))
@@ -49,7 +49,7 @@ const DateInput = React.forwardRef(({ label, value, onValueChange, description,
         onValueChange(date ? formatISODate(date) : "");
         setOpen(false);
     };
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative w-full", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", style: { width: 14, height: 14 }, "aria-hidden": "true", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "cursor-pointer pl-9 text-left", !selectedDate && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: displayValue !== null && displayValue !== void 0 ? displayValue : _jsx("span", { children: placeholder }) })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: (date) => {
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative w-full", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", style: { width: 14, height: 14 }, "aria-hidden": "true", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "cursor-pointer pl-9 text-left", !selectedDate && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: displayValue !== null && displayValue !== void 0 ? displayValue : _jsx("span", { children: placeholder }) })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: (date) => {
                                 if (minDate && date < minDate)
                                     return true;
                                 if (maxDate && date > maxDate)

package/dist/dialog-primitive.js

@@ -10,7 +10,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
+const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
 DialogSurface.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";

package/dist/draggable-tabs.js

@@ -19,7 +19,7 @@ function TabButton({ item, dragHandleProps, }) {
             : isDraggable
                 ? "cursor-grab active:cursor-grabbing"
                 : "cursor-pointer", item.active
-            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-green-500"
+            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-green-500 hover:bg-muted"
             : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-muted", item.className), ...dragHandleProps, children: [_jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-2 py-3 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
                     var _a;
                     event.stopPropagation();

package/dist/drawer.js

@@ -46,7 +46,7 @@ const drawerSurfaceVariants = cva("fixed z-50 flex flex-col gap-4 overflow-y-aut
     },
 });
 function DrawerSurface({ side, className, children, hideCloseButton, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { className: cn(drawerSurfaceVariants({ side }), className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
 }
 function Drawer({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, side = "right", contentClassName, bodyClassName, hideCloseButton, }) {
     const [isOpen, setIsOpen] = useControllableOpen({

package/dist/editable-table.js

@@ -97,11 +97,11 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
         return String(cellValue);
     };
     const hasActionsColumn = isEditing || Boolean(renderRowActions);
-    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { className: "table-fixed", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "56px", minWidth: renderRowActions ? "120px" : "56px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [columns.map((column, columnIndex) => {
+    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { className: "table-fixed", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [columns.map((column, index) => (_jsx(TableHead, { width: column.width, minWidth: getColumnMinWidth(column), children: _jsx("div", { className: "whitespace-nowrap", children: column.header }) }, `header-${index}`))), hasActionsColumn ? (_jsx(TableHead, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px" })) : null] }) }), _jsx(TableBody, { children: value.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (hasActionsColumn ? 1 : 0), className: "py-8 text-center text-muted-foreground", children: "No data available" }) })) : (value.map((row, rowIndex) => (_jsxs(TableRow, { className: rowIndex % 2 === 0 ? "bg-muted/30" : undefined, children: [columns.map((column, columnIndex) => {
                                         const cellValue = getNestedValue(row, column.path);
                                         const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
                                             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
-                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-10 w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
+                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
                                                     cellValue === undefined ||
                                                     cellValue === ""
                                                     ? "text-muted-foreground"

package/dist/empty-state.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
 function EmptyState({ message, description, icon: Icon, action, className, ...props }) {
-    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-5 w-5 text-muted-foreground/70" })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-4", children: action }) : null] }));
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: "mb-4 h-10 w-10 stroke-[1.5] text-muted-foreground/70" })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] }), action ? _jsx("div", { className: "pt-6", children: action }) : null] }));
 }
 export { EmptyState };

package/dist/field.d.ts

@@ -1,6 +1,9 @@
 import * as React from "react";
 declare function Field({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<"label">): import("react/jsx-runtime").JSX.Element;
+interface FieldLabelProps extends React.ComponentProps<"label"> {
+    required?: boolean;
+}
+declare function FieldLabel({ className, required, children, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
 declare function FieldError({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
 export { Field, FieldDescription, FieldError, FieldLabel };