@rovula/ui 0.0.78 → 0.0.79

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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

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

package/dist/esm/bundle.css

@@ -662,6 +662,9 @@ input[type=number] {
 .z-10{
   z-index: 10;
 }
+.z-40{
+  z-index: 40;
+}
 .z-50{
   z-index: 50;
 }
@@ -671,9 +674,6 @@ input[type=number] {
 .z-\[100\]{
   z-index: 100;
 }
-.z-\[9999\]{
-  z-index: 9999;
-}
 .col-span-3{
   grid-column: span 3 / span 3;
 }
@@ -943,6 +943,9 @@ input[type=number] {
 .w-8{
   width: 2rem;
 }
+.w-80{
+  width: 20rem;
+}
 .w-\[100px\]{
   width: 100px;
 }
@@ -3590,6 +3593,9 @@ input[type=number] {
 .caret-primary{
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
+.opacity-50{
+  opacity: 0.5;
+}
 .opacity-60{
   opacity: 0.6;
 }
@@ -4004,6 +4010,9 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover{
+  background-color: var(--dropdown-menu-hover-bg);
+}
 .hover\:bg-action-button-icon-active-hover:hover{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -4215,6 +4224,9 @@ input[type=number] {
 .hover\:fill-input-default-text:hover{
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
+.hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover{
+  color: var(--dropdown-menu-hover-text);
+}
 .hover\:text-action-button-icon-active-hover:hover{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent);