@lerianstudio/sindarian-ui 2.0.0-beta.24 → 2.0.0-beta.26

package/dist/esm/components/ui/autocomplete/index.js

@@ -1,392 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, Loader2, X } from 'lucide-react';
-import { Badge } from '../badge/index.js';
-import { cn } from '../../../lib/utils.js';
-import { Separator } from '../separator/index.js';
-import { Command as CommandPrimitive, useCommandState } from 'cmdk';
-import { useClickAway } from '../../../hooks/use-click-away.js';
-import isNil from 'lodash/isNil.js';
-const AutocompleteContext = React.createContext({
-    value: [],
-    onValueChange: (values) => values,
-    handleChange: (value) => value,
-    handleClear: () => { },
-    setOpen: () => { },
-    setOnScrollbar: () => { },
-    options: {},
-    addOption: (option) => option,
-    inputRef: React.createRef()
-});
-const useAutocomplete = () => {
-    const context = React.useContext(AutocompleteContext);
-    if (!context) {
-        throw new Error('useAutocomplete must be used within a AutocompleteProvider');
-    }
-    return context;
-};
-/**
- * The text a value reads as.
- *
- * An item registers a label only when it HAS one to give: a string child, or an
- * explicit `label` when its children are markup. Everything downstream renders
- * this map as text (the input's value, a chip's `aria-label`), so a value with
- * no registered label falls back to the value itself. The alternatives are both
- * defects that shipped: `undefined` drops a controlled input to uncontrolled,
- * and a React element interpolates into a template literal as "[object
- * Object]".
- */
-function labelOf(options, value) {
-    return options[value] ?? value;
-}
-export function AutocompleteTrigger({ ref, className, onClear, clearLabel = 'Clear', children }) {
-    const _ref = React.useRef(null);
-    const { open, readOnly, setOpen, disabled, value, inputRef, handleClear } = useAutocomplete();
-    React.useImperativeHandle(ref, () => _ref.current);
-    const isNoSelection = disabled || readOnly || value.length < 1;
-    return (_jsxs("div", { ref: _ref, className: cn(
-        // `border-input-border`, NOT `border-input`: `--input` is a SURFACE
-        // token and is white in light, so the border it paints is invisible
-        // against the field's own `bg-background`. This is the same edge
-        // MultipleSelect and DateRangePicker draw, and the same token.
-        'bg-background ring-offset-background placeholder:text-input-placeholder data-[disabled=true]:bg-shadcn-100 data-[read-only=true]:bg-shadcn-100 border-input-border flex rounded-md border text-sm focus:outline-hidden focus-visible:outline-hidden data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[read-only=true]:opacity-50 md:text-sm [&>span]:line-clamp-1', {
-            'h-9': value.length === 0,
-            'min-h-9': value.length > 0,
-            'cursor-text': !disabled && value.length !== 0
-        }, className), onClick: () => {
-            // Redirect focus to the input field when clicking on the container
-            if (readOnly || disabled) {
-                return;
-            }
-            if (open) {
-                inputRef?.current?.blur();
-            }
-            else {
-                inputRef?.current?.focus();
-            }
-            setOpen(!open);
-        }, "data-disabled": disabled, "data-read-only": readOnly, children: [_jsx("div", { className: "flex grow flex-wrap gap-1 px-3 py-2", children: children }), _jsxs("div", { className: "flex shrink-0 items-center justify-end", children: [_jsx("button", { type: "button", "aria-label": clearLabel, className: cn('cursor-pointer', isNoSelection && 'hidden'), onKeyDown: (event) => {
-                            // cmdk's Command root calls preventDefault() on EVERY Enter that
-                            // reaches it, which cancels this button's implicit activation, so
-                            // the keydown must not get there. Enter only: the root's other
-                            // keys (Escape, the arrows) still belong to the panel.
-                            if (event.key === 'Enter') {
-                                event.stopPropagation();
-                            }
-                        }, onClick: (event) => {
-                            event.stopPropagation();
-                            handleClear();
-                            onClear?.();
-                        }, children: _jsx(X, { "aria-hidden": true, className: "text-muted-foreground mx-2 h-4" }) }), _jsx(Separator, { orientation: "vertical", className: cn(isNoSelection && 'hidden') }), _jsx(SelectPrimitive.Icon, { className: "cursor-pointer data-[disabled=true]:cursor-not-allowed data-[read-only=true]:cursor-default", "data-disabled": disabled, "data-read-only": readOnly, children: _jsx(ChevronDown, { className: "mx-3 my-2 h-4 w-4 opacity-50" }) })] })] }));
-}
-export function AutocompleteValue({ ref, className, value: valueProp, onValueChange, onBlur, ...props }) {
-    const [search, setSearch] = React.useState(valueProp);
-    const { value, showValue, options, readOnly, disabled, inputRef } = useAutocomplete();
-    React.useImperativeHandle(ref, () => inputRef.current);
-    const updateSearch = (value) => {
-        if (isNil(value)) {
-            return;
-        }
-        const v = typeof value === 'string' ? value : value[0];
-        if (v === '') {
-            handleValueChange('');
-            return;
-        }
-        handleValueChange(showValue ? v : labelOf(options, v));
-    };
-    const handleValueChange = (value) => {
-        setSearch(value);
-        onValueChange?.(value);
-    };
-    const handleBlur = (event) => {
-        updateSearch(value);
-        onBlur?.(event);
-    };
-    // If options changes, update only the internal value
-    React.useEffect(() => {
-        if (isNil(value)) {
-            return;
-        }
-        const v = typeof value === 'string' ? value : value[0];
-        if (v === '') {
-            return;
-        }
-        setSearch(showValue ? v : labelOf(options, v));
-    }, [options]);
-    React.useEffect(() => {
-        updateSearch(value);
-    }, [value]);
-    return (_jsx(CommandPrimitive.Input, { ...props, ref: inputRef, value: search, onValueChange: handleValueChange, disabled: disabled, readOnly: readOnly, className: cn('placeholder:text-muted-foreground w-full bg-transparent outline-hidden read-only:opacity-50 read-only:placeholder:opacity-0 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className), onBlur: handleBlur }));
-}
-export function AutocompleteMultipleValue({ ref, className, clearLabel = 'Clear', ...props }) {
-    const { value, disabled, handleChange, options, showValue, inputRef } = useAutocomplete();
-    React.useImperativeHandle(ref, () => inputRef.current);
-    return (_jsxs(_Fragment, { children: [options &&
-                value?.map((value) => (_jsxs(Badge, { variant: "secondary", className: cn('data-disabled:bg-muted-foreground data-fixed:bg-muted-foreground data-disabled:text-muted data-fixed:text-muted data-disabled:hover:bg-muted-foreground data-fixed:hover:bg-muted-foreground'), children: [showValue ? value : labelOf(options, value), _jsx("button", { type: "button", "aria-label": `${clearLabel} ${showValue ? value : labelOf(options, value)}`, className: cn('ring-offset-background focus:ring-ring ml-1 rounded-full outline-hidden focus:ring-2 focus:ring-offset-2', disabled && 'hidden'), onKeyDown: (event) => {
-                                // cmdk's Command root calls preventDefault() on EVERY Enter that
-                                // reaches it, which cancels this button's implicit activation, so
-                                // the keydown must not get there. Enter only: the root's other
-                                // keys (Escape, the arrows) still belong to the panel.
-                                if (event.key === 'Enter') {
-                                    event.stopPropagation();
-                                }
-                            }, onClick: (event) => {
-                                event.stopPropagation();
-                                handleChange(value);
-                            }, children: _jsx(X, { "aria-hidden": true, className: "text-muted-foreground hover:text-foreground h-3 w-3" }) })] }, value))), _jsx(CommandPrimitive.Input, { ...props, ref: inputRef, disabled: disabled, className: cn('placeholder:text-muted-foreground w-full bg-transparent outline-hidden focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className) })] }));
-}
-export function AutocompleteEmpty({ className, ...props }) {
-    const render = useCommandState((state) => state.filtered.count === 0);
-    if (!render)
-        return null;
-    return (_jsx("div", { "data-slot": "autocomplete-empty", className: cn('py-6 text-center text-sm', className), "cmdk-empty": "", role: "presentation", ...props }));
-}
-export function AutocompleteLoading({ className, ref, ...props }) {
-    return (_jsx(CommandPrimitive.Loading, { ref: ref, "data-slot": "autocomplete-loading", className: cn('flex items-center justify-center py-6 text-center text-sm', className), ...props, children: _jsx(Loader2, { className: "text-muted-foreground h-5 w-5 motion-safe:animate-spin" }) }));
-}
-export const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'];
-export function AutocompleteContent({ className, position = 'popper', side = 'bottom', ref, children, onMouseEnter, onMouseLeave, onPointerDownOutside, ...props }) {
-    const _ref = React.useRef(null);
-    const { open, addOption, setOpen, onScrollbar, setOnScrollbar, inputRef } = useAutocomplete();
-    React.useImperativeHandle(ref, () => _ref.current);
-    useClickAway(_ref, (event) => {
-        /**
-         * ⛔ THE `open` GUARD IS LOAD-BEARING SINCE THIS LIST STOPPED UNMOUNTING.
-         * While the panel returned `null` this handler was inert by accident: its
-         * ref pointed at nothing. Now that the list stays in the DOM (see the return
-         * below), every click anywhere on the page reaches here — and without this
-         * line each one would call `setOpen(false)` and blur the input. A consumer
-         * form carrying ten of these would run ten handlers per click.
-         */
-        if (!open) {
-            return;
-        }
-        // Should not close when clicking on the scrollbar
-        if (onScrollbar) {
-            return;
-        }
-        setOpen(false);
-        inputRef.current?.blur();
-        onPointerDownOutside?.(event);
-    });
-    /**
-     * Iterates recursively into react children to find valid items options
-     * Adds the valid ones into the options object
-     * @param children
-     */
-    const _searchChildren = (children) => {
-        React.Children.forEach(React.Children.toArray(children), (child) => {
-            // If child is already invalid, like pure string, dismiss
-            if (!React.isValidElement(child)) {
-                return;
-            }
-            // If child is recognized as an AutocompleteItem
-            if (child.type &&
-                child.type.displayName === 'AutocompleteItem') {
-                // Check if the item was proper filled with a value prop
-                if (child.props.value) {
-                    // NOT `children as string`. That cast is how a React ELEMENT got into
-                    // a map every reader treats as text. An item with markup children
-                    // registers nothing unless it declares a `label`, and `labelOf` reads
-                    // the absence as "use the value".
-                    const { label, children: itemChildren } = child.props;
-                    const text = label ??
-                        (typeof itemChildren === 'string' ? itemChildren : undefined);
-                    if (text !== undefined) {
-                        addOption({ [child.props.value]: text });
-                    }
-                }
-                return;
-            }
-            // If not, search recursively into the childrens
-            if (child.props.children) {
-                _searchChildren(child.props.children);
-            }
-        });
-    };
-    // Since this component is not going to be rendered in the DOM until open is true,
-    // we need to register the options when the component mounts
-    // and when the children changes.
-    React.useEffect(() => {
-        _searchChildren(children);
-    }, [children]);
-    /**
-     * ⛔ THE LIST STAYS IN THE DOM, THE OPTIONS DO NOT — and the split is the whole
-     * fix (#150).
-     *
-     * cmdk puts `aria-controls={listId}` on the input it renders and `id={listId}`
-     * on this list. Returning `null` while closed therefore left the input naming
-     * an element that did not exist, which axe-core reports as a CRITICAL
-     * `aria-valid-attr-value` violation — measured as 10 failing cases across five
-     * forms in a consumer, in both the populated and the empty state. A screen
-     * reader following the reference resolved it to nothing.
-     *
-     * ⛔ AND NOT "KEEP EVERYTHING MOUNTED", which is the obvious reading of the
-     * fix and is too expensive. Only the LIST carries the id; the options carry
-     * the cost. One consumer form puts up to ten of these on screen, each holding
-     * a page of up to a hundred options — roughly a thousand permanently present
-     * nodes for an id that is one element. `{open ? children : null}` keeps the
-     * reference resolvable and the DOM the size it was.
-     *
-     * ⚠️ `hidden` AND NOT A CLASS. It removes the subtree from the accessibility
-     * tree as well as from view, so a closed panel is not an empty `listbox` that
-     * a screen reader can reach into.
-     *
-     * ⚠️ THE ENTRY ANIMATION IS NOT LOST, because there was none to lose: the
-     * className carries `animate-in` with no `fade-in-*` / `zoom-in-*` / `slide-in-*`
-     * companion, so every `--tw-enter-*` variable sits at its default and the
-     * keyframe is a no-op today. Should a real one be added later, it belongs on a
-     * wrapper INSIDE this list — that subtree still mounts with the children.
-     */
-    return (_jsx("div", { className: "relative", hidden: !open, children: _jsx(CommandPrimitive.List, { ref: _ref, className: cn('bg-popover text-popover-foreground motion-safe:animate-in absolute top-1 z-50 max-h-96 w-full min-w-32 overflow-x-hidden overflow-y-auto rounded-md border shadow-md outline-hidden', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), "data-side": side, ...props, onMouseEnter: (e) => {
-                onMouseEnter?.(e);
-                setOnScrollbar(true);
-            }, onMouseLeave: (e) => {
-                onMouseLeave?.(e);
-                setOnScrollbar(false);
-            }, children: open ? children : null }) }));
-}
-export function AutocompleteGroup({ className, ...props }) {
-    return (_jsx(CommandPrimitive.Group, { "data-slot": "autocomplete-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium', className), ...props }));
-}
-export function AutocompleteItem({ className, value, 
-// Read off the element by `AutocompleteContent._searchChildren`, never
-// rendered: destructured here only to keep it out of `...props` and off the
-// div cmdk spreads them onto.
-label: _label, onSelect, ...props }) {
-    const { handleChange } = useAutocomplete();
-    return (_jsx(CommandPrimitive.Item, { "data-slot": "autocomplete-item", value: value, className: cn("data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className), ...props, onMouseDown: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, onSelect: (value) => {
-            handleChange(value);
-            onSelect?.(value);
-        } }));
-}
-/**
- * ⛔ LOAD-BEARING, NOT A DEBUG LABEL. `AutocompleteContent._searchChildren`
- * recognises an option by `child.type.displayName === 'AutocompleteItem'`, and
- * a function component carries no displayName unless it is assigned one. It
- * never was, so the walk matched nothing and the option registry stayed empty
- * for every consumer: a multiple-select chip rendered `options[value]` as
- * `undefined` (an empty chip), and `AutocompleteValue.updateSearch` set the
- * input to `undefined` on every selection outside `showValue` mode.
- */
-AutocompleteItem.displayName = 'AutocompleteItem';
-export function Autocomplete({ ref, value, defaultValue, onValueChange, onClear, className, open: openProp, onOpenChange, showValue, readOnly, disabled, multiple, onKeyDown, children, ...props }) {
-    const _ref = React.useRef(null);
-    const [open, _setOpen] = React.useState(openProp);
-    const inputRef = React.useRef(null);
-    const [onScrollbar, setOnScrollbar] = React.useState(false);
-    const [selected, setSelected] = React.useState(defaultValue ?? value ?? (multiple ? [] : ''));
-    const [options, addOption] = React.useReducer((prev, state) => ({
-        ...prev,
-        ...state
-    }), {});
-    React.useImperativeHandle(ref, () => _ref.current);
-    const setOpen = (open) => {
-        _setOpen(open);
-        onOpenChange?.(open);
-    };
-    const handleClear = () => {
-        onClear?.();
-        if (!multiple) {
-            setSelected('');
-            onValueChange?.('');
-            return;
-        }
-        setSelected([]);
-        onValueChange?.([]);
-    };
-    const handleChange = React.useCallback((value) => {
-        if (!value) {
-            return;
-        }
-        if (!multiple) {
-            setSelected(value);
-            onValueChange?.(value);
-            setOpen(false);
-            return;
-        }
-        const newSelected = selected.includes(value)
-            ? selected.filter((item) => item !== value)
-            : [...selected, value];
-        setSelected(newSelected);
-        onValueChange?.(newSelected);
-    }, [selected, onValueChange]);
-    const handleKeyDown = React.useCallback((e) => {
-        const input = inputRef.current;
-        if (input) {
-            if (e.key === 'Delete' || e.key === 'Backspace') {
-                if (multiple) {
-                    if (input.value === '' && selected.length > 0) {
-                        handleChange(selected[selected.length - 1]);
-                    }
-                }
-            }
-            // This is not a default behavior of the <input /> field
-            if (e.key === 'Escape') {
-                e.stopPropagation();
-                input.blur();
-            }
-        }
-    }, [selected, handleChange]);
-    // Keeps the selected value in sync with the value prop
-    React.useEffect(() => {
-        if (!isNil(value)) {
-            setSelected(value);
-        }
-    }, [value]);
-    // Keeps the open state in sync with the open prop
-    React.useEffect(() => {
-        if (openProp !== undefined) {
-            setOpen(openProp);
-        }
-    }, [openProp]);
-    return (_jsx(AutocompleteContext.Provider, { value: {
-            value: selected,
-            onValueChange: setSelected,
-            showValue,
-            readOnly,
-            disabled,
-            handleChange,
-            handleClear,
-            onScrollbar,
-            setOnScrollbar,
-            open,
-            setOpen,
-            options,
-            addOption,
-            inputRef
-        }, children: _jsx(CommandPrimitive, { ref: _ref, className: cn('text-foreground flex h-auto w-full flex-col overflow-visible rounded-md bg-transparent', className), "data-disabled": disabled, "aria-disabled": disabled, "data-read-only": readOnly, "aria-readonly": readOnly, ...props, onKeyDown: (e) => {
-                handleKeyDown(e);
-                onKeyDown?.(e);
-            }, children: children }) }));
-}
-/**
- * ⛔ THE REST OF THE SET, FOR THE SAME REASON AS `AutocompleteItem` ABOVE.
- *
- * A function component's `name` is whatever the bundler left it — one letter in
- * a production build — so any lookup written against `child.type` needs an
- * explicit string to compare. `AutocompleteItem` is the only part the walk
- * reads TODAY, and it is the part that shipped an empty option registry to
- * every consumer while it was anonymous. Naming the whole set costs a line each
- * and removes the next instance of that defect before it is written; it also
- * makes these parts legible in a React tree, which `MultipleSelect` next door
- * has always done.
- *
- * `__tests__`-style enumeration lives in `autocomplete.test.tsx`: it reads the
- * module's exports rather than a list, so a new part added without a name fails
- * without anyone remembering to extend anything.
- */
-Autocomplete.displayName = 'Autocomplete';
-AutocompleteTrigger.displayName = 'AutocompleteTrigger';
-AutocompleteValue.displayName = 'AutocompleteValue';
-AutocompleteMultipleValue.displayName = 'AutocompleteMultipleValue';
-AutocompleteContent.displayName = 'AutocompleteContent';
-AutocompleteGroup.displayName = 'AutocompleteGroup';
-AutocompleteEmpty.displayName = 'AutocompleteEmpty';
-AutocompleteLoading.displayName = 'AutocompleteLoading';
+"use client";import{jsx as s,jsxs as O,Fragment as T}from"react/jsx-runtime";import t from"react";import*as z from"@radix-ui/react-select";import{ChevronDown as F,Loader2 as $,X as j}from"lucide-react";import{Badge as X}from"../badge/index.js";import{cn as b}from"../../../lib/utils.js";import{Separator as q}from"../separator/index.js";import{Command as A,useCommandState as J}from"cmdk";import{useClickAway as Q}from"../../../hooks/use-click-away.js";import V from"lodash/isNil.js";const L=t.createContext({value:[],onValueChange:e=>e,handleChange:e=>e,handleClear:()=>{},setOpen:()=>{},setOnScrollbar:()=>{},options:{},addOption:e=>e,inputRef:t.createRef()});const _=()=>{const e=t.useContext(L);if(!e){throw new Error("useAutocomplete must be used within a AutocompleteProvider")}return e};function I(e,o){return e[o]??o}export function AutocompleteTrigger({ref:e,className:o,onClear:f,clearLabel:i="Clear",children:h}){const g=t.useRef(null);const{open:a,readOnly:p,setOpen:u,disabled:d,value:r,inputRef:c,handleClear:C}=_();t.useImperativeHandle(e,()=>g.current);const N=d||p||r.length<1;return O("div",{ref:g,className:b("bg-background ring-offset-background placeholder:text-input-placeholder data-[disabled=true]:bg-shadcn-100 data-[read-only=true]:bg-shadcn-100 border-input-border flex rounded-md border text-sm focus:outline-hidden focus-visible:outline-hidden data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[read-only=true]:opacity-50 md:text-sm [&>span]:line-clamp-1",{"h-9":r.length===0,"min-h-9":r.length>0,"cursor-text":!d&&r.length!==0},o),onClick:()=>{if(p||d){return}if(a){c?.current?.blur()}else{c?.current?.focus()}u(!a)},"data-disabled":d,"data-read-only":p,children:[s("div",{className:"flex grow flex-wrap gap-1 px-3 py-2",children:h}),O("div",{className:"flex shrink-0 items-center justify-end",children:[s("button",{type:"button","aria-label":i,className:b("cursor-pointer",N&&"hidden"),onKeyDown:y=>{if(y.key==="Enter"){y.stopPropagation()}},onClick:y=>{y.stopPropagation();C();f?.()},children:s(j,{"aria-hidden":true,className:"text-muted-foreground mx-2 h-4"})}),s(q,{orientation:"vertical",className:b(N&&"hidden")}),s(z.Icon,{className:"cursor-pointer data-[disabled=true]:cursor-not-allowed data-[read-only=true]:cursor-default","data-disabled":d,"data-read-only":p,children:s(F,{className:"mx-3 my-2 h-4 w-4 opacity-50"})})]})]})}export function AutocompleteValue({ref:e,className:o,value:f,onValueChange:i,onBlur:h,...g}){const[a,p]=t.useState(f);const{value:u,showValue:d,options:r,readOnly:c,disabled:C,inputRef:N}=_();t.useImperativeHandle(e,()=>N.current);const y=n=>{if(V(n)){return}const m=typeof n==="string"?n:n[0];if(m===""){w("");return}w(d?m:I(r,m))};const w=n=>{p(n);i?.(n)};const k=n=>{y(u);h?.(n)};t.useEffect(()=>{if(V(u)){return}const n=typeof u==="string"?u:u[0];if(n===""){return}p(d?n:I(r,n))},[r]);t.useEffect(()=>{y(u)},[u]);return s(A.Input,{...g,ref:N,value:a,onValueChange:w,disabled:C,readOnly:c,className:b("placeholder:text-muted-foreground w-full bg-transparent outline-hidden read-only:opacity-50 read-only:placeholder:opacity-0 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0",o),onBlur:k})}export function AutocompleteMultipleValue({ref:e,className:o,clearLabel:f="Clear",...i}){const{value:h,disabled:g,handleChange:a,options:p,showValue:u,inputRef:d}=_();t.useImperativeHandle(e,()=>d.current);return O(T,{children:[p&&h?.map(r=>O(X,{variant:"secondary",className:b("data-disabled:bg-muted-foreground data-fixed:bg-muted-foreground data-disabled:text-muted data-fixed:text-muted data-disabled:hover:bg-muted-foreground data-fixed:hover:bg-muted-foreground"),children:[u?r:I(p,r),s("button",{type:"button","aria-label":`${f} ${u?r:I(p,r)}`,className:b("ring-offset-background focus:ring-ring ml-1 rounded-full outline-hidden focus:ring-2 focus:ring-offset-2",g&&"hidden"),onKeyDown:c=>{if(c.key==="Enter"){c.stopPropagation()}},onClick:c=>{c.stopPropagation();a(r)},children:s(j,{"aria-hidden":true,className:"text-muted-foreground hover:text-foreground h-3 w-3"})})]},r)),s(A.Input,{...i,ref:d,disabled:g,className:b("placeholder:text-muted-foreground w-full bg-transparent outline-hidden focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0",o)})]})}export function AutocompleteEmpty({className:e,...o}){const f=J(i=>i.filtered.count===0);if(!f)return null;return s("div",{"data-slot":"autocomplete-empty",className:b("py-6 text-center text-sm",e),"cmdk-empty":"",role:"presentation",...o})}export function AutocompleteLoading({className:e,ref:o,...f}){return s(A.Loading,{ref:o,"data-slot":"autocomplete-loading",className:b("flex items-center justify-center py-6 text-center text-sm",e),...f,children:s($,{className:"text-muted-foreground h-5 w-5 motion-safe:animate-spin"})})}export const SIDE_OPTIONS=["top","right","bottom","left"];export function AutocompleteContent({className:e,position:o="popper",side:f="bottom",ref:i,children:h,onMouseEnter:g,onMouseLeave:a,onPointerDownOutside:p,...u}){const d=t.useRef(null);const{open:r,addOption:c,setOpen:C,onScrollbar:N,setOnScrollbar:y,inputRef:w}=_();t.useImperativeHandle(i,()=>d.current);Q(d,n=>{if(!r){return}if(N){return}C(false);w.current?.blur();p?.(n)});const k=n=>{t.Children.forEach(t.Children.toArray(n),m=>{if(!t.isValidElement(m)){return}if(m.type&&m.type.displayName==="AutocompleteItem"){if(m.props.value){const{label:R,children:E}=m.props;const x=R??(typeof E==="string"?E:void 0);if(x!==void 0){c({[m.props.value]:x})}}return}if(m.props.children){k(m.props.children)}})};t.useEffect(()=>{k(h)},[h]);return s("div",{className:"relative",hidden:!r,children:s(A.List,{ref:d,className:b("bg-popover text-popover-foreground motion-safe:animate-in absolute top-1 z-50 max-h-96 w-full min-w-32 overflow-x-hidden overflow-y-auto rounded-md border shadow-md outline-hidden",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),"data-side":f,...u,onMouseEnter:n=>{g?.(n);y(true)},onMouseLeave:n=>{a?.(n);y(false)},children:r?h:null})})}export function AutocompleteGroup({className:e,...o}){return s(A.Group,{"data-slot":"autocomplete-group",className:b("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",e),...o})}export function AutocompleteItem({className:e,value:o,label:f,onSelect:i,...h}){const{handleChange:g}=_();return s(A.Item,{"data-slot":"autocomplete-item",value:o,className:b("data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",e),...h,onMouseDown:a=>{a.preventDefault();a.stopPropagation()},onSelect:a=>{g(a);i?.(a)}})}AutocompleteItem.displayName="AutocompleteItem";export function Autocomplete({ref:e,value:o,defaultValue:f,onValueChange:i,onClear:h,className:g,open:a,onOpenChange:p,showValue:u,readOnly:d,disabled:r,multiple:c,onKeyDown:C,children:N,...y}){const w=t.useRef(null);const[k,n]=t.useState(a);const m=t.useRef(null);const[R,E]=t.useState(false);const[x,S]=t.useState(f??o??(c?[]:""));const[H,M]=t.useReducer((l,v)=>({...l,...v}),{});t.useImperativeHandle(e,()=>w.current);const D=l=>{n(l);p?.(l)};const B=()=>{h?.();if(!c){S("");i?.("");return}S([]);i?.([])};const P=t.useCallback(l=>{if(!l){return}if(!c){S(l);i?.(l);D(false);return}const v=x.includes(l)?x.filter(G=>G!==l):[...x,l];S(v);i?.(v)},[x,i]);const K=t.useCallback(l=>{const v=m.current;if(v){if(l.key==="Delete"||l.key==="Backspace"){if(c){if(v.value===""&&x.length>0){P(x[x.length-1])}}}if(l.key==="Escape"){l.stopPropagation();v.blur()}}},[x,P]);t.useEffect(()=>{if(!V(o)){S(o)}},[o]);t.useEffect(()=>{if(a!==void 0){D(a)}},[a]);return s(L.Provider,{value:{value:x,onValueChange:S,showValue:u,readOnly:d,disabled:r,handleChange:P,handleClear:B,onScrollbar:R,setOnScrollbar:E,open:k,setOpen:D,options:H,addOption:M,inputRef:m},children:s(A,{ref:w,className:b("text-foreground flex h-auto w-full flex-col overflow-visible rounded-md bg-transparent",g),"data-disabled":r,"aria-disabled":r,"data-read-only":d,"aria-readonly":d,...y,onKeyDown:l=>{K(l);C?.(l)},children:N})})}Autocomplete.displayName="Autocomplete";AutocompleteTrigger.displayName="AutocompleteTrigger";AutocompleteValue.displayName="AutocompleteValue";AutocompleteMultipleValue.displayName="AutocompleteMultipleValue";AutocompleteContent.displayName="AutocompleteContent";AutocompleteGroup.displayName="AutocompleteGroup";AutocompleteEmpty.displayName="AutocompleteEmpty";AutocompleteLoading.displayName="AutocompleteLoading";

package/dist/esm/components/ui/autosize-textarea/index.js

@@ -1,51 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { cn } from '../../../lib/utils.js';
-import { useImperativeHandle } from 'react';
-export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 0 }) => {
-    const [init, setInit] = React.useState(true);
-    React.useEffect(() => {
-        // We need to reset the height momentarily to get the correct scrollHeight for the textarea
-        const textAreaElement = textAreaRef.current;
-        if (textAreaElement) {
-            if (init) {
-                textAreaElement.style.minHeight = `${minHeight}px`;
-                if (maxHeight > minHeight) {
-                    textAreaElement.style.maxHeight = `${maxHeight}px`;
-                }
-                setInit(false);
-            }
-            textAreaElement.style.height = `${minHeight}px`;
-            const scrollHeight = textAreaElement.scrollHeight;
-            // We then set the height directly, outside of the render loop
-            // Trying to set this with state or a ref will segment an incorrect value.
-            if (scrollHeight > maxHeight) {
-                textAreaElement.style.height = `${maxHeight}px`;
-                textAreaElement.style.overflowY = 'auto';
-            }
-            else {
-                textAreaElement.style.height = `${scrollHeight}px`;
-                textAreaElement.style.overflowY = 'hidden';
-            }
-        }
-    }, [textAreaRef.current, triggerAutoSize]);
-};
-export function AutosizeTextarea({ maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 36, className, onChange, value, ref, ...props }) {
-    const textAreaRef = React.useRef(null);
-    const [triggerAutoSize, setTriggerAutoSize] = React.useState('');
-    useAutosizeTextArea({
-        textAreaRef,
-        triggerAutoSize: triggerAutoSize,
-        maxHeight,
-        minHeight
-    });
-    useImperativeHandle(ref, () => textAreaRef.current);
-    React.useEffect(() => {
-        setTriggerAutoSize(value);
-    }, [props?.defaultValue, value]);
-    return (_jsx("textarea", { ...props, value: value, ref: textAreaRef, className: cn('border-input-border ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full overflow-y-hidden rounded-md border bg-transparent px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), onChange: (e) => {
-            setTriggerAutoSize(e.target.value);
-            onChange?.(e);
-        } }));
-}
+"use client";import{jsx as c}from"react/jsx-runtime";import*as i from"react";import{cn as g}from"../../../lib/utils.js";import{useImperativeHandle as y}from"react";export const useAutosizeTextArea=({textAreaRef:n,triggerAutoSize:l,maxHeight:t=Number.MAX_SAFE_INTEGER,minHeight:o=0})=>{const[s,u]=i.useState(true);i.useEffect(()=>{const e=n.current;if(e){if(s){e.style.minHeight=`${o}px`;if(t>o){e.style.maxHeight=`${t}px`}u(false)}e.style.height=`${o}px`;const r=e.scrollHeight;if(r>t){e.style.height=`${t}px`;e.style.overflowY="auto"}else{e.style.height=`${r}px`;e.style.overflowY="hidden"}}},[n.current,l])};export function AutosizeTextarea({maxHeight:n=Number.MAX_SAFE_INTEGER,minHeight:l=36,className:t,onChange:o,value:s,ref:u,...e}){const r=i.useRef(null);const[f,a]=i.useState("");useAutosizeTextArea({textAreaRef:r,triggerAutoSize:f,maxHeight:n,minHeight:l});y(u,()=>r.current);i.useEffect(()=>{a(s)},[e?.defaultValue,s]);return c("textarea",{...e,value:s,ref:r,className:g("border-input-border aria-invalid:border-destructive ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full overflow-y-hidden rounded-md border bg-transparent px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden","read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden","disabled:cursor-not-allowed disabled:opacity-50",t),onChange:d=>{a(d.target.value);o?.(d)}})}

package/dist/esm/components/ui/avatar/index.js

@@ -1,14 +1 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cn } from '../../../lib/utils.js';
-function Avatar({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", className: cn('relative flex size-10 shrink-0 overflow-hidden rounded-full', className), ...props }));
-}
-function AvatarImage({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
-}
-function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted flex size-full items-center justify-center rounded-full', className), ...props }));
-}
-export { Avatar, AvatarImage, AvatarFallback };
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"@radix-ui/react-avatar";import{cn as l}from"../../../lib/utils.js";function s({className:a,...t}){return e(r.Root,{"data-slot":"avatar",className:l("relative flex size-10 shrink-0 overflow-hidden rounded-full",a),...t})}function i({className:a,...t}){return e(r.Image,{"data-slot":"avatar-image",className:l("aspect-square size-full",a),...t})}function o({className:a,...t}){return e(r.Fallback,{"data-slot":"avatar-fallback",className:l("bg-muted flex size-full items-center justify-center rounded-full",a),...t})}export{s as Avatar,i as AvatarImage,o as AvatarFallback};

package/dist/esm/components/ui/badge/index.js

@@ -1,79 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils.js';
-import { Slot } from '@radix-ui/react-slot';
-/**
- * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
- * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
- * JSX drops the newline-only text node and CSS drops the whitespace-only
- * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
- * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
- * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
- *
- * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
- * semicircles sized to ONE line box, so a label that wraps stretches those caps
- * over two lines and the shape reads as a rounded blob, not a token. It bit a
- * consumer table whose column was sized to its content: `min-content` on
- * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
- * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
- * also pins `min-content` to the full label, which is what lets a caller cap the
- * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
- * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
- * lets it win.
- */
-const badgeVariants = cva('inline-flex items-center gap-1 whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', {
-    variants: {
-        variant: {
-            default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-            active: 'bg-system-success-surface text-system-success-h1a border-system-success-border py-[2px] px-3',
-            inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
-            secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
-            destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-            /**
-             * The accounting reading of a credit amount, NOT an alias of
-             * `destructive` (an error/alarm). The credit role is a tint-and-ink
-             * pair: `--credit-foreground` mirrors `--credit` by contract, so the
-             * red carries the role as text over a tinted surface. Do not "fix"
-             * this into a solid `bg-credit` fill — that renders red-on-red and is
-             * invisible.
-             */
-            credit: 'border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1',
-            error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',
-            success: 'border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1',
-            info: 'border-system-info-border bg-system-info-surface text-system-info-text px-[10px] py-1',
-            alert: 'border-system-alert-border bg-system-alert-surface text-system-alert-text px-[10px] py-1',
-            purple: 'border-system-purple-border bg-system-purple-surface text-system-purple-text px-[10px] py-1',
-            outline: 'text-foreground'
-        },
-        /**
-         * Font size only. Padding is baked per-variant above, so a `sm` that also
-         * shrank the box would fight every variant that sets its own; scoping the
-         * axis to type keeps `sm` composable with all of them. 11px is the canon
-         * for fine print — the one micro-badge size, replacing the per-consumer
-         * 0.7rem/10px/11px anarchy.
-         */
-        size: {
-            default: '',
-            sm: 'text-[11px]'
-        }
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default'
-    }
-});
-function Badge({ className, variant, size, asChild, ...props }) {
-    const Comp = asChild ? Slot : 'span';
-    /**
-     * A bare `span` is generic, and ARIA prohibits an accessible name on a
-     * generic element: a caller's `aria-label` was dropped by assistive tech and
-     * flagged by axe as `aria-prohibited-attr`. `role="img"` is the smallest role
-     * that permits the name and lets it stand in for the visible text, which is
-     * exactly what a labelled span badge wants. Unlabelled badges stay generic;
-     * `asChild` keeps the child's native role; and a caller's own `role` still wins
-     * because it arrives with the spread below.
-     */
-    const labelled = props['aria-label'] !== undefined || props['aria-labelledby'] !== undefined;
-    return (_jsx(Comp, { "data-slot": "badge", role: !asChild && labelled ? 'img' : undefined, className: cn(badgeVariants({ variant, size }), className), ...props }));
-}
-export { Badge, badgeVariants };
+import{jsx as i}from"react/jsx-runtime";import{cva as u}from"class-variance-authority";import{cn as p}from"../../../lib/utils.js";import{Slot as c}from"@radix-ui/react-slot";const t=u("inline-flex items-center gap-1 whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/80",active:"bg-system-success-surface text-system-success-h1a border-system-success-border py-[2px] px-3",inactive:"bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3",secondary:"border-transparent bg-muted-foreground text-white dark:text-black",destructive:"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/80",credit:"border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1",error:"border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1",success:"border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1",info:"border-system-info-border bg-system-info-surface text-system-info-text px-[10px] py-1",alert:"border-system-alert-border bg-system-alert-surface text-system-alert-text px-[10px] py-1",purple:"border-system-purple-border bg-system-purple-surface text-system-purple-text px-[10px] py-1",outline:"text-foreground"},size:{default:"",sm:"text-[11px]"}},defaultVariants:{variant:"default",size:"default"}});function x({className:s,variant:o,size:a,asChild:r,...e}){const d=r?c:"span";const n=e["aria-label"]!==void 0||e["aria-labelledby"]!==void 0;return i(d,{"data-slot":"badge",role:!r&&n?"img":void 0,className:p(t({variant:o,size:a}),s),...e})}export{x as Badge,t as badgeVariants};

package/dist/esm/components/ui/breadcrumb/index.js

@@ -1,27 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Slot } from '@radix-ui/react-slot';
-import { MoreHorizontal, Slash } from 'lucide-react';
-import { cn } from '../../../lib/utils.js';
-function Breadcrumb({ ...props }) {
-    return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
-}
-function BreadcrumbList({ className, ...props }) {
-    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('breadcrumb-list', className), ...props }));
-}
-function BreadcrumbItem({ className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn('breadcrumb-item', className), ...props }));
-}
-function BreadcrumbLink({ asChild, className, ...props }) {
-    const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn('breadcrumb-link', className), ...props }));
-}
-function BreadcrumbPage({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('breadcrumb-page', className), ...props }));
-}
-function BreadcrumbSeparator({ children, className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('breadcrumb-separator', className), ...props, children: children ?? _jsx(Slash, {}) }));
-}
-function BreadcrumbEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
-}
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };
+import{jsx as e,jsxs as c}from"react/jsx-runtime";import{Slot as i}from"@radix-ui/react-slot";import{MoreHorizontal as l,Slash as m}from"lucide-react";import{cn as t}from"../../../lib/utils.js";function o({...r}){return e("nav",{"aria-label":"breadcrumb","data-slot":"breadcrumb",...r})}function u({className:r,...a}){return e("ol",{"data-slot":"breadcrumb-list",className:t("breadcrumb-list",r),...a})}function d({className:r,...a}){return e("li",{"data-slot":"breadcrumb-item",className:t("breadcrumb-item",r),...a})}function b({asChild:r,className:a,...s}){const n=r?i:"a";return e(n,{"data-slot":"breadcrumb-link",className:t("breadcrumb-link",a),...s})}function p({className:r,...a}){return e("span",{"data-slot":"breadcrumb-page",role:"link","aria-disabled":"true","aria-current":"page",className:t("breadcrumb-page",r),...a})}function f({children:r,className:a,...s}){return e("li",{"data-slot":"breadcrumb-separator",role:"presentation","aria-hidden":"true",className:t("breadcrumb-separator",a),...s,children:r??e(m,{})})}function h({className:r,...a}){return c("span",{"data-slot":"breadcrumb-ellipsis",role:"presentation","aria-hidden":"true",className:t("flex h-9 w-9 items-center justify-center",r),...a,children:[e(l,{className:"h-4 w-4"}),e("span",{className:"sr-only",children:"More"})]})}export{o as Breadcrumb,u as BreadcrumbList,d as BreadcrumbItem,b as BreadcrumbLink,p as BreadcrumbPage,f as BreadcrumbSeparator,h as BreadcrumbEllipsis};