pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/components-v2/PinInput/PinInput.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinInput = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils");
+const field_1 = require("../ui/field");
+const SIZE_CLASS = {
+    sm: "h-9 w-9 text-sm",
+    md: "h-11 w-11 text-base",
+    lg: "h-12 w-12 text-lg",
+};
+function normalize(raw, type) {
+    if (type === "number")
+        return raw.replace(/[^0-9]/g, "");
+    return raw.replace(/[^A-Za-z0-9]/g, "");
+}
+exports.PinInput = React.forwardRef((props, ref) => {
+    const { id, label, helperText, error, errorMessage, isRequired, length = 6, type = "number", value, defaultValue, onChange, onComplete, autoFocus, mask = false, size = "md", name, isDisabled, className, } = props;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState((defaultValue !== null && defaultValue !== void 0 ? defaultValue : "").slice(0, length));
+    const current = (isControlled ? value : internalValue).slice(0, length);
+    const inputRefs = React.useRef([]);
+    const setValue = (next) => {
+        const normalized = normalize(next, type).slice(0, length);
+        if (!isControlled)
+            setInternalValue(normalized);
+        onChange === null || onChange === void 0 ? void 0 : onChange(normalized);
+        if (normalized.length === length)
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(normalized);
+    };
+    const focusIndex = (index) => {
+        const target = inputRefs.current[index];
+        if (target) {
+            target.focus();
+            target.select();
+        }
+    };
+    const handleInput = (index, event) => {
+        const raw = event.target.value;
+        if (raw.length > 1) {
+            const cleaned = normalize(raw, type).slice(0, length);
+            setValue(cleaned.padEnd(0, ""));
+            focusIndex(Math.min(cleaned.length, length - 1));
+            return;
+        }
+        const char = normalize(raw, type).slice(-1);
+        const chars = current.split("");
+        chars[index] = char;
+        const joined = chars.join("").replace(/\s+$/, "");
+        setValue(joined);
+        if (char && index < length - 1)
+            focusIndex(index + 1);
+    };
+    const handleKeyDown = (index, event) => {
+        if (event.key === "Backspace") {
+            if (current[index]) {
+                const chars = current.split("");
+                chars[index] = "";
+                setValue(chars.join(""));
+            }
+            else if (index > 0) {
+                focusIndex(index - 1);
+                const chars = current.split("");
+                chars[index - 1] = "";
+                setValue(chars.join(""));
+            }
+            event.preventDefault();
+            return;
+        }
+        if (event.key === "ArrowLeft" && index > 0) {
+            event.preventDefault();
+            focusIndex(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight" && index < length - 1) {
+            event.preventDefault();
+            focusIndex(index + 1);
+            return;
+        }
+    };
+    const handlePaste = (event) => {
+        const pasted = event.clipboardData.getData("text");
+        if (!pasted)
+            return;
+        event.preventDefault();
+        const cleaned = normalize(pasted, type).slice(0, length);
+        setValue(cleaned);
+        focusIndex(Math.min(cleaned.length, length - 1));
+    };
+    const boxes = (React.createElement("div", { ref: ref, role: "group", "aria-label": typeof label === "string" ? label : "Pin input", className: (0, utils_1.cn)("flex items-center gap-2", className) },
+        Array.from({ length }).map((_, index) => {
+            var _a;
+            const char = (_a = current[index]) !== null && _a !== void 0 ? _a : "";
+            return (React.createElement("input", { key: index, ref: (node) => {
+                    inputRefs.current[index] = node;
+                }, type: mask ? "password" : "text", inputMode: type === "number" ? "numeric" : "text", autoComplete: index === 0 ? "one-time-code" : "off", autoFocus: autoFocus && index === 0, disabled: isDisabled, maxLength: 1, value: char, onChange: (event) => handleInput(index, event), onKeyDown: (event) => handleKeyDown(index, event), onPaste: handlePaste, onFocus: (event) => event.target.select(), "aria-label": `Digit ${index + 1} of ${length}`, "aria-invalid": error || undefined, className: (0, utils_1.cn)("shrink-0 rounded-md border border-input bg-background text-center font-medium tabular-nums shadow-sm transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "disabled:cursor-not-allowed disabled:opacity-50", error &&
+                    "border-destructive focus-visible:ring-destructive", SIZE_CLASS[size]) }));
+        }),
+        name && (React.createElement("input", { type: "hidden", name: name, value: current }))));
+    if (label || helperText || errorMessage) {
+        return (React.createElement(field_1.Field, { id: id, label: label, helperText: helperText, error: error, errorMessage: errorMessage, isRequired: isRequired }, boxes));
+    }
+    return boxes;
+});
+exports.PinInput.displayName = "PinInput";

package/dist/components-v2/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type ProfilePhotoSize = "sm" | "md" | "lg" | "xl";
+export interface ProfilePhotoViewerProps {
+    src?: string;
+    name?: string;
+    initials?: string;
+    size?: ProfilePhotoSize;
+    /** When true, hover overlay shows a camera icon; click opens file picker. */
+    editable?: boolean;
+    onPhotoChange?: (file: File) => void;
+    /** Accept attribute for the hidden file input. */
+    accept?: string;
+    className?: string;
+}
+export declare function ProfilePhotoViewer({ src, name, initials, size, editable, onPhotoChange, accept, className, }: ProfilePhotoViewerProps): React.ReactElement;
+export declare namespace ProfilePhotoViewer {
+    var displayName: string;
+}

package/dist/components-v2/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfilePhotoViewer = ProfilePhotoViewer;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const avatar_1 = require("../ui/avatar");
+const dialog_1 = require("../ui/dialog");
+const SIZE_PX = {
+    sm: 32,
+    md: 48,
+    lg: 80,
+    xl: 128,
+};
+function ProfilePhotoViewer({ src, name, initials, size = "lg", editable = false, onPhotoChange, accept = "image/*", className, }) {
+    const [viewerOpen, setViewerOpen] = React.useState(false);
+    const fileInputRef = React.useRef(null);
+    const resolvedInitials = initials !== null && initials !== void 0 ? initials : (name
+        ? name
+            .split(/\s+/)
+            .map((part) => part[0])
+            .filter(Boolean)
+            .slice(0, 2)
+            .join("")
+            .toUpperCase()
+        : "?");
+    const px = SIZE_PX[size];
+    const handleEditClick = (event) => {
+        var _a;
+        event.stopPropagation();
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const handleFile = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file)
+            onPhotoChange === null || onPhotoChange === void 0 ? void 0 : onPhotoChange(file);
+        event.target.value = "";
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: (0, utils_1.cn)("relative inline-flex shrink-0", className), style: { width: px, height: px } },
+            React.createElement("button", { type: "button", onClick: () => src && setViewerOpen(true), "aria-label": src
+                    ? `View photo of ${name !== null && name !== void 0 ? name : "user"}`
+                    : `${name !== null && name !== void 0 ? name : "User"} profile photo`, className: (0, utils_1.cn)("h-full w-full rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", !src && "cursor-default"), disabled: !src },
+                React.createElement(avatar_1.Avatar, { size: size === "sm" ? "sm" : size === "md" ? "md" : "lg", className: "h-full w-full" },
+                    src && React.createElement(avatar_1.AvatarImage, { src: src, alt: name !== null && name !== void 0 ? name : "Profile" }),
+                    React.createElement(avatar_1.AvatarFallback, null, resolvedInitials))),
+            editable && (React.createElement("button", { type: "button", onClick: handleEditClick, "aria-label": "Change profile photo", className: (0, utils_1.cn)("absolute inset-0 grid place-items-center rounded-full bg-foreground/60 text-background opacity-0 transition-opacity", "hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background") },
+                React.createElement(lucide_react_1.Camera, { "aria-hidden": "true", className: (0, utils_1.cn)(size === "sm" ? "h-3.5 w-3.5" : "h-5 w-5") }))),
+            editable && (React.createElement("input", { ref: fileInputRef, type: "file", accept: accept, className: "sr-only", onChange: handleFile }))),
+        React.createElement(dialog_1.Dialog, { open: viewerOpen, onOpenChange: setViewerOpen },
+            React.createElement(dialog_1.DialogContent, { size: "lg" },
+                React.createElement(dialog_1.DialogHeader, null,
+                    React.createElement(dialog_1.DialogTitle, null, name !== null && name !== void 0 ? name : "Profile photo")),
+                src && (React.createElement("div", { className: "flex items-center justify-center" },
+                    React.createElement("img", { src: src, alt: name !== null && name !== void 0 ? name : "Profile", className: "max-h-[60vh] w-auto rounded-md object-contain" })))))));
+}
+ProfilePhotoViewer.displayName = "ProfilePhotoViewer";

package/dist/components-v2/Select/Select.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    group?: string;
+}
+export type SelectSize = "sm" | "md" | "lg";
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    creatable?: boolean;
+    onCreateOption?: (inputValue: string) => void;
+    placeholder?: string;
+    label?: React.ReactNode;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    errorMessage?: React.ReactNode;
+    isInformation?: boolean;
+    informationMessage?: React.ReactNode;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    size?: SelectSize;
+    width?: string;
+    maxDisplayed?: number;
+    onSearch?: (query: string) => void;
+    emptyMessage?: React.ReactNode;
+    loadingMessage?: React.ReactNode;
+    id?: string;
+    name?: string;
+    className?: string;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components-v2/Select/Select.js

@@ -0,0 +1,284 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const cmdk_1 = require("cmdk");
+const utils_1 = require("../../lib/utils");
+const badge_1 = require("../ui/badge");
+const field_1 = require("../ui/field");
+const popover_1 = require("../ui/popover");
+const select_1 = require("../ui/select");
+const skeleton_1 = require("../ui/skeleton");
+const spinner_1 = require("../ui/spinner");
+const form_field_1 = require("../ui/form-field");
+const TRIGGER_SIZE = {
+    sm: "min-h-8 text-xs px-2.5",
+    md: "min-h-9 text-sm px-3",
+    lg: "min-h-10 text-base px-3.5",
+};
+exports.Select = React.forwardRef((props, ref) => {
+    const { id, label, helperText, error, errorMessage, isInformation, informationMessage, isRequired, width, className } = props, controlProps = __rest(props, ["id", "label", "helperText", "error", "errorMessage", "isInformation", "informationMessage", "isRequired", "width", "className"]);
+    return (React.createElement(field_1.Field, { id: id, label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage, helperText: helperText, error: error, errorMessage: errorMessage, width: width },
+        React.createElement(SelectControl, Object.assign({ ref: ref, error: error, className: className }, controlProps))));
+});
+exports.Select.displayName = "Select";
+const SelectControl = React.forwardRef((props, ref) => {
+    const { options, value, defaultValue, onChange, multiple = false, searchable = false, clearable = false, creatable = false, onCreateOption, placeholder = "Select…", isDisabled = false, isLoading = false, size = "md", maxDisplayed = 3, onSearch, emptyMessage = "No options found", loadingMessage = "Loading…", name, error, className, } = props;
+    if (!multiple && !searchable) {
+        return (React.createElement(SimpleRadixSelect, { ref: ref, options: options, value: value, defaultValue: defaultValue, onChange: (v) => onChange === null || onChange === void 0 ? void 0 : onChange(v), placeholder: placeholder, isDisabled: isDisabled || isLoading, size: size, name: name, error: error, className: className, loadingMessage: loadingMessage, isLoading: isLoading }));
+    }
+    return (React.createElement(ComboSelect, { ref: ref, options: options, value: value, defaultValue: defaultValue, onChange: onChange, multiple: multiple, clearable: clearable, creatable: creatable, onCreateOption: onCreateOption, placeholder: placeholder, isDisabled: isDisabled, isLoading: isLoading, size: size, maxDisplayed: maxDisplayed, onSearch: onSearch, emptyMessage: emptyMessage, loadingMessage: loadingMessage, error: error, className: className, name: name }));
+});
+SelectControl.displayName = "SelectControl";
+const SimpleRadixSelect = React.forwardRef(({ options, value, defaultValue, onChange, placeholder, isDisabled, size, name, error, className, loadingMessage, isLoading, }, ref) => {
+    const field = (0, form_field_1.useFormField)();
+    const grouped = useGroupedOptions(options);
+    return (React.createElement(select_1.Select, { value: value, defaultValue: defaultValue, onValueChange: onChange, disabled: isDisabled, name: name },
+        React.createElement(select_1.SelectTrigger, { ref: ref, id: field.id || undefined, size: size, "aria-invalid": error || field.hasError || undefined, className: (0, utils_1.cn)(error &&
+                "border-destructive bg-destructive/5 focus:ring-destructive", className) },
+            React.createElement(select_1.SelectValue, { placeholder: placeholder }),
+            isLoading && (React.createElement(spinner_1.Spinner, { size: "sm", className: "ml-2", label: String(loadingMessage) }))),
+        React.createElement(select_1.SelectContent, null, grouped.map((group) => {
+            var _a;
+            return (React.createElement(select_1.SelectGroup, { key: (_a = group.label) !== null && _a !== void 0 ? _a : "__root" },
+                group.label && (React.createElement(select_1.SelectLabel, null, group.label)),
+                group.options.map((option) => (React.createElement(select_1.SelectItem, { key: option.value, value: option.value, disabled: option.disabled },
+                    React.createElement("span", { className: "flex items-center gap-2" },
+                        option.icon,
+                        React.createElement("span", { className: "flex flex-col" },
+                            React.createElement("span", null, option.label),
+                            option.description && (React.createElement("span", { className: "text-xs text-muted-foreground" }, option.description)))))))));
+        }))));
+});
+SimpleRadixSelect.displayName = "SimpleRadixSelect";
+const ComboSelect = React.forwardRef(({ options, value, defaultValue, onChange, multiple, clearable, creatable, onCreateOption, placeholder, isDisabled, isLoading, size, maxDisplayed, onSearch, emptyMessage, loadingMessage, error, className, name, }, ref) => {
+    var _a;
+    const field = (0, form_field_1.useFormField)();
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(() => {
+        if (defaultValue !== undefined)
+            return defaultValue;
+        return multiple ? [] : "";
+    });
+    const currentValue = isControlled ? value : internalValue;
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState("");
+    const debouncedQuery = useDebouncedValue(query, 150);
+    React.useEffect(() => {
+        if (onSearch)
+            onSearch(query);
+    }, [query, onSearch]);
+    const filtered = React.useMemo(() => {
+        if (onSearch)
+            return options;
+        if (!debouncedQuery.trim())
+            return options;
+        const q = debouncedQuery.toLowerCase();
+        return options.filter((o) => {
+            var _a;
+            return o.label.toLowerCase().includes(q) ||
+                o.value.toLowerCase().includes(q) ||
+                ((_a = o.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(q));
+        });
+    }, [options, debouncedQuery, onSearch]);
+    const grouped = useGroupedOptions(filtered);
+    const setValue = (next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const selectedValues = React.useMemo(() => {
+        if (multiple)
+            return new Set(Array.isArray(currentValue) ? currentValue : []);
+        return new Set(typeof currentValue === "string" && currentValue ? [currentValue] : []);
+    }, [currentValue, multiple]);
+    const selectedOptions = React.useMemo(() => {
+        return options.filter((o) => selectedValues.has(o.value));
+    }, [options, selectedValues]);
+    const handleSelect = (optionValue) => {
+        if (multiple) {
+            const arr = Array.isArray(currentValue) ? currentValue : [];
+            const next = arr.includes(optionValue)
+                ? arr.filter((v) => v !== optionValue)
+                : [...arr, optionValue];
+            setValue(next);
+        }
+        else {
+            setValue(optionValue);
+            setOpen(false);
+        }
+        setQuery("");
+    };
+    const removeValue = (optionValue) => {
+        if (multiple) {
+            const arr = Array.isArray(currentValue) ? currentValue : [];
+            setValue(arr.filter((v) => v !== optionValue));
+        }
+        else {
+            setValue("");
+        }
+    };
+    const clearAll = (event) => {
+        event.stopPropagation();
+        setValue(multiple ? [] : "");
+    };
+    const hasValue = multiple
+        ? Array.isArray(currentValue) && currentValue.length > 0
+        : !!currentValue;
+    const showCreate = creatable &&
+        query.trim() !== "" &&
+        !filtered.some((o) => o.label.toLowerCase() === query.trim().toLowerCase());
+    return (React.createElement(React.Fragment, null,
+        React.createElement(popover_1.Popover, { open: open, onOpenChange: setOpen },
+            React.createElement(popover_1.PopoverTrigger, { asChild: true },
+                React.createElement("button", { ref: ref, type: "button", id: field.id || undefined, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-autocomplete": "list", "aria-invalid": error || field.hasError || undefined, disabled: isDisabled || isLoading, className: (0, utils_1.cn)("group flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground shadow-sm transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=open]:ring-2 data-[state=open]:ring-ring", TRIGGER_SIZE[size], error &&
+                        "border-destructive bg-destructive/5 focus:ring-destructive", className) },
+                    React.createElement(SelectedChips, { multiple: multiple, selectedOptions: selectedOptions, maxDisplayed: maxDisplayed, placeholder: placeholder, removeValue: removeValue, isDisabled: isDisabled }),
+                    React.createElement("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground" },
+                        isLoading && React.createElement(spinner_1.Spinner, { size: "sm" }),
+                        clearable && hasValue && !isDisabled && (React.createElement("button", { type: "button", "aria-label": "Clear selection", onClick: clearAll, className: "rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                            React.createElement(lucide_react_1.X, { className: "h-4 w-4" }))),
+                        React.createElement(lucide_react_1.ChevronDown, { className: "h-4 w-4 opacity-60 transition-transform group-data-[state=open]:rotate-180" })))),
+            React.createElement(popover_1.PopoverContent, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0" },
+                React.createElement(cmdk_1.Command, { shouldFilter: false, className: "flex max-h-72 flex-col overflow-hidden" },
+                    React.createElement("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-2" },
+                        React.createElement(lucide_react_1.Search, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                        React.createElement(cmdk_1.CommandInput, { autoFocus: true, value: query, onValueChange: setQuery, placeholder: "Search\u2026", className: "flex-1 bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground" })),
+                    React.createElement(cmdk_1.CommandList, { className: "max-h-[16rem] flex-1 overflow-y-auto py-1" }, isLoading ? (React.createElement("div", { className: "space-y-1.5 px-2 py-2" },
+                        React.createElement(skeleton_1.Skeleton, { variant: "text", className: "w-full" }),
+                        React.createElement(skeleton_1.Skeleton, { variant: "text", className: "w-3/4" }),
+                        React.createElement(skeleton_1.Skeleton, { variant: "text", className: "w-1/2" }))) : grouped.length === 0 && !showCreate ? (React.createElement(cmdk_1.CommandEmpty, { className: "px-3 py-4 text-center text-sm text-muted-foreground" }, emptyMessage)) : (React.createElement(React.Fragment, null,
+                        grouped.map((group, idx) => {
+                            var _a;
+                            return (React.createElement(React.Fragment, { key: (_a = group.label) !== null && _a !== void 0 ? _a : "__root" },
+                                idx > 0 && (React.createElement(cmdk_1.CommandSeparator, { className: "my-1 h-px bg-border" })),
+                                React.createElement(cmdk_1.CommandGroup, { heading: group.label, className: (0, utils_1.cn)("px-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5", "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground") }, group.options.map((option) => (React.createElement(ComboItem, { key: option.value, option: option, selected: selectedValues.has(option.value), onSelect: () => handleSelect(option.value) }))))));
+                        }),
+                        showCreate && (React.createElement(React.Fragment, null,
+                            React.createElement(cmdk_1.CommandSeparator, { className: "my-1 h-px bg-border" }),
+                            React.createElement(cmdk_1.CommandItem, { value: `__create__${query}`, onSelect: () => {
+                                    const newValue = query.trim();
+                                    onCreateOption === null || onCreateOption === void 0 ? void 0 : onCreateOption(newValue);
+                                    handleSelect(newValue);
+                                }, className: "mx-1 flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground aria-selected:bg-accent aria-selected:text-accent-foreground" },
+                                React.createElement("span", { className: "text-muted-foreground" }, "Create"),
+                                React.createElement("span", { className: "font-medium" },
+                                    "\u201C",
+                                    query,
+                                    "\u201D")))))))))),
+        name && (React.createElement("input", { type: "hidden", name: name, value: multiple
+                ? JSON.stringify(currentValue !== null && currentValue !== void 0 ? currentValue : [])
+                : (_a = currentValue) !== null && _a !== void 0 ? _a : "" }))));
+});
+ComboSelect.displayName = "ComboSelect";
+function ComboItem({ option, selected, onSelect }) {
+    return (React.createElement(cmdk_1.CommandItem, { value: `${option.label} ${option.value}`, disabled: option.disabled, onSelect: onSelect, className: (0, utils_1.cn)("relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm", "aria-selected:bg-accent aria-selected:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50") },
+        option.icon,
+        React.createElement("span", { className: "flex flex-col" },
+            React.createElement("span", null, option.label),
+            option.description && (React.createElement("span", { className: "text-xs text-muted-foreground" }, option.description))),
+        selected && (React.createElement(lucide_react_1.Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0 text-primary" }))));
+}
+function SelectedChips({ multiple, selectedOptions, maxDisplayed, placeholder, removeValue, isDisabled, }) {
+    if (selectedOptions.length === 0) {
+        return (React.createElement("span", { className: "truncate text-muted-foreground" }, placeholder));
+    }
+    if (!multiple) {
+        const [first] = selectedOptions;
+        return (React.createElement("span", { className: "flex items-center gap-2 truncate text-foreground" },
+            first.icon,
+            React.createElement("span", { className: "truncate" }, first.label)));
+    }
+    const visible = selectedOptions.slice(0, maxDisplayed);
+    const overflow = selectedOptions.length - visible.length;
+    return (React.createElement("div", { className: "flex max-h-[5.5rem] flex-1 flex-wrap items-center gap-1 overflow-y-auto py-1" },
+        visible.map((option) => (React.createElement(badge_1.Badge, { key: option.value, variant: "secondary", size: "sm", className: "gap-1 pr-1" },
+            option.label,
+            !isDisabled && (React.createElement("button", { type: "button", "aria-label": `Remove ${option.label}`, onClick: (event) => {
+                    event.stopPropagation();
+                    removeValue(option.value);
+                }, className: "rounded-sm hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                React.createElement(lucide_react_1.X, { className: "h-3 w-3" })))))),
+        overflow > 0 && (React.createElement(badge_1.Badge, { variant: "outline", size: "sm" },
+            "+",
+            overflow,
+            " more"))));
+}
+function useGroupedOptions(options) {
+    return React.useMemo(() => {
+        var _a;
+        const hasGroups = options.some((o) => !!o.group);
+        if (!hasGroups)
+            return [{ label: undefined, options }];
+        const map = new Map();
+        for (const option of options) {
+            const key = option.group;
+            const list = (_a = map.get(key)) !== null && _a !== void 0 ? _a : [];
+            list.push(option);
+            map.set(key, list);
+        }
+        const groups = [];
+        const ungrouped = map.get(undefined);
+        if (ungrouped)
+            groups.push({ label: undefined, options: ungrouped });
+        for (const [key, opts] of map.entries()) {
+            if (key === undefined)
+                continue;
+            groups.push({ label: key, options: opts });
+        }
+        return groups;
+    }, [options]);
+}
+function useDebouncedValue(value, delay) {
+    const [debounced, setDebounced] = React.useState(value);
+    React.useEffect(() => {
+        const timer = setTimeout(() => setDebounced(value), delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return debounced;
+}

package/dist/components-v2/Sidebar/Sidebar.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+type BadgeVariant = "default" | "destructive" | "success" | "warning";
+export interface SidebarMenuItem {
+    id: string | number;
+    title: string;
+    icon?: LucideIcon;
+    url?: string;
+    badge?: {
+        count?: number;
+        label?: string;
+        variant?: BadgeVariant;
+    };
+    children?: SidebarMenuItem[];
+    disabled?: boolean;
+}
+export interface SidebarOtherApp {
+    id: string | number;
+    name: string;
+    url?: string;
+    icon?: LucideIcon;
+    iconUrl?: string;
+}
+export interface SidebarProps {
+    menus: SidebarMenuItem[];
+    activeItem?: string | number;
+    onItemClick?: (item: SidebarMenuItem) => void;
+    logo?: string;
+    companyName?: string;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    defaultCollapsed?: boolean;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    otherApps?: SidebarOtherApp[];
+    footer?: React.ReactNode;
+    isLoading?: boolean;
+    className?: string;
+}
+export declare function Sidebar({ menus, activeItem, onItemClick, logo, companyName, collapsed: collapsedProp, onCollapsedChange, defaultCollapsed, mobileOpen, onMobileOpenChange, otherApps, footer, isLoading, className, }: SidebarProps): React.ReactElement;
+export {};