@rovula/ui 0.0.77 → 0.0.79

package/dist/components/MaskedTextInput/MaskedTextInput.js

@@ -0,0 +1,267 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState, useEffect, } from "react";
+import TextInput from "../TextInput/TextInput";
+import { cn } from "@/utils/cn";
+// Kendo UI style mask patterns
+export const MASK_PATTERNS = {
+    PHONE: "(000) 000-0000",
+    PHONE_INTL: "+000 000 000 0000",
+    CREDIT_CARD: "0000 0000 0000 0000",
+    DATE: "00/00/0000",
+    TIME: "00:00",
+    SSN: "000-00-0000",
+    ZIP_CODE: "00000",
+    ZIP_CODE_EXT: "00000-0000",
+    CURRENCY: "$000,000.00",
+    PERCENTAGE: "000%",
+    LICENSE_PLATE: "AAA-0000",
+    PRODUCT_CODE: "AA-0000-AA",
+    ALPHANUMERIC: "AAAA-0000",
+};
+// Kendo UI mask rules
+const KENDO_RULES = {
+    "0": { pattern: /[0-9]/, placeholder: "0" }, // Any digit 0-9
+    "9": { pattern: /[0-9\s]/, placeholder: "9" }, // Any digit 0-9 or space
+    "#": { pattern: /[0-9\s+\-]/, placeholder: "#" }, // Any digit, space, +, or -
+    L: { pattern: /[a-zA-Z]/, placeholder: "L" }, // Any letter
+    "?": { pattern: /[a-zA-Z\s]/, placeholder: "?" }, // Any letter or space
+    "&": { pattern: /[^\s]/, placeholder: "&" }, // Any character except space
+    C: { pattern: /./, placeholder: "C" }, // Any character including space
+    A: { pattern: /[a-zA-Z0-9]/, placeholder: "A" }, // Any alphanumeric
+    a: { pattern: /[a-zA-Z0-9\s]/, placeholder: "a" }, // Any alphanumeric or space
+};
+// Helper function to create mask pattern from string using Kendo UI rules
+const createMaskPattern = (mask, customRules) => {
+    const rules = Object.assign(Object.assign({}, KENDO_RULES), customRules);
+    const pattern = [];
+    let i = 0;
+    while (i < mask.length) {
+        const char = mask[i];
+        if (char === "\\" && i + 1 < mask.length) {
+            // Escaped character - treat as literal
+            const nextChar = mask[i + 1];
+            pattern.push({
+                pattern: new RegExp(`^${nextChar}$`),
+                placeholder: nextChar,
+                isLiteral: true,
+            });
+            i += 2;
+        }
+        else if (rules[char]) {
+            // Apply Kendo rule
+            const rule = rules[char];
+            if (typeof rule === "function") {
+                pattern.push({
+                    pattern: /./, // Accept any character, validate with function
+                    placeholder: char,
+                    validator: rule,
+                });
+            }
+            else if (rule instanceof RegExp) {
+                pattern.push({
+                    pattern: rule,
+                    placeholder: char,
+                });
+            }
+            else {
+                pattern.push({
+                    pattern: rule.pattern,
+                    placeholder: rule.placeholder,
+                });
+            }
+            i++;
+        }
+        else {
+            // Literal character
+            pattern.push({
+                pattern: new RegExp(`^${char.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
+                placeholder: char,
+                isLiteral: true,
+            });
+            i++;
+        }
+    }
+    return pattern;
+};
+// Helper function to apply mask to value using Kendo UI rules
+const applyMask = (value, maskPattern, maskChar = "_", showMask = true, guide = true) => {
+    let maskedValue = "";
+    let valueIndex = 0;
+    for (let i = 0; i < maskPattern.length; i++) {
+        const rule = maskPattern[i];
+        if (rule.isLiteral) {
+            // Literal character - always add
+            maskedValue += rule.placeholder;
+        }
+        else {
+            // Input character - find next valid character
+            let foundValid = false;
+            while (valueIndex < value.length) {
+                const char = value[valueIndex];
+                valueIndex++;
+                // Check with validator function first if exists
+                const isValid = rule.validator
+                    ? rule.validator(char)
+                    : rule.pattern.test(char);
+                if (isValid) {
+                    maskedValue += char;
+                    foundValid = true;
+                    break;
+                }
+                // Skip invalid characters and continue searching
+            }
+            if (!foundValid && guide && showMask) {
+                // No valid character found, fill with placeholder
+                maskedValue += maskChar;
+            }
+            else if (!foundValid) {
+                // No placeholder needed, stop building the mask
+                break;
+            }
+        }
+    }
+    return maskedValue;
+};
+// Helper function to extract raw value from masked value
+const extractRawValue = (maskedValue, maskPattern) => {
+    let rawValue = "";
+    for (let i = 0; i < maskedValue.length && i < maskPattern.length; i++) {
+        const rule = maskPattern[i];
+        const char = maskedValue[i];
+        if (!rule.isLiteral) {
+            // Only include non-literal characters in raw value
+            rawValue += char;
+        }
+    }
+    return rawValue;
+};
+// Helper function to get cursor position after masking
+const getCursorPosition = (maskedValue, rawInputLength, maskPattern) => {
+    let inputCount = 0;
+    let cursorPos = 0;
+    for (let i = 0; i < maskPattern.length && i < maskedValue.length; i++) {
+        const rule = maskPattern[i];
+        const char = maskedValue[i];
+        if (rule.isLiteral) {
+            cursorPos = i + 1;
+        }
+        else {
+            inputCount++;
+            cursorPos = i + 1;
+            if (inputCount >= rawInputLength) {
+                break;
+            }
+        }
+    }
+    return cursorPos;
+};
+export const MaskedTextInput = forwardRef((_a, ref) => {
+    var { mask, maskChar = "_", showMask = true, guide = true, keepCharPositions = false, rules, onMaskedChange, onChange, value, defaultValue } = _a, props = __rest(_a, ["mask", "maskChar", "showMask", "guide", "keepCharPositions", "rules", "onMaskedChange", "onChange", "value", "defaultValue"]);
+    const inputRef = useRef(null);
+    const [maskedValue, setMaskedValue] = useState("");
+    const [rawValue, setRawValue] = useState("");
+    // Parse mask pattern using Kendo UI rules
+    const maskPattern = React.useMemo(() => {
+        if (!mask)
+            return null;
+        return createMaskPattern(mask, rules);
+    }, [mask, rules]);
+    // Initialize values
+    useEffect(() => {
+        const initialValue = value || defaultValue || "";
+        if (maskPattern && initialValue) {
+            const masked = applyMask(initialValue, maskPattern, maskChar, showMask, guide);
+            const raw = extractRawValue(masked, maskPattern);
+            setMaskedValue(masked);
+            setRawValue(raw);
+        }
+        else {
+            setMaskedValue(initialValue);
+            setRawValue(initialValue);
+        }
+    }, [maskPattern, maskChar, showMask, guide, value, defaultValue]);
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleChange = useCallback((event) => {
+        const inputValue = event.target.value;
+        if (!maskPattern) {
+            setMaskedValue(inputValue);
+            setRawValue(inputValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            onMaskedChange === null || onMaskedChange === void 0 ? void 0 : onMaskedChange(inputValue, inputValue);
+            return;
+        }
+        const newMaskedValue = applyMask(inputValue, maskPattern, maskChar, showMask, guide);
+        const newRawValue = extractRawValue(newMaskedValue, maskPattern);
+        setMaskedValue(newMaskedValue);
+        setRawValue(newRawValue);
+        // Create synthetic event with masked value
+        const syntheticEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: newMaskedValue }) });
+        onChange === null || onChange === void 0 ? void 0 : onChange(syntheticEvent);
+        onMaskedChange === null || onMaskedChange === void 0 ? void 0 : onMaskedChange(newMaskedValue, newRawValue);
+        // Set cursor position after state update
+        setTimeout(() => {
+            if (inputRef.current) {
+                const rawLength = newRawValue.replace(/[_\s]/g, "").length;
+                const newCursorPos = getCursorPosition(newMaskedValue, rawLength, maskPattern);
+                inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+            }
+        }, 0);
+    }, [maskPattern, maskChar, showMask, guide, onChange, onMaskedChange]);
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b, _c;
+        if (!maskPattern) {
+            (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            return;
+        }
+        const { key, ctrlKey, metaKey } = event;
+        const input = event.target;
+        const cursorPos = input.selectionStart || 0;
+        // Allow navigation and editing keys
+        if (key === "Backspace" ||
+            key === "Delete" ||
+            key === "ArrowLeft" ||
+            key === "ArrowRight" ||
+            key === "Home" ||
+            key === "End" ||
+            key === "Tab" ||
+            key.length > 1 || // Allow other special keys
+            ctrlKey ||
+            metaKey) {
+            (_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, event);
+            return;
+        }
+        // Find the next non-literal position from cursor
+        let targetPos = cursorPos;
+        while (targetPos < maskPattern.length &&
+            maskPattern[targetPos].isLiteral) {
+            targetPos++;
+        }
+        // Check if we have a valid position and the key matches
+        if (targetPos < maskPattern.length) {
+            const targetRule = maskPattern[targetPos];
+            // Check with validator function first if exists
+            const isValid = targetRule.validator
+                ? targetRule.validator(key)
+                : targetRule.pattern.test(key);
+            if (!isValid) {
+                event.preventDefault();
+                return;
+            }
+        }
+        (_c = props.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(props, event);
+    }, [maskPattern, props]);
+    return (_jsx(TextInput, Object.assign({}, props, { ref: inputRef, value: maskedValue, onChange: handleChange, onKeyDown: handleKeyDown, className: cn(props.className) })));
+});
+MaskedTextInput.displayName = "MaskedTextInput";
+export default MaskedTextInput;

package/dist/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import MaskedTextInput, { MASK_PATTERNS } from "./MaskedTextInput";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+    title: "Components/MaskedTextInput",
+    component: MaskedTextInput,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Phone Number",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(MaskedTextInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(MaskedTextInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(MaskedTextInput, Object.assign({ id: "3", size: "sm" }, args))] }));
+    },
+};
+export const PhoneNumber = {
+    args: {
+        label: "Phone Number",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "International Phone", mask: MASK_PATTERNS.PHONE_INTL }))] }));
+    },
+};
+export const CreditCard = {
+    args: {
+        label: "Credit Card Number",
+        mask: MASK_PATTERNS.CREDIT_CARD,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const DateAndTime = {
+    args: {
+        label: "Date",
+        mask: MASK_PATTERNS.DATE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: MASK_PATTERNS.TIME }))] }));
+    },
+};
+export const SocialSecurityNumber = {
+    args: {
+        label: "Social Security Number",
+        mask: MASK_PATTERNS.SSN,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const ZipCode = {
+    args: {
+        label: "ZIP Code",
+        mask: MASK_PATTERNS.ZIP_CODE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code + 4", mask: MASK_PATTERNS.ZIP_CODE_EXT }))] }));
+    },
+};
+export const Currency = {
+    args: {
+        label: "Amount",
+        mask: MASK_PATTERNS.CURRENCY,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: _jsx(MaskedTextInput, Object.assign({}, args)) }));
+    },
+};
+export const CustomMask = {
+    args: {
+        label: "Custom Pattern",
+        mask: "AAA-999-AAA",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args)), _jsx(MaskedTextInput, Object.assign({}, args, { label: "License Plate", mask: "999-AAA" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Product Code", mask: "AA-9999-AA" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: "00:00:00" }))] }));
+    },
+};
+export const MaskOptions = {
+    args: {
+        label: "Phone with Options",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args, { label: "With Guide", guide: true, showMask: true })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Without Guide", guide: false, showMask: true })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Mask Char", maskChar: "*", guide: true, showMask: true }))] }));
+    },
+};
+export const WithCallbacks = {
+    args: {
+        label: "Phone with Callbacks",
+        mask: MASK_PATTERNS.PHONE,
+        fullwidth: true,
+    },
+    render: (args) => {
+        const [maskedValue, setMaskedValue] = useState("");
+        const [rawValue, setRawValue] = useState("");
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(MaskedTextInput, Object.assign({}, args, { onChange: (e) => {
+                        setMaskedValue(e.target.value);
+                        setRawValue(e.target.value);
+                    }, onMaskedChange: (masked, raw) => {
+                        setMaskedValue(masked);
+                        setRawValue(raw);
+                    } })), _jsxs("div", { className: "p-4 bg-gray-100 rounded", children: [_jsxs("p", { children: [_jsx("strong", { children: "Masked Value:" }), " ", maskedValue] }), _jsxs("p", { children: [_jsx("strong", { children: "Raw Value:" }), " ", rawValue] })] })] }));
+    },
+};
+export const AllPatterns = {
+    args: {
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-2xl", children: [_jsx("h3", { className: "text-lg font-semibold", children: "All Mask Patterns" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(MaskedTextInput, Object.assign({}, args, { label: "Phone", mask: MASK_PATTERNS.PHONE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "International Phone", mask: MASK_PATTERNS.PHONE_INTL })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Credit Card", mask: MASK_PATTERNS.CREDIT_CARD })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Date", mask: MASK_PATTERNS.DATE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Time", mask: MASK_PATTERNS.TIME })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "SSN", mask: MASK_PATTERNS.SSN })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code", mask: MASK_PATTERNS.ZIP_CODE })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "ZIP Code + 4", mask: MASK_PATTERNS.ZIP_CODE_EXT })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Currency", mask: MASK_PATTERNS.CURRENCY })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Percentage", mask: MASK_PATTERNS.PERCENTAGE }))] })] }));
+    },
+};
+export const KendoRules = {
+    args: {
+        label: "Kendo UI Rules",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Kendo UI Mask Rules Examples" }), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: 0 (Digits Only)", mask: "000-000-0000", helperText: "0 = Required digit (0-9)" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: L (Letters Only)", mask: "LLL-LLLL", helperText: "L = Required letter (a-z, A-Z)" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: A (Alphanumeric)", mask: "AAAA-0000", helperText: "A = Letter or digit" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: # (Number with sign)", mask: "###", helperText: "# = Digit, space, + or -" })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Mixed Pattern Example", mask: "(000) LLL-0000", helperText: "Format: (123) ABC-4567" }))] }));
+    },
+};
+export const OptionalRules = {
+    args: {
+        label: "Optional Rules (with space)",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Rules that accept space (optional input)" }), _jsx("p", { className: "text-xs text-gray-500", children: "Note: These rules allow space, making the position optional" }), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: 9 (Digit or Space)", mask: "999-999-9999", helperText: "9 = Optional digit (press space to skip)", guide: false })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: ? (Letter or Space)", mask: "???-????", helperText: "? = Optional letter (press space to skip)", guide: false })), _jsx(MaskedTextInput, Object.assign({}, args, { label: "Rule: a (Alphanumeric or Space)", mask: "aaaa-aaaa", helperText: "a = Optional alphanumeric (press space to skip)", guide: false }))] }));
+    },
+};
+export const CustomRules = {
+    args: {
+        label: "Custom Rules",
+        fullwidth: true,
+    },
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Custom Validation Rules" }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Rule: Digits 3-9 only", mask: "~-~-~", rules: {
+                            "~": /[3-9]/,
+                        }, helperText: "Type only digits 3, 4, 5, 6, 7, 8, or 9" })) }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Custom Rule: Uppercase letters only", mask: "***", rules: {
+                            "*": (char) => char === char.toUpperCase() && /[A-Z]/.test(char),
+                        }, helperText: "Type only uppercase letters (A-Z)" })) }), _jsx("div", { className: "space-y-2", children: _jsx(MaskedTextInput, Object.assign({}, args, { label: "Mixed Custom Rules", mask: "~*-~*", rules: {
+                            "~": /[0-9]/,
+                            "*": /[A-Z]/,
+                        }, helperText: "Format: Digit-Letter-Digit-Letter" })) })] }));
+    },
+};

package/dist/components/MaskedTextInput/index.js

@@ -0,0 +1,2 @@
+export { default } from "./MaskedTextInput";
+export { MASK_PATTERNS } from "./MaskedTextInput";

package/dist/components/Menu/Menu.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, } from "react";
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+// ==================== Menu Container ====================
+export const Menu = forwardRef(({ items, selectedValues = [], onSelect, className, style, isAbove = false }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground", "border border-base-popup", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
+            var _a;
+            if (item.type === "separator") {
+                return _jsx(MenuSeparator, {}, `separator-${index}`);
+            }
+            if (item.type === "label") {
+                return _jsx(MenuLabel, { children: item.label }, `label-${index}`);
+            }
+            if (item.type === "custom") {
+                return (_jsx(React.Fragment, { children: item.render() }, `custom-${index}`));
+            }
+            const itemOption = item.item;
+            const visualType = itemOption.type || "default";
+            // Determine checked/selected state
+            let isChecked = false;
+            if (visualType === "checkbox" || visualType === "radio") {
+                isChecked =
+                    (_a = itemOption.checked) !== null && _a !== void 0 ? _a : selectedValues.includes(itemOption.value);
+            }
+            else {
+                isChecked = selectedValues.includes(itemOption.value);
+            }
+            return (_jsx(MenuItem, { option: itemOption, visualType: visualType, isChecked: isChecked, onSelect: () => {
+                    var _a;
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemOption.value, itemOption);
+                    (_a = itemOption.onClick) === null || _a === void 0 ? void 0 : _a.call(itemOption);
+                } }, itemOption.value));
+        }) }));
+});
+Menu.displayName = "Menu";
+export const MenuItem = forwardRef(({ option, visualType, isChecked, onSelect, className }, ref) => {
+    // Render indicator based on visual type
+    const renderIndicator = () => {
+        if (visualType === "checkbox" && isChecked) {
+            return (_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }));
+        }
+        if (visualType === "radio" && isChecked) {
+            return (_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }));
+        }
+        return null;
+    };
+    return (_jsxs("div", { ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
+            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitile5": isChecked,
+            "pointer-events-none opacity-50": option.disabled,
+            "text-red-500": option.danger,
+        }, className), onClick: option.disabled ? undefined : onSelect, children: [renderIndicator(), option.icon && _jsx("span", { className: "flex-shrink-0", children: option.icon }), option.label] }));
+});
+MenuItem.displayName = "MenuItem";
+export const MenuSeparator = forwardRef(({ className }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]", className) }));
+});
+MenuSeparator.displayName = "MenuSeparator";
+export const MenuLabel = forwardRef(({ children, className }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-grey-medium", className), children: children }));
+});
+MenuLabel.displayName = "MenuLabel";
+// ==================== Exports ====================
+export default Menu;