@omnifyjp/ui 0.5.3 → 1.0.1

package/dist/chunk-55E7D2HR.js

@@ -0,0 +1,99 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        // Solid — color applied via compoundVariants
+        default: "",
+        // Legacy — maps to solid + destructive color (backward compatible)
+        destructive: "",
+        // Color-independent
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        // Color-aware — applied via compoundVariants
+        outline: "",
+        soft: "",
+        ghost: "",
+        link: ""
+      },
+      color: {
+        primary: "",
+        destructive: "",
+        success: "",
+        warning: "",
+        info: ""
+      },
+      size: {
+        xs: "h-element-xs rounded-md gap-1 px-2 text-xs has-[>svg]:px-1.5",
+        sm: "h-element-sm rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        default: "h-element px-4 py-2 has-[>svg]:px-3",
+        lg: "h-element-lg rounded-md px-6 has-[>svg]:px-4",
+        xl: "h-element-xl rounded-md px-8 text-base font-semibold has-[>svg]:px-5",
+        icon: "size-element rounded-md"
+      }
+    },
+    compoundVariants: [
+      // ── Solid (default variant) × color ──
+      { variant: "default", color: "primary", className: "bg-primary text-primary-foreground hover:bg-primary/90" },
+      { variant: "default", color: "destructive", className: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40" },
+      { variant: "default", color: "success", className: "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40" },
+      { variant: "default", color: "warning", className: "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40" },
+      { variant: "default", color: "info", className: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40" },
+      // ── Legacy destructive variant (backward compat) ──
+      { variant: "destructive", className: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40" },
+      // ── Outline × color ──
+      { variant: "outline", color: "primary", className: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50" },
+      { variant: "outline", color: "destructive", className: "border border-destructive/50 text-destructive bg-background hover:bg-destructive/10 focus-visible:ring-destructive/20" },
+      { variant: "outline", color: "success", className: "border border-success/50 text-success bg-background hover:bg-success/10 focus-visible:ring-success/20" },
+      { variant: "outline", color: "warning", className: "border border-warning/50 text-warning bg-background hover:bg-warning/10 focus-visible:ring-warning/20" },
+      { variant: "outline", color: "info", className: "border border-info/50 text-info bg-background hover:bg-info/10 focus-visible:ring-info/20" },
+      // ── Soft × color ──
+      { variant: "soft", color: "primary", className: "bg-primary/10 text-primary hover:bg-primary/20" },
+      { variant: "soft", color: "destructive", className: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:ring-destructive/20" },
+      { variant: "soft", color: "success", className: "bg-success/10 text-success hover:bg-success/20 focus-visible:ring-success/20" },
+      { variant: "soft", color: "warning", className: "bg-warning/10 text-warning hover:bg-warning/20 focus-visible:ring-warning/20" },
+      { variant: "soft", color: "info", className: "bg-info/10 text-info hover:bg-info/20 focus-visible:ring-info/20" },
+      // ── Ghost × color ──
+      { variant: "ghost", color: "primary", className: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50" },
+      { variant: "ghost", color: "destructive", className: "text-destructive hover:bg-destructive/10" },
+      { variant: "ghost", color: "success", className: "text-success hover:bg-success/10" },
+      { variant: "ghost", color: "warning", className: "text-warning hover:bg-warning/10" },
+      { variant: "ghost", color: "info", className: "text-info hover:bg-info/10" },
+      // ── Link × color ──
+      { variant: "link", color: "primary", className: "text-primary underline-offset-4 hover:underline" },
+      { variant: "link", color: "destructive", className: "text-destructive underline-offset-4 hover:underline" },
+      { variant: "link", color: "success", className: "text-success underline-offset-4 hover:underline" },
+      { variant: "link", color: "warning", className: "text-warning underline-offset-4 hover:underline" },
+      { variant: "link", color: "info", className: "text-info underline-offset-4 hover:underline" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, color, size, asChild = false, block = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-slot": "button",
+        className: cn(buttonVariants({ variant, color, size }), block && "w-full", className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+//# sourceMappingURL=chunk-55E7D2HR.js.map
+//# sourceMappingURL=chunk-55E7D2HR.js.map

package/dist/chunk-55E7D2HR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button.tsx"],"names":[],"mappings":"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","file":"chunk-55E7D2HR.js","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../lib/utils\";\nimport type { UIColor } from \"../lib/types\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        // Solid — color applied via compoundVariants\n        default: \"\",\n        // Legacy — maps to solid + destructive color (backward compatible)\n        destructive: \"\",\n        // Color-independent\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        // Color-aware — applied via compoundVariants\n        outline: \"\",\n        soft: \"\",\n        ghost: \"\",\n        link: \"\",\n      },\n      color: {\n        primary: \"\",\n        destructive: \"\",\n        success: \"\",\n        warning: \"\",\n        info: \"\",\n      },\n      size: {\n        xs: \"h-element-xs rounded-md gap-1 px-2 text-xs has-[>svg]:px-1.5\",\n        sm: \"h-element-sm rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        default: \"h-element px-4 py-2 has-[>svg]:px-3\",\n        lg: \"h-element-lg rounded-md px-6 has-[>svg]:px-4\",\n        xl: \"h-element-xl rounded-md px-8 text-base font-semibold has-[>svg]:px-5\",\n        icon: \"size-element rounded-md\",\n      },\n    },\n    compoundVariants: [\n      // ── Solid (default variant) × color ──\n      { variant: \"default\", color: \"primary\", className: \"bg-primary text-primary-foreground hover:bg-primary/90\" },\n      { variant: \"default\", color: \"destructive\", className: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\" },\n      { variant: \"default\", color: \"success\", className: \"bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40\" },\n      { variant: \"default\", color: \"warning\", className: \"bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40\" },\n      { variant: \"default\", color: \"info\", className: \"bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40\" },\n\n      // ── Legacy destructive variant (backward compat) ──\n      { variant: \"destructive\", className: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\" },\n\n      // ── Outline × color ──\n      { variant: \"outline\", color: \"primary\", className: \"border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\" },\n      { variant: \"outline\", color: \"destructive\", className: \"border border-destructive/50 text-destructive bg-background hover:bg-destructive/10 focus-visible:ring-destructive/20\" },\n      { variant: \"outline\", color: \"success\", className: \"border border-success/50 text-success bg-background hover:bg-success/10 focus-visible:ring-success/20\" },\n      { variant: \"outline\", color: \"warning\", className: \"border border-warning/50 text-warning bg-background hover:bg-warning/10 focus-visible:ring-warning/20\" },\n      { variant: \"outline\", color: \"info\", className: \"border border-info/50 text-info bg-background hover:bg-info/10 focus-visible:ring-info/20\" },\n\n      // ── Soft × color ──\n      { variant: \"soft\", color: \"primary\", className: \"bg-primary/10 text-primary hover:bg-primary/20\" },\n      { variant: \"soft\", color: \"destructive\", className: \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:ring-destructive/20\" },\n      { variant: \"soft\", color: \"success\", className: \"bg-success/10 text-success hover:bg-success/20 focus-visible:ring-success/20\" },\n      { variant: \"soft\", color: \"warning\", className: \"bg-warning/10 text-warning hover:bg-warning/20 focus-visible:ring-warning/20\" },\n      { variant: \"soft\", color: \"info\", className: \"bg-info/10 text-info hover:bg-info/20 focus-visible:ring-info/20\" },\n\n      // ── Ghost × color ──\n      { variant: \"ghost\", color: \"primary\", className: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\" },\n      { variant: \"ghost\", color: \"destructive\", className: \"text-destructive hover:bg-destructive/10\" },\n      { variant: \"ghost\", color: \"success\", className: \"text-success hover:bg-success/10\" },\n      { variant: \"ghost\", color: \"warning\", className: \"text-warning hover:bg-warning/10\" },\n      { variant: \"ghost\", color: \"info\", className: \"text-info hover:bg-info/10\" },\n\n      // ── Link × color ──\n      { variant: \"link\", color: \"primary\", className: \"text-primary underline-offset-4 hover:underline\" },\n      { variant: \"link\", color: \"destructive\", className: \"text-destructive underline-offset-4 hover:underline\" },\n      { variant: \"link\", color: \"success\", className: \"text-success underline-offset-4 hover:underline\" },\n      { variant: \"link\", color: \"warning\", className: \"text-warning underline-offset-4 hover:underline\" },\n      { variant: \"link\", color: \"info\", className: \"text-info underline-offset-4 hover:underline\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      color: \"primary\",\n      size: \"default\",\n    },\n  },\n);\n\ninterface ButtonProps\n  extends React.ComponentProps<\"button\">,\n    Omit<VariantProps<typeof buttonVariants>, \"color\"> {\n  /**\n   * Semantic color intent. Works with `variant` to produce the final appearance.\n   *\n   * | Color | Use for |\n   * |-------|---------|\n   * | `primary` | Main actions (default) |\n   * | `destructive` | Delete, errors |\n   * | `success` | Approve, confirm |\n   * | `warning` | Caution, attention |\n   * | `info` | Informational |\n   *\n   * @default \"primary\"\n   * @example\n   * ```tsx\n   * <Button color=\"success\">Approve</Button>\n   * <Button variant=\"outline\" color=\"destructive\">Reject</Button>\n   * <Button variant=\"soft\" color=\"warning\">Review</Button>\n   * ```\n   */\n  color?: UIColor;\n  /**\n   * Render as a child component using Radix Slot.\n   * When `true`, the button merges its props onto its single child element.\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Make the button take the full width of its container.\n   * @default false\n   * @example\n   * ```tsx\n   * <Button block>Full Width</Button>\n   * <Button size=\"xl\" block>Sign In</Button>\n   * ```\n   */\n  block?: boolean;\n}\n\n/**\n * Button component with semantic colors, visual variants, and standard sizes.\n *\n * Combines `variant` (how it looks) with `color` (what it means) for full flexibility.\n * All existing `variant=\"destructive\"` usage continues to work unchanged.\n *\n * @example\n * ```tsx\n * // Default (solid primary)\n * <Button>Save</Button>\n *\n * // Semantic colors\n * <Button color=\"success\">Approve</Button>\n * <Button color=\"destructive\">Delete</Button>\n * <Button color=\"warning\">Proceed with caution</Button>\n *\n * // Variant × Color combinations\n * <Button variant=\"outline\" color=\"destructive\">Reject</Button>\n * <Button variant=\"soft\" color=\"success\">Approved</Button>\n * <Button variant=\"ghost\" color=\"info\">Learn more</Button>\n *\n * // Legacy (still works)\n * <Button variant=\"destructive\">Delete</Button>\n *\n * // Sizes: xs (24px) | sm (28px) | default (32px) | lg (36px) | xl (44px) | icon (32x32)\n * <Button size=\"xs\">Tiny</Button>\n * <Button size=\"xl\" block>Sign In</Button>\n * <Button size=\"icon\"><PlusIcon /></Button>\n * ```\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, color, size, asChild = false, block = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-slot=\"button\"\n        className={cn(buttonVariants({ variant, color, size }), block && \"w-full\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\nexport type { ButtonProps };\n"]}

package/dist/chunk-67YUL2ZS.js

@@ -0,0 +1,53 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { jsx } from 'react/jsx-runtime';
+
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };
+//# sourceMappingURL=chunk-67YUL2ZS.js.map
+//# sourceMappingURL=chunk-67YUL2ZS.js.map

package/dist/chunk-67YUL2ZS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/avatar.tsx"],"names":[],"mappings":";;;;AAyBA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAiB,eAAA,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,6DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAaA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,uBACE,GAAA;AAAA,IAAiB,eAAA,CAAA,KAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA;AAAA,MACjD,GAAG;AAAA;AAAA,GACN;AAEJ;AAaA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uBACE,GAAA;AAAA,IAAiB,eAAA,CAAA,QAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,kEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-67YUL2ZS.js","sourcesContent":["import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"../lib/utils\";\n\ntype AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root>;\n\n/**\n * Circular container for user profile images or initials.\n * Use with {@link AvatarImage} and {@link AvatarFallback} for graceful loading.\n *\n * @example\n * ```tsx\n * <Avatar>\n *   <AvatarImage src=\"/avatar.jpg\" alt=\"User\" />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * // Custom size\n * <Avatar className=\"size-8\">\n *   <AvatarImage src=\"/small.jpg\" alt=\"User\" />\n *   <AvatarFallback>U</AvatarFallback>\n * </Avatar>\n * ```\n */\nfunction Avatar({\n  className,\n  ...props\n}: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(\n        \"relative flex size-10 shrink-0 overflow-hidden rounded-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>;\n\n/**\n * Image element rendered inside an {@link Avatar}. Falls back to\n * {@link AvatarFallback} when the image fails to load.\n *\n * @example\n * ```tsx\n * <AvatarImage src=\"/photo.jpg\" alt=\"Jane Doe\" />\n * ```\n */\nfunction AvatarImage({\n  className,\n  ...props\n}: AvatarImageProps) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n    />\n  );\n}\n\ntype AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback>;\n\n/**\n * Fallback content displayed while the {@link AvatarImage} is loading or\n * if it fails. Typically shows user initials (max 2 characters).\n *\n * @example\n * ```tsx\n * <AvatarFallback>JD</AvatarFallback>\n * ```\n */\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarFallbackProps) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted flex size-full items-center justify-center rounded-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback };\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };"]}

package/dist/chunk-6DIDQ4TB.js

@@ -0,0 +1,131 @@
+import { ScrollArea } from './chunk-JJSVA3TH.js';
+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 { Clock } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimePicker({
+  value,
+  onChange,
+  placeholder = "Ch\u1ECDn gi\u1EDD",
+  className,
+  disabled,
+  format24h = true
+}) {
+  const [open, setOpen] = React.useState(false);
+  const hours = format24h ? Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0")) : Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, "0"));
+  const minutes = Array.from(
+    { length: 60 },
+    (_, i) => i.toString().padStart(2, "0")
+  );
+  const [selectedHour, selectedMinute] = value?.split(":") || ["", ""];
+  const handleHourSelect = (hour) => {
+    const newTime = `${hour}:${selectedMinute || "00"}`;
+    onChange?.(newTime);
+  };
+  const handleMinuteSelect = (minute) => {
+    const newTime = `${selectedHour || "00"}:${minute}`;
+    onChange?.(newTime);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        disabled,
+        className: cn(
+          "w-full justify-start",
+          !value && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }),
+          value || placeholder
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-60 w-20 border-r", children: /* @__PURE__ */ jsx("div", { className: "p-1", children: hours.map((hour) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleHourSelect(hour),
+          className: cn(
+            "w-full px-3 py-2 text-sm rounded hover:bg-accent transition-colors text-center",
+            selectedHour === hour && "bg-primary/10 text-primary font-semibold"
+          ),
+          children: hour
+        },
+        hour
+      )) }) }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-60 w-20", children: /* @__PURE__ */ jsx("div", { className: "p-1", children: minutes.map((minute) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleMinuteSelect(minute),
+          className: cn(
+            "w-full px-3 py-2 text-sm rounded hover:bg-accent transition-colors text-center",
+            selectedMinute === minute && "bg-primary/10 text-primary font-semibold"
+          ),
+          children: minute
+        },
+        minute
+      )) }) })
+    ] }) })
+  ] });
+}
+function TimeInput({
+  value = "",
+  onChange,
+  className,
+  disabled
+}) {
+  const [localValue, setLocalValue] = React.useState(value);
+  const handleChange = (e) => {
+    let input = e.target.value.replace(/\D/g, "");
+    if (input.length >= 2) {
+      const hours = parseInt(input.substring(0, 2));
+      if (hours > 23) input = "23" + input.substring(2);
+    }
+    if (input.length >= 4) {
+      const minutes = parseInt(input.substring(2, 4));
+      if (minutes > 59) input = input.substring(0, 2) + "59";
+    }
+    if (input.length >= 2) {
+      input = input.substring(0, 2) + ":" + input.substring(2, 4);
+    }
+    setLocalValue(input);
+  };
+  const handleBlur = () => {
+    const parts = localValue.split(":");
+    if (parts.length === 2 && parts[0].length === 2 && parts[1].length === 2) {
+      onChange?.(localValue);
+    } else {
+      setLocalValue(value);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        value: localValue,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        placeholder: "00:00",
+        maxLength: 5,
+        disabled,
+        className: cn("pr-10", className)
+      }
+    ),
+    /* @__PURE__ */ jsx(Clock, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" })
+  ] });
+}
+
+export { TimeInput, TimePicker };
+//# sourceMappingURL=chunk-6DIDQ4TB.js.map
+//# sourceMappingURL=chunk-6DIDQ4TB.js.map

package/dist/chunk-6DIDQ4TB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/time-picker.tsx"],"names":[],"mappings":"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","file":"chunk-6DIDQ4TB.js","sourcesContent":["import * as React from \"react\";\nimport { Clock } from \"lucide-react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { ScrollArea } from \"./scroll-area\";\n\ninterface TimePickerProps {\n  /** Currently selected time in `\"HH:mm\"` format (e.g., `\"14:30\"`). */\n  value?: string;\n  /** Callback fired when a time is selected. Receives a `\"HH:mm\"` string. */\n  onChange?: (time: string) => void;\n  /** Placeholder text shown when no time is selected. */\n  placeholder?: string;\n  /** Additional CSS class for the trigger button. */\n  className?: string;\n  /** Whether the time picker is disabled. */\n  disabled?: boolean;\n  /** Use 24-hour format (0-23). When false, shows 12-hour (1-12). Defaults to `true`. */\n  format24h?: boolean;\n}\n\n/**\n * Time picker with a scrollable hour/minute popover.\n * Opens a two-column dropdown for selecting hours and minutes.\n *\n * @example\n * ```tsx\n * const [time, setTime] = useState<string>();\n *\n * <TimePicker\n *   value={time}\n *   onChange={setTime}\n *   placeholder=\"Select time\"\n *   format24h\n * />\n * ```\n */\nexport function TimePicker({\n  value,\n  onChange,\n  placeholder = \"Chọn giờ\",\n  className,\n  disabled,\n  format24h = true,\n}: TimePickerProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const hours = format24h\n    ? Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, \"0\"))\n    : Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, \"0\"));\n\n  const minutes = Array.from({ length: 60 }, (_, i) =>\n    i.toString().padStart(2, \"0\")\n  );\n\n  const [selectedHour, selectedMinute] = value?.split(\":\") || [\"\", \"\"];\n\n  const handleHourSelect = (hour: string) => {\n    const newTime = `${hour}:${selectedMinute || \"00\"}`;\n    onChange?.(newTime);\n  };\n\n  const handleMinuteSelect = (minute: string) => {\n    const newTime = `${selectedHour || \"00\"}:${minute}`;\n    onChange?.(newTime);\n    setOpen(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          disabled={disabled}\n          className={cn(\n            \"w-full justify-start\",\n            !value && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <Clock className=\"mr-2 h-4 w-4\" />\n          {value || placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <div className=\"flex\">\n          {/* Hours */}\n          <ScrollArea className=\"h-60 w-20 border-r\">\n            <div className=\"p-1\">\n              {hours.map((hour) => (\n                <button\n                  key={hour}\n                  type=\"button\"\n                  onClick={() => handleHourSelect(hour)}\n                  className={cn(\n                    \"w-full px-3 py-2 text-sm rounded hover:bg-accent transition-colors text-center\",\n                    selectedHour === hour && \"bg-primary/10 text-primary font-semibold\"\n                  )}\n                >\n                  {hour}\n                </button>\n              ))}\n            </div>\n          </ScrollArea>\n\n          {/* Minutes */}\n          <ScrollArea className=\"h-60 w-20\">\n            <div className=\"p-1\">\n              {minutes.map((minute) => (\n                <button\n                  key={minute}\n                  type=\"button\"\n                  onClick={() => handleMinuteSelect(minute)}\n                  className={cn(\n                    \"w-full px-3 py-2 text-sm rounded hover:bg-accent transition-colors text-center\",\n                    selectedMinute === minute && \"bg-primary/10 text-primary font-semibold\"\n                  )}\n                >\n                  {minute}\n                </button>\n              ))}\n            </div>\n          </ScrollArea>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\ninterface TimeInputProps {\n  /** Current time value in `\"HH:mm\"` format. */\n  value?: string;\n  /** Callback fired on blur with a valid `\"HH:mm\"` string. */\n  onChange?: (time: string) => void;\n  /** Additional CSS class for the input wrapper. */\n  className?: string;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n}\n\n/**\n * Inline text input for typing a time value directly.\n * Automatically formats input as `HH:mm` and validates on blur.\n *\n * @example\n * ```tsx\n * const [time, setTime] = useState(\"09:00\");\n *\n * <TimeInput value={time} onChange={setTime} />\n * ```\n */\nexport function TimeInput({\n  value = \"\",\n  onChange,\n  className,\n  disabled,\n}: TimeInputProps) {\n  const [localValue, setLocalValue] = React.useState(value);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let input = e.target.value.replace(/\\D/g, \"\"); // Remove non-digits\n\n    if (input.length >= 2) {\n      const hours = parseInt(input.substring(0, 2));\n      if (hours > 23) input = \"23\" + input.substring(2);\n    }\n\n    if (input.length >= 4) {\n      const minutes = parseInt(input.substring(2, 4));\n      if (minutes > 59) input = input.substring(0, 2) + \"59\";\n    }\n\n    // Format as HH:mm\n    if (input.length >= 2) {\n      input = input.substring(0, 2) + \":\" + input.substring(2, 4);\n    }\n\n    setLocalValue(input);\n  };\n\n  const handleBlur = () => {\n    // Validate and format\n    const parts = localValue.split(\":\");\n    if (parts.length === 2 && parts[0].length === 2 && parts[1].length === 2) {\n      onChange?.(localValue);\n    } else {\n      setLocalValue(value);\n    }\n  };\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type=\"text\"\n        value={localValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        placeholder=\"00:00\"\n        maxLength={5}\n        disabled={disabled}\n        className={cn(\"pr-10\", className)}\n      />\n      <Clock className=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n    </div>\n  );\n}\n"]}

package/dist/chunk-6GWVQB3Q.js

@@ -0,0 +1,155 @@
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from './chunk-F2ZJLKDP.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import { Command as Command$1 } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsx(
+          Command$1.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=chunk-6GWVQB3Q.js.map
+//# sourceMappingURL=chunk-6GWVQB3Q.js.map

package/dist/chunk-6GWVQB3Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/command.tsx"],"names":["CommandPrimitive"],"mappings":"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","file":"chunk-6GWVQB3Q.js","sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"./dialog\";\n\n/**\n * Command palette component built on cmdk.\n *\n * Provides a searchable, keyboard-navigable list of commands or options.\n * Use `CommandDialog` for a modal command palette, or `Command` inline\n * for embedded search/filter interfaces like comboboxes.\n *\n * @example\n * ```tsx\n * <CommandDialog open={open} onOpenChange={setOpen}>\n *   <CommandInput placeholder=\"Type a command or search...\" />\n *   <CommandList>\n *     <CommandEmpty>No results found.</CommandEmpty>\n *     <CommandGroup heading=\"Suggestions\">\n *       <CommandItem>\n *         <CalendarIcon className=\"size-4\" />\n *         Calendar\n *       </CommandItem>\n *       <CommandItem>\n *         <SearchIcon className=\"size-4\" />\n *         Search\n *         <CommandShortcut>Ctrl+K</CommandShortcut>\n *       </CommandItem>\n *     </CommandGroup>\n *     <CommandSeparator />\n *     <CommandGroup heading=\"Settings\">\n *       <CommandItem>\n *         <SettingsIcon className=\"size-4\" />\n *         Settings\n *       </CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </CommandDialog>\n * ```\n */\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Modal wrapper that renders a Command palette inside a Dialog. Accepts optional `title` and `description` for accessibility. */\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** Search input field with a magnifying glass icon for filtering command items. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** Scrollable container for command groups and items. */\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Fallback content shown when no command items match the search query. */\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  );\n}\n\n/** Groups related command items under an optional heading. */\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Visual divider between groups of command items. */\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Selectable command item that can be navigated with keyboard arrows and activated with Enter. */\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard shortcut hint displayed at the end of a command item. */\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};"]}

package/dist/chunk-75WZR6HF.js

@@ -0,0 +1,44 @@
+import { Label } from './chunk-P3M5TZD2.js';
+import { Input } from './chunk-3VU56V66.js';
+import { useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultLabels = {
+  slug: "Slug",
+  autoGenerated: "Auto-generated from title",
+  placeholder: "enter-slug-here"
+};
+function generateSlug(text) {
+  return text.toLowerCase().replace(/[àáạảãâầấậẩẫăằắặẳẵ]/g, "a").replace(/[èéẹẻẽêềếệểễ]/g, "e").replace(/[ìíịỉĩ]/g, "i").replace(/[òóọỏõôồốộổỗơờớợởỡ]/g, "o").replace(/[ùúụủũưừứựửữ]/g, "u").replace(/[ỳýỵỷỹ]/g, "y").replace(/đ/g, "d").replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function SlugInput({
+  title,
+  slug,
+  onSlugChange,
+  disabled = false,
+  labels: labelOverrides
+}) {
+  const labels = { ...defaultLabels, ...labelOverrides };
+  useEffect(() => {
+    if (!disabled && title) {
+      onSlugChange(generateSlug(title));
+    }
+  }, [title, disabled, onSlugChange]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Label, { children: labels.slug }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: slug,
+        onChange: (e) => onSlugChange(e.target.value),
+        placeholder: labels.placeholder,
+        className: "h-element-sm mt-1 font-mono text-sm"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: labels.autoGenerated })
+  ] });
+}
+
+export { SlugInput, generateSlug };
+//# sourceMappingURL=chunk-75WZR6HF.js.map
+//# sourceMappingURL=chunk-75WZR6HF.js.map

package/dist/chunk-75WZR6HF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/slug-input.tsx"],"names":[],"mappings":";;;;;AA2BA,IAAM,aAAA,GAAiC;AAAA,EACrC,IAAA,EAAM,MAAA;AAAA,EACN,aAAA,EAAe,2BAAA;AAAA,EACf,WAAA,EAAa;AACf,CAAA;AAMO,SAAS,aAAa,IAAA,EAAsB;AACjD,EAAA,OAAO,IAAA,CACJ,aAAY,CACZ,OAAA,CAAQ,wBAAwB,GAAG,CAAA,CACnC,QAAQ,gBAAA,EAAkB,GAAG,EAC7B,OAAA,CAAQ,UAAA,EAAY,GAAG,CAAA,CACvB,OAAA,CAAQ,wBAAwB,GAAG,CAAA,CACnC,QAAQ,gBAAA,EAAkB,GAAG,EAC7B,OAAA,CAAQ,UAAA,EAAY,GAAG,CAAA,CACvB,OAAA,CAAQ,MAAM,GAAG,CAAA,CACjB,QAAQ,eAAA,EAAiB,EAAE,EAC3B,OAAA,CAAQ,MAAA,EAAQ,GAAG,CAAA,CACnB,OAAA,CAAQ,OAAO,GAAG,CAAA,CAClB,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AACzB;AAqBO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,EAAQ;AACV,CAAA,EAAmB;AACjB,EAAA,MAAM,MAAA,GAAS,EAAE,GAAG,aAAA,EAAe,GAAG,cAAA,EAAe;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAY,KAAA,EAAO;AACtB,MAAA,YAAA,CAAa,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,IAClC;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,QAAA,EAAU,YAAY,CAAC,CAAA;AAElC,EAAA,4BACG,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAO,iBAAO,IAAA,EAAK,CAAA;AAAA,oBACpB,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,IAAA;AAAA,QACP,UAAU,CAAC,CAAA,KAAM,YAAA,CAAa,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,QAC5C,aAAa,MAAA,CAAO,WAAA;AAAA,QACpB,SAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,iBAAO,aAAA,EAAc;AAAA,GAAA,EAC1E,CAAA;AAEJ","file":"chunk-75WZR6HF.js","sourcesContent":["import { useEffect } from 'react';\nimport { Input } from './input';\nimport { Label } from './label';\n\n/** Customizable labels for the SlugInput component. */\nexport interface SlugInputLabels {\n  /** Label text above the slug input field. */\n  slug: string;\n  /** Helper text below the slug input. */\n  autoGenerated: string;\n  /** Placeholder shown inside the slug input. */\n  placeholder: string;\n}\n\nexport interface SlugInputProps {\n  /** Source title string from which the slug is auto-generated. */\n  title: string;\n  /** Current slug value. */\n  slug: string;\n  /** Callback fired when the slug changes (auto-generated or manually edited). */\n  onSlugChange: (slug: string) => void;\n  /** Whether auto-generation from title is disabled and slug is manually editable only. */\n  disabled?: boolean;\n  /** Override default label strings for localization. */\n  labels?: Partial<SlugInputLabels>;\n}\n\nconst defaultLabels: SlugInputLabels = {\n  slug: 'Slug',\n  autoGenerated: 'Auto-generated from title',\n  placeholder: 'enter-slug-here',\n};\n\n/**\n * Generates a URL-friendly slug from a text string.\n * Handles Vietnamese diacritics and other special characters.\n */\nexport function generateSlug(text: string): string {\n  return text\n    .toLowerCase()\n    .replace(/[àáạảãâầấậẩẫăằắặẳẵ]/g, 'a')\n    .replace(/[èéẹẻẽêềếệểễ]/g, 'e')\n    .replace(/[ìíịỉĩ]/g, 'i')\n    .replace(/[òóọỏõôồốộổỗơờớợởỡ]/g, 'o')\n    .replace(/[ùúụủũưừứựửữ]/g, 'u')\n    .replace(/[ỳýỵỷỹ]/g, 'y')\n    .replace(/đ/g, 'd')\n    .replace(/[^a-z0-9\\s-]/g, '')\n    .replace(/\\s+/g, '-')\n    .replace(/-+/g, '-')\n    .replace(/^-|-$/g, '');\n}\n\n/**\n * URL slug input that auto-generates a slug from a title string.\n * Handles Vietnamese diacritics and special characters via `generateSlug`.\n * The slug updates automatically when the title changes (unless `disabled` is true).\n *\n * @example\n * ```tsx\n * const [title, setTitle] = useState(\"My Blog Post\");\n * const [slug, setSlug] = useState(\"\");\n *\n * <Input value={title} onChange={(e) => setTitle(e.target.value)} />\n * <SlugInput\n *   title={title}\n *   slug={slug}\n *   onSlugChange={setSlug}\n * />\n * // slug will auto-populate as \"my-blog-post\"\n * ```\n */\nexport function SlugInput({\n  title,\n  slug,\n  onSlugChange,\n  disabled = false,\n  labels: labelOverrides,\n}: SlugInputProps) {\n  const labels = { ...defaultLabels, ...labelOverrides };\n\n  useEffect(() => {\n    if (!disabled && title) {\n      onSlugChange(generateSlug(title));\n    }\n  }, [title, disabled, onSlugChange]);\n\n  return (\n    <div>\n      <Label>{labels.slug}</Label>\n      <Input\n        value={slug}\n        onChange={(e) => onSlugChange(e.target.value)}\n        placeholder={labels.placeholder}\n        className=\"h-element-sm mt-1 font-mono text-sm\"\n      />\n      <p className=\"text-xs text-muted-foreground mt-1\">{labels.autoGenerated}</p>\n    </div>\n  );\n}\n"]}