pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.2

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

@@ -1,138 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-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

@@ -1,91 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-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

@@ -1,284 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-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 {};