@omnifyjp/ui 0.4.4 → 0.5.0

package/dist/chunk-KTBOZ4NE.js

@@ -1,93 +0,0 @@
-import { Checkbox } from './chunk-WL4ZO2H3.js';
-import { Separator } from './chunk-PGWNOZDX.js';
-import { cn } from './chunk-DGPY4WP3.js';
-import { useMemo } from 'react';
-import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, format, isSameMonth, isSameDay, isToday } from 'date-fns';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var defaultLabels = {
-  sun: "Sun",
-  mon: "Mon",
-  tue: "Tue",
-  wed: "Wed",
-  thu: "Thu",
-  fri: "Fri",
-  sat: "Sat",
-  categories: "Categories"
-};
-function CalendarMini({
-  currentDate,
-  selectedDate,
-  onSelectDate,
-  categories,
-  enabledCategories,
-  onToggleCategory,
-  labels: labelsProp
-}) {
-  const labels = { ...defaultLabels, ...labelsProp };
-  const days = useMemo(() => {
-    const monthStart = startOfMonth(currentDate);
-    const monthEnd = endOfMonth(currentDate);
-    const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });
-    const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
-    return eachDayOfInterval({ start: calStart, end: calEnd });
-  }, [currentDate]);
-  const weekDays = [labels.sun, labels.mon, labels.tue, labels.wed, labels.thu, labels.fri, labels.sat];
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-2", children: format(currentDate, "MMMM yyyy") }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-0", children: [
-        weekDays.map((day) => /* @__PURE__ */ jsx("div", { className: "text-center text-[10px] font-medium text-muted-foreground py-1", children: day }, day)),
-        days.map((day) => {
-          const inMonth = isSameMonth(day, currentDate);
-          const selected = isSameDay(day, selectedDate);
-          const today = isToday(day);
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onSelectDate(day),
-              className: cn(
-                "w-7 h-7 text-[11px] rounded-full flex items-center justify-center transition-colors",
-                !inMonth && "text-muted-foreground/40",
-                inMonth && !selected && "hover:bg-accent",
-                selected && "bg-primary text-primary-foreground",
-                today && !selected && "font-bold text-primary"
-              ),
-              children: format(day, "d")
-            },
-            day.toISOString()
-          );
-        })
-      ] })
-    ] }),
-    categories && categories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold mb-2", children: labels.categories }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: categories.map((cat) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "flex items-center gap-2 py-1 px-1 rounded hover:bg-accent transition-colors cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  checked: enabledCategories?.includes(cat.key) ?? false,
-                  onCheckedChange: () => onToggleCategory?.(cat.key)
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: cat.color } }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm", children: cat.label })
-            ]
-          },
-          cat.key
-        )) })
-      ] })
-    ] })
-  ] });
-}
-
-export { CalendarMini };
-//# sourceMappingURL=chunk-KTBOZ4NE.js.map
-//# sourceMappingURL=chunk-KTBOZ4NE.js.map

package/dist/chunk-KTBOZ4NE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/calendar-mini.tsx"],"names":[],"mappings":"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","file":"chunk-KTBOZ4NE.js","sourcesContent":["import { useMemo } from 'react';\nimport {\n  startOfMonth, endOfMonth, startOfWeek, endOfWeek,\n  eachDayOfInterval, isSameMonth, isSameDay, isToday, format,\n} from 'date-fns';\nimport { cn } from '../lib/utils';\nimport { Checkbox } from './checkbox';\nimport { Separator } from './separator';\n\n/** A category that can be toggled on/off in the mini calendar's filter section. */\nexport interface CalendarCategory {\n  /** Unique key for this category. */\n  key: string;\n  /** CSS color string used for the category dot. */\n  color: string;\n  /** Display label for the category. */\n  label: string;\n}\n\n/** Localizable labels for the mini calendar. All have English defaults. */\nexport interface CalendarMiniLabels {\n  /** Label for Sunday column header. */\n  sun?: string;\n  /** Label for Monday column header. */\n  mon?: string;\n  /** Label for Tuesday column header. */\n  tue?: string;\n  /** Label for Wednesday column header. */\n  wed?: string;\n  /** Label for Thursday column header. */\n  thu?: string;\n  /** Label for Friday column header. */\n  fri?: string;\n  /** Label for Saturday column header. */\n  sat?: string;\n  /** Heading text for the categories filter section. */\n  categories?: string;\n}\n\nconst defaultLabels: Required<CalendarMiniLabels> = {\n  sun: 'Sun', mon: 'Mon', tue: 'Tue', wed: 'Wed', thu: 'Thu', fri: 'Fri', sat: 'Sat',\n  categories: 'Categories',\n};\n\nexport interface CalendarMiniProps {\n  /** The month to display (any date within the target month). */\n  currentDate: Date;\n  /** The currently selected date, highlighted with primary color. */\n  selectedDate: Date;\n  /** Callback when a day cell is clicked. */\n  onSelectDate: (date: Date) => void;\n  /** Optional list of event categories for the filter section. */\n  categories?: CalendarCategory[];\n  /** Keys of currently enabled categories. */\n  enabledCategories?: string[];\n  /** Callback when a category checkbox is toggled. */\n  onToggleCategory?: (key: string) => void;\n  /** Localizable UI labels with English defaults. */\n  labels?: CalendarMiniLabels;\n}\n\n/**\n * Compact month calendar with optional category filters. Designed for sidebar\n * placement in calendar views. Locale-agnostic via the `labels` prop.\n *\n * @example\n * ```tsx\n * <CalendarMini\n *   currentDate={new Date()}\n *   selectedDate={selectedDate}\n *   onSelectDate={setSelectedDate}\n *   categories={[{ key: \"meeting\", color: \"#3b82f6\", label: \"Meeting\" }]}\n *   enabledCategories={[\"meeting\"]}\n *   onToggleCategory={(key) => toggle(key)}\n * />\n * ```\n */\nexport function CalendarMini({\n  currentDate,\n  selectedDate,\n  onSelectDate,\n  categories,\n  enabledCategories,\n  onToggleCategory,\n  labels: labelsProp,\n}: CalendarMiniProps) {\n  const labels = { ...defaultLabels, ...labelsProp };\n\n  const days = useMemo(() => {\n    const monthStart = startOfMonth(currentDate);\n    const monthEnd = endOfMonth(currentDate);\n    const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });\n    const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });\n    return eachDayOfInterval({ start: calStart, end: calEnd });\n  }, [currentDate]);\n\n  const weekDays = [labels.sun, labels.mon, labels.tue, labels.wed, labels.thu, labels.fri, labels.sat];\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Mini calendar */}\n      <div>\n        <p className=\"text-sm font-semibold mb-2\">{format(currentDate, 'MMMM yyyy')}</p>\n        <div className=\"grid grid-cols-7 gap-0\">\n          {weekDays.map(day => (\n            <div key={day} className=\"text-center text-[10px] font-medium text-muted-foreground py-1\">\n              {day}\n            </div>\n          ))}\n          {days.map(day => {\n            const inMonth = isSameMonth(day, currentDate);\n            const selected = isSameDay(day, selectedDate);\n            const today = isToday(day);\n            return (\n              <button\n                key={day.toISOString()}\n                type=\"button\"\n                onClick={() => onSelectDate(day)}\n                className={cn(\n                  'w-7 h-7 text-[11px] rounded-full flex items-center justify-center transition-colors',\n                  !inMonth && 'text-muted-foreground/40',\n                  inMonth && !selected && 'hover:bg-accent',\n                  selected && 'bg-primary text-primary-foreground',\n                  today && !selected && 'font-bold text-primary',\n                )}\n              >\n                {format(day, 'd')}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n\n      {categories && categories.length > 0 && (\n        <>\n          <Separator />\n          {/* Category filters */}\n          <div>\n            <p className=\"text-sm font-semibold mb-2\">{labels.categories}</p>\n            <div className=\"space-y-1.5\">\n              {categories.map(cat => (\n                <label\n                  key={cat.key}\n                  className=\"flex items-center gap-2 py-1 px-1 rounded hover:bg-accent transition-colors cursor-pointer\"\n                >\n                  <Checkbox\n                    checked={enabledCategories?.includes(cat.key) ?? false}\n                    onCheckedChange={() => onToggleCategory?.(cat.key)}\n                  />\n                  <div className=\"w-2.5 h-2.5 rounded-full\" style={{ backgroundColor: cat.color }} />\n                  <span className=\"text-sm\">{cat.label}</span>\n                </label>\n              ))}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-LMT327XH.js

@@ -1,56 +0,0 @@
-import { cn } from './chunk-DGPY4WP3.js';
-import { Check } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function WorkflowStepper({
-  stages,
-  history,
-  currentStageId,
-  className
-}) {
-  const sortedStages = [...stages].sort((a, b) => a.order - b.order);
-  const completedStageIds = new Set(history.map((h) => h.stageId));
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0 overflow-x-auto pb-2", className), children: sortedStages.map((stage, index) => {
-    const isCompleted = completedStageIds.has(stage.id);
-    const isCurrent = stage.id === currentStageId;
-    const historyEntry = history.find((h) => h.stageId === stage.id);
-    const isRejected = historyEntry?.decision === "rejected";
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-shrink-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors",
-              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
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "text-xs max-w-20 text-center truncate",
-              isCurrent ? "font-medium text-foreground" : "text-muted-foreground"
-            ),
-            children: stage.name
-          }
-        )
-      ] }),
-      index < sortedStages.length - 1 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "w-12 h-0.5 mx-1 mt-[-12px]",
-            isCompleted ? "bg-success" : "bg-border"
-          )
-        }
-      )
-    ] }, stage.id);
-  }) });
-}
-
-export { WorkflowStepper };
-//# sourceMappingURL=chunk-LMT327XH.js.map
-//# sourceMappingURL=chunk-LMT327XH.js.map

package/dist/chunk-LMT327XH.js.map

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

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

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

@@ -1,111 +0,0 @@
-import { Label } from './chunk-P3M5TZD2.js';
-import { cn } from './chunk-DGPY4WP3.js';
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
-import { jsx } from 'react/jsx-runtime';
-
-var Form = FormProvider;
-var FormFieldContext = React.createContext(
-  {}
-);
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
-};
-var useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-  const { id } = itemContext;
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState
-  };
-};
-var FormItemContext = React.createContext(
-  {}
-);
-function FormItem({ className, ...props }) {
-  const id = React.useId();
-  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "form-item",
-      className: cn("grid gap-2", className),
-      ...props
-    }
-  ) });
-}
-function FormLabel({
-  className,
-  ...props
-}) {
-  const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Label,
-    {
-      "data-slot": "form-label",
-      "data-error": !!error,
-      className: cn("data-[error=true]:text-destructive", className),
-      htmlFor: formItemId,
-      ...props
-    }
-  );
-}
-function FormControl({ ...props }) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      "data-slot": "form-control",
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...props
-    }
-  );
-}
-function FormDescription({ className, ...props }) {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "form-description",
-      id: formDescriptionId,
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function FormMessage({ className, ...props }) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-  if (!body) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "form-message",
-      id: formMessageId,
-      className: cn("text-destructive text-sm", className),
-      ...props,
-      children: body
-    }
-  );
-}
-
-export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
-//# sourceMappingURL=chunk-LVZNNIK4.js.map
-//# sourceMappingURL=chunk-LVZNNIK4.js.map

package/dist/chunk-LVZNNIK4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form.tsx"],"names":[],"mappings":"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","file":"chunk-LVZNNIK4.js","sourcesContent":["import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\n\nimport { cn } from \"../lib/utils\";\nimport { Label } from \"./label\";\n\n/**\n * Form provider component built on react-hook-form's FormProvider.\n * Wraps form fields and provides form context for validation, error display, and accessibility.\n *\n * @example\n * ```tsx\n * const form = useForm({ defaultValues: { email: \"\" } });\n *\n * <Form {...form}>\n *   <form onSubmit={form.handleSubmit(onSubmit)}>\n *     <FormField\n *       control={form.control}\n *       name=\"email\"\n *       render={({ field }) => (\n *         <FormItem>\n *           <FormLabel>Email</FormLabel>\n *           <FormControl>\n *             <Input placeholder=\"you@example.com\" {...field} />\n *           </FormControl>\n *           <FormDescription>Your work email address.</FormDescription>\n *           <FormMessage />\n *         </FormItem>\n *       )}\n *     />\n *     <Button type=\"submit\">Submit</Button>\n *   </form>\n * </Form>\n * ```\n */\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue,\n);\n\n/** Connects a form field to react-hook-form's Controller and provides field context. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/**\n * Hook that returns field state, IDs, and error information for the current form field.\n * Must be used within a `FormField` component.\n */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue,\n);\n\n/** Container for a single form field, grouping label, control, description, and message. */\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Label for a form field that turns red on validation error. */\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slot wrapper that wires up aria attributes for the form control. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text displayed below the form control. */\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Displays the validation error message for the form field. */\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};"]}

package/dist/chunk-MJLFJPUG.js

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

@@ -1 +0,0 @@
-{"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"]}