@neasg/design-system 0.4.7 → 0.4.9

package/README.md

@@ -17,6 +17,127 @@ npm run build
 npm run storybook
 ```
 
+## Package Usage
+
+Import the stylesheet once at your app root before rendering package
+components:
+
+```ts
+import "@neasg/design-system/styles.css";
+```
+
+Use the root package import by default:
+
+```ts
+import {
+  Badge,
+  Button,
+  Card,
+  PageHeader,
+  Table,
+  Typography,
+} from "@neasg/design-system";
+```
+
+For Tailwind-based apps, use the exported preset so you inherit the shared
+colors, font tokens, radius tokens, spacing, and motion defaults:
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+import {
+  neaDesignSystemContent,
+  neaTailwindPreset,
+} from "@neasg/design-system";
+
+const config: Config = {
+  presets: [neaTailwindPreset],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    ...neaDesignSystemContent,
+  ],
+};
+
+export default config;
+```
+
+Theme tokens are provided through the exported stylesheet. The default root font
+size is 12.5px. If you want to change the package base font size, override
+`--font-size-root` after importing the stylesheet:
+
+```css
+:root {
+  --font-size-root: 14px;
+}
+```
+
+If you want the package font token to resolve to the actual Inter font in
+Next.js, load it into `--font-sans`:
+
+```ts
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+```
+
+Use package components before creating app-local UI copies. If a reusable
+pattern is missing, extract it into the design system instead of duplicating it
+locally. This design system is light-theme only.
+
+## AI Usage
+
+This design system includes the
+[Storybook MCP addon](https://storybook.js.org/docs/ai/mcp/overview), which
+lets AI coding assistants read component documentation, props, stories, and
+usage examples from Storybook.
+
+1. Start Storybook in this repo:
+
+   ```bash
+   npm run storybook
+   ```
+
+   Storybook runs on `http://localhost:6007`, with the MCP endpoint at
+   `http://localhost:6007/mcp`.
+
+2. In the consuming project, add a `.mcp.json` at the project root:
+
+   ```json
+   {
+     "mcpServers": {
+       "nea-design-system": {
+         "type": "http",
+         "url": "http://localhost:6007/mcp"
+       }
+     }
+   }
+   ```
+
+3. Restart your MCP-compatible AI tool. The docs toolset can list all
+   documentation, fetch documentation for a component, and fetch documentation
+   for a specific story. The development toolset can preview stories and fetch
+   Storybook story-writing instructions.
+
+If you are not using MCP, give your AI coding assistant these instructions:
+
+```text
+Use @neasg/design-system as the source of truth for shared UI.
+
+- Use the Storybook MCP server to discover available components and their APIs before writing UI code.
+- Prefer components from @neasg/design-system before creating app-local UI.
+- Import components from the root package:
+  import { Button, Input, Card, Table, Typography } from "@neasg/design-system";
+- Use the documented props-driven API. Do not build custom compositions from internal primitives.
+- Use the package theme tokens and Tailwind preset instead of inventing ad hoc colors, spacing, or radius values.
+- Use Typography for headings, body copy, labels, and captions.
+- This design system is light-theme only. Do not generate dark-mode styles, tokens, or examples.
+- If a needed shared pattern is missing, extract it into @neasg/design-system rather than duplicating it locally.
+```
+
 ## Publishing
 
 This package is built to `dist/` before publish. The public package entry points are the compiled files in `dist`, not the raw `src` files.

package/dist/alert.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+import { type ButtonProps } from "./button";
+import { type CheckboxProps } from "./checkbox";
 declare const alertVariants: (props?: ({
-    variant?: "info" | "success" | "warning" | "destructive" | null | undefined;
+    variant?: "destructive" | "info" | "success" | "warning" | 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;
@@ -11,5 +13,22 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     }>;
     action?: React.ReactNode;
 }
+export interface AlertActionProps extends Omit<ButtonProps, "variant" | "size"> {
+}
+export interface AlertConsentProps extends Omit<AlertProps, "children" | "description" | "icon"> {
+    checked?: CheckboxProps["checked"];
+    defaultChecked?: CheckboxProps["defaultChecked"];
+    disabled?: CheckboxProps["disabled"];
+    required?: CheckboxProps["required"];
+    name?: CheckboxProps["name"];
+    value?: CheckboxProps["value"];
+    checkboxId?: CheckboxProps["id"];
+    checkboxClassName?: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const AlertAction: React.ForwardRefExoticComponent<AlertActionProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
-export { Alert, alertVariants };
+declare const AlertConsent: React.ForwardRefExoticComponent<AlertConsentProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert, AlertAction, AlertConsent, alertVariants };

package/dist/alert.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
 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", {
+const alertVariants = cva("relative flex w-full items-start gap-2 rounded-surface 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))]",
@@ -16,9 +18,14 @@ const alertVariants = cva("relative flex w-full items-start gap-3 rounded-md bor
         variant: "info",
     },
 });
+const AlertAction = React.forwardRef(({ className, type = "button", ...props }, ref) => (_jsx(Button, { ref: ref, type: type, variant: "link", size: "compact", className: cn("h-auto min-h-6 px-0 text-inherit hover:text-inherit", className), ...props })));
+AlertAction.displayName = "AlertAction";
 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] }));
+    const hasStackedContent = Boolean(title);
+    return (_jsxs("div", { ref: ref, role: role, className: cn(alertVariants({ variant }), !hasStackedContent && "items-center", className), ...props, children: [Icon ? (_jsx(Icon, { className: cn("h-4 w-4 shrink-0", hasStackedContent && "mt-0.5") })) : 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-bold", children: title })) : null, body ? (_jsx(Typography, { as: "div", variant: "caption", color: "inherit", className: "opacity-95", children: body })) : null] }), action ? (_jsx("div", { className: cn("shrink-0 text-inherit [&_a]:text-inherit [&_button]:text-inherit [&_button:hover]:text-inherit", hasStackedContent ? "self-start" : "self-center"), children: action })) : null] }));
 });
 Alert.displayName = "Alert";
-export { Alert, alertVariants };
+const AlertConsent = React.forwardRef(({ variant = "success", checked, defaultChecked, disabled, required, name, value, checkboxId, checkboxClassName, label, description, onCheckedChange, role = "status", className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: variant, role: role, className: cn("items-start", className), description: _jsx(Checkbox, { id: checkboxId, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, required: required, onChange: (event) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event.target.checked), className: cn("[&>span:first-child]:mt-0.5", checkboxClassName), labelAlign: "start", label: label, description: description }), ...props })));
+AlertConsent.displayName = "AlertConsent";
+export { Alert, AlertAction, AlertConsent, alertVariants };

package/dist/avatar.d.ts

@@ -3,7 +3,7 @@ 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";
+export type AvatarSize = "xs" | "sm" | "md";
 interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarRoot>, "children"> {
     src?: string | null;
     alt?: string;
@@ -20,6 +20,8 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     size?: AvatarSize;
     loading?: boolean;
     name?: React.ReactNode;
+    nameAs?: React.ElementType;
+    nameTrailing?: React.ReactNode;
     role?: React.ReactNode;
     rolePlacement?: "above" | "below";
     topInfo?: React.ReactNode;
@@ -28,6 +30,7 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     imageClassName?: string;
     fallbackClassName?: string;
     contentClassName?: string;
+    nameRowClassName?: string;
     nameClassName?: string;
     roleClassName?: string;
     topInfoClassName?: string;
@@ -35,7 +38,7 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     avatarOverlay?: React.ReactNode;
 }
 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;
+declare function AvatarProfile({ src, alt, fallback, size, loading, name, nameAs: NameElement, nameTrailing, role, rolePlacement, topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameRowClassName, 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

@@ -11,28 +11,96 @@ 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";
 const avatarSizeClasses = {
-    sm: "h-8 w-8 text-xs",
-    md: "h-10 w-10 text-sm",
+    xs: "h-[24px] w-[24px] text-[11px]",
+    sm: "h-[32px] w-[32px] text-xs",
+    md: "h-[40px] w-[40px] text-sm",
 };
+const avatarProfileGapClasses = {
+    xs: "gap-2",
+    sm: "gap-2.5",
+    md: "gap-2.5",
+};
+const avatarProfileNameClasses = {
+    xs: "text-xs leading-4",
+    sm: "text-sm leading-5",
+    md: "text-sm leading-5",
+};
+const avatarProfileInfoClasses = {
+    xs: "text-[11px] leading-3",
+    sm: "text-xs leading-4",
+    md: "text-xs leading-4",
+};
+const avatarProfileContentGapClass = "gap-[2px]";
+const avatarFallbackPalette = [
+    {
+        background: "var(--nea-green-100)",
+        foreground: "var(--nea-green-800)",
+    },
+    {
+        background: "var(--nea-blue-100)",
+        foreground: "var(--nea-blue-800)",
+    },
+    {
+        background: "var(--nea-amber-100)",
+        foreground: "var(--nea-amber-800)",
+    },
+    {
+        background: "var(--nea-violet-100)",
+        foreground: "var(--nea-violet-800)",
+    },
+];
+function getAvatarFallbackSeed(value) {
+    if (value === null || value === undefined || typeof value === "boolean") {
+        return "";
+    }
+    if (typeof value === "string" || typeof value === "number") {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        return value.map(getAvatarFallbackSeed).join("");
+    }
+    if (React.isValidElement(value)) {
+        return getAvatarFallbackSeed(value.props.children);
+    }
+    return "";
+}
+function getAvatarFallbackTone(seed) {
+    let hash = 0;
+    for (let index = 0; index < seed.length; index += 1) {
+        hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
+    }
+    return avatarFallbackPalette[hash % avatarFallbackPalette.length];
+}
 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 })] }));
+    const fallbackTone = getAvatarFallbackTone(getAvatarFallbackSeed(fallback) || alt || "avatar");
+    const fallbackStyle = {
+        "--avatar-fallback-background": fallbackTone.background,
+        "--avatar-fallback-foreground": fallbackTone.foreground,
+    };
+    return (_jsxs(AvatarRoot, { className: cn(avatarSizeClasses[size], className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { style: fallbackStyle, className: cn("bg-[hsl(var(--avatar-fallback-background))] font-medium text-[hsl(var(--avatar-fallback-foreground))]", fallbackClassName), children: fallback })] }));
 }
-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 }) {
+function AvatarProfile({ src, alt = "", fallback, size = "sm", loading = false, name, nameAs: NameElement = "span", nameTrailing, role, rolePlacement = "below", topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameRowClassName, 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);
+    const hasSupportingInfo = (resolvedTop !== undefined && resolvedTop !== null) ||
+        (resolvedBottom !== undefined && resolvedBottom !== null);
+    const alignmentClassName = hasSupportingInfo ? "items-start" : "items-center";
+    const avatarOffsetClassName = hasSupportingInfo ? "mt-0.5" : 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] })] }));
+        return (_jsxs("div", { className: cn("flex min-w-0 max-w-full", alignmentClassName, avatarProfileGapClasses[size], className), "aria-busy": "true", ...props, children: [_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], avatarOffsetClassName, avatarClassName) }), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", avatarProfileContentGapClass, 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 ||
+        nameTrailing !== undefined ||
         resolvedTop !== undefined ||
         resolvedBottom !== undefined;
-    const infoBaseClass = "truncate text-[10px] leading-tight font-medium uppercase tracking-wide text-muted-foreground";
+    const infoBaseClass = cn("min-w-0 truncate text-muted-foreground", avatarProfileInfoClasses[size]);
     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] }));
+    const nameTextNode = name !== undefined && name !== null ? (_jsx(NameElement, { className: cn("min-w-0 truncate font-medium text-foreground", avatarProfileNameClasses[size], nameClassName), children: name })) : null;
+    const nameNode = nameTrailing !== undefined && nameTrailing !== null ? (_jsxs("div", { className: cn("flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", nameRowClassName), children: [nameTextNode, nameTrailing] })) : (nameTextNode);
+    return (_jsxs("div", { className: cn("flex min-w-0 max-w-full", alignmentClassName, avatarProfileGapClasses[size], className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: cn(avatarOffsetClassName, avatarClassName), imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", avatarProfileContentGapClass, contentClassName), children: [topNode, nameNode, bottomNode] })) : null] }));
 }
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };

package/dist/back-button.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { type ButtonProps } from "./button";
 export interface BackButtonProps extends Omit<ButtonProps, "asChild" | "size" | "variant"> {
+    /** Use `muted` for nested panel backs; keep `default` for leaving a page or task workspace. */
+    tone?: "default" | "muted";
 }
 declare const BackButton: React.ForwardRefExoticComponent<BackButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { BackButton };

package/dist/back-button.js

@@ -3,6 +3,6 @@ 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 })] })));
+const BackButton = React.forwardRef(({ children = "Back", className, tone = "default", 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", tone === "muted" && "text-muted-foreground hover:text-foreground", 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,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "muted" | "outline" | "info" | "success" | "warning" | "destructive" | "secondary" | "accent" | null | undefined;
+    variant?: "accent" | "muted" | "outline" | "destructive" | "secondary" | "info" | "success" | "warning" | null | undefined;
+    size?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Visual status label used for short categorical values like case state,
@@ -12,5 +13,5 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varian
     /** Show a visible border matching the badge colour. */
     bordered?: boolean;
 }
-declare function Badge({ className, variant, bordered, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, size, bordered, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/dist/badge.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
-const badgeVariants = cva("inline-flex max-w-[200px] items-center justify-center text-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate", {
+import { Typography } from "./typography";
+const badgeVariants = cva("inline-flex items-center justify-center text-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate", {
     variants: {
         variant: {
             secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -14,12 +15,17 @@ const badgeVariants = cva("inline-flex max-w-[200px] items-center justify-center
             info: "border-transparent bg-[hsl(var(--status-info))] text-[hsl(var(--status-info-foreground))]",
             accent: "border-transparent bg-[hsl(var(--status-accent))] text-[hsl(var(--status-accent-foreground))]",
         },
+        size: {
+            default: "max-w-[200px] px-2 py-0.5",
+            icon: "h-5 w-5 min-w-5 max-w-5 shrink-0 px-0 py-0",
+        },
     },
     defaultVariants: {
         variant: "secondary",
+        size: "default",
     },
 });
-function Badge({ className, variant, bordered = false, children, ...props }) {
+function Badge({ className, variant, size, bordered = false, children, ...props }) {
     const textContent = typeof children === "string"
         ? children
         : React.Children.toArray(children)
@@ -36,6 +42,6 @@ function Badge({ className, variant, bordered = false, children, ...props }) {
         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 }));
+    return (_jsx("div", { className: cn(badgeVariants({ variant, size }), bordered && borderedClasses[resolvedVariant], className), title: textContent || undefined, ...props, children: _jsx(Typography, { as: "span", variant: "eyebrow", color: "inherit", className: "inline-flex min-w-0 max-w-full items-center gap-1 truncate", children: children }) }));
 }
 export { Badge, badgeVariants };

package/dist/breadcrumb.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "./lib/utils";
+import { Typography } from "./typography";
 const BreadcrumbNav = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
 BreadcrumbNav.displayName = "BreadcrumbNav";
 const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className), ...props })));
@@ -18,7 +19,7 @@ const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx(
 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-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" })] }));
+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(Typography, { as: "span", variant: "subheading", color: "inherit", 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

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

package/dist/button.js

@@ -3,20 +3,22 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
-const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-control text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none [&_svg]:h-4 [&_svg]:min-h-4 [&_svg]:w-4 [&_svg]:min-w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/90",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-[hsl(var(--button-outline-border))] bg-[hsl(var(--button-outline-background))] text-foreground hover:bg-[hsl(var(--button-outline-hover-background))] hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
+            link: "text-primary underline-offset-4 hover:text-primary/85 hover:underline",
         },
         size: {
-            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",
+            sm: "h-8 px-2.5 text-sm",
+            compact: "h-8 gap-1 px-2 text-sm",
+            default: "h-control px-3 py-1.5",
+            icon: "h-control w-control",
+            compactIcon: "h-8 w-8",
         },
     },
     defaultVariants: {
@@ -25,7 +27,7 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
     },
 });
 function DefaultLoadingIndicator() {
-    return (_jsx("span", { "aria-hidden": "true", className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent" }));
+    return (_jsx("span", { "aria-hidden": "true", className: "h-4 min-h-4 w-4 min-w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent" }));
 }
 function hasTextLikeContent(node) {
     if (typeof node === "string") {
@@ -75,7 +77,7 @@ function attachAnimatedIconRefs(node, refs) {
         return node;
     }
     if (Array.isArray(node)) {
-        return node.map((child) => attachAnimatedIconRefs(child, refs));
+        return React.Children.map(node, (child) => attachAnimatedIconRefs(child, refs));
     }
     if (!React.isValidElement(node)) {
         return node;
@@ -104,8 +106,9 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
     const loadingLabel = loadingText !== null && loadingText !== void 0 ? loadingText : children;
     const animatedIconRefs = React.useRef([]);
     animatedIconRefs.current = [];
-    if (size === "icon" && hasTextLikeContent(children)) {
-        throw new Error('NEA Button `size="icon"` only accepts icon components or SVG content. Do not pass text or emoji.');
+    if ((size === "icon" || size === "compactIcon") &&
+        hasTextLikeContent(children)) {
+        throw new Error('NEA Button `size="icon"` and `size="compactIcon"` only accepts icon components or SVG content. Do not pass text or emoji.');
     }
     const content = loading ? (loadingLabel ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}), _jsx("span", { children: attachAnimatedIconRefs(loadingLabel, animatedIconRefs) })] })) : (loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}))) : (attachAnimatedIconRefs(children, animatedIconRefs));
     const startAnimatedIcons = () => {

package/dist/calendar.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { buttonVariants } from "./button";
 import { cn } from "./lib/utils";
+import { Typography } from "./typography";
 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);
@@ -15,7 +16,7 @@ function CalendarDayButton({ className, day, modifiers, children, disabled, onCl
     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 }));
+            !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-control 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-primary/10 data-[range-middle=true]:text-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] data-[range-end=true]:rounded-control data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-control group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", defaultClassNames.day, className), children: _jsx(Typography, { as: "span", variant: "bodySm", color: "inherit", children: children }) }));
 }
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
@@ -31,22 +32,22 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             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_root: cn("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-control 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),
+                : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-control 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),
+            weekday: cn("text-muted-foreground flex-1 select-none rounded-control 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),
+            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-[var(--radius-control)] [&:last-child[data-selected=true]_button]:rounded-r-[var(--radius-control)]", defaultClassNames.day),
+            range_start: cn("bg-primary/10 rounded-l-[var(--radius-control)]", defaultClassNames.range_start),
+            range_middle: cn("bg-primary/10 rounded-none", defaultClassNames.range_middle),
+            range_end: cn("bg-primary/10 rounded-r-[var(--radius-control)]", defaultClassNames.range_end),
+            today: cn("bg-accent text-accent-foreground rounded-control 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),

package/dist/card.d.ts

@@ -10,8 +10,36 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "t
     subMetric?: React.ReactNode;
     footer?: React.ReactNode;
     active?: boolean;
+    accent?: "primary";
     /** Replaces title/stat/subMetric with skeleton placeholders while data is loading. */
     loading?: boolean;
 }
+export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3 | 4;
+    align?: "stretch" | "start";
+}
+export interface CardSplitGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    asideWidth?: "sm" | "md" | "lg";
+    breakpoint?: "lg" | "xl";
+    align?: "stretch" | "start";
+}
+export interface CardListProps extends React.HTMLAttributes<HTMLDivElement> {
+    density?: "default" | "compact";
+    variant?: "cards" | "divided";
+}
+export interface CardListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    leading?: React.ReactNode;
+    leadingVariant?: "badge" | "plain";
+    trailing?: React.ReactNode;
+    meta?: React.ReactNode;
+    labelLines?: 1 | 2;
+    descriptionLines?: 1 | 2;
+}
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-export { Card };
+declare function CardGrid({ columns, align, className, ...props }: CardGridProps): import("react/jsx-runtime").JSX.Element;
+declare function CardSplitGrid({ asideWidth, breakpoint, align, className, ...props }: CardSplitGridProps): import("react/jsx-runtime").JSX.Element;
+declare function CardList({ density, variant, className, ...props }: CardListProps): import("react/jsx-runtime").JSX.Element;
+declare function CardListItem({ label, description, leading, leadingVariant, trailing, meta, labelLines, descriptionLines, className, onClick, ...props }: CardListItemProps): import("react/jsx-runtime").JSX.Element;
+export { Card, CardGrid, CardSplitGrid, CardList, CardListItem };