@omnifyjp/ui 0.1.7 → 0.2.0

package/dist/chunk-A3BB5ZOC.js

@@ -0,0 +1,77 @@
+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: {
+        // Solid — color applied via compoundVariants
+        default: "",
+        // Legacy — maps to solid + destructive color (backward compatible)
+        destructive: "",
+        // Color-independent
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        // Color-aware — applied via compoundVariants
+        outline: "",
+        soft: ""
+      },
+      color: {
+        primary: "",
+        destructive: "",
+        success: "",
+        warning: "",
+        info: ""
+      }
+    },
+    compoundVariants: [
+      // ── Solid (default variant) × color ──
+      { variant: "default", color: "primary", className: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90" },
+      { variant: "default", color: "destructive", className: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90" },
+      { variant: "default", color: "success", className: "border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90" },
+      { variant: "default", color: "warning", className: "border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90" },
+      { variant: "default", color: "info", className: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90" },
+      // ── Legacy destructive variant (backward compat) ──
+      { variant: "destructive", className: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90" },
+      // ── Outline × color ──
+      { variant: "outline", color: "primary", className: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground" },
+      { variant: "outline", color: "destructive", className: "border-destructive/50 text-destructive [a&]:hover:bg-destructive/10" },
+      { variant: "outline", color: "success", className: "border-success/50 text-success [a&]:hover:bg-success/10" },
+      { variant: "outline", color: "warning", className: "border-warning/50 text-warning [a&]:hover:bg-warning/10" },
+      { variant: "outline", color: "info", className: "border-info/50 text-info [a&]:hover:bg-info/10" },
+      // ── Soft × color ──
+      { variant: "soft", color: "primary", className: "border-transparent bg-primary/10 text-primary [a&]:hover:bg-primary/20" },
+      { variant: "soft", color: "destructive", className: "border-transparent bg-destructive/10 text-destructive [a&]:hover:bg-destructive/20" },
+      { variant: "soft", color: "success", className: "border-transparent bg-success/10 text-success [a&]:hover:bg-success/20" },
+      { variant: "soft", color: "warning", className: "border-transparent bg-warning/10 text-warning [a&]:hover:bg-warning/20" },
+      { variant: "soft", color: "info", className: "border-transparent bg-info/10 text-info [a&]:hover:bg-info/20" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  color,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant, color }), className),
+      ...props
+    }
+  );
+}
+
+export { Badge, badgeVariants };
+//# sourceMappingURL=chunk-A3BB5ZOC.js.map
+//# sourceMappingURL=chunk-A3BB5ZOC.js.map

package/dist/chunk-A3BB5ZOC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge.tsx"],"names":[],"mappings":"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","file":"chunk-A3BB5ZOC.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\";\nimport type { UIColor } from \"../lib/types\";\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        // Solid — color applied via compoundVariants\n        default: \"\",\n        // Legacy — maps to solid + destructive color (backward compatible)\n        destructive: \"\",\n        // Color-independent\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        // Color-aware — applied via compoundVariants\n        outline: \"\",\n        soft: \"\",\n      },\n      color: {\n        primary: \"\",\n        destructive: \"\",\n        success: \"\",\n        warning: \"\",\n        info: \"\",\n      },\n    },\n    compoundVariants: [\n      // ── Solid (default variant) × color ──\n      { variant: \"default\", color: \"primary\", className: \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\" },\n      { variant: \"default\", color: \"destructive\", className: \"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90\" },\n      { variant: \"default\", color: \"success\", className: \"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90\" },\n      { variant: \"default\", color: \"warning\", className: \"border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90\" },\n      { variant: \"default\", color: \"info\", className: \"border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90\" },\n\n      // ── Legacy destructive variant (backward compat) ──\n      { variant: \"destructive\", className: \"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90\" },\n\n      // ── Outline × color ──\n      { variant: \"outline\", color: \"primary\", className: \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\" },\n      { variant: \"outline\", color: \"destructive\", className: \"border-destructive/50 text-destructive [a&]:hover:bg-destructive/10\" },\n      { variant: \"outline\", color: \"success\", className: \"border-success/50 text-success [a&]:hover:bg-success/10\" },\n      { variant: \"outline\", color: \"warning\", className: \"border-warning/50 text-warning [a&]:hover:bg-warning/10\" },\n      { variant: \"outline\", color: \"info\", className: \"border-info/50 text-info [a&]:hover:bg-info/10\" },\n\n      // ── Soft × color ──\n      { variant: \"soft\", color: \"primary\", className: \"border-transparent bg-primary/10 text-primary [a&]:hover:bg-primary/20\" },\n      { variant: \"soft\", color: \"destructive\", className: \"border-transparent bg-destructive/10 text-destructive [a&]:hover:bg-destructive/20\" },\n      { variant: \"soft\", color: \"success\", className: \"border-transparent bg-success/10 text-success [a&]:hover:bg-success/20\" },\n      { variant: \"soft\", color: \"warning\", className: \"border-transparent bg-warning/10 text-warning [a&]:hover:bg-warning/20\" },\n      { variant: \"soft\", color: \"info\", className: \"border-transparent bg-info/10 text-info [a&]:hover:bg-info/20\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      color: \"primary\",\n    },\n  },\n);\n\ninterface BadgeProps\n  extends React.ComponentProps<\"span\">,\n    Omit<VariantProps<typeof badgeVariants>, \"color\"> {\n  /**\n   * Semantic color intent.\n   *\n   * @default \"primary\"\n   * @example\n   * ```tsx\n   * <Badge color=\"success\">Done</Badge>\n   * <Badge color=\"warning\">Pending</Badge>\n   * <Badge variant=\"soft\" color=\"destructive\">Failed</Badge>\n   * ```\n   */\n  color?: UIColor;\n  /** Render as a child component using Radix Slot. @default false */\n  asChild?: boolean;\n}\n\n/**\n * Inline status descriptor with semantic colors and visual variants.\n *\n * @example\n * ```tsx\n * // Solid (default)\n * <Badge>New</Badge>\n * <Badge color=\"success\">Done</Badge>\n * <Badge color=\"warning\">Pending</Badge>\n *\n * // Soft (light tinted background)\n * <Badge variant=\"soft\" color=\"success\">Approved</Badge>\n * <Badge variant=\"soft\" color=\"destructive\">Rejected</Badge>\n *\n * // Outline\n * <Badge variant=\"outline\">v1.0.0</Badge>\n * <Badge variant=\"outline\" color=\"info\">Beta</Badge>\n *\n * // Legacy (still works)\n * <Badge variant=\"destructive\">Error</Badge>\n * <Badge variant=\"secondary\">Draft</Badge>\n * ```\n */\nfunction Badge({\n  className,\n  variant,\n  color,\n  asChild = false,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, color }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\nexport type { BadgeProps };\n"]}

package/dist/{chunk-EIY5FVSV.js → chunk-BAQWGQJG.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-OBZQTY3H.js';
+import { Badge } from './chunk-A3BB5ZOC.js';
 import { cn } from './chunk-DGPY4WP3.js';
 import { useState } from 'react';
 import { ChevronRight, MapPin, GitBranch, Building2, Globe } from 'lucide-react';
@@ -102,5 +102,5 @@ function ScopeTreeNodeItem({
 }
 
 export { ScopeTree };
-//# sourceMappingURL=chunk-EIY5FVSV.js.map
-//# sourceMappingURL=chunk-EIY5FVSV.js.map
+//# sourceMappingURL=chunk-BAQWGQJG.js.map
+//# sourceMappingURL=chunk-BAQWGQJG.js.map

package/dist/{chunk-EIY5FVSV.js.map → chunk-BAQWGQJG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/scope-tree.tsx"],"names":[],"mappings":"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","file":"chunk-EIY5FVSV.js","sourcesContent":["import { useState } from 'react';\nimport { ChevronRight, Globe, Building2, GitBranch, MapPin, type LucideIcon } from 'lucide-react';\nimport { Badge } from './badge';\nimport { cn } from '../lib/utils';\n\n/** A small badge displayed next to a tree node name. */\nexport interface ScopeTreeBadge {\n  /** Badge display text. */\n  label: string;\n  /** Optional className to style this badge. */\n  className?: string;\n}\n\n/** A node in the scope tree hierarchy. */\nexport interface ScopeTreeNode {\n  /** Unique identifier for this node, or `null` for root/global nodes. */\n  id: string | null;\n  /** Display name of this scope. */\n  name: string;\n  /** Scope type key (e.g. \"global\", \"organization\", \"branch\", \"location\"). Determines the icon. */\n  type: string;\n  /** Optional child nodes for nested hierarchy. */\n  children?: ScopeTreeNode[];\n  /** Optional badges displayed next to the node name. */\n  badges?: ScopeTreeBadge[];\n}\n\n/** Represents the currently selected scope in the tree. */\nexport interface ScopeTreeSelectedScope {\n  /** The scope type key of the selected node. */\n  type: string;\n  /** The ID of the selected node, or `null` for root/global nodes. */\n  id: string | null;\n}\n\n/** Localizable labels for the scope tree. Currently reserved for future extensibility. */\nexport interface ScopeTreeLabels {\n  /** No labels are required by default; provided for future extensibility. */\n  [key: string]: string;\n}\n\nexport interface ScopeTreeProps {\n  /** Tree data: an array of root-level scope nodes. */\n  nodes: ScopeTreeNode[];\n  /** The currently selected scope (type + id). Used for highlighting. */\n  selectedScope?: ScopeTreeSelectedScope;\n  /** Callback when a node is clicked. */\n  onSelect?: (scope: ScopeTreeSelectedScope) => void;\n  /** Localizable labels. Currently reserved for future extensibility. */\n  labels?: Partial<ScopeTreeLabels>;\n  /** Default expansion depth. Nodes at depth < this value start expanded. Defaults to `1`. */\n  defaultExpandDepth?: number;\n  /** Custom icon map keyed by scope type. Falls back to built-in icons for global/organization/branch/location. */\n  iconMap?: Record<string, LucideIcon>;\n}\n\nconst DEFAULT_ICON_MAP: Record<string, LucideIcon> = {\n  global: Globe,\n  organization: Building2,\n  branch: GitBranch,\n  location: MapPin,\n};\n\nfunction getIcon(type: string, iconMap?: Record<string, LucideIcon>): LucideIcon {\n  if (iconMap?.[type]) return iconMap[type];\n  return DEFAULT_ICON_MAP[type] ?? Globe;\n}\n\n/**\n * Hierarchical tree view for selecting organizational scopes (e.g. global,\n * organization, branch, location). Nodes are expandable/collapsible with\n * chevron icons. Each node type has a dedicated icon. Supports custom icons\n * via `iconMap` and optional badges on nodes.\n *\n * @example\n * ```tsx\n * const nodes: ScopeTreeNode[] = [\n *   {\n *     id: null, name: \"Global\", type: \"global\",\n *     children: [\n *       { id: \"org-1\", name: \"Acme Corp\", type: \"organization\", children: [\n *         { id: \"br-1\", name: \"Tokyo HQ\", type: \"branch\" },\n *       ]},\n *     ],\n *   },\n * ];\n *\n * <ScopeTree\n *   nodes={nodes}\n *   selectedScope={{ type: \"branch\", id: \"br-1\" }}\n *   onSelect={(scope) => setSelected(scope)}\n * />\n * ```\n */\nexport function ScopeTree({\n  nodes,\n  selectedScope,\n  onSelect,\n  defaultExpandDepth = 1,\n  iconMap,\n}: ScopeTreeProps) {\n  return (\n    <div className=\"space-y-1\">\n      {nodes.map(node => (\n        <ScopeTreeNodeItem\n          key={`${node.type}-${node.id}`}\n          node={node}\n          selectedScope={selectedScope}\n          onSelect={onSelect}\n          depth={0}\n          defaultExpandDepth={defaultExpandDepth}\n          iconMap={iconMap}\n        />\n      ))}\n    </div>\n  );\n}\n\ninterface ScopeTreeNodeItemProps {\n  node: ScopeTreeNode;\n  selectedScope?: ScopeTreeSelectedScope;\n  onSelect?: (scope: ScopeTreeSelectedScope) => void;\n  depth: number;\n  defaultExpandDepth: number;\n  iconMap?: Record<string, LucideIcon>;\n}\n\nfunction ScopeTreeNodeItem({\n  node,\n  selectedScope,\n  onSelect,\n  depth,\n  defaultExpandDepth,\n  iconMap,\n}: ScopeTreeNodeItemProps) {\n  const [open, setOpen] = useState(depth < defaultExpandDepth);\n  const Icon = getIcon(node.type, iconMap);\n  const isSelected =\n    selectedScope?.type === node.type && selectedScope?.id === node.id;\n  const children = node.children ?? [];\n  const hasChildren = children.length > 0;\n  const paddingLeft = depth * 16;\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        className={cn(\n          'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left',\n          isSelected\n            ? 'bg-accent text-accent-foreground font-medium'\n            : 'hover:bg-accent/50 text-foreground',\n        )}\n        style={{ paddingLeft: `${paddingLeft + 12}px` }}\n        onClick={() => {\n          onSelect?.({ type: node.type, id: node.id });\n          if (hasChildren) setOpen(prev => !prev);\n        }}\n      >\n        {hasChildren ? (\n          <ChevronRight\n            className={cn(\n              'w-4 h-4 shrink-0 transition-transform',\n              open && 'rotate-90',\n            )}\n          />\n        ) : (\n          <span className=\"w-4\" />\n        )}\n        <Icon className=\"w-4 h-4 shrink-0 text-muted-foreground\" />\n        <span className=\"truncate flex-1\">{node.name}</span>\n        {node.badges?.map((badge, i) => (\n          <Badge\n            key={i}\n            variant=\"outline\"\n            className={cn('text-[10px] px-1 py-0', badge.className)}\n          >\n            {badge.label}\n          </Badge>\n        ))}\n      </button>\n      {open && hasChildren && (\n        <div>\n          {children.map(child => (\n            <ScopeTreeNodeItem\n              key={`${child.type}-${child.id}`}\n              node={child}\n              selectedScope={selectedScope}\n              onSelect={onSelect}\n              depth={depth + 1}\n              defaultExpandDepth={defaultExpandDepth}\n              iconMap={iconMap}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/scope-tree.tsx"],"names":[],"mappings":"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","file":"chunk-BAQWGQJG.js","sourcesContent":["import { useState } from 'react';\nimport { ChevronRight, Globe, Building2, GitBranch, MapPin, type LucideIcon } from 'lucide-react';\nimport { Badge } from './badge';\nimport { cn } from '../lib/utils';\n\n/** A small badge displayed next to a tree node name. */\nexport interface ScopeTreeBadge {\n  /** Badge display text. */\n  label: string;\n  /** Optional className to style this badge. */\n  className?: string;\n}\n\n/** A node in the scope tree hierarchy. */\nexport interface ScopeTreeNode {\n  /** Unique identifier for this node, or `null` for root/global nodes. */\n  id: string | null;\n  /** Display name of this scope. */\n  name: string;\n  /** Scope type key (e.g. \"global\", \"organization\", \"branch\", \"location\"). Determines the icon. */\n  type: string;\n  /** Optional child nodes for nested hierarchy. */\n  children?: ScopeTreeNode[];\n  /** Optional badges displayed next to the node name. */\n  badges?: ScopeTreeBadge[];\n}\n\n/** Represents the currently selected scope in the tree. */\nexport interface ScopeTreeSelectedScope {\n  /** The scope type key of the selected node. */\n  type: string;\n  /** The ID of the selected node, or `null` for root/global nodes. */\n  id: string | null;\n}\n\n/** Localizable labels for the scope tree. Currently reserved for future extensibility. */\nexport interface ScopeTreeLabels {\n  /** No labels are required by default; provided for future extensibility. */\n  [key: string]: string;\n}\n\nexport interface ScopeTreeProps {\n  /** Tree data: an array of root-level scope nodes. */\n  nodes: ScopeTreeNode[];\n  /** The currently selected scope (type + id). Used for highlighting. */\n  selectedScope?: ScopeTreeSelectedScope;\n  /** Callback when a node is clicked. */\n  onSelect?: (scope: ScopeTreeSelectedScope) => void;\n  /** Localizable labels. Currently reserved for future extensibility. */\n  labels?: Partial<ScopeTreeLabels>;\n  /** Default expansion depth. Nodes at depth < this value start expanded. Defaults to `1`. */\n  defaultExpandDepth?: number;\n  /** Custom icon map keyed by scope type. Falls back to built-in icons for global/organization/branch/location. */\n  iconMap?: Record<string, LucideIcon>;\n}\n\nconst DEFAULT_ICON_MAP: Record<string, LucideIcon> = {\n  global: Globe,\n  organization: Building2,\n  branch: GitBranch,\n  location: MapPin,\n};\n\nfunction getIcon(type: string, iconMap?: Record<string, LucideIcon>): LucideIcon {\n  if (iconMap?.[type]) return iconMap[type];\n  return DEFAULT_ICON_MAP[type] ?? Globe;\n}\n\n/**\n * Hierarchical tree view for selecting organizational scopes (e.g. global,\n * organization, branch, location). Nodes are expandable/collapsible with\n * chevron icons. Each node type has a dedicated icon. Supports custom icons\n * via `iconMap` and optional badges on nodes.\n *\n * @example\n * ```tsx\n * const nodes: ScopeTreeNode[] = [\n *   {\n *     id: null, name: \"Global\", type: \"global\",\n *     children: [\n *       { id: \"org-1\", name: \"Acme Corp\", type: \"organization\", children: [\n *         { id: \"br-1\", name: \"Tokyo HQ\", type: \"branch\" },\n *       ]},\n *     ],\n *   },\n * ];\n *\n * <ScopeTree\n *   nodes={nodes}\n *   selectedScope={{ type: \"branch\", id: \"br-1\" }}\n *   onSelect={(scope) => setSelected(scope)}\n * />\n * ```\n */\nexport function ScopeTree({\n  nodes,\n  selectedScope,\n  onSelect,\n  defaultExpandDepth = 1,\n  iconMap,\n}: ScopeTreeProps) {\n  return (\n    <div className=\"space-y-1\">\n      {nodes.map(node => (\n        <ScopeTreeNodeItem\n          key={`${node.type}-${node.id}`}\n          node={node}\n          selectedScope={selectedScope}\n          onSelect={onSelect}\n          depth={0}\n          defaultExpandDepth={defaultExpandDepth}\n          iconMap={iconMap}\n        />\n      ))}\n    </div>\n  );\n}\n\ninterface ScopeTreeNodeItemProps {\n  node: ScopeTreeNode;\n  selectedScope?: ScopeTreeSelectedScope;\n  onSelect?: (scope: ScopeTreeSelectedScope) => void;\n  depth: number;\n  defaultExpandDepth: number;\n  iconMap?: Record<string, LucideIcon>;\n}\n\nfunction ScopeTreeNodeItem({\n  node,\n  selectedScope,\n  onSelect,\n  depth,\n  defaultExpandDepth,\n  iconMap,\n}: ScopeTreeNodeItemProps) {\n  const [open, setOpen] = useState(depth < defaultExpandDepth);\n  const Icon = getIcon(node.type, iconMap);\n  const isSelected =\n    selectedScope?.type === node.type && selectedScope?.id === node.id;\n  const children = node.children ?? [];\n  const hasChildren = children.length > 0;\n  const paddingLeft = depth * 16;\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        className={cn(\n          'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left',\n          isSelected\n            ? 'bg-accent text-accent-foreground font-medium'\n            : 'hover:bg-accent/50 text-foreground',\n        )}\n        style={{ paddingLeft: `${paddingLeft + 12}px` }}\n        onClick={() => {\n          onSelect?.({ type: node.type, id: node.id });\n          if (hasChildren) setOpen(prev => !prev);\n        }}\n      >\n        {hasChildren ? (\n          <ChevronRight\n            className={cn(\n              'w-4 h-4 shrink-0 transition-transform',\n              open && 'rotate-90',\n            )}\n          />\n        ) : (\n          <span className=\"w-4\" />\n        )}\n        <Icon className=\"w-4 h-4 shrink-0 text-muted-foreground\" />\n        <span className=\"truncate flex-1\">{node.name}</span>\n        {node.badges?.map((badge, i) => (\n          <Badge\n            key={i}\n            variant=\"outline\"\n            className={cn('text-[10px] px-1 py-0', badge.className)}\n          >\n            {badge.label}\n          </Badge>\n        ))}\n      </button>\n      {open && hasChildren && (\n        <div>\n          {children.map(child => (\n            <ScopeTreeNodeItem\n              key={`${child.type}-${child.id}`}\n              node={child}\n              selectedScope={selectedScope}\n              onSelect={onSelect}\n              depth={depth + 1}\n              defaultExpandDepth={defaultExpandDepth}\n              iconMap={iconMap}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-UAX7UJIJ.js → chunk-G7HTZBUR.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-Y65FNGEE.js';
+import { Button } from './chunk-55E7D2HR.js';
 import { cn } from './chunk-DGPY4WP3.js';
 import * as React from 'react';
 import { Upload, X, FileImage, FileVideo, FileText, File } from 'lucide-react';
@@ -110,18 +110,18 @@ function FileUpload({
         onClick: () => !disabled && inputRef.current?.click(),
         className: cn(
           "relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
-          dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400",
+          dragActive ? "border-primary bg-primary/5" : "border-border hover:border-border/80",
           disabled && "opacity-50 cursor-not-allowed",
-          error && "border-red-500"
+          error && "border-destructive"
         ),
         children: [
-          /* @__PURE__ */ jsx(Upload, { className: "mx-auto h-12 w-12 text-gray-400 mb-4" }),
-          /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600 mb-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-blue-600", children: "Nh\u1EA5p \u0111\u1EC3 ch\u1ECDn file" }),
+          /* @__PURE__ */ jsx(Upload, { className: "mx-auto h-12 w-12 text-muted-foreground mb-4" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-primary", children: "Nh\u1EA5p \u0111\u1EC3 ch\u1ECDn file" }),
             " ",
             "ho\u1EB7c k\xE9o th\u1EA3 file v\xE0o \u0111\xE2y"
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
             accept && /* @__PURE__ */ jsxs("div", { children: [
               "\u0110\u1ECBnh d\u1EA1ng: ",
               accept
@@ -140,7 +140,7 @@ function FileUpload({
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-red-600", children: error }),
+    error && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-destructive", children: error }),
     showPreview && value.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: value.map((file, index) => {
       const FileIcon = getFileIcon(file);
       const isImage = file.type.startsWith("image/");
@@ -148,7 +148,7 @@ function FileUpload({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex items-center gap-3 p-3 border rounded-lg bg-gray-50",
+          className: "flex items-center gap-3 p-3 border rounded-lg bg-muted",
           children: [
             previewUrl ? /* @__PURE__ */ jsx(
               "img",
@@ -157,10 +157,10 @@ function FileUpload({
                 alt: file.name,
                 className: "w-10 h-10 rounded object-cover"
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "w-5 h-5 text-gray-600" }) }),
+            ) : /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "w-5 h-5 text-muted-foreground" }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium truncate", children: file.name }),
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: formatFileSize(file.size) })
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: formatFileSize(file.size) })
             ] }),
             /* @__PURE__ */ jsx(
               Button,
@@ -183,5 +183,5 @@ function FileUpload({
 }
 
 export { FileUpload };
-//# sourceMappingURL=chunk-UAX7UJIJ.js.map
-//# sourceMappingURL=chunk-UAX7UJIJ.js.map
+//# sourceMappingURL=chunk-G7HTZBUR.js.map
+//# sourceMappingURL=chunk-G7HTZBUR.js.map

package/dist/{chunk-UAX7UJIJ.js.map → chunk-G7HTZBUR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/file-upload.tsx"],"names":["error"],"mappings":"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","file":"chunk-UAX7UJIJ.js","sourcesContent":["import * as React from \"react\";\nimport { Upload, X, File, FileImage, FileText, FileVideo } from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\n\ninterface FileUploadProps {\n  /** Array of currently uploaded File objects. */\n  value?: File[];\n  /** Callback fired when files are added or removed. */\n  onChange?: (files: File[]) => void;\n  /** Accepted file types (e.g., `\"image/*,.pdf\"`). Maps to the HTML `accept` attribute. */\n  accept?: string;\n  /** Whether multiple files can be selected at once. Defaults to `false`. */\n  multiple?: boolean;\n  /** Maximum file size in bytes. Defaults to 10 MB. */\n  maxSize?: number;\n  /** Maximum number of files allowed. */\n  maxFiles?: number;\n  /** Whether the upload area is disabled. */\n  disabled?: boolean;\n  /** Additional CSS class for the outer wrapper. */\n  className?: string;\n  /** Whether to show the file list with previews below the drop zone. Defaults to `true`. */\n  showPreview?: boolean;\n}\n\n/**\n * File upload component with drag-and-drop support and file previews.\n * Validates file size and count, shows image thumbnails, and provides remove buttons.\n *\n * @example\n * ```tsx\n * const [files, setFiles] = useState<File[]>([]);\n *\n * <FileUpload\n *   value={files}\n *   onChange={setFiles}\n *   accept=\"image/*,.pdf\"\n *   multiple\n *   maxSize={5 * 1024 * 1024}\n *   maxFiles={3}\n * />\n * ```\n */\nexport function FileUpload({\n  value = [],\n  onChange,\n  accept,\n  multiple = false,\n  maxSize = 10 * 1024 * 1024, // 10MB default\n  maxFiles,\n  disabled,\n  className,\n  showPreview = true,\n}: FileUploadProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [dragActive, setDragActive] = React.useState(false);\n  const [error, setError] = React.useState<string>(\"\");\n\n  const handleDrag = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.type === \"dragenter\" || e.type === \"dragover\") {\n      setDragActive(true);\n    } else if (e.type === \"dragleave\") {\n      setDragActive(false);\n    }\n  };\n\n  const validateFiles = (files: File[]): { valid: File[]; error?: string } => {\n    setError(\"\");\n\n    // Check max files\n    if (maxFiles && value.length + files.length > maxFiles) {\n      return {\n        valid: [],\n        error: `Chỉ được chọn tối đa ${maxFiles} file`,\n      };\n    }\n\n    // Check file size\n    const oversizedFiles = files.filter((file) => file.size > maxSize);\n    if (oversizedFiles.length > 0) {\n      return {\n        valid: [],\n        error: `File vượt quá dung lượng cho phép (${Math.round(maxSize / 1024 / 1024)}MB)`,\n      };\n    }\n\n    return { valid: files };\n  };\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setDragActive(false);\n\n    if (disabled) return;\n\n    const droppedFiles = Array.from(e.dataTransfer.files);\n    const { valid, error } = validateFiles(droppedFiles);\n\n    if (error) {\n      setError(error);\n      return;\n    }\n\n    onChange?.([...value, ...valid]);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    const selectedFiles = Array.from(e.target.files || []);\n    const { valid, error } = validateFiles(selectedFiles);\n\n    if (error) {\n      setError(error);\n      return;\n    }\n\n    onChange?.([...value, ...valid]);\n\n    // Reset input\n    if (inputRef.current) {\n      inputRef.current.value = \"\";\n    }\n  };\n\n  const handleRemove = (index: number) => {\n    onChange?.(value.filter((_, i) => i !== index));\n  };\n\n  const getFileIcon = (file: File) => {\n    if (file.type.startsWith(\"image/\")) return FileImage;\n    if (file.type.startsWith(\"video/\")) return FileVideo;\n    if (file.type.startsWith(\"text/\")) return FileText;\n    return File;\n  };\n\n  const formatFileSize = (bytes: number) => {\n    if (bytes === 0) return \"0 Bytes\";\n    const k = 1024;\n    const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + \" \" + sizes[i];\n  };\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        onChange={handleChange}\n        disabled={disabled}\n        className=\"hidden\"\n      />\n\n      {/* Upload Area */}\n      <div\n        onDragEnter={handleDrag}\n        onDragLeave={handleDrag}\n        onDragOver={handleDrag}\n        onDrop={handleDrop}\n        onClick={() => !disabled && inputRef.current?.click()}\n        className={cn(\n          \"relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors\",\n          dragActive\n            ? \"border-blue-500 bg-blue-50\"\n            : \"border-gray-300 hover:border-gray-400\",\n          disabled && \"opacity-50 cursor-not-allowed\",\n          error && \"border-red-500\"\n        )}\n      >\n        <Upload className=\"mx-auto h-12 w-12 text-gray-400 mb-4\" />\n        <div className=\"text-sm text-gray-600 mb-2\">\n          <span className=\"font-semibold text-blue-600\">Nhấp để chọn file</span>\n          {\" \"}hoặc kéo thả file vào đây\n        </div>\n        <div className=\"text-xs text-gray-500\">\n          {accept && <div>Định dạng: {accept}</div>}\n          <div>Dung lượng tối đa: {Math.round(maxSize / 1024 / 1024)}MB</div>\n          {maxFiles && <div>Số lượng tối đa: {maxFiles} file</div>}\n        </div>\n      </div>\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mt-2 text-sm text-red-600\">{error}</div>\n      )}\n\n      {/* File List */}\n      {showPreview && value.length > 0 && (\n        <div className=\"mt-4 space-y-2\">\n          {value.map((file, index) => {\n            const FileIcon = getFileIcon(file);\n            const isImage = file.type.startsWith(\"image/\");\n            const previewUrl = isImage ? URL.createObjectURL(file) : null;\n\n            return (\n              <div\n                key={`${file.name}-${index}`}\n                className=\"flex items-center gap-3 p-3 border rounded-lg bg-gray-50\"\n              >\n                {previewUrl ? (\n                  <img\n                    src={previewUrl}\n                    alt={file.name}\n                    className=\"w-10 h-10 rounded object-cover\"\n                  />\n                ) : (\n                  <div className=\"w-10 h-10 rounded bg-gray-200 flex items-center justify-center\">\n                    <FileIcon className=\"w-5 h-5 text-gray-600\" />\n                  </div>\n                )}\n\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"text-sm font-medium truncate\">{file.name}</div>\n                  <div className=\"text-xs text-gray-500\">\n                    {formatFileSize(file.size)}\n                  </div>\n                </div>\n\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => handleRemove(index)}\n                  disabled={disabled}\n                  className=\"flex-shrink-0\"\n                >\n                  <X className=\"h-4 w-4\" />\n                </Button>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/file-upload.tsx"],"names":["error"],"mappings":"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","file":"chunk-G7HTZBUR.js","sourcesContent":["import * as React from \"react\";\nimport { Upload, X, File, FileImage, FileText, FileVideo } from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\n\ninterface FileUploadProps {\n  /** Array of currently uploaded File objects. */\n  value?: File[];\n  /** Callback fired when files are added or removed. */\n  onChange?: (files: File[]) => void;\n  /** Accepted file types (e.g., `\"image/*,.pdf\"`). Maps to the HTML `accept` attribute. */\n  accept?: string;\n  /** Whether multiple files can be selected at once. Defaults to `false`. */\n  multiple?: boolean;\n  /** Maximum file size in bytes. Defaults to 10 MB. */\n  maxSize?: number;\n  /** Maximum number of files allowed. */\n  maxFiles?: number;\n  /** Whether the upload area is disabled. */\n  disabled?: boolean;\n  /** Additional CSS class for the outer wrapper. */\n  className?: string;\n  /** Whether to show the file list with previews below the drop zone. Defaults to `true`. */\n  showPreview?: boolean;\n}\n\n/**\n * File upload component with drag-and-drop support and file previews.\n * Validates file size and count, shows image thumbnails, and provides remove buttons.\n *\n * @example\n * ```tsx\n * const [files, setFiles] = useState<File[]>([]);\n *\n * <FileUpload\n *   value={files}\n *   onChange={setFiles}\n *   accept=\"image/*,.pdf\"\n *   multiple\n *   maxSize={5 * 1024 * 1024}\n *   maxFiles={3}\n * />\n * ```\n */\nexport function FileUpload({\n  value = [],\n  onChange,\n  accept,\n  multiple = false,\n  maxSize = 10 * 1024 * 1024, // 10MB default\n  maxFiles,\n  disabled,\n  className,\n  showPreview = true,\n}: FileUploadProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [dragActive, setDragActive] = React.useState(false);\n  const [error, setError] = React.useState<string>(\"\");\n\n  const handleDrag = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.type === \"dragenter\" || e.type === \"dragover\") {\n      setDragActive(true);\n    } else if (e.type === \"dragleave\") {\n      setDragActive(false);\n    }\n  };\n\n  const validateFiles = (files: File[]): { valid: File[]; error?: string } => {\n    setError(\"\");\n\n    // Check max files\n    if (maxFiles && value.length + files.length > maxFiles) {\n      return {\n        valid: [],\n        error: `Chỉ được chọn tối đa ${maxFiles} file`,\n      };\n    }\n\n    // Check file size\n    const oversizedFiles = files.filter((file) => file.size > maxSize);\n    if (oversizedFiles.length > 0) {\n      return {\n        valid: [],\n        error: `File vượt quá dung lượng cho phép (${Math.round(maxSize / 1024 / 1024)}MB)`,\n      };\n    }\n\n    return { valid: files };\n  };\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setDragActive(false);\n\n    if (disabled) return;\n\n    const droppedFiles = Array.from(e.dataTransfer.files);\n    const { valid, error } = validateFiles(droppedFiles);\n\n    if (error) {\n      setError(error);\n      return;\n    }\n\n    onChange?.([...value, ...valid]);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    const selectedFiles = Array.from(e.target.files || []);\n    const { valid, error } = validateFiles(selectedFiles);\n\n    if (error) {\n      setError(error);\n      return;\n    }\n\n    onChange?.([...value, ...valid]);\n\n    // Reset input\n    if (inputRef.current) {\n      inputRef.current.value = \"\";\n    }\n  };\n\n  const handleRemove = (index: number) => {\n    onChange?.(value.filter((_, i) => i !== index));\n  };\n\n  const getFileIcon = (file: File) => {\n    if (file.type.startsWith(\"image/\")) return FileImage;\n    if (file.type.startsWith(\"video/\")) return FileVideo;\n    if (file.type.startsWith(\"text/\")) return FileText;\n    return File;\n  };\n\n  const formatFileSize = (bytes: number) => {\n    if (bytes === 0) return \"0 Bytes\";\n    const k = 1024;\n    const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + \" \" + sizes[i];\n  };\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        onChange={handleChange}\n        disabled={disabled}\n        className=\"hidden\"\n      />\n\n      {/* Upload Area */}\n      <div\n        onDragEnter={handleDrag}\n        onDragLeave={handleDrag}\n        onDragOver={handleDrag}\n        onDrop={handleDrop}\n        onClick={() => !disabled && inputRef.current?.click()}\n        className={cn(\n          \"relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors\",\n          dragActive\n            ? \"border-primary bg-primary/5\"\n            : \"border-border hover:border-border/80\",\n          disabled && \"opacity-50 cursor-not-allowed\",\n          error && \"border-destructive\"\n        )}\n      >\n        <Upload className=\"mx-auto h-12 w-12 text-muted-foreground mb-4\" />\n        <div className=\"text-sm text-muted-foreground mb-2\">\n          <span className=\"font-semibold text-primary\">Nhấp để chọn file</span>\n          {\" \"}hoặc kéo thả file vào đây\n        </div>\n        <div className=\"text-xs text-muted-foreground\">\n          {accept && <div>Định dạng: {accept}</div>}\n          <div>Dung lượng tối đa: {Math.round(maxSize / 1024 / 1024)}MB</div>\n          {maxFiles && <div>Số lượng tối đa: {maxFiles} file</div>}\n        </div>\n      </div>\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mt-2 text-sm text-destructive\">{error}</div>\n      )}\n\n      {/* File List */}\n      {showPreview && value.length > 0 && (\n        <div className=\"mt-4 space-y-2\">\n          {value.map((file, index) => {\n            const FileIcon = getFileIcon(file);\n            const isImage = file.type.startsWith(\"image/\");\n            const previewUrl = isImage ? URL.createObjectURL(file) : null;\n\n            return (\n              <div\n                key={`${file.name}-${index}`}\n                className=\"flex items-center gap-3 p-3 border rounded-lg bg-muted\"\n              >\n                {previewUrl ? (\n                  <img\n                    src={previewUrl}\n                    alt={file.name}\n                    className=\"w-10 h-10 rounded object-cover\"\n                  />\n                ) : (\n                  <div className=\"w-10 h-10 rounded bg-muted flex items-center justify-center\">\n                    <FileIcon className=\"w-5 h-5 text-muted-foreground\" />\n                  </div>\n                )}\n\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"text-sm font-medium truncate\">{file.name}</div>\n                  <div className=\"text-xs text-muted-foreground\">\n                    {formatFileSize(file.size)}\n                  </div>\n                </div>\n\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => handleRemove(index)}\n                  disabled={disabled}\n                  className=\"flex-shrink-0\"\n                >\n                  <X className=\"h-4 w-4\" />\n                </Button>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-V4ZOPVXV.js → chunk-JAJMM32I.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-OBZQTY3H.js';
+import { Badge } from './chunk-A3BB5ZOC.js';
 import { jsx } from 'react/jsx-runtime';
 
 var defaultCategoryStyles = {
@@ -14,5 +14,5 @@ function CalendarCategoryBadge({ category, label, styles }) {
 }
 
 export { CalendarCategoryBadge };
-//# sourceMappingURL=chunk-V4ZOPVXV.js.map
-//# sourceMappingURL=chunk-V4ZOPVXV.js.map
+//# sourceMappingURL=chunk-JAJMM32I.js.map
+//# sourceMappingURL=chunk-JAJMM32I.js.map

package/dist/{chunk-V4ZOPVXV.js.map → chunk-JAJMM32I.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/calendar-category-badge.tsx"],"names":[],"mappings":";;;AAEA,IAAM,qBAAA,GAAgD;AAAA,EACpD,OAAA,EAAS,yGAAA;AAAA,EACT,QAAA,EAAU,mGAAA;AAAA,EACV,QAAA,EAAU,+GAAA;AAAA,EACV,QAAA,EAAU,qHAAA;AAAA,EACV,OAAA,EAAS;AACX,CAAA;AAsBO,SAAS,qBAAA,CAAsB,EAAE,QAAA,EAAU,KAAA,EAAO,QAAO,EAA+B;AAC7F,EAAA,MAAM,SAAA,GAAY,EAAE,GAAG,qBAAA,EAAuB,GAAG,MAAA,EAAO;AACxD,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAW,UAAU,QAAQ,CAAA,IAAK,EAAA,EACxD,QAAA,EAAA,KAAA,IAAS,QAAA,EACZ,CAAA;AAEJ","file":"chunk-V4ZOPVXV.js","sourcesContent":["import { Badge } from './badge';\n\nconst defaultCategoryStyles: Record<string, string> = {\n  meeting: 'bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-500/30',\n  deadline: 'bg-red-50 dark:bg-red-500/15 text-red-600 dark:text-red-400 border-red-200 dark:border-red-500/30',\n  reminder: 'bg-amber-50 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30',\n  personal: 'bg-purple-50 dark:bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-500/30',\n  holiday: 'bg-green-50 dark:bg-green-500/15 text-green-600 dark:text-green-400 border-green-200 dark:border-green-500/30',\n};\n\nexport interface CalendarCategoryBadgeProps {\n  /** The category key (e.g. \"meeting\", \"deadline\"). Determines the badge color from built-in or custom styles. */\n  category: string;\n  /** Override display label. Defaults to the raw category key. */\n  label?: string;\n  /** Custom className styles per category key, merged with built-in defaults. */\n  styles?: Record<string, string>;\n}\n\n/**\n * Color-coded badge for calendar event categories. Ships with built-in styles\n * for meeting (blue), deadline (red), reminder (amber), personal (purple), and\n * holiday (green). Custom categories can be styled via the `styles` prop.\n *\n * @example\n * ```tsx\n * <CalendarCategoryBadge category=\"meeting\" label=\"Meeting\" />\n * <CalendarCategoryBadge category=\"custom\" label=\"Custom\" styles={{ custom: \"bg-pink-50 text-pink-600\" }} />\n * ```\n */\nexport function CalendarCategoryBadge({ category, label, styles }: CalendarCategoryBadgeProps) {\n  const allStyles = { ...defaultCategoryStyles, ...styles };\n  return (\n    <Badge variant=\"outline\" className={allStyles[category] ?? ''}>\n      {label ?? category}\n    </Badge>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/calendar-category-badge.tsx"],"names":[],"mappings":";;;AAEA,IAAM,qBAAA,GAAgD;AAAA,EACpD,OAAA,EAAS,yGAAA;AAAA,EACT,QAAA,EAAU,mGAAA;AAAA,EACV,QAAA,EAAU,+GAAA;AAAA,EACV,QAAA,EAAU,qHAAA;AAAA,EACV,OAAA,EAAS;AACX,CAAA;AAsBO,SAAS,qBAAA,CAAsB,EAAE,QAAA,EAAU,KAAA,EAAO,QAAO,EAA+B;AAC7F,EAAA,MAAM,SAAA,GAAY,EAAE,GAAG,qBAAA,EAAuB,GAAG,MAAA,EAAO;AACxD,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAW,UAAU,QAAQ,CAAA,IAAK,EAAA,EACxD,QAAA,EAAA,KAAA,IAAS,QAAA,EACZ,CAAA;AAEJ","file":"chunk-JAJMM32I.js","sourcesContent":["import { Badge } from './badge';\n\nconst defaultCategoryStyles: Record<string, string> = {\n  meeting: 'bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-500/30',\n  deadline: 'bg-red-50 dark:bg-red-500/15 text-red-600 dark:text-red-400 border-red-200 dark:border-red-500/30',\n  reminder: 'bg-amber-50 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30',\n  personal: 'bg-purple-50 dark:bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-500/30',\n  holiday: 'bg-green-50 dark:bg-green-500/15 text-green-600 dark:text-green-400 border-green-200 dark:border-green-500/30',\n};\n\nexport interface CalendarCategoryBadgeProps {\n  /** The category key (e.g. \"meeting\", \"deadline\"). Determines the badge color from built-in or custom styles. */\n  category: string;\n  /** Override display label. Defaults to the raw category key. */\n  label?: string;\n  /** Custom className styles per category key, merged with built-in defaults. */\n  styles?: Record<string, string>;\n}\n\n/**\n * Color-coded badge for calendar event categories. Ships with built-in styles\n * for meeting (blue), deadline (red), reminder (amber), personal (purple), and\n * holiday (green). Custom categories can be styled via the `styles` prop.\n *\n * @example\n * ```tsx\n * <CalendarCategoryBadge category=\"meeting\" label=\"Meeting\" />\n * <CalendarCategoryBadge category=\"custom\" label=\"Custom\" styles={{ custom: \"bg-pink-50 text-pink-600\" }} />\n * ```\n */\nexport function CalendarCategoryBadge({ category, label, styles }: CalendarCategoryBadgeProps) {\n  const allStyles = { ...defaultCategoryStyles, ...styles };\n  return (\n    <Badge variant=\"outline\" className={allStyles[category] ?? ''}>\n      {label ?? category}\n    </Badge>\n  );\n}\n"]}

package/dist/{chunk-4SMVBJFU.js → chunk-LMT327XH.js}

@@ -22,7 +22,7 @@ function WorkflowStepper({
           {
             className: cn(
               "w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors",
-              isCompleted ? isRejected ? "bg-red-500 border-red-500 text-white" : "bg-green-500 border-green-500 text-white" : isCurrent ? "border-blue-500 bg-blue-500/10 text-blue-600 dark:text-blue-400 animate-pulse" : "border-border bg-muted text-muted-foreground"
+              isCompleted ? isRejected ? "bg-destructive border-destructive text-white" : "bg-success border-success text-white" : isCurrent ? "border-primary bg-primary/10 text-primary animate-pulse" : "border-border bg-muted text-muted-foreground"
             ),
             children: isCompleted ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }) : stage.order
           }
@@ -43,7 +43,7 @@ function WorkflowStepper({
         {
           className: cn(
             "w-12 h-0.5 mx-1 mt-[-12px]",
-            isCompleted ? "bg-green-500" : "bg-border"
+            isCompleted ? "bg-success" : "bg-border"
           )
         }
       )
@@ -52,5 +52,5 @@ function WorkflowStepper({
 }
 
 export { WorkflowStepper };
-//# sourceMappingURL=chunk-4SMVBJFU.js.map
-//# sourceMappingURL=chunk-4SMVBJFU.js.map
+//# sourceMappingURL=chunk-LMT327XH.js.map
+//# sourceMappingURL=chunk-LMT327XH.js.map

package/dist/chunk-LMT327XH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/workflow-stepper.tsx"],"names":[],"mappings":";;;;AAqDO,SAAS,eAAA,CAAgB;AAAA,EAC9B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,YAAA,GAAe,CAAC,GAAG,MAAM,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,CAAE,KAAA,GAAQ,CAAA,CAAE,KAAK,CAAA;AACjE,EAAA,MAAM,iBAAA,GAAoB,IAAI,GAAA,CAAI,OAAA,CAAQ,IAAI,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,CAAC,CAAA;AAE/D,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,8CAAA,EAAgD,SAAS,CAAA,EACzE,QAAA,EAAA,YAAA,CAAa,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AAClC,IAAA,MAAM,WAAA,GAAc,iBAAA,CAAkB,GAAA,CAAI,KAAA,CAAM,EAAE,CAAA;AAClD,IAAA,MAAM,SAAA,GAAY,MAAM,EAAA,KAAO,cAAA;AAC/B,IAAA,MAAM,YAAA,GAAe,QAAQ,IAAA,CAAK,CAAC,MAAM,CAAA,CAAE,OAAA,KAAY,MAAM,EAAE,CAAA;AAC/D,IAAA,MAAM,UAAA,GAAa,cAAc,QAAA,KAAa,UAAA;AAE9C,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAmB,SAAA,EAAU,iCAAA,EAC5B,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kCAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,sGAAA;AAAA,cACA,WAAA,GACI,UAAA,GACE,8CAAA,GACA,sCAAA,GACF,YACE,yDAAA,GACA;AAAA,aACR;AAAA,YAEC,wCAAc,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,SAAA,EAAU,IAAK,KAAA,CAAM;AAAA;AAAA,SACvD;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,uCAAA;AAAA,cACA,YAAY,6BAAA,GAAgC;AAAA,aAC9C;AAAA,YAEC,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA;AACT,OAAA,EACF,CAAA;AAAA,MACC,KAAA,GAAQ,YAAA,CAAa,MAAA,GAAS,CAAA,oBAC7B,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,4BAAA;AAAA,YACA,cAAc,YAAA,GAAe;AAAA;AAC/B;AAAA;AACF,KAAA,EAAA,EA/BM,MAAM,EAiChB,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ","file":"chunk-LMT327XH.js","sourcesContent":["import { Check } from 'lucide-react';\nimport { cn } from '../lib/utils';\n\n/** A single stage in the workflow stepper. */\nexport interface WorkflowStepperStage {\n  /** Unique identifier for this stage. */\n  id: string;\n  /** Display name shown below the stage circle. */\n  name: string;\n  /** Numeric order used to sort stages left-to-right. */\n  order: number;\n}\n\n/** A history entry representing a completed (or rejected) stage. */\nexport interface WorkflowStepperHistoryEntry {\n  /** The stage ID this history entry applies to. */\n  stageId: string;\n  /** The decision made at this stage. \"rejected\" stages render in red. */\n  decision: 'approved' | 'rejected' | 'skipped' | (string & {});\n}\n\nexport interface WorkflowStepperProps {\n  /** Ordered list of stages to display. Will be sorted by `order`. */\n  stages: WorkflowStepperStage[];\n  /** History of completed stages. Used to determine which stages are done. */\n  history: WorkflowStepperHistoryEntry[];\n  /** The id of the currently active stage. */\n  currentStageId: string;\n  /** Optional additional className for the root container. */\n  className?: string;\n}\n\n/**\n * WorkflowStepper displays a horizontal progression of workflow stages.\n *\n * Each stage is shown as a numbered circle. Completed stages show a checkmark\n * (green for approved, red for rejected). The current stage pulses with a blue\n * highlight. Stages are connected by a horizontal line that turns green once\n * the preceding stage is completed.\n *\n * @example\n * ```tsx\n * <WorkflowStepper\n *   stages={[\n *     { id: \"s1\", name: \"Submit\", order: 1 },\n *     { id: \"s2\", name: \"Review\", order: 2 },\n *     { id: \"s3\", name: \"Approve\", order: 3 },\n *   ]}\n *   history={[{ stageId: \"s1\", decision: \"approved\" }]}\n *   currentStageId=\"s2\"\n * />\n * ```\n */\nexport function WorkflowStepper({\n  stages,\n  history,\n  currentStageId,\n  className,\n}: WorkflowStepperProps) {\n  const sortedStages = [...stages].sort((a, b) => a.order - b.order);\n  const completedStageIds = new Set(history.map((h) => h.stageId));\n\n  return (\n    <div className={cn('flex items-center gap-0 overflow-x-auto pb-2', className)}>\n      {sortedStages.map((stage, index) => {\n        const isCompleted = completedStageIds.has(stage.id);\n        const isCurrent = stage.id === currentStageId;\n        const historyEntry = history.find((h) => h.stageId === stage.id);\n        const isRejected = historyEntry?.decision === 'rejected';\n\n        return (\n          <div key={stage.id} className=\"flex items-center flex-shrink-0\">\n            <div className=\"flex flex-col items-center gap-1\">\n              <div\n                className={cn(\n                  'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors',\n                  isCompleted\n                    ? isRejected\n                      ? 'bg-destructive border-destructive text-white'\n                      : 'bg-success border-success text-white'\n                    : isCurrent\n                      ? 'border-primary bg-primary/10 text-primary animate-pulse'\n                      : 'border-border bg-muted text-muted-foreground',\n                )}\n              >\n                {isCompleted ? <Check className=\"w-4 h-4\" /> : stage.order}\n              </div>\n              <span\n                className={cn(\n                  'text-xs max-w-20 text-center truncate',\n                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',\n                )}\n              >\n                {stage.name}\n              </span>\n            </div>\n            {index < sortedStages.length - 1 && (\n              <div\n                className={cn(\n                  'w-12 h-0.5 mx-1 mt-[-12px]',\n                  isCompleted ? 'bg-success' : 'bg-border',\n                )}\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-YE7EHQ6P.js → chunk-LTTNCAAA.js}

@@ -1,4 +1,4 @@
-import { buttonVariants } from './chunk-Y65FNGEE.js';
+import { buttonVariants } from './chunk-55E7D2HR.js';
 import { cn } from './chunk-DGPY4WP3.js';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -134,5 +134,5 @@ function AlertDialogCancel({
 }
 
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
-//# sourceMappingURL=chunk-YE7EHQ6P.js.map
-//# sourceMappingURL=chunk-YE7EHQ6P.js.map
+//# sourceMappingURL=chunk-LTTNCAAA.js.map
+//# sourceMappingURL=chunk-LTTNCAAA.js.map

package/dist/{chunk-YE7EHQ6P.js.map → chunk-LTTNCAAA.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/alert-dialog.tsx"],"names":[],"mappings":"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","file":"chunk-YE7EHQ6P.js","sourcesContent":["import * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"../lib/utils\";\nimport { buttonVariants } from \"./button\";\n\n/**\n * Confirmation dialog built on Radix UI AlertDialog.\n *\n * Unlike `Dialog`, an alert dialog requires an explicit user action to dismiss\n * (no click-outside or Escape by default). Use it for destructive actions or\n * important confirmations.\n *\n * @example\n * ```tsx\n * <AlertDialog open={open} onOpenChange={setOpen}>\n *   <AlertDialogTrigger asChild>\n *     <Button variant=\"destructive\">Delete Item</Button>\n *   </AlertDialogTrigger>\n *   <AlertDialogContent>\n *     <AlertDialogHeader>\n *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n *       <AlertDialogDescription>\n *         This action cannot be undone. This will permanently delete\n *         your item and remove it from our servers.\n *       </AlertDialogDescription>\n *     </AlertDialogHeader>\n *     <AlertDialogFooter>\n *       <AlertDialogCancel>Cancel</AlertDialogCancel>\n *       <AlertDialogAction>Delete</AlertDialogAction>\n *     </AlertDialogFooter>\n *   </AlertDialogContent>\n * </AlertDialog>\n * ```\n */\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\n/** Element that opens the alert dialog when clicked. Use `asChild` to merge into your own button. */\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\n/** Portal that renders alert dialog content outside the DOM hierarchy. */\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  );\n}\n\n/** Semi-transparent backdrop rendered behind the alert dialog content. */\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Alert dialog content panel with overlay backdrop. */\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\n/** Container for AlertDialogTitle and AlertDialogDescription. */\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Container for AlertDialogAction and AlertDialogCancel buttons. */\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the alert dialog. */\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible description explaining the consequences of the action. */\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Primary action button that confirms and closes the alert dialog. */\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\n/** Cancel button that dismisses the alert dialog without taking action. Styled as outline variant. */\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n};"]}
+{"version":3,"sources":["../src/components/alert-dialog.tsx"],"names":[],"mappings":"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","file":"chunk-LTTNCAAA.js","sourcesContent":["import * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"../lib/utils\";\nimport { buttonVariants } from \"./button\";\n\n/**\n * Confirmation dialog built on Radix UI AlertDialog.\n *\n * Unlike `Dialog`, an alert dialog requires an explicit user action to dismiss\n * (no click-outside or Escape by default). Use it for destructive actions or\n * important confirmations.\n *\n * @example\n * ```tsx\n * <AlertDialog open={open} onOpenChange={setOpen}>\n *   <AlertDialogTrigger asChild>\n *     <Button variant=\"destructive\">Delete Item</Button>\n *   </AlertDialogTrigger>\n *   <AlertDialogContent>\n *     <AlertDialogHeader>\n *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n *       <AlertDialogDescription>\n *         This action cannot be undone. This will permanently delete\n *         your item and remove it from our servers.\n *       </AlertDialogDescription>\n *     </AlertDialogHeader>\n *     <AlertDialogFooter>\n *       <AlertDialogCancel>Cancel</AlertDialogCancel>\n *       <AlertDialogAction>Delete</AlertDialogAction>\n *     </AlertDialogFooter>\n *   </AlertDialogContent>\n * </AlertDialog>\n * ```\n */\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\n/** Element that opens the alert dialog when clicked. Use `asChild` to merge into your own button. */\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\n/** Portal that renders alert dialog content outside the DOM hierarchy. */\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  );\n}\n\n/** Semi-transparent backdrop rendered behind the alert dialog content. */\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Alert dialog content panel with overlay backdrop. */\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\n/** Container for AlertDialogTitle and AlertDialogDescription. */\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Container for AlertDialogAction and AlertDialogCancel buttons. */\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title for the alert dialog. */\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible description explaining the consequences of the action. */\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Primary action button that confirms and closes the alert dialog. */\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\n/** Cancel button that dismisses the alert dialog without taking action. Styled as outline variant. */\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n};"]}

package/dist/{chunk-C6EAO7IA.js → chunk-MJLFJPUG.js}

@@ -1,6 +1,6 @@
 import { Input } from './chunk-3VU56V66.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-C34KSTWA.js';
-import { Button } from './chunk-Y65FNGEE.js';
+import { Button } from './chunk-55E7D2HR.js';
 import { cn } from './chunk-DGPY4WP3.js';
 import * as React from 'react';
 import { Check } from 'lucide-react';
@@ -75,7 +75,7 @@ function ColorPicker({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "h-4 w-4 rounded border border-gray-300",
+              className: "h-4 w-4 rounded border border-border",
               style: { backgroundColor: value }
             }
           ),
@@ -85,14 +85,14 @@ function ColorPicker({
     ) }),
     /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       showPresets && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium mb-2 text-gray-700", children: "M\xE0u m\u1EB7c \u0111\u1ECBnh" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium mb-2 text-foreground", children: "M\xE0u m\u1EB7c \u0111\u1ECBnh" }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-10 gap-1.5", children: PRESET_COLORS.map((color) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             className: cn(
               "h-6 w-6 rounded border-2 transition-all hover:scale-110",
-              value === color ? "border-gray-900 ring-2 ring-gray-900 ring-offset-1" : "border-gray-200"
+              value === color ? "border-foreground ring-2 ring-foreground ring-offset-1" : "border-border"
             ),
             style: { backgroundColor: color },
             onClick: () => handleColorChange(color),
@@ -102,7 +102,7 @@ function ColorPicker({
         )) })
       ] }),
       showInput && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium mb-2 text-gray-700", children: "M\xE0u t\xF9y ch\u1EC9nh" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium mb-2 text-foreground", children: "M\xE0u t\xF9y ch\u1EC9nh" }),
         /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
           /* @__PURE__ */ jsx(
             Input,
@@ -129,7 +129,7 @@ function ColorPicker({
                 setCustomColor(e.target.value);
                 handleColorChange(e.target.value);
               },
-              className: "absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded border border-gray-300 cursor-pointer"
+              className: "absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded border border-border cursor-pointer"
             }
           )
         ] }) })
@@ -139,5 +139,5 @@ function ColorPicker({
 }
 
 export { ColorPicker };
-//# sourceMappingURL=chunk-C6EAO7IA.js.map
-//# sourceMappingURL=chunk-C6EAO7IA.js.map
+//# sourceMappingURL=chunk-MJLFJPUG.js.map
+//# sourceMappingURL=chunk-MJLFJPUG.js.map

package/dist/{chunk-C6EAO7IA.js.map → chunk-MJLFJPUG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/color-picker.tsx"],"names":[],"mappings":"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","file":"chunk-C6EAO7IA.js","sourcesContent":["import * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { Input } from \"./input\";\n\nconst PRESET_COLORS = [\n  \"#EF4444\", // Red\n  \"#F97316\", // Orange\n  \"#F59E0B\", // Amber\n  \"#EAB308\", // Yellow\n  \"#84CC16\", // Lime\n  \"#22C55E\", // Green\n  \"#10B981\", // Emerald\n  \"#14B8A6\", // Teal\n  \"#06B6D4\", // Cyan\n  \"#0EA5E9\", // Sky\n  \"#3B82F6\", // Blue\n  \"#6366F1\", // Indigo\n  \"#8B5CF6\", // Purple\n  \"#A855F7\", // Violet\n  \"#D946EF\", // Fuchsia\n  \"#EC4899\", // Pink\n  \"#F43F5E\", // Rose\n  \"#64748B\", // Slate\n  \"#6B7280\", // Gray\n  \"#000000\", // Black\n];\n\ninterface ColorPickerProps {\n  /** Currently selected color as a hex string (e.g., `\"#3B82F6\"`). */\n  value?: string;\n  /** Callback fired when a color is selected. Receives a hex string. */\n  onChange?: (color: string) => void;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the color picker is disabled. */\n  disabled?: boolean;\n  /** Whether to show the preset color grid. Defaults to `true`. */\n  showPresets?: boolean;\n  /** Whether to show the custom hex input with native color picker. Defaults to `true`. */\n  showInput?: boolean;\n}\n\n/**\n * Color picker with a popover containing preset color swatches and an optional custom hex input.\n * The trigger button shows the currently selected color swatch and its hex value.\n *\n * @example\n * ```tsx\n * const [color, setColor] = useState(\"#3B82F6\");\n *\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   showPresets\n *   showInput\n * />\n * ```\n */\nexport function ColorPicker({\n  value = \"#3B82F6\",\n  onChange,\n  className,\n  disabled,\n  showPresets = true,\n  showInput = true,\n}: ColorPickerProps) {\n  const [customColor, setCustomColor] = React.useState(value);\n\n  const handleColorChange = (color: string) => {\n    setCustomColor(color);\n    onChange?.(color);\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-start gap-2\",\n            className\n          )}\n        >\n          <div\n            className=\"h-4 w-4 rounded border border-gray-300\"\n            style={{ backgroundColor: value }}\n          />\n          <span className=\"flex-1 text-left\">{value}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-64 p-3\" align=\"start\">\n        <div className=\"space-y-3\">\n          {showPresets && (\n            <div>\n              <div className=\"text-xs font-medium mb-2 text-gray-700\">\n                Màu mặc định\n              </div>\n              <div className=\"grid grid-cols-10 gap-1.5\">\n                {PRESET_COLORS.map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    className={cn(\n                      \"h-6 w-6 rounded border-2 transition-all hover:scale-110\",\n                      value === color\n                        ? \"border-gray-900 ring-2 ring-gray-900 ring-offset-1\"\n                        : \"border-gray-200\"\n                    )}\n                    style={{ backgroundColor: color }}\n                    onClick={() => handleColorChange(color)}\n                  >\n                    {value === color && (\n                      <Check className=\"w-3 h-3 text-white mx-auto drop-shadow\" />\n                    )}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {showInput && (\n            <div>\n              <div className=\"text-xs font-medium mb-2 text-gray-700\">\n                Màu tùy chỉnh\n              </div>\n              <div className=\"flex gap-2\">\n                <div className=\"relative flex-1\">\n                  <Input\n                    value={customColor}\n                    onChange={(e) => setCustomColor(e.target.value)}\n                    onBlur={() => {\n                      // Validate hex color\n                      if (/^#[0-9A-F]{6}$/i.test(customColor)) {\n                        handleColorChange(customColor);\n                      } else {\n                        setCustomColor(value);\n                      }\n                    }}\n                    placeholder=\"#000000\"\n                    className=\"pr-10\"\n                  />\n                  <input\n                    type=\"color\"\n                    value={customColor}\n                    onChange={(e) => {\n                      setCustomColor(e.target.value);\n                      handleColorChange(e.target.value);\n                    }}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded border border-gray-300 cursor-pointer\"\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/color-picker.tsx"],"names":[],"mappings":"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","file":"chunk-MJLFJPUG.js","sourcesContent":["import * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { Input } from \"./input\";\n\nconst PRESET_COLORS = [\n  \"#EF4444\", // Red\n  \"#F97316\", // Orange\n  \"#F59E0B\", // Amber\n  \"#EAB308\", // Yellow\n  \"#84CC16\", // Lime\n  \"#22C55E\", // Green\n  \"#10B981\", // Emerald\n  \"#14B8A6\", // Teal\n  \"#06B6D4\", // Cyan\n  \"#0EA5E9\", // Sky\n  \"#3B82F6\", // Blue\n  \"#6366F1\", // Indigo\n  \"#8B5CF6\", // Purple\n  \"#A855F7\", // Violet\n  \"#D946EF\", // Fuchsia\n  \"#EC4899\", // Pink\n  \"#F43F5E\", // Rose\n  \"#64748B\", // Slate\n  \"#6B7280\", // Gray\n  \"#000000\", // Black\n];\n\ninterface ColorPickerProps {\n  /** Currently selected color as a hex string (e.g., `\"#3B82F6\"`). */\n  value?: string;\n  /** Callback fired when a color is selected. Receives a hex string. */\n  onChange?: (color: string) => void;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the color picker is disabled. */\n  disabled?: boolean;\n  /** Whether to show the preset color grid. Defaults to `true`. */\n  showPresets?: boolean;\n  /** Whether to show the custom hex input with native color picker. Defaults to `true`. */\n  showInput?: boolean;\n}\n\n/**\n * Color picker with a popover containing preset color swatches and an optional custom hex input.\n * The trigger button shows the currently selected color swatch and its hex value.\n *\n * @example\n * ```tsx\n * const [color, setColor] = useState(\"#3B82F6\");\n *\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   showPresets\n *   showInput\n * />\n * ```\n */\nexport function ColorPicker({\n  value = \"#3B82F6\",\n  onChange,\n  className,\n  disabled,\n  showPresets = true,\n  showInput = true,\n}: ColorPickerProps) {\n  const [customColor, setCustomColor] = React.useState(value);\n\n  const handleColorChange = (color: string) => {\n    setCustomColor(color);\n    onChange?.(color);\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-start gap-2\",\n            className\n          )}\n        >\n          <div\n            className=\"h-4 w-4 rounded border border-border\"\n            style={{ backgroundColor: value }}\n          />\n          <span className=\"flex-1 text-left\">{value}</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-64 p-3\" align=\"start\">\n        <div className=\"space-y-3\">\n          {showPresets && (\n            <div>\n              <div className=\"text-xs font-medium mb-2 text-foreground\">\n                Màu mặc định\n              </div>\n              <div className=\"grid grid-cols-10 gap-1.5\">\n                {PRESET_COLORS.map((color) => (\n                  <button\n                    key={color}\n                    type=\"button\"\n                    className={cn(\n                      \"h-6 w-6 rounded border-2 transition-all hover:scale-110\",\n                      value === color\n                        ? \"border-foreground ring-2 ring-foreground ring-offset-1\"\n                        : \"border-border\"\n                    )}\n                    style={{ backgroundColor: color }}\n                    onClick={() => handleColorChange(color)}\n                  >\n                    {value === color && (\n                      <Check className=\"w-3 h-3 text-white mx-auto drop-shadow\" />\n                    )}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {showInput && (\n            <div>\n              <div className=\"text-xs font-medium mb-2 text-foreground\">\n                Màu tùy chỉnh\n              </div>\n              <div className=\"flex gap-2\">\n                <div className=\"relative flex-1\">\n                  <Input\n                    value={customColor}\n                    onChange={(e) => setCustomColor(e.target.value)}\n                    onBlur={() => {\n                      // Validate hex color\n                      if (/^#[0-9A-F]{6}$/i.test(customColor)) {\n                        handleColorChange(customColor);\n                      } else {\n                        setCustomColor(value);\n                      }\n                    }}\n                    placeholder=\"#000000\"\n                    className=\"pr-10\"\n                  />\n                  <input\n                    type=\"color\"\n                    value={customColor}\n                    onChange={(e) => {\n                      setCustomColor(e.target.value);\n                      handleColorChange(e.target.value);\n                    }}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded border border-border cursor-pointer\"\n                  />\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

package/dist/{chunk-QX56UQ2I.js → chunk-MZ2P566X.js}

@@ -40,7 +40,7 @@ function WorkflowDiagram({
     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__ */ jsx(Card, { className: cn("w-48", isCurrent && "border-primary 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] })
@@ -61,5 +61,5 @@ function WorkflowDiagram({
 }
 
 export { WorkflowDiagram };
-//# sourceMappingURL=chunk-QX56UQ2I.js.map
-//# sourceMappingURL=chunk-QX56UQ2I.js.map
+//# sourceMappingURL=chunk-MZ2P566X.js.map
+//# sourceMappingURL=chunk-MZ2P566X.js.map