@lerianstudio/sindarian-ui 1.2.0 → 1.3.0-beta.2

package/dist/esm/components/ui/input/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: ({
+    startAdornment?: boolean | null | undefined;
+    endAdornment?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputRef = {
+    focus: () => void;
+    blur: () => void;
+};
+export type InputProps = Omit<VariantProps<typeof inputVariants>, 'startAdornment' | 'endAdornment'> & React.ComponentProps<'input'> & {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    ref?: React.Ref<InputRef>;
+};
+export declare function Input({ className, startAdornment, endAdornment, onFocus, onBlur, onClick, ref, ...props }: InputProps): React.JSX.Element;
+export * from './adornment.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,QAAA,MAAM,aAAa;;;8EAejB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,gBAAgB,GAAG,cAAc,CAClC,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;CAC1B,CAAA;AAEH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBAyEZ;AAED,cAAc,aAAa,CAAA"}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../../lib/utils.js';
+import { cva } from 'class-variance-authority';
+const inputVariants = cva('input-base input-disabled input-read-only', {
+    variants: {
+        startAdornment: {
+            false: '',
+            true: 'input-start'
+        },
+        endAdornment: {
+            false: '',
+            true: 'input-end'
+        }
+    },
+    defaultVariants: {
+        startAdornment: false,
+        endAdornment: false
+    }
+});
+export function Input({ className, startAdornment, endAdornment, onFocus, onBlur, onClick, ref, ...props }) {
+    // Fallback id so a standalone Input is still labelable. Inside a form,
+    // FormControl injects its own id through `props` below and overrides this.
+    const generatedId = React.useId();
+    const [focus, setFocus] = React.useState(false);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        ...inputRef.current,
+        focus: () => {
+            inputRef.current?.focus();
+            setFocus(true);
+        },
+        blur: () => {
+            inputRef.current?.blur();
+            setFocus(false);
+        }
+    }), [inputRef]);
+    const handleWrapperClick = (event) => {
+        // Don't focus input if clicking on interactive elements or input adornments
+        const target = event.target;
+        const isAdornment = target.closest('[data-slot="input-adornment"]');
+        if (!isAdornment) {
+            inputRef.current?.focus();
+        }
+        onClick?.(event);
+    };
+    const handleFocus = (e) => {
+        setFocus(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setFocus(false);
+        onBlur?.(e);
+    };
+    return (_jsxs("div", { "data-slot": "input-wrapper", className: cn('input-wrapper input-wrapper-focus'), "data-focus": focus, onClick: handleWrapperClick, children: [startAdornment, _jsx("input", { ref: inputRef, id: generatedId, "data-slot": "input", className: cn(inputVariants({
+                    startAdornment: !!startAdornment,
+                    endAdornment: !!endAdornment
+                }), className), onFocus: handleFocus, onBlur: handleBlur, ...props }), endAdornment] }));
+}
+export * from './adornment.js';

package/dist/esm/components/ui/label/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps } from 'class-variance-authority';
+declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>): React.JSX.Element;
+export { Label };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa,oFAElB,CAAA;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GACjD,YAAY,CAAC,OAAO,aAAa,CAAC,qBAQnC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn(labelVariants(), className), ...props }));
+}
+export { Label };

package/dist/esm/components/ui/loading-button/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '../button/index.js';
+export type LoadingButtonProps = ButtonProps & {
+    loading?: boolean;
+};
+declare function LoadingButton({ loading, disabled, children, ...props }: LoadingButtonProps): React.JSX.Element;
+export { LoadingButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/loading-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/loading-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/C,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAOpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/ui/loading-button/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/index.js';
+import { Loader2 } from 'lucide-react';
+function LoadingButton({ loading, disabled, children, ...props }) {
+    return (_jsxs(Button, { ...props, disabled: loading || disabled, children: [loading && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), children] }));
+}
+export { LoadingButton };

package/dist/esm/components/ui/multiple-select/index.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+export declare const MultipleSelectTrigger: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode | undefined;
+} & React.HtmlHTMLAttributes<HTMLDivElement> & {
+    readOnly?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const MultipleSelectValue: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const MultipleSelectEmpty: 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;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type MultipleSelectContentProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    position?: 'popper' | 'static';
+};
+export declare const MultipleSelectContent: 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;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    position?: "popper" | "static";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const MultipleSelectGroup: 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;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MultipleSelectItem: 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;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type MultipleSelectProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    value?: string[] | [];
+    defaultValue?: string[] | [];
+    onValueChange?: (values: string[]) => void;
+    showValue?: boolean;
+    disabled?: boolean;
+};
+export declare const MultipleSelect: 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;
+}, "asChild" | "key" | 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"> & {
+    value?: string[] | [];
+    defaultValue?: string[] | [];
+    onValueChange?: (values: string[]) => void;
+    showValue?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/multiple-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/multiple-select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAmB,MAAM,MAAM,CAAA;AAgDnE,eAAO,MAAM,qBAAqB;;;eAG0B,OAAO;wCAyFjE,CAAA;AAGF,eAAO,MAAM,mBAAmB;;;;;;;0FAiD9B,CAAA;AAGF,eAAO,MAAM,mBAAmB;;;;;;uJAiB9B,CAAA;AAGF,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,wBAAwB,CACrE,OAAO,gBAAgB,CAAC,IAAI,CAC7B,GAAG;IACF,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;eAHrB,QAAQ,GAAG,QAAQ;wCA+D/B,CAAA;AAGD,eAAO,MAAM,mBAAmB;;;;;;;;;;sFAY9B,CAAA;AAGF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;sFAiC9B,CAAA;AAGD,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAC9D,OAAO,gBAAgB,CACxB,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;YAPjB,MAAM,EAAE,GAAG,EAAE;mBACN,MAAM,EAAE,GAAG,EAAE;oBACZ,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;gBAC9B,OAAO;eACR,OAAO;wCA2HnB,CAAA"}

package/dist/esm/components/ui/multiple-select/index.js

@@ -0,0 +1,196 @@
+'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, 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';
+const MultipleSelectContext = React.createContext({
+    value: [],
+    onValueChange: (values) => values,
+    handleChange: (value) => value,
+    handleClear: () => { },
+    setOpen: () => { },
+    setOnScrollbar: () => { },
+    options: {},
+    addOption: (option) => option,
+    inputRef: React.createRef()
+});
+const useMultipleSelect = () => {
+    const context = React.useContext(MultipleSelectContext);
+    if (!context) {
+        throw new Error('useMultipleSelect must be used within a MultipleSelectProvider');
+    }
+    return context;
+};
+export const MultipleSelectTrigger = React.forwardRef(({ className, children, readOnly }, ref) => {
+    const _ref = React.useRef(null);
+    const { open, setOpen, onScrollbar, disabled, value, inputRef, handleClear } = useMultipleSelect();
+    React.useImperativeHandle(ref, () => _ref.current);
+    useClickAway(_ref, () => {
+        // Should not close when clicking on the scrollbar
+        if (onScrollbar) {
+            return;
+        }
+        setOpen(false);
+        inputRef.current?.blur();
+    });
+    return (_jsxs("div", { ref: _ref, className: cn('bg-background ring-offset-background placeholder:text-shadcn-400 focus:ring-ring border-shadcn-400 flex flex-row rounded-md border text-sm focus:ring-2 focus:ring-offset-0 focus:outline-hidden focus-visible:outline-hidden md:text-sm [&>span]:line-clamp-1', {
+            'h-10': value.length === 0,
+            'min-h-10': value.length > 0,
+            'cursor-text': !disabled && !readOnly && value.length !== 0,
+            'bg-shadcn-100 cursor-not-allowed opacity-50': disabled
+        }, readOnly && [
+            'data-read-only:cursor-default',
+            'data-read-only:select-text',
+            'data-read-only:bg-muted',
+            'data-read-only:opacity-50',
+            'data-read-only:pointer-events-none',
+            'data-read-only:focus:outline-hidden',
+            'data-read-only:focus:ring-0'
+        ], className), "data-read-only": readOnly ? '' : undefined, onClick: (e) => {
+            // Redirect focus to the input field when clicking on the container
+            if (disabled || readOnly) {
+                e.preventDefault();
+                return;
+            }
+            if (open) {
+                inputRef?.current?.blur();
+            }
+            else {
+                inputRef?.current?.focus();
+            }
+            setOpen(!open);
+        }, children: [_jsx("div", { className: "flex grow flex-wrap gap-1 px-3 py-2", children: children }), _jsxs("div", { className: "flex flex-1 items-center justify-end", children: [_jsx("button", { type: "button", className: cn((disabled || readOnly || value.length < 1) && 'hidden'), children: _jsx(X, { className: "text-muted-foreground mx-2 h-4 cursor-pointer", onClick: (event) => {
+                                event.stopPropagation();
+                                handleClear();
+                            } }) }), _jsx(Separator, { orientation: "vertical", className: cn('flex h-full min-h-6', (disabled || readOnly || value.length < 1) && 'hidden') }), _jsx(SelectPrimitive.Icon, { children: _jsx(ChevronDown, { className: cn('mx-3 my-2 h-4 w-4 cursor-pointer opacity-50', readOnly && 'hidden') }) })] })] }));
+});
+MultipleSelectTrigger.displayName = 'MultipleSelectTrigger';
+export const MultipleSelectValue = React.forwardRef(({ className, ...props }, ref) => {
+    const { value, disabled, handleChange, options, showValue, inputRef } = useMultipleSelect();
+    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 : options[value], _jsx("button", { type: "button", className: cn('ring-offset-background focus:ring-ring ml-1 rounded-full outline-hidden focus:ring-2 focus:ring-offset-2', disabled && 'hidden'), children: _jsx(X, { className: "text-muted-foreground hover:text-foreground h-3 w-3", onClick: (event) => {
+                                    event.stopPropagation();
+                                    handleChange(value);
+                                } }) })] }, value))), _jsx(CommandPrimitive.Input, { ...props, ref: inputRef, disabled: disabled, className: cn('placeholder:text-muted-foreground bg-transparent outline-hidden focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className) })] }));
+});
+MultipleSelectValue.displayName = 'MultipleSelectValue';
+export const MultipleSelectEmpty = React.forwardRef(({ className, ...props }, forwardedRef) => {
+    const render = useCommandState((state) => state.filtered.count === 0);
+    if (!render)
+        return null;
+    return (_jsx("div", { ref: forwardedRef, className: cn('py-6 text-center text-sm', className), "cmdk-empty": "", role: "presentation", ...props }));
+});
+MultipleSelectEmpty.displayName = 'MultipleSelectEmpty';
+export const MultipleSelectContent = React.forwardRef(({ className, position = 'popper', children, onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const { open, addOption, setOnScrollbar } = useMultipleSelect();
+    // 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 change.
+    React.useEffect(() => {
+        React.Children.forEach(React.Children.toArray(children), (child) => {
+            if (React.isValidElement(child) &&
+                child.props.value) {
+                addOption({ [child.props.value]: child.props.children });
+            }
+        });
+    }, [children]);
+    if (!open) {
+        return null;
+    }
+    return (_jsx("div", { className: "relative", children: _jsx(CommandPrimitive.List, { ref: ref, className: cn('bg-popover text-popover-foreground 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), ...props, onMouseEnter: (e) => {
+                onMouseEnter?.(e);
+                setOnScrollbar(true);
+            }, onMouseLeave: (e) => {
+                onMouseLeave?.(e);
+                setOnScrollbar(false);
+            }, children: _jsx(MultipleSelectGroup, { children: children }) }) }));
+});
+MultipleSelectContent.displayName = 'MultipleSelectContent';
+export const MultipleSelectGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, 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 })));
+MultipleSelectGroup.displayName = 'MultipleSelectGroup';
+export const MultipleSelectItem = React.forwardRef(({ className, value, onClick: _onClick, onSelect, children, ...props }, ref) => {
+    const { handleChange } = useMultipleSelect();
+    return (_jsx(CommandPrimitive.Item, { ref: ref, value: value, keywords: typeof children === 'string' ? [children] : undefined, 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);
+        }, children: children }));
+});
+MultipleSelectItem.displayName = 'MultipleSelectItem';
+export const MultipleSelect = React.forwardRef(({ value, defaultValue, onValueChange, className, showValue, disabled, onKeyDown, children, onChange: _onChange, ...props }, ref) => {
+    const _ref = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const [onScrollbar, setOnScrollbar] = React.useState(false);
+    const safeValue = Array.isArray(value) ? value : [];
+    const safeDefault = Array.isArray(defaultValue) ? defaultValue : [];
+    const [selected, setSelected] = React.useState(safeDefault.length > 0 ? safeDefault : safeValue);
+    const [options, addOption] = React.useReducer((prev, state) => ({
+        ...prev,
+        ...state
+    }), {});
+    React.useImperativeHandle(ref, () => _ref.current);
+    const handleClear = () => {
+        setSelected([]);
+        onValueChange?.([]);
+    };
+    const handleChange = React.useCallback((value) => {
+        if (!value) {
+            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 (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 (Array.isArray(value)) {
+            setSelected(value);
+        }
+    }, [value]);
+    return (_jsx(MultipleSelectContext.Provider, { value: {
+            value: selected,
+            onValueChange: setSelected,
+            showValue,
+            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), "aria-disabled": disabled, ...props, onKeyDown: (e) => {
+                handleKeyDown(e);
+                onKeyDown?.(e);
+            }, children: children }) }));
+});
+MultipleSelect.displayName = 'MultipleSelect';

package/dist/esm/components/ui/otp-input/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { OTPInput } from 'input-otp';
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<'div'> & {
+    index: number;
+}): React.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/otp-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AAKrD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYzE;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBAwBjD;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAMnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAA"}

package/dist/esm/components/ui/otp-input/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+function InputOTP({ className, containerClassName, ...props }) {
+    return (_jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName), className: cn('disabled:cursor-not-allowed', className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-otp-group", className: cn('flex items-center', className), ...props }));
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
+}
+function InputOTPSeparator({ ...props }) {
+    return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));
+}
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';

package/dist/esm/components/ui/paper/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type PaperProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function Paper({ className, ...others }: PaperProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/paper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/paper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAE7D,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,EAAE,UAAU,qBAQzD"}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+export function Paper({ className, ...others }) {
+    return (_jsx("div", { "data-slot": "paper", className: cn('bg-card rounded-lg shadow-lg', className), ...others }));
+}

package/dist/esm/components/ui/paper-collapsible/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { CollapsibleProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+export type PaperCollapsibleProps = CollapsibleProps;
+declare function PaperCollapsible({ className, children, ...props }: PaperCollapsibleProps): React.JSX.Element;
+declare function PaperCollapsibleBanner({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function PaperCollapsibleTrigger({ className, children: _children, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function PaperCollapsibleContent({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { PaperCollapsible, PaperCollapsibleBanner, PaperCollapsibleTrigger, PaperCollapsibleContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/paper-collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/paper-collapsible/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAUpC,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAA;AAEpD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAWvB;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,QAAQ,EAAE,SAAS,EACnB,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAazB;AAED,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAc7B;AAED,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACxB,CAAA"}

package/dist/esm/components/ui/paper-collapsible/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../../components/ui/collapsible/index.js';
+import { Paper } from '../../../components/ui/paper/index.js';
+import { ChevronDown } from 'lucide-react';
+import { Separator } from '../separator/index.js';
+function PaperCollapsible({ className, children, ...props }) {
+    return (_jsx(Collapsible, { className: "group/paper-collapsible", ...props, children: _jsx(Paper, { "data-slot": "paper-collapsible", className: cn('flex flex-col', className), children: children }) }));
+}
+function PaperCollapsibleBanner({ className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "paper-collapsible-banner", className: cn('flex flex-row p-6', className), ...props, children: [_jsx("div", { className: "flex grow flex-col", children: children }), _jsx(PaperCollapsibleTrigger, {})] }));
+}
+function PaperCollapsibleTrigger({ className, children: _children, ...props }) {
+    return (_jsx(CollapsibleTrigger, { "data-slot": "paper-collapsible-trigger", className: cn('transition-all hover:underline [&[data-state=open]>svg]:rotate-180', className), ...props, children: _jsx(ChevronDown, { className: "text-foreground size-6 shrink-0 cursor-pointer transition-transform duration-200" }) }));
+}
+function PaperCollapsibleContent({ className, children, ...props }) {
+    return (_jsxs(CollapsibleContent, { "data-slot": "paper-collapsible-content", className: cn('data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all duration-200 ease-in-out', className), ...props, children: [_jsx(Separator, {}), children] }));
+}
+export { PaperCollapsible, PaperCollapsibleBanner, PaperCollapsibleTrigger, PaperCollapsibleContent };

package/dist/esm/components/ui/popover/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAG3D,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAEpD;AACD,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAevD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,qBAEtD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA"}

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../../lib/utils.js';
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-50 w-72 rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/esm/components/ui/progress/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    indicatorColor?: string;
+};
+declare function Progress({ className, value, indicatorColor, ...props }: ProgressProps): React.JSX.Element;
+export { Progress };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAI7D,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,cAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,aAAa,qBAiBf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '../../../lib/utils.js';
+function Progress({ className, value, indicatorColor = 'bg-primary', ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn('bg-primary/20 relative h-4 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn('h-full w-full flex-1 transition-all', indicatorColor), style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+}
+export { Progress };

package/dist/esm/components/ui/qr-code/index.d.ts

@@ -0,0 +1,26 @@
+export type QRCodeProps = {
+    /**
+     * The `otpauth://totp/...` URI to encode. An empty or whitespace-only value
+     * renders nothing (never a broken QR).
+     */
+    value: string;
+    /**
+     * Rendered square edge in px. Drives both width and height of the SVG.
+     * @defaultValue 160
+     */
+    size?: number;
+    /**
+     * Optional image URL rendered in the center of the code (e.g. a brand logo).
+     * When set, the error-correction level is raised to `H` so the code stays
+     * scannable despite the occluded modules, and the modules behind the image
+     * are excavated to the background color.
+     */
+    logoSrc?: string;
+    /**
+     * Accessible name for the QR image. Falls back to a generic label when
+     * omitted. Consumers should pass an i18n string.
+     */
+    'aria-label'?: string;
+};
+export declare function QRCode({ value, size, logoSrc, 'aria-label': ariaLabel }: QRCodeProps): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/qr-code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/qr-code/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAUD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAmB,EACnB,OAAO,EACP,YAAY,EAAE,SAA8B,EAC7C,EAAE,WAAW,sCA2Bb"}