@neasg/design-system 0.4.35 → 0.4.95

package/dist/activity-card.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export type ActivityCardDensity = "default" | "compact";
+export type ActivityCardIconTone = "accent" | "destructive" | "info" | "muted" | "success" | "warning";
+export interface ActivityCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    as?: "article" | "div" | "a" | "button";
+    density?: ActivityCardDensity;
+    icon?: React.ReactNode;
+    iconTone?: ActivityCardIconTone;
+    title: React.ReactNode;
+    titleLines?: 1 | 2;
+    meta?: React.ReactNode;
+    trailing?: React.ReactNode;
+    href?: string;
+    type?: "button" | "submit" | "reset";
+    "data-slot"?: string;
+}
+export interface ActivityCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    density?: ActivityCardDensity;
+}
+export interface ActivityCardActorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    actor: React.ReactNode;
+    label?: React.ReactNode;
+    avatarSrc?: string | null;
+    avatarFallback?: React.ReactNode;
+}
+declare const ActivityCard: React.ForwardRefExoticComponent<ActivityCardProps & React.RefAttributes<HTMLElement>>;
+declare const ActivityCardContent: React.ForwardRefExoticComponent<ActivityCardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActivityCardActor: React.ForwardRefExoticComponent<ActivityCardActorProps & React.RefAttributes<HTMLDivElement>>;
+export { ActivityCard, ActivityCardActor, ActivityCardContent };

package/dist/activity-card.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { AvatarProfile } from "./avatar";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const activityCardIconToneClasses = {
+    accent: "border-status-accent-foreground/20 bg-status-accent text-status-accent-foreground",
+    destructive: "border-status-destructive-foreground/20 bg-status-destructive text-status-destructive-foreground",
+    info: "border-status-info-foreground/20 bg-status-info text-status-info-foreground",
+    muted: "border-border bg-muted text-muted-foreground",
+    success: "border-status-success-foreground/20 bg-status-success text-status-success-foreground",
+    warning: "border-status-warning-foreground/20 bg-status-warning text-status-warning-foreground",
+};
+const activityCardTitleLineClasses = {
+    1: "truncate",
+    2: "line-clamp-2",
+};
+function getActivityActorText(value) {
+    if (value === null || value === undefined || typeof value === "boolean") {
+        return "";
+    }
+    if (typeof value === "string" || typeof value === "number") {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        return value.map(getActivityActorText).join(" ").trim();
+    }
+    if (React.isValidElement(value)) {
+        return getActivityActorText(value.props.children);
+    }
+    return "";
+}
+function getActivityActorInitials(value) {
+    return getActivityActorText(value)
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part.charAt(0).toUpperCase())
+        .join("");
+}
+const ActivityCard = React.forwardRef(({ as = "article", density = "default", icon, iconTone, title, titleLines = 2, meta, trailing, href, type, className, children, "data-slot": dataSlot, ...props }, ref) => {
+    const Comp = as;
+    return (_jsxs(Comp, { ref: ref, "data-slot": dataSlot !== null && dataSlot !== void 0 ? dataSlot : "activity-card", "data-activity-card": "", "data-density": density, href: as === "a" ? href : undefined, type: as === "button" ? (type !== null && type !== void 0 ? type : "button") : undefined, className: cn("min-w-0 overflow-hidden rounded-surface border border-border bg-card text-card-foreground shadow-sm", className), ...props, children: [_jsxs("header", { "data-slot": "activity-card-header", className: cn("flex items-center", density === "compact"
+                    ? "min-h-[var(--space-12)] p-[var(--space-3)]"
+                    : "min-h-[80px] p-[16px]"), children: [icon ? (_jsx("span", { "data-slot": "activity-card-icon", "aria-hidden": "true", className: cn("flex shrink-0 items-center justify-center", iconTone
+                            ? cn("rounded-control border", density === "compact" ? "size-7" : "size-8", activityCardIconToneClasses[iconTone])
+                            : cn("text-foreground", density === "compact" ? "size-4" : "size-[24px]")), children: icon })) : null, _jsxs("div", { className: cn("min-w-0 flex-1", icon &&
+                            (density === "compact"
+                                ? "pl-[var(--space-3)]"
+                                : "pl-[16px]"), trailing &&
+                            (density === "compact"
+                                ? "pr-[var(--space-3)]"
+                                : "pr-[32px]")), children: [_jsx(Typography, { as: "h3", variant: "label", className: cn("font-semibold", activityCardTitleLineClasses[titleLines]), children: title }), meta ? (_jsx(Typography, { as: "div", variant: "caption", className: "font-medium text-instructional", children: meta })) : null] }), trailing ? (_jsx("div", { "data-slot": "activity-card-trailing", className: "max-w-full shrink-0", children: trailing })) : null] }), children] }));
+});
+ActivityCard.displayName = "ActivityCard";
+const ActivityCardContent = React.forwardRef(({ density = "default", className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "activity-card-content", "data-density": density, className: cn("border-t border-border", density === "compact"
+        ? "space-y-[var(--space-3)] px-[var(--space-4)] py-[var(--space-3)]"
+        : "space-y-[24px] px-[32px] pb-[24px] pt-[16px]", className), ...props })));
+ActivityCardContent.displayName = "ActivityCardContent";
+const ActivityCardActor = React.forwardRef(({ actor, label = "By", avatarSrc, avatarFallback, className, ...props }, ref) => {
+    const actorText = getActivityActorText(actor);
+    return (_jsx("div", { ref: ref, "data-slot": "activity-card-actor", className: cn("min-w-0 text-left", className), ...props, children: _jsx(AvatarProfile, { size: "xs", src: avatarSrc, alt: actorText, fallback: avatarFallback !== null && avatarFallback !== void 0 ? avatarFallback : (getActivityActorInitials(actor) || "?"), name: _jsxs(_Fragment, { children: [label, " ", actor] }), wrapName: true, nameClassName: "font-semibold" }) }));
+});
+ActivityCardActor.displayName = "ActivityCardActor";
+export { ActivityCard, ActivityCardActor, ActivityCardContent };

package/dist/autocomplete.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { type EmptyStateProps } from "./empty-state";
+import { type PopoverProps } from "./popover";
+import { type PopoverMenuScrollAreaProps } from "./popover-menu";
+import { type SearchInputProps } from "./search-input";
+export interface AutocompleteControllerOptions {
+    listboxId: string;
+    onDismiss: () => void;
+    onSelect: (index: number) => void;
+    open: boolean;
+    optionCount: number;
+    isOptionDisabled?: (index: number) => boolean;
+}
+export interface AutocompleteController {
+    activeIndex: number;
+    getInputProps: () => {
+        "aria-activedescendant": string | undefined;
+        "aria-autocomplete": "list";
+        "aria-controls": string | undefined;
+        "aria-expanded": boolean;
+        "aria-haspopup": "listbox";
+        role: "combobox";
+    };
+    getOptionProps: (index: number) => Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-selected" | "disabled" | "id" | "onClick" | "onMouseEnter" | "role" | "tabIndex">;
+    handleInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => boolean;
+    resetActiveIndex: () => void;
+}
+declare function useAutocompleteController({ listboxId, onDismiss, onSelect, open, optionCount, isOptionDisabled, }: AutocompleteControllerOptions): AutocompleteController;
+export interface AutocompletePopoverProps extends Omit<PopoverProps, "surface"> {
+}
+/** Menu popover that preserves focus in its autocomplete input. */
+declare function AutocompletePopover({ contentClassName, onCloseAutoFocus, onMouseDown, onOpenAutoFocus, ...props }: AutocompletePopoverProps): import("react/jsx-runtime").JSX.Element;
+export interface AutocompleteOptionsProps extends PopoverMenuScrollAreaProps {
+}
+/** Scrollable option area that also works inside a modal dialog. */
+declare function AutocompleteOptions({ className, onWheel, ...props }: AutocompleteOptionsProps): import("react/jsx-runtime").JSX.Element;
+export interface AutocompleteOption {
+    value: string;
+    label: string;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AutocompleteOptionGroup {
+    id: string;
+    label?: React.ReactNode;
+    options: readonly AutocompleteOption[];
+}
+export interface AutocompleteOptionRenderState {
+    active: boolean;
+    query: string;
+}
+export interface AutocompleteStateContent extends Pick<EmptyStateProps, "description" | "icon" | "message"> {
+}
+interface AutocompleteBaseProps extends Omit<SearchInputProps, "onKeyDown" | "onSearch" | "onValueChange" | "searchOnChange" | "searchOnEnter" | "value"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    onOptionSelect: (option: AutocompleteOption) => void;
+    /** Minimum trimmed query length required before the menu can open. */
+    minLength?: number;
+    loading?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Filters supplied options by label in the browser. Keep false for remote or fuzzy search results. */
+    filterOptions?: boolean;
+    emptyState?: AutocompleteStateContent;
+    loadingState?: AutocompleteStateContent;
+    renderOption?: (option: AutocompleteOption, state: AutocompleteOptionRenderState) => React.ReactNode;
+    listboxLabel?: string;
+    contentClassName?: string;
+    optionClassName?: string;
+    maxHeight?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}
+type AutocompleteOptionSource = {
+    options: readonly AutocompleteOption[];
+    groups?: never;
+} | {
+    options?: never;
+    groups: readonly AutocompleteOptionGroup[];
+};
+export type AutocompleteProps = AutocompleteBaseProps & AutocompleteOptionSource;
+declare function Autocomplete({ value, onValueChange, onOptionSelect, options, groups, minLength, loading, open, defaultOpen, onOpenChange, filterOptions, emptyState, loadingState, renderOption, listboxLabel, contentClassName, optionClassName, maxHeight, onKeyDown, label, hideLabel, disabled, id, onFocus, ...inputProps }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export { Autocomplete, AutocompleteOptions, AutocompletePopover, useAutocompleteController, };

package/dist/autocomplete.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { LoaderPinwheelIcon, SearchIcon } from "./animated-icons";
+import { EmptyState } from "./empty-state";
+import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+import { PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, } from "./popover-menu";
+import { SearchInput } from "./search-input";
+import { Typography } from "./typography";
+import { SearchHighlight } from "./use-search-highlight";
+function getNextEnabledOptionIndex({ currentIndex, direction, isOptionDisabled, optionCount, }) {
+    if (optionCount <= 0) {
+        return -1;
+    }
+    const startIndex = direction === "previous" && currentIndex < 0 ? 0 : currentIndex;
+    const offset = direction === "previous" ? -1 : 1;
+    for (let step = 1; step <= optionCount; step += 1) {
+        const index = (startIndex + offset * step + optionCount * 2) % optionCount;
+        if (!isOptionDisabled(index)) {
+            return index;
+        }
+    }
+    return -1;
+}
+/**
+ * Shared active-descendant navigation for autocomplete inputs whose focus must
+ * remain in the search field. Prefer `Autocomplete` unless the result rows need
+ * a custom composition.
+ */
+const autocompleteOptionIsEnabled = () => false;
+function useAutocompleteController({ listboxId, onDismiss, onSelect, open, optionCount, isOptionDisabled = autocompleteOptionIsEnabled, }) {
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    React.useEffect(() => {
+        if (!open ||
+            activeIndex >= optionCount ||
+            (activeIndex >= 0 && isOptionDisabled(activeIndex))) {
+            setActiveIndex(-1);
+        }
+    }, [activeIndex, isOptionDisabled, open, optionCount]);
+    React.useEffect(() => {
+        var _a, _b;
+        if (!open || activeIndex < 0) {
+            return;
+        }
+        (_b = (_a = document
+            .getElementById(`${listboxId}-option-${activeIndex}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [activeIndex, listboxId, open]);
+    const resetActiveIndex = React.useCallback(() => setActiveIndex(-1), []);
+    const handleInputKeyDown = React.useCallback((event) => {
+        if (event.nativeEvent.isComposing || !open) {
+            return false;
+        }
+        let direction;
+        if (event.key === "ArrowDown")
+            direction = "next";
+        if (event.key === "ArrowUp")
+            direction = "previous";
+        if (direction && optionCount > 0) {
+            event.preventDefault();
+            setActiveIndex((currentIndex) => getNextEnabledOptionIndex({
+                currentIndex,
+                direction,
+                isOptionDisabled,
+                optionCount,
+            }));
+            return true;
+        }
+        if (event.key === "Enter" && activeIndex >= 0) {
+            event.preventDefault();
+            onSelect(activeIndex);
+            setActiveIndex(-1);
+            return true;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            setActiveIndex(-1);
+            onDismiss();
+            return true;
+        }
+        return false;
+    }, [activeIndex, isOptionDisabled, onDismiss, onSelect, open, optionCount]);
+    const getInputProps = React.useCallback(() => ({
+        "aria-activedescendant": open && activeIndex >= 0 && activeIndex < optionCount
+            ? `${listboxId}-option-${activeIndex}`
+            : undefined,
+        "aria-autocomplete": "list",
+        "aria-controls": open ? listboxId : undefined,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        role: "combobox",
+    }), [activeIndex, listboxId, open, optionCount]);
+    const getOptionProps = React.useCallback((index) => {
+        const disabled = isOptionDisabled(index);
+        return {
+            id: `${listboxId}-option-${index}`,
+            role: "option",
+            tabIndex: -1,
+            "aria-selected": activeIndex === index,
+            disabled,
+            onMouseEnter: () => {
+                if (!disabled)
+                    setActiveIndex(index);
+            },
+            onClick: () => {
+                if (disabled)
+                    return;
+                onSelect(index);
+                setActiveIndex(-1);
+            },
+        };
+    }, [activeIndex, isOptionDisabled, listboxId, onSelect]);
+    return {
+        activeIndex,
+        getInputProps,
+        getOptionProps,
+        handleInputKeyDown,
+        resetActiveIndex,
+    };
+}
+/** Menu popover that preserves focus in its autocomplete input. */
+function AutocompletePopover({ contentClassName, onCloseAutoFocus, onMouseDown, onOpenAutoFocus, ...props }) {
+    return (_jsx(Popover, { ...props, surface: "menu", contentClassName: cn("[&_[data-slot=popover-menu-item]]:min-h-8 [&_[data-slot=popover-menu-item]]:px-1.5 [&_[data-slot=popover-menu-item]]:py-1.5", contentClassName), onMouseDown: (event) => {
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+            if (!event.defaultPrevented)
+                event.preventDefault();
+        }, onOpenAutoFocus: (event) => {
+            onOpenAutoFocus === null || onOpenAutoFocus === void 0 ? void 0 : onOpenAutoFocus(event);
+            if (!event.defaultPrevented)
+                event.preventDefault();
+        }, onCloseAutoFocus: (event) => {
+            onCloseAutoFocus === null || onCloseAutoFocus === void 0 ? void 0 : onCloseAutoFocus(event);
+            if (!event.defaultPrevented)
+                event.preventDefault();
+        } }));
+}
+/** Scrollable option area that also works inside a modal dialog. */
+function AutocompleteOptions({ className, onWheel, ...props }) {
+    const handleWheel = (event) => {
+        onWheel === null || onWheel === void 0 ? void 0 : onWheel(event);
+        if (event.defaultPrevented)
+            return;
+        const optionList = event.currentTarget;
+        const maxScrollTop = optionList.scrollHeight - optionList.clientHeight;
+        if (maxScrollTop <= 0)
+            return;
+        const deltaMultiplier = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+            ? 16
+            : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+                ? optionList.clientHeight
+                : 1;
+        const nextScrollTop = Math.min(maxScrollTop, Math.max(0, optionList.scrollTop + event.deltaY * deltaMultiplier));
+        if (nextScrollTop === optionList.scrollTop)
+            return;
+        optionList.scrollTop = nextScrollTop;
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    return (_jsx(PopoverMenuScrollArea, { ...props, "data-slot": "autocomplete-options", className: cn("min-h-0 touch-pan-y space-y-0 overscroll-contain", className), onWheel: handleWheel }));
+}
+const defaultEmptyState = {
+    icon: SearchIcon,
+    message: "No matches found",
+    description: "Try a different search term.",
+};
+function AutocompleteLoadingIcon({ className }) {
+    return _jsx(LoaderPinwheelIcon, { className: cn("animate-spin", className) });
+}
+const defaultLoadingState = {
+    icon: AutocompleteLoadingIcon,
+    message: "Finding matching options",
+    description: "Search results will appear here.",
+};
+function Autocomplete({ value, onValueChange, onOptionSelect, options, groups, minLength = 0, loading = false, open, defaultOpen = false, onOpenChange, filterOptions = false, emptyState = defaultEmptyState, loadingState = defaultLoadingState, renderOption, listboxLabel, contentClassName, optionClassName, maxHeight, onKeyDown, label = "Search", hideLabel = false, disabled, id, onFocus, ...inputProps }) {
+    const inputRef = React.useRef(null);
+    const generatedId = React.useId().replace(/:/g, "");
+    const inputId = id !== null && id !== void 0 ? id : `autocomplete-${generatedId}`;
+    const listboxId = `${inputId}-listbox`;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const requestedOpen = isControlled ? open : internalOpen;
+    const meetsMinimumLength = value.trim().length >= minLength;
+    const canOpen = !disabled && meetsMinimumLength;
+    const currentOpen = Boolean(requestedOpen && canOpen);
+    const requestOpen = React.useCallback((nextOpen) => {
+        const resolvedOpen = Boolean(nextOpen && canOpen);
+        if (!isControlled)
+            setInternalOpen(resolvedOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(resolvedOpen);
+    }, [canOpen, isControlled, onOpenChange]);
+    React.useEffect(() => {
+        if (requestedOpen && !canOpen)
+            requestOpen(false);
+    }, [canOpen, requestOpen, requestedOpen]);
+    const sourceGroups = React.useMemo(() => groups !== null && groups !== void 0 ? groups : [
+        {
+            id: "options",
+            options: options !== null && options !== void 0 ? options : [],
+        },
+    ], [groups, options]);
+    const visibleGroups = React.useMemo(() => {
+        if (!filterOptions)
+            return sourceGroups;
+        const normalizedQuery = value.trim().toLocaleLowerCase();
+        return sourceGroups
+            .map((group) => ({
+            ...group,
+            options: group.options.filter((option) => option.label.toLocaleLowerCase().includes(normalizedQuery)),
+        }))
+            .filter((group) => group.options.length > 0);
+    }, [filterOptions, sourceGroups, value]);
+    const visibleOptions = React.useMemo(() => visibleGroups.flatMap((group) => group.options), [visibleGroups]);
+    const visibleOptionIdentity = visibleOptions
+        .map((option) => option.value)
+        .join("\u0000");
+    const isOptionDisabled = React.useCallback((index) => { var _a; return Boolean((_a = visibleOptions[index]) === null || _a === void 0 ? void 0 : _a.disabled); }, [visibleOptions]);
+    const selectOption = React.useCallback((index) => {
+        const option = visibleOptions[index];
+        if (!option || option.disabled)
+            return;
+        onOptionSelect(option);
+        requestOpen(false);
+    }, [onOptionSelect, requestOpen, visibleOptions]);
+    const controller = useAutocompleteController({
+        listboxId,
+        onDismiss: () => requestOpen(false),
+        onSelect: selectOption,
+        open: currentOpen,
+        optionCount: visibleOptions.length,
+        isOptionDisabled,
+    });
+    React.useEffect(() => {
+        controller.resetActiveIndex();
+    }, [controller.resetActiveIndex, value, visibleOptionIdentity]);
+    const handleValueChange = React.useCallback((nextValue) => {
+        onValueChange(nextValue);
+        const nextCanOpen = !disabled && nextValue.trim().length >= minLength;
+        if (!isControlled)
+            setInternalOpen(nextCanOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextCanOpen);
+    }, [disabled, isControlled, minLength, onOpenChange, onValueChange]);
+    const handleKeyDown = React.useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (!event.defaultPrevented)
+            controller.handleInputKeyDown(event);
+    }, [controller, onKeyDown]);
+    const resolvedListboxLabel = listboxLabel !== null && listboxLabel !== void 0 ? listboxLabel : (typeof label === "string" ? `${label} options` : "Autocomplete options");
+    let optionIndex = -1;
+    return (_jsx(AutocompletePopover, { open: currentOpen, onOpenChange: requestOpen, virtualAnchorRef: inputRef, align: "start", contentClassName: cn("flex max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)] flex-col", contentClassName), id: listboxId, role: "listbox", "aria-label": resolvedListboxLabel, "aria-busy": loading || undefined, trigger: _jsx("div", { "data-slot": "autocomplete", className: "w-full", onClick: (event) => {
+                if (currentOpen)
+                    event.preventDefault();
+            }, children: _jsx(SearchInput, { ref: inputRef, ...inputProps, ...controller.getInputProps(), id: inputId, label: label, hideLabel: hideLabel, value: value, onValueChange: handleValueChange, onFocus: (event) => {
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+                    if (!event.defaultPrevented && canOpen)
+                        requestOpen(true);
+                }, onKeyDown: handleKeyDown, disabled: disabled, searchOnChange: false, searchOnEnter: false }) }), children: _jsx(AutocompleteOptions, { maxHeight: maxHeight, children: loading ? (_jsx(EmptyState, { ...loadingState, className: "min-h-40", role: "status" })) : visibleOptions.length === 0 ? (_jsx(EmptyState, { ...emptyState, className: "min-h-40", role: "status" })) : (visibleGroups.map((group, groupIndex) => {
+                const groupLabelId = `${listboxId}-group-${group.id}`;
+                return (_jsxs(React.Fragment, { children: [_jsxs(PopoverMenuGroup, { role: group.label ? "group" : undefined, "aria-labelledby": group.label ? groupLabelId : undefined, className: "space-y-0", children: [group.label ? (_jsx(PopoverMenuGroupLabel, { id: groupLabelId, children: group.label })) : null, group.options.map((option) => {
+                                    optionIndex += 1;
+                                    const currentIndex = optionIndex;
+                                    const active = controller.activeIndex === currentIndex;
+                                    return (_jsx(PopoverMenuItem, { type: "button", className: optionClassName, ...controller.getOptionProps(currentIndex), children: renderOption ? (renderOption(option, { active, query: value })) : (_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "block truncate", children: _jsx(SearchHighlight, { text: option.label, query: value }) }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", className: "mt-0.5 block", children: option.description })) : null] })) }, option.value));
+                                })] }), groupIndex < visibleGroups.length - 1 ? (_jsx(PopoverMenuDivider, { "data-slot": "autocomplete-group-separator" })) : null] }, group.id));
+            })) }) }));
+}
+export { Autocomplete, AutocompleteOptions, AutocompletePopover, useAutocompleteController, };

package/dist/avatar.d.ts

@@ -22,6 +22,8 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     name?: React.ReactNode;
     nameAs?: React.ElementType;
     nameTrailing?: React.ReactNode;
+    wrapName?: boolean;
+    wrapInfo?: boolean;
     role?: React.ReactNode;
     rolePlacement?: "above" | "below";
     topInfo?: React.ReactNode;
@@ -38,7 +40,7 @@ interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     avatarOverlay?: React.ReactNode;
 }
 declare function Avatar({ src, alt, fallback, size, loading, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-declare function AvatarProfile({ src, alt, fallback, size, loading, name, nameAs: NameElement, nameTrailing, role, rolePlacement, topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameRowClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
+declare function AvatarProfile({ src, alt, fallback, size, loading, name, nameAs: NameElement, nameTrailing, wrapName, wrapInfo, role, rolePlacement, topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameRowClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };
 export type AvatarRootProps = React.ComponentPropsWithoutRef<typeof AvatarRoot>;
 export type { AvatarProps, AvatarProfileProps };

package/dist/avatar.js

@@ -21,9 +21,19 @@ const avatarProfileGapClasses = {
     md: "gap-2.5",
 };
 const avatarProfileNameClasses = {
-    xs: "text-xs leading-4",
-    sm: "text-sm leading-5",
-    md: "text-sm leading-5",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-sm",
+};
+const avatarProfileNameCompactLeadingClasses = {
+    xs: "leading-4",
+    sm: "leading-5",
+    md: "leading-5",
+};
+const avatarProfileContentMinHeightClasses = {
+    xs: "min-h-[24px]",
+    sm: "min-h-[32px]",
+    md: "min-h-[40px]",
 };
 const avatarProfileInfoClasses = {
     xs: "text-[11px] leading-3",
@@ -80,27 +90,34 @@ function Avatar({ src, alt = "", fallback, size = "sm", loading = false, classNa
         "--avatar-fallback-background": fallbackTone.background,
         "--avatar-fallback-foreground": fallbackTone.foreground,
     };
-    return (_jsxs(AvatarRoot, { className: cn(avatarSizeClasses[size], className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { style: fallbackStyle, className: cn("bg-[hsl(var(--avatar-fallback-background))] font-medium text-[hsl(var(--avatar-fallback-foreground))]", fallbackClassName), children: fallback })] }));
+    return (_jsxs(AvatarRoot, { "data-slot": "avatar", className: cn(avatarSizeClasses[size], className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { style: fallbackStyle, className: cn("bg-[hsl(var(--avatar-fallback-background))] font-medium text-[hsl(var(--avatar-fallback-foreground))]", fallbackClassName), children: fallback })] }));
 }
-function AvatarProfile({ src, alt = "", fallback, size = "sm", loading = false, name, nameAs: NameElement = "span", nameTrailing, role, rolePlacement = "below", topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameRowClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }) {
+function AvatarProfile({ src, alt = "", fallback, size = "sm", loading = false, name, nameAs: NameElement = "span", nameTrailing, wrapName = false, wrapInfo = false, role, rolePlacement = "below", topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameRowClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }) {
     const resolvedTop = topInfo !== null && topInfo !== void 0 ? topInfo : (rolePlacement === "above" ? role : undefined);
     const resolvedBottom = bottomInfo !== null && bottomInfo !== void 0 ? bottomInfo : (rolePlacement === "below" ? role : undefined);
     const hasSupportingInfo = (resolvedTop !== undefined && resolvedTop !== null) ||
         (resolvedBottom !== undefined && resolvedBottom !== null);
-    const alignmentClassName = hasSupportingInfo ? "items-start" : "items-center";
+    const alignmentClassName = hasSupportingInfo || wrapName ? "items-start" : "items-center";
     const avatarOffsetClassName = hasSupportingInfo ? "mt-0.5" : undefined;
+    const wrappedNameContentClassName = wrapName && !hasSupportingInfo
+        ? cn(avatarProfileContentMinHeightClasses[size], "justify-center")
+        : undefined;
     if (loading) {
-        return (_jsxs("div", { className: cn("flex min-w-0 max-w-full", alignmentClassName, avatarProfileGapClasses[size], className), "aria-busy": "true", ...props, children: [_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], avatarOffsetClassName, avatarClassName) }), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", avatarProfileContentGapClass, contentClassName), children: [resolvedTop !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null, _jsx(Skeleton, { className: "h-4 w-32" }), resolvedBottom !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null] })] }));
+        return (_jsxs("div", { className: cn("flex min-w-0 max-w-full", alignmentClassName, avatarProfileGapClasses[size], className), "aria-busy": "true", ...props, children: [_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], avatarOffsetClassName, avatarClassName) }), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", avatarProfileContentGapClass, wrappedNameContentClassName, contentClassName), children: [resolvedTop !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null, _jsx(Skeleton, { className: "h-4 w-32" }), resolvedBottom !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null] })] }));
     }
     const hasMeta = name !== undefined ||
         nameTrailing !== undefined ||
         resolvedTop !== undefined ||
         resolvedBottom !== undefined;
-    const infoBaseClass = cn("min-w-0 truncate text-muted-foreground", avatarProfileInfoClasses[size]);
+    const infoBaseClass = cn("min-w-0", wrapInfo
+        ? "whitespace-normal break-words [overflow-wrap:anywhere]"
+        : "truncate", "text-muted-foreground", avatarProfileInfoClasses[size]);
     const topNode = resolvedTop !== undefined && resolvedTop !== null ? (_jsx("span", { className: cn(infoBaseClass, topInfo !== undefined ? topInfoClassName : roleClassName), children: resolvedTop })) : null;
     const bottomNode = resolvedBottom !== undefined && resolvedBottom !== null ? (_jsx("span", { className: cn(infoBaseClass, bottomInfo !== undefined ? bottomInfoClassName : roleClassName), children: resolvedBottom })) : null;
-    const nameTextNode = name !== undefined && name !== null ? (_jsx(NameElement, { className: cn("min-w-0 truncate font-medium text-foreground", avatarProfileNameClasses[size], nameClassName), children: name })) : null;
+    const nameTextNode = name !== undefined && name !== null ? (_jsx(NameElement, { className: cn("min-w-0 font-medium text-foreground", wrapName
+            ? "whitespace-normal break-words [overflow-wrap:anywhere]"
+            : "truncate", avatarProfileNameClasses[size], wrapName ? undefined : avatarProfileNameCompactLeadingClasses[size], nameClassName), children: name })) : null;
     const nameNode = nameTrailing !== undefined && nameTrailing !== null ? (_jsxs("div", { className: cn("flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", nameRowClassName), children: [nameTextNode, nameTrailing] })) : (nameTextNode);
-    return (_jsxs("div", { className: cn("flex min-w-0 max-w-full", alignmentClassName, avatarProfileGapClasses[size], className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: cn(avatarOffsetClassName, avatarClassName), imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", avatarProfileContentGapClass, contentClassName), children: [topNode, nameNode, bottomNode] })) : null] }));
+    return (_jsxs("div", { className: cn("flex min-w-0 max-w-full", alignmentClassName, avatarProfileGapClasses[size], className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: cn(avatarOffsetClassName, avatarClassName), imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", avatarProfileContentGapClass, wrappedNameContentClassName, contentClassName), children: [topNode, nameNode, bottomNode] })) : null] }));
 }
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };

package/dist/badge.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
-const badgeVariants = cva("inline-flex items-center justify-center text-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate", {
+const badgeVariants = cva("inline-flex items-center justify-center text-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate [&>span]:text-[10px] [&_svg]:size-3 [&_svg]:shrink-0", {
     variants: {
         variant: {
             secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",

package/dist/button.d.ts

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

package/dist/button.js

@@ -16,6 +16,7 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
         size: {
             sm: "h-8 px-2.5 text-sm",
             compact: "h-8 gap-1 px-2 text-sm",
+            comfortable: "h-[46px] px-[12px] py-[11px] text-[16px] [&_svg]:h-[24px] [&_svg]:min-h-[24px] [&_svg]:w-[24px] [&_svg]:min-w-[24px]",
             default: "h-control px-3 py-1.5",
             icon: "h-control w-control",
             compactIcon: "h-8 w-8",

package/dist/calendar.js

@@ -25,7 +25,7 @@ function Calendar({ className, classNames, showOutsideDays = true, fixedWeeks =
             ...formatters,
         }, classNames: {
             root: cn("w-fit", defaultClassNames.root),
-            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            months: cn("relative flex flex-col gap-4 sm:flex-row", defaultClassNames.months),
             month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
             nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
             button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),

package/dist/card.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     title: React.ReactNode;
     description?: React.ReactNode;
-    variant?: "default" | "elevated" | "gradient";
+    variant?: "default" | "subtle" | "elevated" | "gradient";
     size?: "default" | "compact";
     /** Large value displayed above the title — use for stat/metric cards. */
     stat?: React.ReactNode;

package/dist/card.js

@@ -106,7 +106,7 @@ const Card = React.forwardRef(({ title, description, variant = "default", size =
     };
     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, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, role: role !== null && role !== void 0 ? role : (interactive ? "button" : props["aria-label"] || props["aria-labelledby"] ? "region" : undefined), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (interactive ? 0 : undefined), "aria-pressed": ariaPressed !== null && ariaPressed !== void 0 ? ariaPressed : (interactive && active !== undefined ? Boolean(active) : undefined), className: cn("group/card rounded-surface border border-[hsl(var(--card-border))] text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
+    return (_jsxs("div", { ref: ref, onClick: onClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, role: role !== null && role !== void 0 ? role : (interactive ? "button" : props["aria-label"] || props["aria-labelledby"] ? "region" : undefined), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (interactive ? 0 : undefined), "aria-pressed": ariaPressed !== null && ariaPressed !== void 0 ? ariaPressed : (interactive && active !== undefined ? Boolean(active) : undefined), className: cn("group/card rounded-surface border border-[hsl(var(--card-border))] text-card-foreground", variant === "default" && "bg-card", variant === "subtle" && "bg-muted/40", 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,transform] duration-150 ease-out hover:border-primary/50 hover:bg-primary/5 hover:shadow-md motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-safe:active:scale-[0.99] 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("relative flex flex-col gap-2", size === "default" && "p-4", size === "compact" && "p-3", showIcon && size === "default" && "pr-12", showIcon && size === "compact" && "pr-10"), children: [showIcon ? (_jsx("span", { "aria-hidden": "true", "data-slot": "card-icon", className: cn("pointer-events-none absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-control border border-[hsl(var(--card-border))] bg-background/80 text-muted-foreground shadow-sm transition-[background-color,color,transform] duration-150 ease-out group-hover/card:scale-105 group-hover/card:bg-highlight group-hover/card:text-highlight-foreground group-focus-visible/card:bg-highlight group-focus-visible/card:text-highlight-foreground motion-reduce:transition-colors [&_svg]:size-3.5", size === "compact" && "right-2.5 top-2.5 size-6 [&_svg]:size-3", active &&

package/dist/compound-search-input.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface CompoundSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    actions?: React.ReactNode;
+    criteria?: React.ReactNode;
+    selected?: boolean;
+}
+declare const CompoundSearchInput: React.ForwardRefExoticComponent<CompoundSearchInputProps & React.RefAttributes<HTMLInputElement>>;
+export { CompoundSearchInput };

package/dist/compound-search-input.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SearchIcon } from "lucide-react";
+import { cn } from "./lib/utils";
+const CompoundSearchInput = React.forwardRef(({ actions, "aria-invalid": ariaInvalid, className, criteria, selected = false, ...props }, ref) => (_jsxs("div", { "data-slot": "compound-search-input", "data-selected": selected ? "true" : "false", className: cn("flex min-h-12 w-full min-w-0 flex-wrap items-center gap-1.5 rounded-control border border-input bg-background p-1.5 transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 data-[selected=true]:border-interactive data-[selected=true]:bg-highlight data-[selected=true]:ring-[3px] data-[selected=true]:ring-interactive/20", ariaInvalid === true || ariaInvalid === "true"
+        ? "border-destructive ring-destructive/20"
+        : undefined), children: [_jsx(SearchIcon, { "aria-hidden": "true", className: "ml-1.5 h-4 w-4 shrink-0 text-muted-foreground" }), criteria, _jsx("input", { ref: ref, "aria-invalid": ariaInvalid, className: cn("h-8 min-w-44 basis-52 flex-1 bg-transparent px-1.5 text-sm outline-none placeholder:text-muted-foreground", className), ...props }), actions ? (_jsx("span", { className: "ml-auto inline-flex h-8 shrink-0 items-center gap-1 text-muted-foreground", children: actions })) : null] })));
+CompoundSearchInput.displayName = "CompoundSearchInput";
+export { CompoundSearchInput };