@neasg/design-system 0.4.8 → 0.4.10

package/dist/card.js

@@ -1,16 +1,70 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
 import { Skeleton } from "./skeleton";
 import { Typography } from "./typography";
-const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, loading = false, children, className, onClick, ...props }, ref) => {
-    const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "p", variant: "label", color: variant === "gradient" ? "inherit" : "muted", className: variant === "gradient" ? "opacity-80" : undefined, children: title }));
+const cardGridColumns = {
+    1: "grid-cols-1",
+    2: "sm:grid-cols-2",
+    3: "md:grid-cols-2 lg:grid-cols-3",
+    4: "sm:grid-cols-2 xl:grid-cols-4",
+};
+const cardSplitGridColumns = {
+    lg: {
+        sm: "lg:grid-cols-[minmax(0,1fr)_18rem]",
+        md: "lg:grid-cols-[minmax(0,1fr)_20rem]",
+        lg: "lg:grid-cols-[minmax(0,1fr)_22rem]",
+    },
+    xl: {
+        sm: "xl:grid-cols-[minmax(0,1fr)_18rem]",
+        md: "xl:grid-cols-[minmax(0,1fr)_20rem]",
+        lg: "xl:grid-cols-[minmax(0,1fr)_22rem]",
+    },
+};
+const Card = React.forwardRef(({ title, description, variant = "default", size = "default", stat, subMetric, footer, active, accent, loading = false, children, className, onClick, onKeyDown, role, tabIndex, ...props }, ref) => {
+    const interactive = Boolean(onClick);
+    const hasStat = stat !== undefined;
+    const handleKeyDown = (event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.defaultPrevented ||
+            !interactive ||
+            !onClick ||
+            (event.key !== "Enter" && event.key !== " ")) {
+            return;
+        }
+        event.preventDefault();
+        onClick(event);
+    };
+    const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "p", variant: hasStat ? "caption" : "body", color: variant === "gradient" ? "inherit" : hasStat ? "muted" : "foreground", className: cn(hasStat && "font-medium", !hasStat && "font-semibold", variant === "gradient" && "opacity-80"), 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
+    return (_jsxs("div", { ref: ref, onClick: onClick, onKeyDown: handleKeyDown, role: role !== null && role !== void 0 ? role : (interactive ? "button" : undefined), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (interactive ? 0 : undefined), className: cn("rounded-surface border border-[hsl(var(--card-border))] text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
+            "border-[hsl(var(--card-gradient-border))]/30 bg-gradient-to-br from-[hsl(var(--card-gradient-from))] to-[hsl(var(--card-gradient-to))] text-[hsl(var(--card-gradient-foreground))]", active && "border-primary bg-primary/[0.04] ring-1 ring-primary/20", accent === "primary" &&
+            "border-[hsl(var(--card-border))] shadow-[inset_4px_0_0_0_hsl(var(--primary))]", interactive &&
+            "cursor-pointer transition-[border-color,background-color,box-shadow] hover:border-primary/50 hover:bg-primary/5 hover:shadow-md focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2", size === "default" && "p-4", 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] }));
+                        : 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-4 pt-0", size === "compact" && "p-3 pt-0"), children: children })) : null, footer ? (_jsx("div", { className: cn("flex items-center", size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: footer })) : null] }));
 });
 Card.displayName = "Card";
-export { Card };
+function CardGrid({ columns = 3, align = "stretch", className, ...props }) {
+    return (_jsx("div", { className: cn("grid gap-3", cardGridColumns[columns], align === "start" && "auto-rows-max items-start", className), ...props }));
+}
+function CardSplitGrid({ asideWidth = "md", breakpoint = "xl", align = "start", className, ...props }) {
+    return (_jsx("div", { className: cn("grid gap-3", cardSplitGridColumns[breakpoint][asideWidth], align === "start" && "auto-rows-max items-start", className), ...props }));
+}
+function CardList({ density = "default", variant = "cards", className, ...props }) {
+    return (_jsx("div", { className: cn("grid", variant === "cards" && density === "default" && "gap-2", variant === "cards" && density === "compact" && "gap-1.5", variant === "divided" &&
+            "overflow-hidden rounded-surface border border-[hsl(var(--card-border))] bg-background", variant === "divided" &&
+            "[&>[data-slot=card-list-item]]:rounded-none [&>[data-slot=card-list-item]]:border-0 [&>[data-slot=card-list-item]+[data-slot=card-list-item]]:border-t [&>[data-slot=card-list-item]+[data-slot=card-list-item]]:border-[hsl(var(--card-border))]", className), ...props }));
+}
+function CardListItem({ label, description, leading, leadingVariant = "badge", trailing, meta, labelLines = 1, descriptionLines = 1, className, onClick, ...props }) {
+    const interactive = Boolean(onClick);
+    const trailingNode = trailing == null || React.isValidElement(trailing) ? (trailing) : (_jsx(Typography, { as: "span", variant: "bodySm", className: "block truncate font-medium", children: trailing }));
+    const content = (_jsxs(_Fragment, { children: [leading !== undefined ? (leadingVariant === "badge" ? (_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-surface bg-muted text-sm font-semibold text-foreground", children: leading })) : (_jsx("div", { className: "shrink-0 text-muted-foreground", children: leading }))) : null, _jsxs("div", { className: "min-w-0 flex-1 overflow-hidden", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: cn("min-w-0 font-medium text-foreground", labelLines === 1 && "truncate", labelLines === 2 && "line-clamp-2"), children: label }), meta !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: "min-w-0 max-w-[50%] shrink truncate text-right text-muted-foreground", children: meta })) : null] }), description !== undefined ? (_jsx(Typography, { as: "p", variant: "caption", className: cn("mt-0.5 text-muted-foreground", descriptionLines === 1 && "truncate", descriptionLines === 2 && "line-clamp-2"), children: description })) : null] }), trailingNode !== undefined ? (_jsx("div", { className: "min-w-0 max-w-[45%] shrink-0 overflow-hidden truncate text-right [&>*]:max-w-full", children: trailingNode })) : null] }));
+    const itemClassName = cn("flex w-full min-w-0 items-center gap-3 rounded-surface border border-[hsl(var(--card-border))] bg-background py-2 pl-3 pr-4 text-left", interactive && "cursor-pointer transition-colors hover:border-primary", className);
+    if (interactive) {
+        return (_jsx("button", { type: "button", "data-slot": "card-list-item", className: itemClassName, onClick: onClick, ...props, children: content }));
+    }
+    return (_jsx("div", { "data-slot": "card-list-item", className: itemClassName, ...props, children: content }));
+}
+export { Card, CardGrid, CardSplitGrid, CardList, CardListItem };

package/dist/checkbox.d.ts

@@ -8,6 +8,8 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     label?: React.ReactNode;
     /** Description shown below the label in smaller muted text. */
     description?: React.ReactNode;
+    /** Aligns the checkbox control against the label content. */
+    labelAlign?: "center" | "start";
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export { Checkbox };

package/dist/checkbox.js

@@ -8,10 +8,16 @@ const sizeClasses = {
     md: "size-4",
     lg: "size-5",
 };
-const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "md", checked, disabled, label, description, id, ...props }, ref) => {
+const startAlignedOffsetClasses = {
+    sm: "mt-[3px]",
+    md: "mt-[3px]",
+    lg: "mt-0",
+};
+const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "md", checked, disabled, label, description, labelAlign = "center", id, ...props }, ref) => {
     const innerRef = React.useRef(null);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `checkbox-${generatedId}`;
+    const alignToStart = labelAlign === "start" || Boolean(description);
     React.useImperativeHandle(ref, () => innerRef.current);
     React.useEffect(() => {
         if (innerRef.current) {
@@ -20,10 +26,10 @@ const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "m
     }, [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] }));
+            : "border-input", disabled && "cursor-not-allowed opacity-50", label && alignToStart && startAlignedOffsetClasses[size], !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] })] }));
+    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer gap-2 text-sm", alignToStart ? "items-start" : "items-center", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: description })) : null] })] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/close-button.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from "./button";
+export interface CloseButtonProps extends Omit<ButtonProps, "children"> {
+    iconSize?: number;
+}
+declare function CloseButton({ className, iconSize, variant, size, "aria-label": ariaLabel, ...props }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export { CloseButton };

package/dist/close-button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XIcon } from "./animated-icons/x";
+import { Button } from "./button";
+import { cn } from "./lib/utils";
+function CloseButton({ className, iconSize = 16, variant = "ghost", size = "compactIcon", "aria-label": ariaLabel = "Close", ...props }) {
+    return (_jsx(Button, { type: "button", variant: variant, size: size, "aria-label": ariaLabel, className: cn("text-muted-foreground hover:text-foreground [&_svg]:h-4 [&_svg]:w-4", className), ...props, children: _jsx(XIcon, { size: iconSize }) }));
+}
+export { CloseButton };

package/dist/collapsible.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type TypographyProps } from "./typography";
 export interface CollapsibleProps {
     id?: string;
     title: React.ReactNode;
@@ -10,10 +11,15 @@ export interface CollapsibleProps {
     headerAction?: React.ReactNode;
     /** Element rendered inline after the title (e.g. a tooltip icon). */
     titleAdornment?: React.ReactNode;
+    showChevron?: boolean;
     className?: string;
     headerClassName?: string;
+    triggerClassName?: string;
+    titleClassName?: string;
+    titleVariant?: TypographyProps["variant"];
+    chevronClassName?: 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 function Collapsible({ id, title, children, defaultOpen, open: openProp, onOpenChange, headerAction, titleAdornment, showChevron, className, headerClassName, triggerClassName, titleClassName, titleVariant, chevronClassName, contentClassName, }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
 declare const CollapsibleSection: typeof Collapsible;
 export { Collapsible, CollapsibleSection };

package/dist/collapsible.js

@@ -5,7 +5,7 @@ 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, }) {
+function Collapsible({ id, title, children, defaultOpen = true, open: openProp, onOpenChange, headerAction, titleAdornment, showChevron = true, className, headerClassName, triggerClassName, titleClassName, titleVariant = "subheading", chevronClassName, contentClassName, }) {
     const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
     const isControlled = openProp !== undefined;
     const open = isControlled ? openProp : uncontrolled;
@@ -14,7 +14,7 @@ function Collapsible({ id, title, children, defaultOpen = true, open: openProp,
             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 }) })] }));
+    return (_jsxs(CollapsiblePrimitive.Root, { id: id, open: open, onOpenChange: setOpen, className: cn("scroll-mt-24 border-b border-border", className), children: [_jsxs("div", { "data-slot": "collapsible-header", className: cn("flex items-center gap-1.5 py-2", headerClassName), children: [_jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", "data-slot": "collapsible-trigger", className: cn("flex flex-1 cursor-pointer items-center gap-2 rounded-sm text-left text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", triggerClassName), children: [_jsx(Typography, { as: "h3", variant: titleVariant, className: titleClassName, children: title }), titleAdornment] }) }), headerAction, showChevron ? (_jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", "data-slot": "collapsible-chevron-trigger", "aria-label": open ? "Collapse section" : "Expand section", className: "group ml-1 cursor-pointer rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(ChevronUp, { "aria-hidden": "true", className: cn("h-4 w-4 transition-transform duration-150 group-data-[state=closed]:rotate-180", chevronClassName) }) }) })) : null] }), _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.d.ts

@@ -20,6 +20,7 @@ export interface CommandSearchSection {
     heading: string;
     items: CommandSearchItem[];
 }
+export type CommandSearchShowAllResultsLabel = React.ReactNode | ((query: string, hasResults: boolean) => React.ReactNode);
 export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     value: string;
     onValueChange: (value: string) => void;
@@ -29,6 +30,7 @@ export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivEle
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    triggerVariant?: "default" | "sidebar";
     triggerPlaceholder?: string;
     inputPlaceholder?: string;
     /** The key that opens the dialog when pressed with Cmd/Ctrl (e.g. "k", "j"). */
@@ -37,8 +39,21 @@ export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivEle
     shortcutLabel?: string;
     allFilter?: CommandSearchFilter;
     filters?: CommandSearchFilter[];
+    /** Shows command-list skeleton rows while results are being fetched. */
+    loading?: boolean;
+    /** Number of skeleton rows shown while `loading` is true. */
+    loadingRows?: number;
+    /**
+     * Renders a footer action for routing to a full search results page.
+     * The action is shown only when the query is not empty and results are not loading.
+     */
+    onShowAllResults?: (query: string) => void;
+    /** Custom label for the full-results footer action. */
+    showAllResultsLabel?: CommandSearchShowAllResultsLabel;
+    /** Class names applied to the button that opens the command dialog. */
+    triggerClassName?: string;
     dialogClassName?: string;
     resultsClassName?: string;
 }
-declare function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed, open, defaultOpen, onOpenChange, triggerPlaceholder, inputPlaceholder, shortcutKey, shortcutLabel, allFilter, filters, dialogClassName, resultsClassName, ...props }: CommandSearchProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed, open, defaultOpen, onOpenChange, triggerVariant, triggerPlaceholder, inputPlaceholder, shortcutKey, shortcutLabel, allFilter, filters, loading, loadingRows, onShowAllResults, showAllResultsLabel, triggerClassName, dialogClassName, resultsClassName, ...props }: CommandSearchProps): import("react/jsx-runtime").JSX.Element;
 export { CommandSearch };

package/dist/command-search.js

@@ -1,13 +1,15 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "./button";
 import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "./command";
 import { EmptyState } from "./empty-state";
 import { SearchIcon } from "./animated-icons/search";
-import { DialogRoot, DialogSurface } from "./dialog-primitive";
+import { DialogRoot, DialogSurface, DialogTitle } from "./dialog-primitive";
 import { FilterToggle } from "./filter-toggle";
 import { cn } from "./lib/utils";
+import { PopoverMenuFooter, PopoverMenuFooterAction } from "./popover-menu";
+import { Skeleton } from "./skeleton";
 import { Typography } from "./typography";
 import { SearchHighlight } from "./use-search-highlight";
 function CommandSearchEmptyIcon({ className }) {
@@ -20,6 +22,9 @@ function getCommandSearchItemValue(item) {
         .join(" ");
     return (_b = item.value) !== null && _b !== void 0 ? _b : fallbackValue;
 }
+function CommandSearchSkeleton({ rows = 4 }) {
+    return (_jsx("div", { className: "space-y-[var(--space-1)] p-[var(--space-1)]", children: Array.from({ length: rows }).map((_, index) => (_jsxs("div", { className: "space-y-[var(--space-2)] rounded-sm px-[var(--space-2)] py-[var(--space-2)]", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-3 w-56 max-w-full" })] }, index))) }));
+}
 function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
     const isControlled = open !== undefined;
@@ -32,7 +37,7 @@ function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
     }, [isControlled, onOpenChange]);
     return [currentOpen, setOpen];
 }
-function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed = false, open, defaultOpen, onOpenChange, triggerPlaceholder = "Search...", inputPlaceholder = "Search...", shortcutKey = "k", shortcutLabel, allFilter, filters = [], dialogClassName, resultsClassName, ...props }) {
+function CommandSearch({ value, onValueChange, sections, children, className, isCollapsed = false, open, defaultOpen, onOpenChange, triggerVariant = "default", triggerPlaceholder = "Search...", inputPlaceholder = "Search...", shortcutKey = "k", shortcutLabel, allFilter, filters = [], loading = false, loadingRows = 4, onShowAllResults, showAllResultsLabel, triggerClassName, dialogClassName, resultsClassName, ...props }) {
     const [isOpen, setIsOpen] = useControllableOpen({
         open,
         defaultOpen,
@@ -41,6 +46,13 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
     const inputRef = React.useRef(null);
     const normalizedValue = value.trim();
     const visibleSections = React.useMemo(() => (sections !== null && sections !== void 0 ? sections : []).filter((section) => section.items.length > 0), [sections]);
+    const hasResults = children !== undefined || visibleSections.length > 0;
+    const shouldShowAllResults = Boolean(onShowAllResults) && Boolean(normalizedValue) && !loading;
+    const resolvedShowAllResultsLabel = typeof showAllResultsLabel === "function"
+        ? showAllResultsLabel(normalizedValue, hasResults)
+        : showAllResultsLabel !== null && showAllResultsLabel !== void 0 ? showAllResultsLabel : (hasResults
+            ? `Show all results for "${normalizedValue}"`
+            : `Search all records for "${normalizedValue}"`);
     const resolvedLabel = shortcutLabel !== null && shortcutLabel !== void 0 ? shortcutLabel : `⌘${shortcutKey.toUpperCase()}`;
     React.useEffect(() => {
         const handleKeyDown = (event) => {
@@ -57,18 +69,32 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
             window.setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
         }
     }, [isOpen]);
-    return (_jsxs("div", { className: className, ...props, children: [_jsxs(Button, { type: "button", onClick: () => setIsOpen(true), variant: "ghost", className: cn(isCollapsed
-                    ? "h-control w-full justify-center rounded-lg px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"
-                    : "h-control w-full min-w-[14rem] justify-start gap-3 rounded-lg border border-gray-200 bg-white px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"), children: [_jsx(SearchIcon, { className: "shrink-0", size: 16 }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-left text-sm", children: triggerPlaceholder }), _jsx("kbd", { className: "hidden h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsx(DialogSurface, { className: cn("max-w-xl gap-0 overflow-hidden p-0 sm:max-w-xl", dialogClassName), hideCloseButton: true, children: _jsxs(Command, { shouldFilter: false, className: "rounded-none border-0", children: [_jsx(CommandInput, { ref: inputRef, value: value, onValueChange: onValueChange, placeholder: inputPlaceholder, className: "text-sm" }), allFilter || filters.length ? (_jsxs("div", { className: "flex items-center gap-1 border-b px-3 py-2", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onClick: allFilter.onSelect, children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onClick: filter.onSelect, children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { className: cn("max-h-[400px] p-1", resultsClassName), children: children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
-                                                    var _a;
-                                                    (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
-                                                    if (item.closeOnSelect !== false) {
-                                                        setIsOpen(false);
-                                                    }
-                                                }, children: _jsxs("div", { className: "min-w-0", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: "truncate", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
-                                        ? `No results found for "${value}".`
-                                        : "Results will appear here as you type." }))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
-                                        ? `No results found for "${value}".`
-                                        : "Results will appear here as you type." })) })] }) }) })] }));
+    const preserveInputFocus = React.useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const selectFilter = React.useCallback((onSelect) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        window.setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, []);
+    return (_jsxs("div", { className: className, ...props, children: [_jsxs(Button, { type: "button", onClick: () => setIsOpen(true), variant: "ghost", size: isCollapsed ? "icon" : "default", className: cn(triggerVariant === "sidebar" && isCollapsed
+                    ? "h-control min-h-control w-control min-w-control max-w-control shrink-0 rounded-control border-none bg-transparent p-0 !font-normal text-muted-foreground hover:bg-card hover:text-foreground focus-visible:bg-card focus-visible:ring-ring/30"
+                    : triggerVariant === "sidebar"
+                        ? "h-control w-full min-w-[14rem] justify-start gap-2 rounded-control border border-[hsl(var(--layout-sidebar-border))] bg-card px-2.5 !font-normal text-muted-foreground shadow-none hover:bg-card hover:text-foreground focus-visible:border-ring focus-visible:bg-card focus-visible:ring-ring/30"
+                        : isCollapsed
+                            ? "h-control min-h-control w-control min-w-control max-w-control shrink-0 rounded-control p-0 !font-normal text-muted-foreground hover:bg-card hover:text-foreground"
+                            : "h-control w-full min-w-[14rem] justify-start gap-2 rounded-control border border-border bg-card px-2.5 !font-normal text-muted-foreground hover:bg-card hover:text-foreground", triggerClassName), 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-[20px] items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[11px] text-muted-foreground sm:inline-flex", children: resolvedLabel })] })) : null] }), _jsx(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DialogSurface, { className: cn("w-[calc(100vw-2rem)] max-w-[52rem] gap-0 overflow-hidden p-0 sm:w-[min(64vw,52rem)]", dialogClassName), "aria-describedby": undefined, hideCloseButton: true, children: [_jsx(DialogTitle, { className: "sr-only", children: inputPlaceholder }), _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 flex-wrap items-center gap-1 border-b px-2.5 py-1.5", children: [allFilter ? (_jsx(FilterToggle, { selected: allFilter.selected, onMouseDown: preserveInputFocus, onClick: () => selectFilter(allFilter.onSelect), children: allFilter.label })) : null, filters.map((filter) => (_jsx(FilterToggle, { selected: filter.selected, onMouseDown: preserveInputFocus, onClick: () => selectFilter(filter.onSelect), children: filter.label }, filter.value)))] })) : null, _jsx(CommandList, { "aria-busy": loading || undefined, className: cn("max-h-[400px] p-1", resultsClassName), children: loading ? (_jsx(CommandSearchSkeleton, { rows: loadingRows })) : children !== undefined ? children : sections ? (visibleSections.length ? (visibleSections.map((section, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(CommandSeparator, { alwaysRender: true }) : null, _jsx(CommandGroup, { heading: section.heading, children: section.items.map((item) => (_jsx(CommandItem, { value: getCommandSearchItemValue(item), disabled: item.disabled, onSelect: () => {
+                                                        var _a;
+                                                        (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+                                                        if (item.closeOnSelect !== false) {
+                                                            setIsOpen(false);
+                                                        }
+                                                    }, children: _jsxs("div", { className: "min-w-0", children: [_jsx(Typography, { as: "p", variant: "label", className: "truncate", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx(Typography, { as: "p", variant: "caption", className: "truncate", children: _jsx(SearchHighlight, { text: item.subtitle, query: value }) })) : null] }) }, item.id))) })] }, section.key)))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
+                                            ? `No results found for "${value}".`
+                                            : "Results will appear here as you type." }))) : (_jsx(EmptyState, { icon: CommandSearchEmptyIcon, message: normalizedValue ? "No results found" : "Start typing to search", description: normalizedValue
+                                            ? `No results found for "${value}".`
+                                            : "Results will appear here as you type." })) }), shouldShowAllResults ? (_jsx(PopoverMenuFooter, { inset: "flush", children: _jsx(PopoverMenuFooterAction, { onClick: () => {
+                                            onShowAllResults === null || onShowAllResults === void 0 ? void 0 : onShowAllResults(normalizedValue);
+                                            setIsOpen(false);
+                                        }, children: _jsx("span", { className: "truncate", children: resolvedShowAllResultsLabel }) }) })) : null] })] }) })] }));
 }
 export { CommandSearch };

package/dist/command.js

@@ -5,7 +5,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { inputControlClassName } from "./input-control";
 import { cn } from "./lib/utils";
 import { SearchInputShell } from "./search-input-shell";
-const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className), ...props })));
+const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn("flex h-full w-full flex-col overflow-hidden rounded-overlay bg-popover text-popover-foreground", className), ...props })));
 Command.displayName = CommandPrimitive.displayName;
 const CommandInput = React.forwardRef(({ className, wrapperClassName, iconClassName, iconSize = 16, ...props }, ref) => (_jsx("div", { "cmdk-input-wrapper": "", className: cn("border-b p-4", wrapperClassName), children: _jsx(SearchInputShell, { iconClassName: iconClassName, iconSize: iconSize, children: _jsx(CommandPrimitive.Input, { ref: ref, className: cn(inputControlClassName, "bg-background pl-9 pr-3", className), ...props }) }) })));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
@@ -13,11 +13,11 @@ const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(Com
 CommandList.displayName = CommandPrimitive.List.displayName;
 const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: cn("py-6 text-center text-sm text-muted-foreground", className), ...props })));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn("overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-muted-foreground", className), ...props })));
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn("overflow-hidden py-[var(--space-1)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2)] [&_[cmdk-group-heading]]:py-[var(--space-1)] [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-muted-foreground", className), ...props })));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn("relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground", className), ...props })));
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn("relative flex cursor-pointer select-none items-center rounded-sm px-[var(--space-2)] py-[var(--space-2)] text-sm outline-none transition-colors data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground", className), ...props })));
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 const CommandShortcut = ({ className, ...props }) => (_jsx("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
 CommandShortcut.displayName = "CommandShortcut";

package/dist/copy-button.d.ts

@@ -14,6 +14,8 @@ export interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     copyLabel?: string;
     /** Feedback label after copying. Defaults to "Copied". */
     copiedLabel?: string;
+    /** Tooltip content shown briefly after copying. Defaults to "Copied!". */
+    copiedTooltipLabel?: React.ReactNode;
 }
-declare function CopyButton({ value, feedbackDuration, children, onCopy, onError, onClick, copyLabel, copiedLabel, className, type, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyButton({ value, feedbackDuration, children, onCopy, onError, onClick, copyLabel, copiedLabel, copiedTooltipLabel, className, type, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 export { CopyButton };

package/dist/copy-button.js

@@ -4,7 +4,8 @@ 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, onClick, copyLabel = "Copy", copiedLabel = "Copied", className, type = "button", ...props }) {
+import { Tooltip } from "./tooltip";
+function CopyButton({ value, feedbackDuration = 1500, children, onCopy, onError, onClick, copyLabel = "Copy", copiedLabel = "Copied", copiedTooltipLabel = "Copied!", className, type = "button", ...props }) {
     const [copied, setCopied] = React.useState(false);
     const timeoutRef = React.useRef(null);
     React.useEffect(() => () => {
@@ -29,6 +30,7 @@ function CopyButton({ value, feedbackDuration = 1500, children, onCopy, onError,
     }, [value, feedbackDuration, onCopy, onClick, 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 : "" })] }));
+    const button = (_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 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: copiedTooltipLabel, delayDuration: 0, open: copied, children: button }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? copiedLabel : "" })] }));
 }
 export { CopyButton };

package/dist/count-badge.d.ts

@@ -3,8 +3,10 @@ export interface CountBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     count: number;
     variant?: "default" | "danger" | "muted";
     size?: "sm" | "md";
+    /** Caps the displayed value, e.g. count={128} max={9} renders "9+". */
+    max?: number;
     pulse?: boolean;
     hideWhenZero?: boolean;
 }
-declare function CountBadge({ count, variant, size, pulse, className, hideWhenZero, ...props }: CountBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CountBadge({ count, variant, size, max, pulse, className, hideWhenZero, ...props }: CountBadgeProps): import("react/jsx-runtime").JSX.Element | null;
 export { CountBadge };

package/dist/count-badge.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from "./badge";
 import { cn } from "./lib/utils";
-function CountBadge({ count, variant = "default", size = "md", pulse = false, className, hideWhenZero = false, ...props }) {
+function CountBadge({ count, variant = "default", size = "md", max, pulse = false, className, hideWhenZero = false, ...props }) {
     if (count < 0 || (count === 0 && hideWhenZero))
         return null;
     const effectiveVariant = count === 0 ? "muted" : variant;
+    const resolvedMax = typeof max === "number" && Number.isFinite(max) && max > 0
+        ? Math.floor(max)
+        : undefined;
+    const isCapped = resolvedMax !== undefined && count > resolvedMax;
+    const displayCount = isCapped ? `${resolvedMax}+` : count;
     const sizeClasses = {
-        sm: "min-w-[18px] h-[18px] text-[10px] px-1",
-        md: "min-w-[20px] h-5 text-[11px] px-1.5",
+        sm: "h-[18px] min-w-[18px] px-1",
+        md: "h-[20px] min-w-[20px] px-1.5",
     };
     const variantClasses = {
         default: {
@@ -20,7 +25,7 @@ function CountBadge({ count, variant = "default", size = "md", pulse = false, cl
         },
         muted: {
             badgeVariant: "muted",
-            className: "border-transparent",
+            className: "border-transparent bg-muted-foreground/15 text-foreground/80",
         },
     };
     const pulseColor = {
@@ -29,6 +34,6 @@ function CountBadge({ count, variant = "default", size = "md", pulse = false, cl
         muted: "bg-muted-foreground/50",
     };
     const shouldPulse = pulse && count > 0;
-    return (_jsxs("span", { className: cn("relative inline-flex", className), ...props, children: [shouldPulse ? (_jsx("span", { className: cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColor[effectiveVariant]) })) : null, _jsx("span", { className: "relative inline-flex", children: _jsx(Badge, { variant: variantClasses[effectiveVariant].badgeVariant, className: cn("max-w-none rounded-full font-medium leading-none", sizeClasses[size], variantClasses[effectiveVariant].className), children: count }) })] }));
+    return (_jsxs("span", { "data-slot": "count-badge", className: cn("relative inline-flex", className), ...props, children: [shouldPulse ? (_jsx("span", { className: cn("absolute inline-flex h-full w-full animate-ping rounded-control opacity-75", pulseColor[effectiveVariant]) })) : null, _jsx("span", { className: "relative inline-flex", children: _jsx(Badge, { variant: variantClasses[effectiveVariant].badgeVariant, className: cn("max-w-none", sizeClasses[size], variantClasses[effectiveVariant].className), children: displayCount }) })] }));
 }
 export { CountBadge };

package/dist/date-input.d.ts

@@ -1,8 +1,11 @@
 import * as React from "react";
-export interface DateInputProps {
+export interface DateRangeInputValue {
+    from?: string;
+    to?: string;
+}
+interface DateInputSharedProps {
     label: React.ReactNode;
-    value: string;
-    onValueChange: (value: string) => void;
+    appearance?: "field" | "inline";
     description?: React.ReactNode;
     error?: React.ReactNode;
     invalid?: boolean;
@@ -18,5 +21,17 @@ export interface DateInputProps {
     errorClassName?: string;
     id?: string;
 }
+export interface DateInputSingleProps extends DateInputSharedProps {
+    mode?: "single";
+    value: string;
+    onValueChange: (value: string) => void;
+}
+export interface DateInputRangeProps extends DateInputSharedProps {
+    mode: "range";
+    value: DateRangeInputValue;
+    onValueChange: (value: DateRangeInputValue) => void;
+    numberOfMonths?: number;
+}
+export type DateInputProps = DateInputSingleProps | DateInputRangeProps;
 declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLButtonElement>>;
 export { DateInput };