asterui 0.12.25 → 0.12.27

package/dist/index85.js

@@ -1,132 +1,159 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { forwardRef as u, useState as N } from "react";
-const m = {
-  primary: "badge-primary",
-  secondary: "badge-secondary",
-  accent: "badge-accent",
-  neutral: "badge-neutral",
-  info: "badge-info",
-  success: "badge-success",
-  warning: "badge-warning",
-  error: "badge-error",
-  ghost: "badge-ghost"
-}, w = {
-  xs: "badge-xs text-xs",
-  sm: "badge-sm text-sm",
-  md: "badge-md",
-  lg: "badge-lg text-lg"
-}, T = u(
-  ({
-    closable: a = !1,
-    closeIcon: l,
-    onClose: n,
-    color: e,
-    icon: r,
-    size: d = "md",
-    children: i,
-    className: c = "",
-    "data-testid": g,
-    ...o
-  }, b) => {
-    const [s, f] = N(!0), h = g ?? "tag", x = (v) => {
-      v.stopPropagation(), f(!1), n?.();
-    };
-    if (!s) return null;
-    const C = e && m[e] ? m[e] : "", k = e && !m[e] ? { backgroundColor: e, borderColor: e } : void 0, y = [
-      "badge gap-1 inline-flex items-center",
-      C,
-      w[d],
-      c
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ p(
-      "span",
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { useState as m, useEffect as g, useId as p } from "react";
+function s() {
+  return document.documentElement.getAttribute("data-theme");
+}
+function b(t) {
+  document.documentElement.setAttribute("data-theme", t);
+}
+function v({
+  lightTheme: t = "light",
+  darkTheme: n = "dark",
+  onChange: l,
+  className: u = ""
+}) {
+  const [i, d] = m(() => s() === n);
+  g(() => {
+    const o = new MutationObserver(() => {
+      const e = s();
+      d(e === n);
+    });
+    return o.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => o.disconnect();
+  }, [n]);
+  const a = (o) => {
+    const c = o.target.checked ? n : t;
+    b(c), l?.(c);
+  };
+  return /* @__PURE__ */ h("label", { className: `swap swap-rotate ${u}`, children: [
+    /* @__PURE__ */ r(
+      "input",
       {
-        ref: b,
-        className: y,
-        style: k,
-        "data-testid": h,
-        ...o,
-        children: [
-          r && /* @__PURE__ */ t("span", { className: "inline-flex", children: r }),
-          i,
-          a && /* @__PURE__ */ t(
-            "button",
-            {
-              type: "button",
-              onClick: x,
-              className: "btn btn-ghost btn-xs p-0 min-h-0 h-auto hover:bg-transparent",
-              "aria-label": "Close",
-              "data-testid": `${h}-close`,
-              children: l || /* @__PURE__ */ t(
-                "svg",
-                {
-                  className: "w-3 h-3",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ t(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
-            }
-          )
-        ]
+        type: "checkbox",
+        checked: i,
+        onChange: a
       }
-    );
-  }
-);
-T.displayName = "Tag";
-const j = u(
-  ({
-    checked: a = !1,
-    onChange: l,
-    icon: n,
-    children: e,
-    className: r = "",
-    "data-testid": d,
-    ...i
-  }, c) => {
-    const g = d ?? "checkable-tag", o = () => {
-      l?.(!a);
-    }, b = [
-      "badge badge-md gap-1 cursor-pointer transition-colors",
-      a ? "badge-primary" : "badge-outline hover:badge-primary hover:badge-outline",
-      r
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ p(
-      "span",
+    ),
+    /* @__PURE__ */ r(
+      "svg",
+      {
+        className: "swap-off h-8 w-8 fill-current",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ r("path", { d: "M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "svg",
+      {
+        className: "swap-on h-8 w-8 fill-current",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ r("path", { d: "M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" })
+      }
+    )
+  ] });
+}
+function x({
+  themes: t,
+  defaultTheme: n,
+  onChange: l,
+  className: u = ""
+}) {
+  const i = p(), [d, a] = m(() => {
+    const e = s();
+    return e && t.includes(e) ? e : n || t[0] || "light";
+  });
+  g(() => {
+    const e = new MutationObserver(() => {
+      const c = s();
+      c && t.includes(c) && a(c);
+    });
+    return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => e.disconnect();
+  }, [t]);
+  const o = (e) => {
+    a(e), b(e), l?.(e);
+  };
+  return /* @__PURE__ */ h("div", { className: `dropdown dropdown-end ${u}`, children: [
+    /* @__PURE__ */ h("div", { tabIndex: 0, role: "button", className: "btn", children: [
+      "Theme",
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          width: "12px",
+          height: "12px",
+          className: "inline-block h-2 w-2 fill-current opacity-60",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 2048 2048",
+          children: /* @__PURE__ */ r("path", { d: "M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(
+      "ul",
       {
-        ref: c,
-        className: b,
-        onClick: o,
-        role: "checkbox",
-        "aria-checked": a,
         tabIndex: 0,
-        onKeyDown: (s) => {
-          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o());
-        },
-        "data-testid": g,
-        "data-state": a ? "checked" : "unchecked",
-        ...i,
-        children: [
-          n && /* @__PURE__ */ t("span", { className: "inline-flex", children: n }),
-          e
-        ]
+        className: "dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto",
+        children: t.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+          "input",
+          {
+            type: "radio",
+            name: i,
+            className: "btn btn-sm btn-block btn-ghost justify-start",
+            "aria-label": e,
+            value: e,
+            checked: d === e,
+            onChange: () => o(e)
+          }
+        ) }, e))
       }
-    );
+    )
+  ] });
+}
+const f = {
+  xs: "toggle-xs",
+  sm: "toggle-sm",
+  md: "toggle-md",
+  lg: "toggle-lg"
+};
+function A({
+  lightTheme: t = "light",
+  darkTheme: n = "dark",
+  onChange: l,
+  size: u = "md",
+  className: i = ""
+}) {
+  const [d, a] = m(() => s() === n);
+  g(() => {
+    const e = new MutationObserver(() => {
+      const c = s();
+      a(c === n);
+    });
+    return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => e.disconnect();
+  }, [n]);
+  const o = (e) => {
+    const w = e.target.checked ? n : t;
+    b(w), l?.(w);
+  };
+  return /* @__PURE__ */ r(
+    "input",
+    {
+      type: "checkbox",
+      className: `toggle ${f[u]} ${i}`,
+      checked: d,
+      onChange: o,
+      "aria-label": "Toggle theme"
+    }
+  );
+}
+const Z = Object.assign(
+  {},
+  {
+    Swap: v,
+    Dropdown: x,
+    Toggle: A
   }
 );
-j.displayName = "CheckableTag";
 export {
-  j as CheckableTag,
-  T as Tag
+  Z as ThemeController
 };
 //# sourceMappingURL=index85.js.map

package/dist/index85.js.map

@@ -1 +1 @@
-{"version":3,"file":"index85.js","sources":["../src/components/Tag.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react'\n\nexport type TagSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type TagColor =\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'ghost'\n\nexport interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  closable?: boolean\n  closeIcon?: React.ReactNode\n  onClose?: () => void\n  color?: TagColor | string\n  icon?: React.ReactNode\n  size?: TagSize\n  children?: React.ReactNode\n  'data-testid'?: string\n}\n\nexport interface CheckableTagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'> {\n  checked?: boolean\n  onChange?: (checked: boolean) => void\n  icon?: React.ReactNode\n  children?: React.ReactNode\n  'data-testid'?: string\n}\n\nconst colorClasses: Record<string, string> = {\n  primary: 'badge-primary',\n  secondary: 'badge-secondary',\n  accent: 'badge-accent',\n  neutral: 'badge-neutral',\n  info: 'badge-info',\n  success: 'badge-success',\n  warning: 'badge-warning',\n  error: 'badge-error',\n  ghost: 'badge-ghost',\n}\n\nconst sizeClasses: Record<TagSize, string> = {\n  xs: 'badge-xs text-xs',\n  sm: 'badge-sm text-sm',\n  md: 'badge-md',\n  lg: 'badge-lg text-lg',\n}\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(\n  (\n    {\n      closable = false,\n      closeIcon,\n      onClose,\n      color,\n      icon,\n      size = 'md',\n      children,\n      className = '',\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState(true)\n    const baseTestId = testId ?? 'tag'\n\n    const handleClose = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      setVisible(false)\n      onClose?.()\n    }\n\n    if (!visible) return null\n\n    const colorClass = color && colorClasses[color] ? colorClasses[color] : ''\n    const customColorStyle =\n      color && !colorClasses[color] ? { backgroundColor: color, borderColor: color } : undefined\n\n    const tagClasses = [\n      'badge gap-1 inline-flex items-center',\n      colorClass,\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <span\n        ref={ref}\n        className={tagClasses}\n        style={customColorStyle}\n        data-testid={baseTestId}\n        {...rest}\n      >\n        {icon && <span className=\"inline-flex\">{icon}</span>}\n        {children}\n        {closable && (\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            className=\"btn btn-ghost btn-xs p-0 min-h-0 h-auto hover:bg-transparent\"\n            aria-label=\"Close\"\n            data-testid={`${baseTestId}-close`}\n          >\n            {closeIcon || (\n              <svg\n                className=\"w-3 h-3\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M6 18L18 6M6 6l12 12\"\n                />\n              </svg>\n            )}\n          </button>\n        )}\n      </span>\n    )\n  }\n)\n\nTag.displayName = 'Tag'\n\nexport const CheckableTag = forwardRef<HTMLSpanElement, CheckableTagProps>(\n  (\n    {\n      checked = false,\n      onChange,\n      icon,\n      children,\n      className = '',\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const baseTestId = testId ?? 'checkable-tag'\n\n    const handleClick = () => {\n      onChange?.(!checked)\n    }\n\n    const tagClasses = [\n      'badge badge-md gap-1 cursor-pointer transition-colors',\n      checked ? 'badge-primary' : 'badge-outline hover:badge-primary hover:badge-outline',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <span\n        ref={ref}\n        className={tagClasses}\n        onClick={handleClick}\n        role=\"checkbox\"\n        aria-checked={checked}\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            handleClick()\n          }\n        }}\n        data-testid={baseTestId}\n        data-state={checked ? 'checked' : 'unchecked'}\n        {...rest}\n      >\n        {icon && <span className=\"inline-flex\">{icon}</span>}\n        {children}\n      </span>\n    )\n  }\n)\n\nCheckableTag.displayName = 'CheckableTag'\n"],"names":["colorClasses","sizeClasses","Tag","forwardRef","closable","closeIcon","onClose","color","icon","size","children","className","testId","rest","ref","visible","setVisible","useState","baseTestId","handleClose","e","colorClass","customColorStyle","tagClasses","jsxs","jsx","CheckableTag","checked","onChange","handleClick"],"mappings":"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"}
+{"version":3,"file":"index85.js","sources":["../src/components/ThemeController.tsx"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react'\n\nexport interface ThemeControllerSwapProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerDropdownProps {\n  themes: string[]\n  defaultTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerToggleProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  className?: string\n}\n\n// Get current theme from document\nfunction getCurrentTheme(): string | null {\n  return document.documentElement.getAttribute('data-theme')\n}\n\n// Set theme on document\nfunction setTheme(theme: string) {\n  document.documentElement.setAttribute('data-theme', theme)\n}\n\nfunction ThemeControllerSwap({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  className = '',\n}: ThemeControllerSwapProps) {\n  const [isDark, setIsDark] = useState(() => {\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with external theme changes\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <label className={`swap swap-rotate ${className}`}>\n      <input\n        type=\"checkbox\"\n        checked={isDark}\n        onChange={handleChange}\n      />\n      {/* sun icon */}\n      <svg\n        className=\"swap-off h-8 w-8 fill-current\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z\" />\n      </svg>\n      {/* moon icon */}\n      <svg\n        className=\"swap-on h-8 w-8 fill-current\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z\" />\n      </svg>\n    </label>\n  )\n}\n\nfunction ThemeControllerDropdown({\n  themes,\n  defaultTheme,\n  onChange,\n  className = '',\n}: ThemeControllerDropdownProps) {\n  const radioName = useId()\n  const [selectedTheme, setSelectedTheme] = useState(() => {\n    const current = getCurrentTheme()\n    if (current && themes.includes(current)) return current\n    return defaultTheme || themes[0] || 'light'\n  })\n\n  // Sync with external theme changes\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      if (current && themes.includes(current)) {\n        setSelectedTheme(current)\n      }\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [themes])\n\n  const handleChange = (theme: string) => {\n    setSelectedTheme(theme)\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <div className={`dropdown dropdown-end ${className}`}>\n      <div tabIndex={0} role=\"button\" className=\"btn\">\n        Theme\n        <svg\n          width=\"12px\"\n          height=\"12px\"\n          className=\"inline-block h-2 w-2 fill-current opacity-60\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 2048 2048\"\n        >\n          <path d=\"M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z\"></path>\n        </svg>\n      </div>\n      <ul\n        tabIndex={0}\n        className=\"dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto\"\n      >\n        {themes.map((theme) => (\n          <li key={theme}>\n            <input\n              type=\"radio\"\n              name={radioName}\n              className=\"btn btn-sm btn-block btn-ghost justify-start\"\n              aria-label={theme}\n              value={theme}\n              checked={selectedTheme === theme}\n              onChange={() => handleChange(theme)}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst sizeClasses: Record<string, string> = {\n  xs: 'toggle-xs',\n  sm: 'toggle-sm',\n  md: 'toggle-md',\n  lg: 'toggle-lg',\n}\n\nfunction ThemeControllerToggle({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  size = 'md',\n  className = '',\n}: ThemeControllerToggleProps) {\n  const [isDark, setIsDark] = useState(() => {\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with external theme changes\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <input\n      type=\"checkbox\"\n      className={`toggle ${sizeClasses[size]} ${className}`}\n      checked={isDark}\n      onChange={handleChange}\n      aria-label=\"Toggle theme\"\n    />\n  )\n}\n\nexport const ThemeController = Object.assign(\n  {},\n  {\n    Swap: ThemeControllerSwap,\n    Dropdown: ThemeControllerDropdown,\n    Toggle: ThemeControllerToggle,\n  }\n)\n"],"names":["getCurrentTheme","setTheme","theme","ThemeControllerSwap","lightTheme","darkTheme","onChange","className","isDark","setIsDark","useState","useEffect","observer","current","handleChange","e","jsxs","jsx","ThemeControllerDropdown","themes","defaultTheme","radioName","useId","selectedTheme","setSelectedTheme","sizeClasses","ThemeControllerToggle","size","ThemeController"],"mappings":"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"}

package/dist/index86.js

@@ -1,159 +1,164 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { useState as m, useEffect as g, useId as p } from "react";
-function s() {
-  return document.documentElement.getAttribute("data-theme");
-}
-function b(t) {
-  document.documentElement.setAttribute("data-theme", t);
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useState as a, useRef as Y, useEffect as j } from "react";
+import { Input as _ } from "./index42.js";
+function q(t, N = "24", p = !1) {
+  if (!t) return "";
+  let n = t.getHours();
+  const i = String(t.getMinutes()).padStart(2, "0"), d = String(t.getSeconds()).padStart(2, "0");
+  if (N === "12") {
+    const x = n >= 12 ? "PM" : "AM";
+    return n = n % 12 || 12, p ? `${n}:${i}:${d} ${x}` : `${n}:${i} ${x}`;
+  }
+  const h = String(n).padStart(2, "0");
+  return p ? `${h}:${i}:${d}` : `${h}:${i}`;
 }
-function v({
-  lightTheme: t = "light",
-  darkTheme: n = "dark",
-  onChange: l,
-  className: u = ""
-}) {
-  const [i, d] = m(() => s() === n);
-  g(() => {
-    const o = new MutationObserver(() => {
-      const e = s();
-      d(e === n);
-    });
-    return o.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => o.disconnect();
-  }, [n]);
-  const a = (o) => {
-    const c = o.target.checked ? n : t;
-    b(c), l?.(c);
-  };
-  return /* @__PURE__ */ h("label", { className: `swap swap-rotate ${u}`, children: [
-    /* @__PURE__ */ r(
-      "input",
-      {
-        type: "checkbox",
-        checked: i,
-        onChange: a
-      }
-    ),
+const Q = ({
+  value: t,
+  defaultValue: N,
+  onChange: p,
+  format: n = "24",
+  placeholder: i = "Select time",
+  disabled: d = !1,
+  className: h = "",
+  size: x = "md",
+  showSeconds: $ = !1,
+  ...E
+}) => {
+  const [o, O] = a(
+    t || N || null
+  ), [u, C] = a(!1), [l, M] = a(o ? o.getHours() : 0), [S, v] = a(o ? o.getMinutes() : 0), [y, H] = a(o ? o.getSeconds() : 0), [P, k] = a(
+    o && o.getHours() >= 12 ? "PM" : "AM"
+  ), A = Y(null);
+  j(() => {
+    t !== void 0 && (O(t), t && (M(t.getHours()), v(t.getMinutes()), H(t.getSeconds()), k(t.getHours() >= 12 ? "PM" : "AM")));
+  }, [t]), j(() => {
+    function e(s) {
+      A.current && !A.current.contains(s.target) && C(!1);
+    }
+    if (u)
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [u]);
+  const m = (e, s, w) => {
+    const g = /* @__PURE__ */ new Date(), b = new Date(
+      g.getFullYear(),
+      g.getMonth(),
+      g.getDate(),
+      e,
+      s,
+      w
+    );
+    O(b), p?.(b);
+  }, I = (e) => {
+    let s = e;
+    n === "12" && (s = P === "PM" ? e % 12 + 12 : e % 12), M(s), m(s, S, y);
+  }, L = (e) => {
+    v(e), m(l, e, y);
+  }, R = (e) => {
+    H(e), m(l, S, e);
+  }, D = (e) => {
+    k(e);
+    const s = e === "PM" ? l % 12 + 12 : l % 12;
+    M(s), m(s, S, y);
+  }, T = (e, s, w, g, b = 0) => {
+    const F = Array.from({ length: s - b + 1 }, (f, K) => b + K);
+    return /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ r("div", { className: "text-xs font-semibold text-center text-base-content/60 py-2", children: e }),
+      /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto max-h-48", children: F.map((f) => /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          onClick: () => g(f),
+          className: `
+                w-full px-4 py-2 text-center hover:bg-base-200 transition-colors
+                ${w === f ? "bg-primary text-primary-content" : ""}
+              `,
+          children: String(f).padStart(2, "0")
+        },
+        f
+      )) })
+    ] });
+  }, z = n === "12" ? l % 12 || 12 : l;
+  return /* @__PURE__ */ c("div", { ref: A, className: `relative ${h}`, "data-state": u ? "open" : "closed", ...E, children: [
     /* @__PURE__ */ r(
-      "svg",
+      _,
       {
-        className: "swap-off h-8 w-8 fill-current",
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ r("path", { d: "M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" })
+        value: q(o, n, $),
+        placeholder: i,
+        disabled: d,
+        size: x,
+        readOnly: !0,
+        onClick: () => !d && C(!u),
+        className: "cursor-pointer"
       }
     ),
-    /* @__PURE__ */ r(
-      "svg",
-      {
-        className: "swap-on h-8 w-8 fill-current",
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ r("path", { d: "M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" })
-      }
-    )
-  ] });
-}
-function x({
-  themes: t,
-  defaultTheme: n,
-  onChange: l,
-  className: u = ""
-}) {
-  const i = p(), [d, a] = m(() => {
-    const e = s();
-    return e && t.includes(e) ? e : n || t[0] || "light";
-  });
-  g(() => {
-    const e = new MutationObserver(() => {
-      const c = s();
-      c && t.includes(c) && a(c);
-    });
-    return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => e.disconnect();
-  }, [t]);
-  const o = (e) => {
-    a(e), b(e), l?.(e);
-  };
-  return /* @__PURE__ */ h("div", { className: `dropdown dropdown-end ${u}`, children: [
-    /* @__PURE__ */ h("div", { tabIndex: 0, role: "button", className: "btn", children: [
-      "Theme",
-      /* @__PURE__ */ r(
-        "svg",
-        {
-          width: "12px",
-          height: "12px",
-          className: "inline-block h-2 w-2 fill-current opacity-60",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 2048 2048",
-          children: /* @__PURE__ */ r("path", { d: "M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ r(
-      "ul",
-      {
-        tabIndex: 0,
-        className: "dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto",
-        children: t.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
-          "input",
+    u && /* @__PURE__ */ c("div", { className: "absolute top-full left-0 mt-2 bg-base-100 border border-base-300 rounded-lg shadow-lg z-50", children: [
+      /* @__PURE__ */ c("div", { className: "flex divide-x divide-base-300", children: [
+        T(
+          "Hour",
+          n === "12" ? 12 : 23,
+          z,
+          I,
+          n === "12" ? 1 : 0
+        ),
+        T("Min", 59, S, L),
+        $ && T("Sec", 59, y, R),
+        n === "12" && /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ r("div", { className: "text-xs font-semibold text-center text-base-content/60 py-2", children: "Period" }),
+          /* @__PURE__ */ c("div", { className: "flex-1 flex flex-col p-2 gap-2", children: [
+            /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                onClick: () => D("AM"),
+                className: `
+                      btn btn-sm
+                      ${P === "AM" ? "btn-primary" : "btn-ghost"}
+                    `,
+                children: "AM"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                onClick: () => D("PM"),
+                className: `
+                      btn btn-sm
+                      ${P === "PM" ? "btn-primary" : "btn-ghost"}
+                    `,
+                children: "PM"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ c("div", { className: "flex justify-end gap-2 p-3 border-t border-base-300", children: [
+        /* @__PURE__ */ r(
+          "button",
           {
-            type: "radio",
-            name: i,
-            className: "btn btn-sm btn-block btn-ghost justify-start",
-            "aria-label": e,
-            value: e,
-            checked: d === e,
-            onChange: () => o(e)
+            type: "button",
+            onClick: () => {
+              const e = /* @__PURE__ */ new Date();
+              M(e.getHours()), v(e.getMinutes()), H(e.getSeconds()), k(e.getHours() >= 12 ? "PM" : "AM"), m(e.getHours(), e.getMinutes(), e.getSeconds());
+            },
+            className: "btn btn-ghost btn-sm",
+            children: "Now"
           }
-        ) }, e))
-      }
-    )
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => C(!1),
+            className: "btn btn-primary btn-sm",
+            children: "OK"
+          }
+        )
+      ] })
+    ] })
   ] });
-}
-const f = {
-  xs: "toggle-xs",
-  sm: "toggle-sm",
-  md: "toggle-md",
-  lg: "toggle-lg"
 };
-function A({
-  lightTheme: t = "light",
-  darkTheme: n = "dark",
-  onChange: l,
-  size: u = "md",
-  className: i = ""
-}) {
-  const [d, a] = m(() => s() === n);
-  g(() => {
-    const e = new MutationObserver(() => {
-      const c = s();
-      a(c === n);
-    });
-    return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => e.disconnect();
-  }, [n]);
-  const o = (e) => {
-    const w = e.target.checked ? n : t;
-    b(w), l?.(w);
-  };
-  return /* @__PURE__ */ r(
-    "input",
-    {
-      type: "checkbox",
-      className: `toggle ${f[u]} ${i}`,
-      checked: d,
-      onChange: o,
-      "aria-label": "Toggle theme"
-    }
-  );
-}
-const Z = Object.assign(
-  {},
-  {
-    Swap: v,
-    Dropdown: x,
-    Toggle: A
-  }
-);
 export {
-  Z as ThemeController
+  Q as TimePicker
 };
 //# sourceMappingURL=index86.js.map