@omnifyjp/ui 0.5.3 → 1.0.1

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-LTTNCAAA.js

@@ -0,0 +1,138 @@
+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';
+
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          "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",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      className: cn(buttonVariants(), className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props
+    }
+  );
+}
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+//# sourceMappingURL=chunk-LTTNCAAA.js.map
+//# sourceMappingURL=chunk-LTTNCAAA.js.map

package/dist/chunk-LTTNCAAA.js.map

@@ -0,0 +1 @@
+{"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-MJLFJPUG.js

@@ -0,0 +1,143 @@
+import { Input } from './chunk-3VU56V66.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-C34KSTWA.js';
+import { Button } from './chunk-55E7D2HR.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PRESET_COLORS = [
+  "#EF4444",
+  // Red
+  "#F97316",
+  // Orange
+  "#F59E0B",
+  // Amber
+  "#EAB308",
+  // Yellow
+  "#84CC16",
+  // Lime
+  "#22C55E",
+  // Green
+  "#10B981",
+  // Emerald
+  "#14B8A6",
+  // Teal
+  "#06B6D4",
+  // Cyan
+  "#0EA5E9",
+  // Sky
+  "#3B82F6",
+  // Blue
+  "#6366F1",
+  // Indigo
+  "#8B5CF6",
+  // Purple
+  "#A855F7",
+  // Violet
+  "#D946EF",
+  // Fuchsia
+  "#EC4899",
+  // Pink
+  "#F43F5E",
+  // Rose
+  "#64748B",
+  // Slate
+  "#6B7280",
+  // Gray
+  "#000000"
+  // Black
+];
+function ColorPicker({
+  value = "#3B82F6",
+  onChange,
+  className,
+  disabled,
+  showPresets = true,
+  showInput = true
+}) {
+  const [customColor, setCustomColor] = React.useState(value);
+  const handleColorChange = (color) => {
+    setCustomColor(color);
+    onChange?.(color);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        disabled,
+        className: cn(
+          "w-full justify-start gap-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-4 w-4 rounded border border-border",
+              style: { backgroundColor: value }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: value })
+        ]
+      }
+    ) }),
+    /* @__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-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-foreground ring-2 ring-foreground ring-offset-1" : "border-border"
+            ),
+            style: { backgroundColor: color },
+            onClick: () => handleColorChange(color),
+            children: value === color && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-white mx-auto drop-shadow" })
+          },
+          color
+        )) })
+      ] }),
+      showInput && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__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,
+            {
+              value: customColor,
+              onChange: (e) => setCustomColor(e.target.value),
+              onBlur: () => {
+                if (/^#[0-9A-F]{6}$/i.test(customColor)) {
+                  handleColorChange(customColor);
+                } else {
+                  setCustomColor(value);
+                }
+              },
+              placeholder: "#000000",
+              className: "pr-10"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: customColor,
+              onChange: (e) => {
+                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-border cursor-pointer"
+            }
+          )
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { ColorPicker };
+//# sourceMappingURL=chunk-MJLFJPUG.js.map
+//# sourceMappingURL=chunk-MJLFJPUG.js.map

package/dist/chunk-MJLFJPUG.js.map

@@ -0,0 +1 @@
+{"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-MZ2P566X.js

@@ -0,0 +1,65 @@
+import { Card, CardContent } from './chunk-Z2QAABLM.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-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] })
+        ] }),
+        /* @__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-MZ2P566X.js.map
+//# sourceMappingURL=chunk-MZ2P566X.js.map

package/dist/chunk-MZ2P566X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/workflow-diagram.tsx"],"names":[],"mappings":";;;;;AA8CA,IAAM,UAAA,GAAmE;AAAA,EACvE,QAAA,EAAU,WAAA;AAAA,EACV,MAAA,EAAQ,GAAA;AAAA,EACR,YAAA,EAAc,IAAA;AAAA,EACd,WAAA,EAAa;AACf,CAAA;AAEA,IAAM,WAAA,GAAwD;AAAA,EAC5D,QAAA,EAAU,oCAAA;AAAA,EACV,MAAA,EAAQ,kCAAA;AAAA,EACR,YAAA,EAAc,oCAAA;AAAA,EACd,WAAA,EAAa;AACf,CAAA;AAEA,IAAM,aAAA,GAAiD;AAAA,EACrD,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,QAAA;AAAA,EACR,YAAA,EAAc,cAAA;AAAA,EACd,WAAA,EAAa,aAAA;AAAA,EACb,SAAA,EAAW;AACb,CAAA;AAsBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,MAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA;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;AAEjE,EAAA,MAAM,cAAA,GAAiB,EAAE,GAAG,aAAA,EAAe,GAAG,MAAA,EAAO;AAErD,EAAA,MAAM,UAAA,GAAuD;AAAA,IAC3D,UAAU,cAAA,CAAe,QAAA;AAAA,IACzB,QAAQ,cAAA,CAAe,MAAA;AAAA,IACvB,cAAc,cAAA,CAAe,YAAA;AAAA,IAC7B,aAAa,cAAA,CAAe;AAAA,GAC9B;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,6CAAA,EAA+C,SAAS,CAAA,EACxE,QAAA,EAAA,YAAA,CAAa,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AAClC,IAAA,MAAM,IAAA,GAAO,UAAA,CAAW,KAAA,CAAM,IAAI,CAAA;AAClC,IAAA,MAAM,SAAA,GAAY,MAAM,EAAA,KAAO,cAAA;AAE/B,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAmB,SAAA,EAAU,uCAAA,EAC5B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,SAAA,IAAa,yBAAyB,CAAA,EAChE,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,WAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8BAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAW,EAAA,CAAG,SAAA,EAAW,YAAY,KAAA,CAAM,IAAI,CAAC,CAAA,EAAG,CAAA;AAAA,8BACxD,MAAA,EAAA,EAAK,SAAA,EAAU,6CACb,QAAA,EAAA,UAAA,CAAW,KAAA,CAAM,IAAI,CAAA,EACxB;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAAA,EAAgC,gBAAM,IAAA,EAAK,CAAA;AAAA,QACvD,MAAM,WAAA,CAAY,MAAA,GAAS,qBAC1B,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8DAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAU,SAAA,EAAU,CAAA;AAAA,+BAC1B,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,KAAA,CAAM,WAAA,CAAY,MAAA;AAAA,YAAO,GAAA;AAAA,YAAE,cAAA,CAAe,UAAU,WAAA;AAAY,WAAA,EACnE;AAAA,SAAA,EACF;AAAA,OAAA,EAEJ,CAAA,EACF,CAAA;AAAA,MACC,QAAQ,YAAA,CAAa,MAAA,GAAS,qBAC7B,GAAA,CAAC,UAAA,EAAA,EAAW,WAAU,6CAAA,EAA8C;AAAA,KAAA,EAAA,EArB9D,MAAM,EAuBhB,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ","file":"chunk-MZ2P566X.js","sourcesContent":["import { ArrowRight, CheckCircle, Eye, Bell, GitBranch, Users } from 'lucide-react';\nimport { cn } from '../lib/utils';\nimport { Card, CardContent } from './card';\n\n/**\n * Supported stage types for the workflow diagram. Each type has a dedicated\n * icon (CheckCircle, Eye, Bell, GitBranch) and color.\n */\nexport type WorkflowDiagramStageType = 'approval' | 'review' | 'notification' | 'conditional';\n\n/** A single stage in the workflow diagram. */\nexport interface WorkflowDiagramStage {\n  /** Unique identifier for this stage. */\n  id: string;\n  /** Display name shown on the stage card. */\n  name: string;\n  /** Stage type that determines the icon and color. */\n  type: WorkflowDiagramStageType;\n  /** List of user IDs assigned as approvers. Count is displayed on the card. */\n  approverIds: string[];\n  /** Numeric order used to sort stages left-to-right. */\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 *\n * @example\n * ```tsx\n * <WorkflowDiagram\n *   stages={[\n *     { id: \"s1\", name: \"Manager Review\", type: \"review\", approverIds: [\"u1\"], order: 1 },\n *     { id: \"s2\", name: \"Final Approval\", type: \"approval\", approverIds: [\"u2\", \"u3\"], order: 2 },\n *   ]}\n *   currentStageId=\"s1\"\n *   labels={{ approvers: \"approvers\" }}\n * />\n * ```\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-primary 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-N47H4MHX.js

@@ -0,0 +1,41 @@
+import { Badge } from './chunk-A3BB5ZOC.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import { MapPin, GitBranch, Building2, Globe } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_STYLES = {
+  global: {
+    className: "bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-500/30",
+    icon: Globe
+  },
+  organization: {
+    className: "bg-purple-50 dark:bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-500/30",
+    icon: Building2
+  },
+  branch: {
+    className: "bg-amber-50 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30",
+    icon: GitBranch
+  },
+  location: {
+    className: "bg-green-50 dark:bg-green-500/15 text-green-600 dark:text-green-400 border-green-200 dark:border-green-500/30",
+    icon: MapPin
+  }
+};
+function ScopeTypeBadge({
+  type,
+  label,
+  className,
+  styles: styleOverrides
+}) {
+  const defaults = DEFAULT_STYLES[type] ?? DEFAULT_STYLES.global;
+  const Icon = styleOverrides?.icon ?? defaults.icon;
+  const badgeClassName = styleOverrides?.className ?? defaults.className;
+  return /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: cn(badgeClassName, className), children: [
+    /* @__PURE__ */ jsx(Icon, { className: "w-3 h-3 mr-1" }),
+    label
+  ] });
+}
+
+export { ScopeTypeBadge };
+//# sourceMappingURL=chunk-N47H4MHX.js.map
+//# sourceMappingURL=chunk-N47H4MHX.js.map

package/dist/chunk-N47H4MHX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/scope-type-badge.tsx"],"names":[],"mappings":";;;;;AAYA,IAAM,cAAA,GAAuD;AAAA,EAC3D,MAAA,EAAQ;AAAA,IACN,SAAA,EACE,yGAAA;AAAA,IACF,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA,EACE,qHAAA;AAAA,IACF,IAAA,EAAM;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,SAAA,EACE,+GAAA;AAAA,IACF,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EACE,+GAAA;AAAA,IACF,IAAA,EAAM;AAAA;AAEV,CAAA;AAyBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,EAAQ;AACV,CAAA,EAAwB;AACtB,EAAA,MAAM,QAAA,GAAW,cAAA,CAAe,IAAI,CAAA,IAAK,cAAA,CAAe,MAAA;AACxD,EAAA,MAAM,IAAA,GAAO,cAAA,EAAgB,IAAA,IAAQ,QAAA,CAAS,IAAA;AAC9C,EAAA,MAAM,cAAA,GAAiB,cAAA,EAAgB,SAAA,IAAa,QAAA,CAAS,SAAA;AAE7D,EAAA,uBACE,IAAA,CAAC,SAAM,OAAA,EAAQ,SAAA,EAAU,WAAW,EAAA,CAAG,cAAA,EAAgB,SAAS,CAAA,EAC9D,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,cAAA,EAAe,CAAA;AAAA,IAC9B;AAAA,GAAA,EACH,CAAA;AAEJ","file":"chunk-N47H4MHX.js","sourcesContent":["import { Globe, Building2, GitBranch, MapPin, type LucideIcon } from 'lucide-react';\nimport { Badge } from './badge';\nimport { cn } from '../lib/utils';\n\n/** Custom style and icon overrides for a scope type badge. */\nexport interface ScopeTypeBadgeStyles {\n  /** Tailwind className string for the badge background, text, and border colors. */\n  className: string;\n  /** Lucide icon component to display in the badge. */\n  icon: LucideIcon;\n}\n\nconst DEFAULT_STYLES: Record<string, ScopeTypeBadgeStyles> = {\n  global: {\n    className:\n      'bg-blue-50 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-500/30',\n    icon: Globe,\n  },\n  organization: {\n    className:\n      'bg-purple-50 dark:bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-500/30',\n    icon: Building2,\n  },\n  branch: {\n    className:\n      'bg-amber-50 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/30',\n    icon: GitBranch,\n  },\n  location: {\n    className:\n      'bg-green-50 dark:bg-green-500/15 text-green-600 dark:text-green-400 border-green-200 dark:border-green-500/30',\n    icon: MapPin,\n  },\n};\n\nexport interface ScopeTypeBadgeProps {\n  /** The scope type key (e.g. \"global\", \"organization\", \"branch\", \"location\"). */\n  type: string;\n  /** The display label for the badge. */\n  label: string;\n  /** Optional className to append to the badge. */\n  className?: string;\n  /** Override default styles and icon for the given type. */\n  styles?: Partial<ScopeTypeBadgeStyles>;\n}\n\n/**\n * Color-coded badge with an icon indicating a scope type. Ships with built-in\n * styles for global (blue/Globe), organization (purple/Building2), branch\n * (amber/GitBranch), and location (green/MapPin). Custom types fall back to\n * global styling unless overridden via `styles`.\n *\n * @example\n * ```tsx\n * <ScopeTypeBadge type=\"organization\" label=\"Organization\" />\n * <ScopeTypeBadge type=\"branch\" label=\"Branch\" />\n * ```\n */\nexport function ScopeTypeBadge({\n  type,\n  label,\n  className,\n  styles: styleOverrides,\n}: ScopeTypeBadgeProps) {\n  const defaults = DEFAULT_STYLES[type] ?? DEFAULT_STYLES.global;\n  const Icon = styleOverrides?.icon ?? defaults.icon;\n  const badgeClassName = styleOverrides?.className ?? defaults.className;\n\n  return (\n    <Badge variant=\"outline\" className={cn(badgeClassName, className)}>\n      <Icon className=\"w-3 h-3 mr-1\" />\n      {label}\n    </Badge>\n  );\n}\n"]}

package/dist/chunk-NNJTKHCE.js

@@ -0,0 +1,160 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+var SelectTrigger = React.forwardRef(({ className, size = "default", children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-element data-[size=sm]:h-element-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=chunk-NNJTKHCE.js.map
+//# sourceMappingURL=chunk-NNJTKHCE.js.map