@neasg/design-system 0.4.8 → 0.4.9

package/dist/checkbox.js

@@ -8,7 +8,7 @@ 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 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}`;
@@ -23,7 +23,7 @@ const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "m
             : "border-input", disabled && "cursor-not-allowed opacity-50", !label && className), children: [_jsx("input", { ref: innerRef, type: "checkbox", id: inputId, checked: checked, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed", ...props }), indeterminate ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null] }));
     if (!label)
         return box;
-    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer items-center gap-2 text-sm", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-1", children: description })) : null] })] }));
+    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer items-center gap-2 text-sm", labelAlign === "start" && "items-start", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-1", children: description })) : null] })] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/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 };

package/dist/date-input.js

@@ -2,26 +2,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format, parse } from "date-fns";
+import { CalendarIcon } from "lucide-react";
 import { Calendar } from "./calendar";
 import { inputControlClassName } from "./input-control";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "./popover-primitive";
 import { cn } from "./lib/utils";
+function createLocalDate(year, monthIndex, day) {
+    const date = new Date(year, monthIndex, day);
+    if (date.getFullYear() !== year ||
+        date.getMonth() !== monthIndex ||
+        date.getDate() !== day) {
+        return undefined;
+    }
+    return date;
+}
 function parseDateString(dateStr) {
     if (!(dateStr === null || dateStr === void 0 ? void 0 : dateStr.trim()))
         return undefined;
     try {
-        const nativeDate = new Date(dateStr);
-        if (!isNaN(nativeDate.getTime()))
-            return nativeDate;
-        const ddmmyyyyMatch = dateStr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
+        const normalizedDateStr = dateStr.trim();
+        const isoDateMatch = normalizedDateStr.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+        if (isoDateMatch) {
+            const [, year, month, day] = isoDateMatch;
+            return createLocalDate(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
+        }
+        const ddmmyyyyMatch = normalizedDateStr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})/);
         if (ddmmyyyyMatch) {
             const [, day, month, year] = ddmmyyyyMatch;
-            const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-            if (!isNaN(date.getTime()))
-                return date;
+            return createLocalDate(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
         }
-        const date = parse(dateStr, "yyyy-MM-dd", new Date());
+        const nativeDate = new Date(normalizedDateStr);
+        if (!isNaN(nativeDate.getTime())) {
+            return nativeDate;
+        }
+        const date = parse(normalizedDateStr, "yyyy-MM-dd", new Date());
         if (!isNaN(date.getTime()))
             return date;
         return undefined;
@@ -33,7 +48,51 @@ function parseDateString(dateStr) {
 function formatISODate(date) {
     return format(date, "yyyy-MM-dd");
 }
-const DateInput = React.forwardRef(({ label, value, onValueChange, description, error, invalid = false, hideLabel = false, placeholder = "Pick a date", disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }, ref) => {
+function formatDisplayDate(date) {
+    return format(date, "d MMM yyyy");
+}
+function getDateTime(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function isDateOutsideBounds(date, minDate, maxDate) {
+    const dateTime = getDateTime(date);
+    if (minDate && dateTime < getDateTime(minDate))
+        return true;
+    if (maxDate && dateTime > getDateTime(maxDate))
+        return true;
+    return false;
+}
+function parseDateRangeValue(value) {
+    const from = parseDateString(value.from);
+    const to = parseDateString(value.to);
+    if (!from && !to)
+        return undefined;
+    return { from, to };
+}
+function formatDateRangeValue(range) {
+    if (!(range === null || range === void 0 ? void 0 : range.from) && !(range === null || range === void 0 ? void 0 : range.to)) {
+        return {};
+    }
+    return {
+        ...(range.from ? { from: formatISODate(range.from) } : {}),
+        ...(range.to ? { to: formatISODate(range.to) } : {}),
+    };
+}
+function formatDisplayRange(range) {
+    if ((range === null || range === void 0 ? void 0 : range.from) && range.to) {
+        return `${formatDisplayDate(range.from)} - ${formatDisplayDate(range.to)}`;
+    }
+    if (range === null || range === void 0 ? void 0 : range.from) {
+        return `${formatDisplayDate(range.from)} -`;
+    }
+    if (range === null || range === void 0 ? void 0 : range.to) {
+        return `- ${formatDisplayDate(range.to)}`;
+    }
+    return undefined;
+}
+const DateInput = React.forwardRef((props, ref) => {
+    var _a, _b, _c;
+    const { label, appearance = "field", description, error, invalid = false, hideLabel = false, disabled = false, minDate, maxDate, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, } = props;
     const [open, setOpen] = React.useState(false);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `date-input-${generatedId}`;
@@ -41,21 +100,35 @@ const DateInput = React.forwardRef(({ label, value, onValueChange, description,
     const showDescription = Boolean(description) && !error;
     const descriptionId = showDescription ? `${inputId}-description` : undefined;
     const isInvalid = invalid || Boolean(error);
-    const selectedDate = React.useMemo(() => parseDateString(value), [value]);
-    const displayValue = selectedDate
-        ? format(selectedDate, "d MMM yyyy")
-        : undefined;
+    const isRange = props.mode === "range";
+    const selectedDate = React.useMemo(() => (isRange ? undefined : parseDateString(props.value)), [isRange, props.value]);
+    const selectedRange = React.useMemo(() => (isRange ? parseDateRangeValue(props.value) : undefined), [isRange, props.value]);
+    const displayValue = isRange
+        ? formatDisplayRange(selectedRange)
+        : selectedDate
+            ? formatDisplayDate(selectedDate)
+            : undefined;
+    const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : (isRange ? "Pick range" : "Pick a date");
     const handleSelect = (date) => {
-        onValueChange(date ? formatISODate(date) : "");
+        if (props.mode === "range")
+            return;
+        props.onValueChange(date ? formatISODate(date) : "");
         setOpen(false);
     };
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative w-full", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", style: { width: 14, height: 14 }, "aria-hidden": "true", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "cursor-pointer pl-9 text-left", !selectedDate && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: displayValue !== null && displayValue !== void 0 ? displayValue : _jsx("span", { children: placeholder }) })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: (date) => {
-                                if (minDate && date < minDate)
-                                    return true;
-                                if (maxDate && date > maxDate)
-                                    return true;
-                                return false;
-                            }, defaultMonth: selectedDate, autoFocus: true }) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    const handleRangeSelect = (range) => {
+        if (props.mode !== "range")
+            return;
+        props.onValueChange(formatDateRangeValue(range));
+        if ((range === null || range === void 0 ? void 0 : range.from) && range.to) {
+            setOpen(false);
+        }
+    };
+    const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
+    const calendarContent = (_jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
+    if (appearance === "inline") {
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }) }), calendarContent] }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+    }
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(PopoverRoot, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: [_jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }), _jsx(CalendarIcon, { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground", strokeWidth: 2 })] }) }), calendarContent] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/dialog-primitive.js

@@ -4,20 +4,21 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
+import { typographyVariants } from "./typography";
 const DialogRoot = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
+const DialogSurface = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-3 border bg-background p-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-overlay", className), ...props, children: [children, !hideCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-control text-muted-foreground ring-offset-background transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
 DialogSurface.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn(typographyVariants({ variant: "subheading" }), className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn(typographyVariants({ variant: "bodySm" }), "text-muted-foreground", className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export { DialogRoot, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogSurface, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/draggable-tabs.d.ts

@@ -1,10 +1,17 @@
 import * as React from "react";
+import { type BadgeProps } from "./badge";
 import { type TooltipProps } from "./tooltip";
+export interface DraggableTabBadge {
+    label: React.ReactNode;
+    variant?: BadgeProps["variant"];
+    bordered?: BadgeProps["bordered"];
+}
 export interface DraggableTabItem {
     id: string;
     label: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
+    badge?: DraggableTabBadge;
     leading?: React.ReactNode;
     trailing?: React.ReactNode;
     tooltip?: React.ReactNode;