@neasg/design-system 0.1.3 → 0.2.1

package/dist/button.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
-const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -15,9 +15,9 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
         },
         size: {
             default: "h-10 px-4 py-2 [&_svg]:h-4 [&_svg]:w-4",
-            sm: "h-9 rounded-md px-3 [&_svg]:h-4 [&_svg]:w-4",
+            sm: "h-9 rounded-md px-3 text-xs [&_svg]:h-4 [&_svg]:w-4",
             lg: "h-11 rounded-md px-8 [&_svg]:h-5 [&_svg]:w-5",
-            icon: "h-10 w-10 [&_svg]:h-5 [&_svg]:w-5",
+            icon: "h-10 w-10 [&_svg]:h-4 [&_svg]:w-4",
         },
     },
     defaultVariants: {
@@ -49,14 +49,72 @@ function hasTextLikeContent(node) {
     }
     return false;
 }
-const Button = React.forwardRef(({ className, variant, size, asChild = false, loading = false, loadingText, loadingIndicator, disabled, children, onClick, tabIndex, ...props }, ref) => {
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(value);
+                return;
+            }
+            ref.current = value;
+        });
+    };
+}
+function isAnimatedIconElement(node) {
+    var _a, _b;
+    if (typeof node.type === "string" || node.type === React.Fragment) {
+        return false;
+    }
+    const component = node.type;
+    const componentName = (_b = (_a = component.displayName) !== null && _a !== void 0 ? _a : component.name) !== null && _b !== void 0 ? _b : "";
+    return componentName.endsWith("Icon");
+}
+function attachAnimatedIconRefs(node, refs) {
+    if (node == null || typeof node === "boolean") {
+        return node;
+    }
+    if (Array.isArray(node)) {
+        return node.map((child) => attachAnimatedIconRefs(child, refs));
+    }
+    if (!React.isValidElement(node)) {
+        return node;
+    }
+    if (node.type === React.Fragment) {
+        return React.cloneElement(node, undefined, attachAnimatedIconRefs(node.props.children, refs));
+    }
+    if (isAnimatedIconElement(node)) {
+        const refCallback = (value) => {
+            if (!value)
+                return;
+            refs.current.push(value);
+        };
+        return React.cloneElement(node, {
+            ref: mergeRefs(node.ref, refCallback),
+        });
+    }
+    if ("children" in node.props && node.props.children !== undefined) {
+        return React.cloneElement(node, undefined, attachAnimatedIconRefs(node.props.children, refs));
+    }
+    return node;
+}
+const Button = React.forwardRef(({ className, variant, size, asChild = false, loading = false, loadingText, loadingIndicator, disabled, children, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, tabIndex, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const isDisabled = disabled || loading;
     const loadingLabel = loadingText !== null && loadingText !== void 0 ? loadingText : children;
+    const animatedIconRefs = React.useRef([]);
+    animatedIconRefs.current = [];
     if (size === "icon" && hasTextLikeContent(children)) {
         throw new Error('NEA Button `size="icon"` only accepts icon components or SVG content. Do not pass text or emoji.');
     }
-    const content = loading ? (loadingLabel ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}), _jsx("span", { children: loadingLabel })] })) : (loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}))) : (children);
+    const content = loading ? (loadingLabel ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}), _jsx("span", { children: attachAnimatedIconRefs(loadingLabel, animatedIconRefs) })] })) : (loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}))) : (attachAnimatedIconRefs(children, animatedIconRefs));
+    const startAnimatedIcons = () => {
+        animatedIconRefs.current.forEach((icon) => { var _a; return (_a = icon.startAnimation) === null || _a === void 0 ? void 0 : _a.call(icon); });
+    };
+    const stopAnimatedIcons = () => {
+        animatedIconRefs.current.forEach((icon) => { var _a; return (_a = icon.stopAnimation) === null || _a === void 0 ? void 0 : _a.call(icon); });
+    };
     const handleClick = (event) => {
         if (isDisabled && asChild) {
             event.preventDefault();
@@ -65,7 +123,27 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, onClick: handleClick, tabIndex: isDisabled && asChild ? -1 : tabIndex, disabled: !asChild ? isDisabled : undefined, ...props, children: content }));
+    const handleMouseEnter = (event) => {
+        if (!isDisabled) {
+            startAnimatedIcons();
+        }
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+    };
+    const handleMouseLeave = (event) => {
+        stopAnimatedIcons();
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+    };
+    const handleFocus = (event) => {
+        if (!isDisabled) {
+            startAnimatedIcons();
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
+    const handleBlur = (event) => {
+        stopAnimatedIcons();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, tabIndex: isDisabled && asChild ? -1 : tabIndex, disabled: !asChild ? isDisabled : undefined, ...props, children: content }));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/command-search.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+export interface CommandSearchFilter {
+    value: string;
+    label: string;
+    selected?: boolean;
+    onSelect?: () => void;
+}
+export interface CommandSearchItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    value?: string;
+    keywords?: string[];
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    onSelect?: () => void;
+}
+export interface CommandSearchSection {
+    key: string;
+    heading: string;
+    items: CommandSearchItem[];
+}
+export interface CommandSearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    sections?: CommandSearchSection[];
+    children?: React.ReactNode;
+    isCollapsed?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    triggerPlaceholder?: string;
+    inputPlaceholder?: string;
+    /** The key that opens the dialog when pressed with Cmd/Ctrl (e.g. "k", "j"). */
+    shortcutKey?: string;
+    /** Override the label shown on the trigger. Defaults to "⌘{shortcutKey.toUpperCase()}". */
+    shortcutLabel?: string;
+    allFilter?: CommandSearchFilter;
+    filters?: CommandSearchFilter[];
+    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;
+export { CommandSearch };

package/dist/command-search.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { FilterToggle } from "./filter-toggle";
+import { cn } from "./lib/utils";
+import { SearchHighlight } from "./use-search-highlight";
+function CommandSearchEmptyIcon({ className }) {
+    return _jsx(SearchIcon, { className: className, size: 20 });
+}
+function getCommandSearchItemValue(item) {
+    var _a, _b;
+    const fallbackValue = [item.title, item.subtitle, ...((_a = item.keywords) !== null && _a !== void 0 ? _a : [])]
+        .filter(Boolean)
+        .join(" ");
+    return (_b = item.value) !== null && _b !== void 0 ? _b : fallbackValue;
+}
+function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [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 }) {
+    const [isOpen, setIsOpen] = useControllableOpen({
+        open,
+        defaultOpen,
+        onOpenChange,
+    });
+    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 resolvedLabel = shortcutLabel !== null && shortcutLabel !== void 0 ? shortcutLabel : `⌘${shortcutKey.toUpperCase()}`;
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === shortcutKey.toLowerCase()) {
+                event.preventDefault();
+                setIsOpen(true);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [setIsOpen, shortcutKey]);
+    React.useEffect(() => {
+        if (isOpen) {
+            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-10 w-full justify-center rounded-lg px-3 !font-normal text-muted-foreground hover:bg-white hover:text-foreground"
+                    : "h-10 w-full min-w-[14rem] justify-start gap-3 rounded-lg border border-gray-200 bg-white px-3 !font-normal text-muted-foreground shadow-sm 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("p", { className: "truncate text-sm font-medium", children: _jsx(SearchHighlight, { text: item.title, query: value }) }), item.subtitle ? (_jsx("p", { className: "truncate text-xs text-muted-foreground", 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." })) })] }) }) })] }));
+}
+export { CommandSearch };

package/dist/command.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CommandInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+    wrapperClassName?: string;
+    iconClassName?: string;
+    iconSize?: number;
+}
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, };

package/dist/command.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+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 })));
+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;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className), ...props })));
+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 })));
+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 })));
+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";
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, };

package/dist/count-badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface CountBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    count: number;
+    variant?: "default" | "danger" | "muted";
+    size?: "sm" | "md";
+    pulse?: boolean;
+    hideWhenZero?: boolean;
+}
+declare function CountBadge({ count, variant, size, pulse, className, hideWhenZero, ...props }: CountBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export { CountBadge };

package/dist/count-badge.js

@@ -0,0 +1,34 @@
+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 }) {
+    if (count < 0 || (count === 0 && hideWhenZero))
+        return null;
+    const effectiveVariant = count === 0 ? "muted" : variant;
+    const sizeClasses = {
+        sm: "min-w-[18px] h-[18px] text-[10px] px-1",
+        md: "min-w-[20px] h-5 text-[11px] px-1.5",
+    };
+    const variantClasses = {
+        default: {
+            badgeVariant: "secondary",
+            className: "border-transparent bg-primary text-primary-foreground hover:bg-primary/90",
+        },
+        danger: {
+            badgeVariant: "destructive",
+            className: "border-transparent",
+        },
+        muted: {
+            badgeVariant: "muted",
+            className: "border-transparent",
+        },
+    };
+    const pulseColor = {
+        default: "bg-primary/75",
+        danger: "bg-[hsl(var(--status-destructive))]/70",
+        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 }) })] }));
+}
+export { CountBadge };

package/dist/dialog-primitive.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const DialogRoot: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DialogSurfaceProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    hideCloseButton?: boolean;
+}
+declare const DialogSurface: React.ForwardRefExoticComponent<DialogSurfaceProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { DialogRoot, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogSurface, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/dialog-primitive.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "./animated-icons/x";
+import { cn } from "./lib/utils";
+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-4 top-4 cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
+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 })));
+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 })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export { DialogRoot, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogSurface, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/dialog.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { type ButtonProps } from "./button";
+interface DialogRenderHelpers {
+    close: () => void;
+}
+export interface DialogAction extends Omit<ButtonProps, "children"> {
+    label: React.ReactNode;
+    closeOnClick?: boolean;
+}
+type DialogRenderable = React.ReactNode | ((helpers: DialogRenderHelpers) => React.ReactNode);
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    trigger?: React.ReactElement;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: DialogRenderable;
+    footer?: DialogRenderable;
+    primaryAction?: DialogAction;
+    secondaryAction?: DialogAction;
+    contentClassName?: string;
+    bodyClassName?: string;
+    hideCloseButton?: boolean;
+}
+declare function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export { Dialog };

package/dist/dialog.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "./button";
+import { DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogSurface, DialogTitle, DialogTrigger, } from "./dialog-primitive";
+import { cn } from "./lib/utils";
+function useControllableOpen({ open, defaultOpen, onOpenChange, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    return [currentOpen, setOpen];
+}
+function resolveDialogRenderable(value, helpers) {
+    if (typeof value === "function") {
+        return value(helpers);
+    }
+    return value;
+}
+function renderDialogAction({ action, close, defaultVariant, }) {
+    const { label, onClick, closeOnClick = true, type = "button", variant = defaultVariant, ...buttonProps } = action;
+    return (_jsx(Button, { ...buttonProps, type: type, variant: variant, onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (!event.defaultPrevented && closeOnClick) {
+                close();
+            }
+        }, children: label }));
+}
+function Dialog({ open, defaultOpen, onOpenChange, modal, trigger, title, description, children, footer, primaryAction, secondaryAction, contentClassName, bodyClassName, hideCloseButton, }) {
+    const [isOpen, setIsOpen] = useControllableOpen({
+        open,
+        defaultOpen,
+        onOpenChange,
+    });
+    const helpers = React.useMemo(() => ({
+        close: () => setIsOpen(false),
+    }), [setIsOpen]);
+    const body = resolveDialogRenderable(children, helpers);
+    const customFooter = resolveDialogRenderable(footer, helpers);
+    const hasFooter = Boolean(customFooter || primaryAction || secondaryAction);
+    return (_jsxs(DialogRoot, { open: isOpen, onOpenChange: setIsOpen, modal: modal, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogSurface, { className: contentClassName, hideCloseButton: hideCloseButton, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : null] }), body ? _jsx("div", { className: cn("grid gap-4", bodyClassName), children: body }) : null, hasFooter ? (_jsx(DialogFooter, { children: customFooter !== null && customFooter !== void 0 ? customFooter : (_jsxs(_Fragment, { children: [secondaryAction
+                                    ? renderDialogAction({
+                                        action: secondaryAction,
+                                        close: helpers.close,
+                                        defaultVariant: "outline",
+                                    })
+                                    : null, primaryAction
+                                    ? renderDialogAction({
+                                        action: primaryAction,
+                                        close: helpers.close,
+                                        defaultVariant: "default",
+                                    })
+                                    : null] })) })) : null] })] }));
+}
+export { Dialog };

package/dist/draggable-tabs.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type TooltipProps } from "./tooltip";
+export interface DraggableTabItem {
+    id: string;
+    label: React.ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    tooltip?: React.ReactNode;
+    tooltipContentClassName?: string;
+    tooltipSide?: TooltipProps["side"];
+    onSelect?: () => void;
+    onClose?: () => void;
+    className?: string;
+    activeClassName?: string;
+    inactiveClassName?: string;
+    labelClassName?: string;
+    closeButtonClassName?: string;
+}
+export interface DraggableTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    staticTabs?: DraggableTabItem[];
+    tabs: DraggableTabItem[];
+    onReorder?: (oldIndex: number, newIndex: number) => void;
+}
+declare function DraggableTabs({ staticTabs, tabs, onReorder, className, ...props }: DraggableTabsProps): import("react/jsx-runtime").JSX.Element;
+export { DraggableTabs };

package/dist/draggable-tabs.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { XIcon } from "./animated-icons/x";
+import { cn } from "./lib/utils";
+import { Tooltip } from "./tooltip";
+function TabButton({ item, dragHandleProps, }) {
+    var _a, _b, _c;
+    const isDraggable = Boolean(dragHandleProps);
+    const labelClassName = item.labelClassName
+        ? item.labelClassName
+        : item.active
+            ? "text-foreground"
+            : "text-muted-foreground hover:text-foreground";
+    const content = (_jsxs("div", { className: cn("group flex items-center gap-2 rounded-t-md border-b-2 px-3 transition-colors select-none", item.disabled
+            ? "cursor-not-allowed opacity-50"
+            : isDraggable
+                ? "cursor-grab active:cursor-grabbing"
+                : "cursor-pointer", item.active
+            ? (_a = item.activeClassName) !== null && _a !== void 0 ? _a : "border-green-500"
+            : (_b = item.inactiveClassName) !== null && _b !== void 0 ? _b : "border-transparent hover:bg-muted", item.className), ...dragHandleProps, children: [_jsxs("button", { type: "button", onClick: item.disabled ? undefined : item.onSelect, disabled: item.disabled, className: cn("flex cursor-pointer items-center gap-2 py-3 pr-1 text-sm font-medium whitespace-nowrap disabled:cursor-not-allowed", labelClassName), children: [item.leading, item.label, item.trailing] }), item.onClose ? (_jsx("button", { type: "button", onClick: (event) => {
+                    var _a;
+                    event.stopPropagation();
+                    (_a = item.onClose) === null || _a === void 0 ? void 0 : _a.call(item);
+                }, className: cn("cursor-pointer rounded p-1 text-muted-foreground hover:text-foreground", item.closeButtonClassName), "aria-label": "Close tab", children: _jsx(XIcon, { size: 12 }) })) : null] }));
+    if (!item.tooltip) {
+        return content;
+    }
+    return (_jsx(Tooltip, { content: item.tooltip, side: (_c = item.tooltipSide) !== null && _c !== void 0 ? _c : "bottom", contentClassName: item.tooltipContentClassName, children: content }));
+}
+function SortableTab({ item }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id });
+    return (_jsx("div", { ref: setNodeRef, style: {
+            transform: CSS.Transform.toString(transform),
+            transition,
+            zIndex: isDragging ? 50 : undefined,
+        }, className: cn(isDragging && "opacity-50 shadow-lg"), children: _jsx(TabButton, { item: item, dragHandleProps: { ...attributes, ...listeners } }) }));
+}
+function DraggableTabs({ staticTabs = [], tabs, onReorder, className, ...props }) {
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id || !onReorder)
+            return;
+        const oldIndex = tabs.findIndex((tab) => tab.id === active.id);
+        const newIndex = tabs.findIndex((tab) => tab.id === over.id);
+        if (oldIndex >= 0 && newIndex >= 0) {
+            onReorder(oldIndex, newIndex);
+        }
+    };
+    return (_jsxs("div", { className: cn("flex items-end gap-1 border-b overflow-x-auto overflow-y-hidden bg-background", className), ...props, children: [staticTabs.map((tab) => (_jsx(TabButton, { item: tab }, tab.id))), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabs.map((tab) => tab.id), strategy: horizontalListSortingStrategy, children: tabs.map((tab) => (_jsx(SortableTab, { item: tab }, tab.id))) }) })] }));
+}
+export { DraggableTabs };