@owodesign/owoui 0.1.0

package/dist/storybook/catalog.js

@@ -0,0 +1,221 @@
+const catalog = {
+  "groups": [
+    {
+      "id": "actions",
+      "label": "Actions",
+      "items": [
+        {
+          "group": "actions",
+          "componentId": "button",
+          "componentName": "Button",
+          "description": "Primary action trigger. Supports variants, sizes, icons, loading, and disabled states."
+        },
+        {
+          "group": "actions",
+          "componentId": "icon-button",
+          "componentName": "IconButton",
+          "description": "Icon-only action button. Supports ghost/subtle variants, sm/md sizes."
+        },
+        {
+          "group": "actions",
+          "componentId": "dropdown-menu",
+          "componentName": "DropdownMenu",
+          "description": "Industrial dropdown primitive for action menus, grouped pickers, and nested submenus."
+        }
+      ]
+    },
+    {
+      "id": "forms",
+      "label": "Forms",
+      "items": [
+        {
+          "group": "forms",
+          "componentId": "input",
+          "componentName": "Input",
+          "description": "Unified input element. Renders as input or textarea via the `as` prop. For dropdown selection, use the Select component."
+        },
+        {
+          "group": "forms",
+          "componentId": "field",
+          "componentName": "Field",
+          "description": "Form field wrapper with label and optional help text."
+        },
+        {
+          "group": "forms",
+          "componentId": "select",
+          "componentName": "Select",
+          "description": "Custom dropdown select with keyboard navigation and design-system styling."
+        },
+        {
+          "group": "forms",
+          "componentId": "segmented-control",
+          "componentName": "SegmentedControl",
+          "description": "Tab-like toggle for mutually exclusive options."
+        },
+        {
+          "group": "forms",
+          "componentId": "switch",
+          "componentName": "Switch",
+          "description": "Toggle switch for boolean settings."
+        }
+      ]
+    },
+    {
+      "id": "feedback",
+      "label": "Feedback",
+      "items": [
+        {
+          "group": "feedback",
+          "componentId": "badge",
+          "componentName": "Badge",
+          "description": "Inline label for status, categories, or counts. Token-driven: --badge-bg, --badge-text, --badge-border."
+        },
+        {
+          "group": "feedback",
+          "componentId": "status-notice",
+          "componentName": "StatusNotice",
+          "description": "Block-level feedback banner. Supports neutral plus semantic tones, with optional icon slot."
+        },
+        {
+          "group": "feedback",
+          "componentId": "empty-state",
+          "componentName": "EmptyState",
+          "description": "Placeholder for empty lists or missing content. Token-driven: --empty-state-bg, --empty-state-border, --empty-state-title, --empty-state-text, --empty-state-icon."
+        },
+        {
+          "group": "feedback",
+          "componentId": "spinner",
+          "componentName": "Spinner",
+          "description": "Animated loading indicator with multiple icon styles. Used standalone or composed into other components (e.g. Button loading state)."
+        },
+        {
+          "group": "feedback",
+          "componentId": "skeleton",
+          "componentName": "Skeleton",
+          "description": "Loading placeholder with `scan` or `pulse` animation and configurable speed."
+        },
+        {
+          "group": "feedback",
+          "componentId": "dialog",
+          "componentName": "Dialog",
+          "description": "Modal dialog for confirmations and focused tasks. Supports declarative usage via <Dialog> and imperative usage via `useConfirm()` hook. The imperative API requires `<ConfirmProvider>` in an ancestor (mounted in admin layout)."
+        },
+        {
+          "group": "feedback",
+          "componentId": "toast",
+          "componentName": "Toast",
+          "description": "Transient notification messages triggered via `useToast()` hook. Requires `<ToastProvider>` wrapper."
+        },
+        {
+          "group": "feedback",
+          "componentId": "avatar",
+          "componentName": "Avatar",
+          "description": "User avatar with image or initials fallback. Token-driven: --avatar-bg, --avatar-text, --avatar-border."
+        },
+        {
+          "group": "feedback",
+          "componentId": "tooltip",
+          "componentName": "Tooltip",
+          "description": "Hover/focus-triggered floating label. Token-driven: --tooltip-bg, --tooltip-border, --tooltip-text, --tooltip-shadow, --tooltip-arrow-color."
+        }
+      ]
+    },
+    {
+      "id": "layout",
+      "label": "Layout",
+      "items": [
+        {
+          "group": "layout",
+          "componentId": "drawer",
+          "componentName": "Drawer",
+          "description": "Sliding overlay container for left/right drawers with optional backdrop. Token-driven: --drawer-surface, --drawer-border, --drawer-shadow, --drawer-backdrop."
+        },
+        {
+          "group": "layout",
+          "componentId": "panel",
+          "componentName": "Panel",
+          "description": "Container card driven by surface hierarchy and structured sections (header/body/footer), not by blanket shadow elevation."
+        }
+      ]
+    }
+  ],
+  "paths": [
+    {
+      "group": "actions",
+      "componentId": "button"
+    },
+    {
+      "group": "actions",
+      "componentId": "dropdown-menu"
+    },
+    {
+      "group": "actions",
+      "componentId": "icon-button"
+    },
+    {
+      "group": "forms",
+      "componentId": "input"
+    },
+    {
+      "group": "forms",
+      "componentId": "field"
+    },
+    {
+      "group": "forms",
+      "componentId": "select"
+    },
+    {
+      "group": "forms",
+      "componentId": "segmented-control"
+    },
+    {
+      "group": "forms",
+      "componentId": "switch"
+    },
+    {
+      "group": "feedback",
+      "componentId": "badge"
+    },
+    {
+      "group": "feedback",
+      "componentId": "status-notice"
+    },
+    {
+      "group": "feedback",
+      "componentId": "empty-state"
+    },
+    {
+      "group": "feedback",
+      "componentId": "spinner"
+    },
+    {
+      "group": "feedback",
+      "componentId": "skeleton"
+    },
+    {
+      "group": "feedback",
+      "componentId": "dialog"
+    },
+    {
+      "group": "feedback",
+      "componentId": "toast"
+    },
+    {
+      "group": "feedback",
+      "componentId": "avatar"
+    },
+    {
+      "group": "feedback",
+      "componentId": "tooltip"
+    },
+    {
+      "group": "layout",
+      "componentId": "drawer"
+    },
+    {
+      "group": "layout",
+      "componentId": "panel"
+    }
+  ]
+};
+export default catalog;

package/dist/storybook/catalog.json

@@ -0,0 +1,220 @@
+{
+  "groups": [
+    {
+      "id": "actions",
+      "label": "Actions",
+      "items": [
+        {
+          "group": "actions",
+          "componentId": "button",
+          "componentName": "Button",
+          "description": "Primary action trigger. Supports variants, sizes, icons, loading, and disabled states."
+        },
+        {
+          "group": "actions",
+          "componentId": "icon-button",
+          "componentName": "IconButton",
+          "description": "Icon-only action button. Supports ghost/subtle variants, sm/md sizes."
+        },
+        {
+          "group": "actions",
+          "componentId": "dropdown-menu",
+          "componentName": "DropdownMenu",
+          "description": "Industrial dropdown primitive for action menus, grouped pickers, and nested submenus."
+        }
+      ]
+    },
+    {
+      "id": "forms",
+      "label": "Forms",
+      "items": [
+        {
+          "group": "forms",
+          "componentId": "input",
+          "componentName": "Input",
+          "description": "Unified input element. Renders as input or textarea via the `as` prop. For dropdown selection, use the Select component."
+        },
+        {
+          "group": "forms",
+          "componentId": "field",
+          "componentName": "Field",
+          "description": "Form field wrapper with label and optional help text."
+        },
+        {
+          "group": "forms",
+          "componentId": "select",
+          "componentName": "Select",
+          "description": "Custom dropdown select with keyboard navigation and design-system styling."
+        },
+        {
+          "group": "forms",
+          "componentId": "segmented-control",
+          "componentName": "SegmentedControl",
+          "description": "Tab-like toggle for mutually exclusive options."
+        },
+        {
+          "group": "forms",
+          "componentId": "switch",
+          "componentName": "Switch",
+          "description": "Toggle switch for boolean settings."
+        }
+      ]
+    },
+    {
+      "id": "feedback",
+      "label": "Feedback",
+      "items": [
+        {
+          "group": "feedback",
+          "componentId": "badge",
+          "componentName": "Badge",
+          "description": "Inline label for status, categories, or counts. Token-driven: --badge-bg, --badge-text, --badge-border."
+        },
+        {
+          "group": "feedback",
+          "componentId": "status-notice",
+          "componentName": "StatusNotice",
+          "description": "Block-level feedback banner. Supports neutral plus semantic tones, with optional icon slot."
+        },
+        {
+          "group": "feedback",
+          "componentId": "empty-state",
+          "componentName": "EmptyState",
+          "description": "Placeholder for empty lists or missing content. Token-driven: --empty-state-bg, --empty-state-border, --empty-state-title, --empty-state-text, --empty-state-icon."
+        },
+        {
+          "group": "feedback",
+          "componentId": "spinner",
+          "componentName": "Spinner",
+          "description": "Animated loading indicator with multiple icon styles. Used standalone or composed into other components (e.g. Button loading state)."
+        },
+        {
+          "group": "feedback",
+          "componentId": "skeleton",
+          "componentName": "Skeleton",
+          "description": "Loading placeholder with `scan` or `pulse` animation and configurable speed."
+        },
+        {
+          "group": "feedback",
+          "componentId": "dialog",
+          "componentName": "Dialog",
+          "description": "Modal dialog for confirmations and focused tasks. Supports declarative usage via <Dialog> and imperative usage via `useConfirm()` hook. The imperative API requires `<ConfirmProvider>` in an ancestor (mounted in admin layout)."
+        },
+        {
+          "group": "feedback",
+          "componentId": "toast",
+          "componentName": "Toast",
+          "description": "Transient notification messages triggered via `useToast()` hook. Requires `<ToastProvider>` wrapper."
+        },
+        {
+          "group": "feedback",
+          "componentId": "avatar",
+          "componentName": "Avatar",
+          "description": "User avatar with image or initials fallback. Token-driven: --avatar-bg, --avatar-text, --avatar-border."
+        },
+        {
+          "group": "feedback",
+          "componentId": "tooltip",
+          "componentName": "Tooltip",
+          "description": "Hover/focus-triggered floating label. Token-driven: --tooltip-bg, --tooltip-border, --tooltip-text, --tooltip-shadow, --tooltip-arrow-color."
+        }
+      ]
+    },
+    {
+      "id": "layout",
+      "label": "Layout",
+      "items": [
+        {
+          "group": "layout",
+          "componentId": "drawer",
+          "componentName": "Drawer",
+          "description": "Sliding overlay container for left/right drawers with optional backdrop. Token-driven: --drawer-surface, --drawer-border, --drawer-shadow, --drawer-backdrop."
+        },
+        {
+          "group": "layout",
+          "componentId": "panel",
+          "componentName": "Panel",
+          "description": "Container card driven by surface hierarchy and structured sections (header/body/footer), not by blanket shadow elevation."
+        }
+      ]
+    }
+  ],
+  "paths": [
+    {
+      "group": "actions",
+      "componentId": "button"
+    },
+    {
+      "group": "actions",
+      "componentId": "dropdown-menu"
+    },
+    {
+      "group": "actions",
+      "componentId": "icon-button"
+    },
+    {
+      "group": "forms",
+      "componentId": "input"
+    },
+    {
+      "group": "forms",
+      "componentId": "field"
+    },
+    {
+      "group": "forms",
+      "componentId": "select"
+    },
+    {
+      "group": "forms",
+      "componentId": "segmented-control"
+    },
+    {
+      "group": "forms",
+      "componentId": "switch"
+    },
+    {
+      "group": "feedback",
+      "componentId": "badge"
+    },
+    {
+      "group": "feedback",
+      "componentId": "status-notice"
+    },
+    {
+      "group": "feedback",
+      "componentId": "empty-state"
+    },
+    {
+      "group": "feedback",
+      "componentId": "spinner"
+    },
+    {
+      "group": "feedback",
+      "componentId": "skeleton"
+    },
+    {
+      "group": "feedback",
+      "componentId": "dialog"
+    },
+    {
+      "group": "feedback",
+      "componentId": "toast"
+    },
+    {
+      "group": "feedback",
+      "componentId": "avatar"
+    },
+    {
+      "group": "feedback",
+      "componentId": "tooltip"
+    },
+    {
+      "group": "layout",
+      "componentId": "drawer"
+    },
+    {
+      "group": "layout",
+      "componentId": "panel"
+    }
+  ]
+}

package/dist/storybook/index.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+
+type StorybookGroup = 'actions' | 'forms' | 'feedback' | 'layout';
+interface StoryDefinition {
+    id: string;
+    title: string;
+    description?: string;
+    source?: string;
+    render: () => ReactNode;
+}
+interface PropSummary {
+    name: string;
+    type: string;
+    default?: string;
+    description?: string;
+}
+interface ComponentStoriesDefinition {
+    group: StorybookGroup;
+    componentId: string;
+    componentName: string;
+    description?: string;
+    props?: PropSummary[];
+    renderPlayground?: (props: Record<string, unknown>, update: (name: string, value: unknown) => void) => ReactNode;
+    stories: StoryDefinition[];
+}
+interface StorybookStoryPath {
+    group: StorybookGroup;
+    componentId: string;
+}
+declare const storybookStoryPaths: StorybookStoryPath[];
+declare function registerStories(def: ComponentStoriesDefinition): void;
+declare function getStoriesByGroupAndComponent(group: string, componentId: string): ComponentStoriesDefinition | undefined;
+declare function getGroupedStories(): Record<StorybookGroup, ComponentStoriesDefinition[]>;
+declare const groupLabels: Record<StorybookGroup, string>;
+declare const groupOrder: StorybookGroup[];
+
+export { type ComponentStoriesDefinition, type PropSummary, type StoryDefinition, type StorybookGroup, type StorybookStoryPath, getGroupedStories, getStoriesByGroupAndComponent, groupLabels, groupOrder, registerStories, storybookStoryPaths };