@omnifyjp/ui 0.1.1

package/README.md

@@ -0,0 +1,230 @@
+# @omnifyjp/ui
+
+A comprehensive React UI component library built on [Shadcn UI](https://ui.shadcn.com/) + [Radix UI](https://www.radix-ui.com/) + [Tailwind CSS v4](https://tailwindcss.com/). Provides 53 accessible primitives and 14 domain-specific components — all tree-shakeable with per-component entry points.
+
+## Installation
+
+```bash
+npm install @omnifyjp/ui
+# or
+pnpm add @omnifyjp/ui
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom
+```
+
+Optional peers (only needed if you use specific components):
+
+| Peer | Required By |
+|------|-------------|
+| `date-fns` (>=3) | `calendar`, `date-picker` |
+| `recharts` (>=2) | `chart` |
+| `react-hook-form` (>=7) | `form` |
+
+---
+
+## Usage
+
+### Import individual components (recommended)
+
+```tsx
+import { Button } from '@omnifyjp/ui/components/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@omnifyjp/ui/components/card';
+import { Input } from '@omnifyjp/ui/components/input';
+```
+
+### Import from barrel (convenience)
+
+```tsx
+import { Button, Card, Input } from '@omnifyjp/ui';
+```
+
+### Import utilities
+
+```tsx
+import { cn } from '@omnifyjp/ui/lib/utils';
+```
+
+### Import hooks
+
+```tsx
+import { useIsMobile } from '@omnifyjp/ui/hooks/use-mobile';
+```
+
+### Import theme CSS
+
+```css
+@import '@omnifyjp/ui/styles';
+```
+
+---
+
+## Components
+
+### Shadcn UI Primitives (53)
+
+All Shadcn primitives are included, fully accessible via Radix UI, with dark mode support.
+
+| Category | Components |
+|----------|-----------|
+| **Layout** | `aspect-ratio`, `card`, `resizable`, `scroll-area`, `separator`, `skeleton` |
+| **Navigation** | `breadcrumb`, `menubar`, `navigation-menu`, `pagination`, `tabs` |
+| **Data Display** | `avatar`, `badge`, `calendar`, `carousel`, `chart`, `hover-card`, `progress`, `table`, `tooltip` |
+| **Data Entry** | `button`, `checkbox`, `color-picker`, `combobox`, `date-picker`, `file-upload`, `form`, `input`, `input-otp`, `label`, `radio-group`, `rating`, `select`, `slider`, `switch`, `tag-input`, `textarea`, `time-picker`, `toggle`, `toggle-group` |
+| **Feedback** | `alert`, `alert-dialog`, `sonner` (toast) |
+| **Overlay** | `command`, `context-menu`, `dialog`, `drawer`, `dropdown-menu`, `popover`, `sheet` |
+| **Composition** | `accordion`, `collapsible`, `sidebar` |
+
+### Domain Components (14)
+
+Shared business-logic components, locale-agnostic (accept `labels` prop with English defaults).
+
+#### Calendar
+
+| Component | Description |
+|-----------|-------------|
+| `CalendarMini` | Compact month calendar with event dots |
+| `CalendarEventChip` | Colored event bar for calendar grids |
+| `CalendarEventSheet` | Side panel for event details |
+| `CalendarToolbar` | Date navigation with view switcher (month/week/day) |
+| `CalendarCategoryBadge` | Colored category label |
+
+#### Workflow
+
+| Component | Description |
+|-----------|-------------|
+| `WorkflowStepper` | Multi-step progress indicator |
+| `WorkflowDiagram` | Visual flow diagram with stages |
+| `WorkflowStatusBadge` | Status indicator (active/draft/archived) |
+| `WorkflowCategoryBadge` | Category badge for workflows |
+| `StageTypeBadge` | Stage type indicator (approval/action/notification) |
+
+#### RBAC
+
+| Component | Description |
+|-----------|-------------|
+| `PermissionGrid` | Module x Action permission matrix with checkboxes |
+| `ScopeTree` | Hierarchical scope selector with inheritance |
+| `ScopeTypeBadge` | Scope level indicator (global/org/branch/team) |
+
+#### Forms
+
+| Component | Description |
+|-----------|-------------|
+| `SlugInput` | URL-friendly slug input with auto-generation |
+
+---
+
+## Theme & Styling
+
+### CSS Design Tokens
+
+The package ships a `theme.css` with a complete token system. Import it in your app:
+
+```css
+/* In your global CSS */
+@import '@omnifyjp/ui/styles';
+```
+
+### Density Tokens
+
+All spacing and sizing is controlled via CSS custom properties:
+
+| Token | Value | Tailwind Class | Use For |
+|-------|-------|----------------|---------|
+| `--density-page` | 16px | `p-page` | Page padding |
+| `--density-section` | 16px | `gap-section` | Section gaps |
+| `--density-element` | 32px | `h-element` | Button/Input height |
+| `--density-element-sm` | 28px | `h-element-sm` | Small inputs |
+| `--density-element-lg` | 36px | `h-element-lg` | Large buttons |
+| `--density-card` | 16px | `px-card`, `pt-card` | Card padding |
+| `--density-dialog` | 20px | `p-dialog` | Dialog padding |
+| `--header-height` | 48px | `h-header` | App header height |
+| `--density-page-title` | 20px | `text-page-title` | Page title font size |
+
+### Dark Mode
+
+All components support dark mode via the `dark` class on `<html>`. Color tokens auto-switch:
+
+```tsx
+// Semantic tokens (auto dark mode)
+<div className="bg-background text-foreground border-border">
+  <p className="text-muted-foreground">Secondary text</p>
+</div>
+
+// Accent colors with dark variants
+<Badge className="bg-red-50 dark:bg-red-500/15 text-red-600 dark:text-red-400">
+  Urgent
+</Badge>
+```
+
+---
+
+## Utility: `cn()`
+
+Class merging utility combining `clsx` + `tailwind-merge`:
+
+```tsx
+import { cn } from '@omnifyjp/ui/lib/utils';
+
+<div className={cn('p-4 bg-card', isActive && 'ring-2 ring-primary', className)} />
+```
+
+---
+
+## Tree Shaking
+
+The package is fully tree-shakeable:
+
+- **Per-component entry points**: `@omnifyjp/ui/components/button` only loads `button.js`
+- **`sideEffects: false`**: Bundlers can safely eliminate unused code
+- **ESM only**: Modern `import`/`export` for optimal bundling
+
+---
+
+## Package Exports
+
+```
+@omnifyjp/ui                    → all components (barrel)
+@omnifyjp/ui/components/button  → Button, buttonVariants
+@omnifyjp/ui/components/card    → Card, CardHeader, CardContent, ...
+@omnifyjp/ui/components/*       → any component by name
+@omnifyjp/ui/lib/utils          → cn()
+@omnifyjp/ui/hooks/use-mobile   → useIsMobile()
+@omnifyjp/ui/styles             → theme.css
+```
+
+---
+
+## Tech Stack
+
+- **React** 18+ with new JSX transform
+- **TypeScript** (strict mode, full type definitions)
+- **Tailwind CSS v4** with design tokens
+- **Radix UI** for accessible primitives
+- **class-variance-authority** for component variants
+- **cmdk** for command palette
+- **embla-carousel-react** for carousel
+- **react-day-picker** for calendar/date-picker
+- **react-resizable-panels** for resizable layouts
+- **vaul** for drawer component
+- **sonner** for toast notifications
+- **lucide-react** for icons
+
+---
+
+## Related Packages
+
+| Package | Description |
+|---------|-------------|
+| [`@omnifyjp/shell`](https://www.npmjs.com/package/@omnifyjp/shell) | App shell framework (sidebar, header, i18n, theming) — depends on this package |
+| [`@omnifyjp/editor`](https://www.npmjs.com/package/@omnifyjp/editor) | Rich text editors (Tiptap + BlockNote) |
+
+---
+
+## License
+
+MIT

package/dist/chunk-23SALQ3G.js

@@ -0,0 +1,219 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, CircleIcon, ChevronRightIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-[var(--density-menu-item-py)] text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+//# sourceMappingURL=chunk-23SALQ3G.js.map
+//# sourceMappingURL=chunk-23SALQ3G.js.map

package/dist/chunk-23SALQ3G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dropdown-menu.tsx"],"names":[],"mappings":"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","file":"chunk-23SALQ3G.js","sourcesContent":["import * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-[var(--density-menu-item-py)] text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};"]}

package/dist/chunk-3TGN2DFB.js

@@ -0,0 +1,41 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+export { Badge, badgeVariants };
+//# sourceMappingURL=chunk-3TGN2DFB.js.map
+//# sourceMappingURL=chunk-3TGN2DFB.js.map

package/dist/chunk-3TGN2DFB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,gZAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,gFAAA;AAAA,QACF,SAAA,EACE,sFAAA;AAAA,QACF,WAAA,EACE,2KAAA;AAAA,QACF,OAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAEA,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAC8D;AAC5D,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,MAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-3TGN2DFB.js","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../lib/utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n"]}

package/dist/chunk-3TV2IR7L.js

@@ -0,0 +1,65 @@
+import { Card, CardContent } from './chunk-OXQNDQJW.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import { GitBranch, Bell, Eye, CheckCircle, Users, ArrowRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var stageIcons = {
+  approval: CheckCircle,
+  review: Eye,
+  notification: Bell,
+  conditional: GitBranch
+};
+var stageColors = {
+  approval: "text-green-600 dark:text-green-400",
+  review: "text-blue-600 dark:text-blue-400",
+  notification: "text-amber-600 dark:text-amber-400",
+  conditional: "text-purple-600 dark:text-purple-400"
+};
+var defaultLabels = {
+  approval: "Approval",
+  review: "Review",
+  notification: "Notification",
+  conditional: "Conditional",
+  approvers: "approvers"
+};
+function WorkflowDiagram({
+  stages,
+  currentStageId,
+  labels,
+  className
+}) {
+  const sortedStages = [...stages].sort((a, b) => a.order - b.order);
+  const resolvedLabels = { ...defaultLabels, ...labels };
+  const typeLabels = {
+    approval: resolvedLabels.approval,
+    review: resolvedLabels.review,
+    notification: resolvedLabels.notification,
+    conditional: resolvedLabels.conditional
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-2 overflow-x-auto pb-2", className), children: sortedStages.map((stage, index) => {
+    const Icon = stageIcons[stage.type];
+    const isCurrent = stage.id === currentStageId;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx(Card, { className: cn("w-48", isCurrent && "border-blue-500 dark:border-blue-400 border-2"), children: /* @__PURE__ */ jsxs(CardContent, { className: "px-3 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn("w-4 h-4", stageColors[stage.type]) }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: typeLabels[stage.type] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: stage.name }),
+        stage.approverIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Users, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            stage.approverIds.length,
+            " ",
+            resolvedLabels.approvers.toLowerCase()
+          ] })
+        ] })
+      ] }) }),
+      index < sortedStages.length - 1 && /* @__PURE__ */ jsx(ArrowRight, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" })
+    ] }, stage.id);
+  }) });
+}
+
+export { WorkflowDiagram };
+//# sourceMappingURL=chunk-3TV2IR7L.js.map
+//# sourceMappingURL=chunk-3TV2IR7L.js.map

package/dist/chunk-3TV2IR7L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/workflow-diagram.tsx"],"names":[],"mappings":"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","file":"chunk-3TV2IR7L.js","sourcesContent":["import { ArrowRight, CheckCircle, Eye, Bell, GitBranch, Users } from 'lucide-react';\nimport { cn } from '../lib/utils';\nimport { Card, CardContent } from './card';\n\n/** Supported stage types for the workflow diagram. */\nexport type WorkflowDiagramStageType = 'approval' | 'review' | 'notification' | 'conditional';\n\n/** A single stage in the workflow diagram. */\nexport interface WorkflowDiagramStage {\n  id: string;\n  name: string;\n  type: WorkflowDiagramStageType;\n  approverIds: string[];\n  order: number;\n}\n\n/** User-visible labels for the workflow diagram. All have English defaults. */\nexport interface WorkflowDiagramLabels {\n  /** Label shown above stage name for each stage type */\n  approval?: string;\n  review?: string;\n  notification?: string;\n  conditional?: string;\n  /** Text for the approver count (e.g. \"approvers\") */\n  approvers?: string;\n}\n\nexport interface WorkflowDiagramProps {\n  /** Ordered list of stages to display. Will be sorted by `order`. */\n  stages: WorkflowDiagramStage[];\n  /** The id of the currently active stage. Highlighted with a blue border. */\n  currentStageId?: string;\n  /** User-visible labels with English defaults. */\n  labels?: WorkflowDiagramLabels;\n  /** Optional additional className for the root container. */\n  className?: string;\n}\n\nconst stageIcons: Record<WorkflowDiagramStageType, typeof CheckCircle> = {\n  approval: CheckCircle,\n  review: Eye,\n  notification: Bell,\n  conditional: GitBranch,\n};\n\nconst stageColors: Record<WorkflowDiagramStageType, string> = {\n  approval: 'text-green-600 dark:text-green-400',\n  review: 'text-blue-600 dark:text-blue-400',\n  notification: 'text-amber-600 dark:text-amber-400',\n  conditional: 'text-purple-600 dark:text-purple-400',\n};\n\nconst defaultLabels: Required<WorkflowDiagramLabels> = {\n  approval: 'Approval',\n  review: 'Review',\n  notification: 'Notification',\n  conditional: 'Conditional',\n  approvers: 'approvers',\n};\n\n/**\n * WorkflowDiagram renders a horizontal flow of workflow stages as cards\n * connected by arrows.\n *\n * Each stage card displays an icon based on stage type, the stage name,\n * and an optional approver count. The current stage is highlighted with\n * a blue border.\n */\nexport function WorkflowDiagram({\n  stages,\n  currentStageId,\n  labels,\n  className,\n}: WorkflowDiagramProps) {\n  const sortedStages = [...stages].sort((a, b) => a.order - b.order);\n\n  const resolvedLabels = { ...defaultLabels, ...labels };\n\n  const typeLabels: Record<WorkflowDiagramStageType, string> = {\n    approval: resolvedLabels.approval,\n    review: resolvedLabels.review,\n    notification: resolvedLabels.notification,\n    conditional: resolvedLabels.conditional,\n  };\n\n  return (\n    <div className={cn('flex items-start gap-2 overflow-x-auto pb-2', className)}>\n      {sortedStages.map((stage, index) => {\n        const Icon = stageIcons[stage.type];\n        const isCurrent = stage.id === currentStageId;\n\n        return (\n          <div key={stage.id} className=\"flex items-center gap-2 flex-shrink-0\">\n            <Card className={cn('w-48', isCurrent && 'border-blue-500 dark:border-blue-400 border-2')}>\n              <CardContent className=\"px-3 py-3\">\n                <div className=\"flex items-center gap-2 mb-1\">\n                  <Icon className={cn('w-4 h-4', stageColors[stage.type])} />\n                  <span className=\"text-xs font-medium text-muted-foreground\">\n                    {typeLabels[stage.type]}\n                  </span>\n                </div>\n                <p className=\"text-sm font-medium truncate\">{stage.name}</p>\n                {stage.approverIds.length > 0 && (\n                  <div className=\"flex items-center gap-1 mt-1.5 text-xs text-muted-foreground\">\n                    <Users className=\"w-3 h-3\" />\n                    <span>\n                      {stage.approverIds.length} {resolvedLabels.approvers.toLowerCase()}\n                    </span>\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n            {index < sortedStages.length - 1 && (\n              <ArrowRight className=\"w-4 h-4 text-muted-foreground flex-shrink-0\" />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/chunk-4CT5SCAH.js

@@ -0,0 +1,54 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=chunk-4CT5SCAH.js.map
+//# sourceMappingURL=chunk-4CT5SCAH.js.map

package/dist/chunk-4CT5SCAH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tooltip.tsx"],"names":[],"mappings":";;;;AAKA,SAAS,eAAA,CAAgB;AAAA,EACvB,aAAA,GAAgB,CAAA;AAAA,EAChB,GAAG;AACL,CAAA,EAA2D;AACzD,EAAA,uBACE,GAAA;AAAA,IAAkB,gBAAA,CAAA,QAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,aAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,uBACE,GAAA,CAAC,mBACC,QAAA,kBAAA,GAAA,CAAkB,gBAAA,CAAA,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA,EACxD,CAAA;AAEJ;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,2BAAyB,gBAAA,CAAA,OAAA,EAAjB,EAAyB,WAAA,EAAU,iBAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC1E;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA,CAAkB,yBAAjB,EACC,QAAA,kBAAA,IAAA;AAAA,IAAkB,gBAAA,CAAA,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,waAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAkB,gBAAA,CAAA,KAAA,EAAjB,EAAuB,SAAA,EAAU,8FAAA,EAA+F;AAAA;AAAA;AAAA,GACnI,EACF,CAAA;AAEJ","file":"chunk-4CT5SCAH.js","sourcesContent":["import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"../lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };"]}