@rovula/ui 0.1.21 → 0.1.22

package/dist/components/Menu/Menu.stories.js

@@ -1,406 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Menu } from "./Menu";
-import { optionsToMenuItems } from "./helpers";
-import Button from "../Button/Button";
-import Icon from "../Icon/Icon";
-import TextInput from "../TextInput/TextInput";
-import { ChevronDownIcon } from "@heroicons/react/16/solid";
-const meta = {
-    title: "Components/Menu",
-    component: Menu,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-    },
-    decorators: [
-        (Story) => (_jsx("div", { className: "p-20 flex justify-center", children: _jsx(Story, {}) })),
-    ],
-};
-export default meta;
-// ==================== Basic Menu ====================
-export const Basic = {
-    render: () => {
-        const items = [
-            { type: "item", item: { value: "1", label: "Option 1" } },
-            { type: "item", item: { value: "2", label: "Option 2" } },
-            { type: "item", item: { value: "3", label: "Option 3" } },
-            { type: "separator" },
-            { type: "item", item: { value: "4", label: "Option 4", disabled: true } },
-            { type: "item", item: { value: "5", label: "Delete", danger: true } },
-        ];
-        return (_jsx(Menu, { items: items, onSelect: (value) => console.log("Selected:", value) }));
-    },
-};
-// ==================== With Icons ====================
-export const WithIcons = {
-    render: () => {
-        const items = [
-            {
-                type: "item",
-                item: {
-                    value: "profile",
-                    label: "Profile",
-                    icon: _jsx(Icon, { type: "heroicons", name: "user", className: "size-4" }),
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "settings",
-                    label: "Settings",
-                    icon: _jsx(Icon, { type: "heroicons", name: "cog-6-tooth", className: "size-4" }),
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "help",
-                    label: "Help",
-                    icon: (_jsx(Icon, { type: "heroicons", name: "question-mark-circle", className: "size-4" })),
-                },
-            },
-            { type: "separator" },
-            {
-                type: "item",
-                item: {
-                    value: "logout",
-                    label: "Logout",
-                    icon: (_jsx(Icon, { type: "heroicons", name: "arrow-right-on-rectangle", className: "size-4" })),
-                    danger: true,
-                },
-            },
-        ];
-        return (_jsx(Menu, { items: items, onSelect: (value) => console.log("Selected:", value) }));
-    },
-};
-// ==================== With Checkbox ====================
-export const WithCheckbox = {
-    render: () => {
-        const [checked, setChecked] = useState({
-            notifications: true,
-            emails: false,
-            updates: true,
-        });
-        const items = [
-            { type: "label", label: "Preferences" },
-            {
-                type: "item",
-                item: {
-                    value: "notifications",
-                    label: "Notifications",
-                    type: "checkbox",
-                    checked: checked.notifications,
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "emails",
-                    label: "Email Alerts",
-                    type: "checkbox",
-                    checked: checked.emails,
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "updates",
-                    label: "Product Updates",
-                    type: "checkbox",
-                    checked: checked.updates,
-                },
-            },
-        ];
-        return (_jsx(Menu, { items: items, onSelect: (value) => {
-                setChecked((prev) => (Object.assign(Object.assign({}, prev), { [value]: !prev[value] })));
-            } }));
-    },
-};
-// ==================== With Radio ====================
-export const WithRadio = {
-    render: () => {
-        const [selected, setSelected] = useState("light");
-        const items = [
-            { type: "label", label: "Theme" },
-            {
-                type: "item",
-                item: {
-                    value: "light",
-                    label: "Light",
-                    type: "radio",
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "dark",
-                    label: "Dark",
-                    type: "radio",
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "system",
-                    label: "System",
-                    type: "radio",
-                },
-            },
-        ];
-        return (_jsx(Menu, { items: items, selectedValues: [selected], onSelect: (value) => setSelected(value) }));
-    },
-};
-// ==================== Complex Menu ====================
-export const ComplexMenu = {
-    render: () => {
-        const [preferences, setPreferences] = useState({
-            notifications: true,
-            emails: false,
-        });
-        const [theme, setTheme] = useState("light");
-        const items = [
-            { type: "label", label: "My Account" },
-            {
-                type: "item",
-                item: {
-                    value: "profile",
-                    label: "Profile",
-                    icon: _jsx(Icon, { type: "heroicons", name: "user", className: "size-4" }),
-                    onClick: () => console.log("Go to profile"),
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "billing",
-                    label: "Billing",
-                    icon: _jsx(Icon, { type: "heroicons", name: "credit-card", className: "size-4" }),
-                    onClick: () => console.log("Go to billing"),
-                },
-            },
-            { type: "separator" },
-            { type: "label", label: "Preferences" },
-            {
-                type: "item",
-                item: {
-                    value: "notifications",
-                    label: "Push Notifications",
-                    type: "checkbox",
-                    checked: preferences.notifications,
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "emails",
-                    label: "Email Notifications",
-                    type: "checkbox",
-                    checked: preferences.emails,
-                },
-            },
-            { type: "separator" },
-            { type: "label", label: "Theme" },
-            {
-                type: "item",
-                item: {
-                    value: "light",
-                    label: "Light Mode",
-                    type: "radio",
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "dark",
-                    label: "Dark Mode",
-                    type: "radio",
-                },
-            },
-            { type: "separator" },
-            {
-                type: "item",
-                item: {
-                    value: "logout",
-                    label: "Logout",
-                    icon: (_jsx(Icon, { type: "heroicons", name: "arrow-right-on-rectangle", className: "size-4" })),
-                    danger: true,
-                    onClick: () => console.log("Logout"),
-                },
-            },
-        ];
-        return (_jsx(Menu, { items: items, selectedValues: [theme], onSelect: (value, item) => {
-                // Handle different types
-                if (item.type === "checkbox") {
-                    // Toggle checkbox
-                    const key = value;
-                    if (key in preferences) {
-                        setPreferences(Object.assign(Object.assign({}, preferences), { [key]: !preferences[key] }));
-                    }
-                }
-                else if (item.type === "radio") {
-                    // Radio select
-                    setTheme(value);
-                }
-                else {
-                    // Regular item
-                    console.log("Item clicked:", value);
-                }
-            } }));
-    },
-};
-// ==================== With Dropdown Trigger ====================
-export const WithDropdownTrigger = {
-    render: () => {
-        const [isOpen, setIsOpen] = useState(false);
-        const items = [
-            {
-                type: "item",
-                item: {
-                    value: "edit",
-                    label: "Edit",
-                    icon: _jsx(Icon, { type: "heroicons", name: "pencil", className: "size-4" }),
-                    onClick: () => {
-                        console.log("Edit");
-                        setIsOpen(false);
-                    },
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "duplicate",
-                    label: "Duplicate",
-                    icon: (_jsx(Icon, { type: "heroicons", name: "document-duplicate", className: "size-4" })),
-                    onClick: () => {
-                        console.log("Duplicate");
-                        setIsOpen(false);
-                    },
-                },
-            },
-            { type: "separator" },
-            {
-                type: "item",
-                item: {
-                    value: "archive",
-                    label: "Archive",
-                    icon: _jsx(Icon, { type: "heroicons", name: "archive-box", className: "size-4" }),
-                    onClick: () => {
-                        console.log("Archive");
-                        setIsOpen(false);
-                    },
-                },
-            },
-            {
-                type: "item",
-                item: {
-                    value: "delete",
-                    label: "Delete",
-                    icon: _jsx(Icon, { type: "heroicons", name: "trash", className: "size-4" }),
-                    danger: true,
-                    onClick: () => {
-                        console.log("Delete");
-                        setIsOpen(false);
-                    },
-                },
-            },
-        ];
-        return (_jsxs("div", { className: "relative", children: [_jsx(Button, { onClick: () => setIsOpen(!isOpen), children: "Actions" }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setIsOpen(false) }), _jsx("div", { className: "absolute top-full mt-2 z-50", children: _jsx(Menu, { items: items }) })] }))] }));
-    },
-};
-// ==================== Custom Items ====================
-export const CustomItems = {
-    render: () => {
-        const items = [
-            { type: "label", label: "Recent Projects" },
-            {
-                type: "custom",
-                render: () => (_jsxs("div", { className: "px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer", children: [_jsx("div", { className: "font-semibold", children: "Project Alpha" }), _jsx("div", { className: "text-xs text-gray-500", children: "Updated 2 hours ago" })] })),
-            },
-            {
-                type: "custom",
-                render: () => (_jsxs("div", { className: "px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer", children: [_jsx("div", { className: "font-semibold", children: "Project Beta" }), _jsx("div", { className: "text-xs text-gray-500", children: "Updated yesterday" })] })),
-            },
-            { type: "separator" },
-            {
-                type: "item",
-                item: {
-                    value: "view-all",
-                    label: "View All Projects",
-                    icon: _jsx(Icon, { type: "heroicons", name: "folder-open", className: "size-4" }),
-                },
-            },
-        ];
-        return (_jsx(Menu, { items: items, onSelect: (value) => console.log("Selected:", value) }));
-    },
-};
-// ==================== Dropdown Pattern (Select with Search) ====================
-export const DropdownPattern = {
-    render: () => {
-        var _a;
-        const [isOpen, setIsOpen] = useState(false);
-        const [selectedValue, setSelectedValue] = useState("");
-        const [searchText, setSearchText] = useState("");
-        // Simulate options like Dropdown component
-        const allOptions = [
-            { value: "apple", label: "Apple" },
-            { value: "banana", label: "Banana" },
-            { value: "cherry", label: "Cherry" },
-            { value: "date", label: "Date" },
-            { value: "elderberry", label: "Elderberry" },
-            { value: "fig", label: "Fig" },
-            { value: "grape", label: "Grape" },
-        ];
-        // Filter options based on search
-        const filteredOptions = allOptions.filter((opt) => opt.label.toLowerCase().includes(searchText.toLowerCase()));
-        // Convert to MenuItemType
-        const menuItems = optionsToMenuItems(filteredOptions);
-        // Add "not found" message if no results
-        if (filteredOptions.length === 0) {
-            menuItems.push({
-                type: "custom",
-                render: () => (_jsx("div", { className: "px-4 py-14 text-center text-input-text", children: "Not found" })),
-            });
-        }
-        const selectedLabel = ((_a = allOptions.find((opt) => opt.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) || "";
-        return (_jsxs("div", { className: "relative w-80", children: [_jsx(TextInput, { value: searchText || selectedLabel, onChange: (e) => setSearchText(e.target.value), onFocus: () => setIsOpen(true), onBlur: () => setTimeout(() => setIsOpen(false), 200), placeholder: "Select a fruit...", endIcon: _jsx(ChevronDownIcon, { className: "size-5 text-gray-400" }) }), isOpen && (_jsx("div", { className: "absolute top-full mt-1 w-full z-50", children: _jsx(Menu, { items: menuItems, selectedValues: [selectedValue], onSelect: (value) => {
-                            setSelectedValue(value);
-                            setSearchText("");
-                            setIsOpen(false);
-                        }, className: "max-h-60 overflow-y-auto" }) }))] }));
-    },
-};
-// ==================== Multi-Select Pattern ====================
-export const MultiSelectPattern = {
-    render: () => {
-        const [isOpen, setIsOpen] = useState(false);
-        const [selectedValues, setSelectedValues] = useState([]);
-        const options = [
-            { value: "react", label: "React" },
-            { value: "vue", label: "Vue" },
-            { value: "angular", label: "Angular" },
-            { value: "svelte", label: "Svelte" },
-            { value: "solid", label: "Solid" },
-        ];
-        const items = options.map((opt) => ({
-            type: "item",
-            item: {
-                value: opt.value,
-                label: opt.label,
-                type: "checkbox",
-                checked: selectedValues.includes(opt.value),
-            },
-        }));
-        const displayText = selectedValues.length > 0
-            ? `${selectedValues.length} selected`
-            : "Select frameworks...";
-        return (_jsxs("div", { className: "relative w-80", children: [_jsxs(Button, { onClick: () => setIsOpen(!isOpen), className: "w-full justify-between", children: [displayText, _jsx(ChevronDownIcon, { className: "size-5 ml-2" })] }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setIsOpen(false) }), _jsx("div", { className: "absolute top-full mt-2 w-full z-50", children: _jsx(Menu, { items: items, onSelect: (value) => {
-                                    if (selectedValues.includes(value)) {
-                                        setSelectedValues(selectedValues.filter((v) => v !== value));
-                                    }
-                                    else {
-                                        setSelectedValues([...selectedValues, value]);
-                                    }
-                                } }) })] }))] }));
-    },
-};

package/dist/components/Menu/helpers.js

@@ -1,28 +0,0 @@
-/**
- * Helper function to convert simple options to MenuItemType
- * Useful for integrating with Dropdown component
- */
-export function optionsToMenuItems(options) {
-    return options.map((option) => ({
-        type: "item",
-        item: {
-            value: option.value,
-            label: option.label,
-            disabled: option.disabled,
-        },
-    }));
-}
-/**
- * Helper to add separator between menu items
- */
-export function withSeparator(items, atIndex) {
-    const result = [...items];
-    result.splice(atIndex, 0, { type: "separator" });
-    return result;
-}
-/**
- * Helper to add label/header to menu items
- */
-export function withLabel(label, items) {
-    return [{ type: "label", label }, ...items];
-}

package/dist/components/Menu/index.js

@@ -1,3 +0,0 @@
-export { Menu, MenuItem, MenuSeparator, MenuLabel } from "./Menu";
-export { optionsToMenuItems, withSeparator, withLabel } from "./helpers";
-export { default } from "./Menu";

package/dist/esm/types/components/Menu/Menu.d.ts

@@ -1,65 +0,0 @@
-import React, { CSSProperties, ReactNode } from "react";
-export type MenuOption = {
-    value: string;
-    label: ReactNode;
-    /**
-     * Visual type - กำหนดว่าจะแสดง icon อะไร
-     * - "default": ไม่มี icon (แค่ highlight background)
-     * - "checkbox": แสดง ✓ icon
-     * - "radio": แสดง ● icon
-     */
-    type?: "default" | "checkbox" | "radio";
-    icon?: ReactNode;
-    disabled?: boolean;
-    danger?: boolean;
-    checked?: boolean;
-    onClick?: () => void;
-};
-export type MenuItemType = {
-    type: "item";
-    item: MenuOption;
-} | {
-    type: "separator";
-} | {
-    type: "label";
-    label: string;
-} | {
-    type: "custom";
-    render: () => ReactNode;
-};
-export type MenuProps = {
-    items: MenuItemType[];
-    /**
-     * Selected values - ใช้กับ type="item"
-     */
-    selectedValues?: string[];
-    /**
-     * Callback เมื่อเลือก item
-     * - ถ้า item.type="checkbox" → toggle checked state
-     * - ถ้า item.type="radio" → single select (clear others)
-     * - ถ้า item.type="default" หรือไม่ระบุ → ตาม selectedValues
-     */
-    onSelect?: (value: string, item: MenuOption) => void;
-    className?: string;
-    style?: CSSProperties;
-    isAbove?: boolean;
-};
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
-type MenuItemProps = {
-    option: MenuOption;
-    visualType: "default" | "checkbox" | "radio";
-    isChecked: boolean;
-    onSelect: () => void;
-    className?: string;
-};
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-type MenuSeparatorProps = {
-    className?: string;
-};
-export declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-type MenuLabelProps = {
-    children: ReactNode;
-    className?: string;
-};
-export declare const MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>;
-export default Menu;

package/dist/esm/types/components/Menu/helpers.d.ts

@@ -1,19 +0,0 @@
-import { MenuItemType } from "./Menu";
-/**
- * Helper function to convert simple options to MenuItemType
- * Useful for integrating with Dropdown component
- */
-export declare function optionsToMenuItems(options: Array<{
-    value: string;
-    label: string | React.ReactNode;
-    disabled?: boolean;
-    renderLabel?: any;
-}>): MenuItemType[];
-/**
- * Helper to add separator between menu items
- */
-export declare function withSeparator(items: MenuItemType[], atIndex: number): MenuItemType[];
-/**
- * Helper to add label/header to menu items
- */
-export declare function withLabel(label: string, items: MenuItemType[]): MenuItemType[];

package/dist/esm/types/components/Menu/index.d.ts

@@ -1,4 +0,0 @@
-export { Menu, MenuItem, MenuSeparator, MenuLabel } from "./Menu";
-export type { MenuOption, MenuItemType, MenuProps } from "./Menu";
-export { optionsToMenuItems, withSeparator, withLabel } from "./helpers";
-export { default } from "./Menu";