asterui 0.12.18 → 0.12.20

package/dist/index59.js.map

@@ -1 +1 @@
-{"version":3,"file":"index59.js","sources":["../src/components/Notification.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport ReactDOM from 'react-dom/client'\n\nexport type NotificationType = 'success' | 'info' | 'warning' | 'error'\nexport type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'\n\nexport interface NotificationConfig {\n  message: React.ReactNode\n  description?: React.ReactNode\n  type?: NotificationType\n  duration?: number // in seconds, 0 = no auto close\n  placement?: NotificationPlacement\n  closable?: boolean\n  onClick?: () => void\n  onClose?: () => void\n}\n\ninterface NotificationItem extends NotificationConfig {\n  id: string\n  createdAt: number\n}\n\ntype Listener = () => void\n\nclass NotificationManager {\n  private notifications: NotificationItem[] = []\n  private listeners: Listener[] = []\n  private container: HTMLDivElement | null = null\n  private root: ReactDOM.Root | null = null\n  private idCounter = 0\n\n  subscribe(listener: Listener) {\n    this.listeners.push(listener)\n    return () => {\n      this.listeners = this.listeners.filter((l) => l !== listener)\n    }\n  }\n\n  getNotifications() {\n    return this.notifications\n  }\n\n  private emit() {\n    this.listeners.forEach((listener) => listener())\n  }\n\n  private ensureContainer() {\n    if (!this.container) {\n      this.container = document.createElement('div')\n      document.body.appendChild(this.container)\n      this.root = ReactDOM.createRoot(this.container)\n      this.root.render(<NotificationContainer manager={this} />)\n    }\n  }\n\n  open(config: NotificationConfig) {\n    this.ensureContainer()\n\n    const id = `notification-${++this.idCounter}`\n    const notification: NotificationItem = {\n      ...config,\n      id,\n      createdAt: Date.now(),\n      duration: config.duration ?? 4.5,\n      placement: config.placement ?? 'topRight',\n      closable: config.closable ?? true,\n      type: config.type ?? 'info',\n    }\n\n    this.notifications.push(notification)\n    this.emit()\n\n    // Auto-dismiss\n    if (notification.duration && notification.duration > 0) {\n      setTimeout(() => {\n        this.close(id)\n      }, notification.duration * 1000)\n    }\n\n    return id\n  }\n\n  close(id: string) {\n    const notification = this.notifications.find((n) => n.id === id)\n    this.notifications = this.notifications.filter((n) => n.id !== id)\n    this.emit()\n\n    if (notification?.onClose) {\n      notification.onClose()\n    }\n  }\n\n  success(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'success' })\n  }\n\n  error(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'error' })\n  }\n\n  info(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'info' })\n  }\n\n  warning(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'warning' })\n  }\n\n  destroy() {\n    this.notifications = []\n    this.emit()\n  }\n}\n\ninterface NotificationContainerProps {\n  manager: NotificationManager\n}\n\nfunction NotificationContainer({ manager }: NotificationContainerProps) {\n  const [, forceUpdate] = useState({})\n\n  useEffect(() => {\n    const unsubscribe = manager.subscribe(() => {\n      forceUpdate({})\n    })\n    return unsubscribe\n  }, [manager])\n\n  const notifications = manager.getNotifications()\n\n  // Group by placement\n  const grouped: Record<NotificationPlacement, NotificationItem[]> = {\n    topLeft: [],\n    topRight: [],\n    bottomLeft: [],\n    bottomRight: [],\n  }\n\n  notifications.forEach((notification) => {\n    grouped[notification.placement!].push(notification)\n  })\n\n  const placementClasses: Record<NotificationPlacement, string> = {\n    topRight: 'toast toast-top toast-end',\n    topLeft: 'toast toast-top toast-start',\n    bottomRight: 'toast toast-bottom toast-end',\n    bottomLeft: 'toast toast-bottom toast-start',\n  }\n\n  return (\n    <>\n      {Object.entries(grouped).map(([placement, items]) => {\n        if (items.length === 0) return null\n\n        return (\n          <div key={placement} className={placementClasses[placement as NotificationPlacement]}>\n            {items.map((notification) => (\n              <NotificationItem\n                key={notification.id}\n                notification={notification}\n                onClose={() => manager.close(notification.id)}\n              />\n            ))}\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\ninterface NotificationItemProps {\n  notification: NotificationItem\n  onClose: () => void\n}\n\nfunction NotificationItem({ notification, onClose }: NotificationItemProps) {\n  const alertTypeClasses: Record<NotificationType, string> = {\n    success: 'alert-success',\n    error: 'alert-error',\n    info: 'alert-info',\n    warning: 'alert-warning',\n  }\n\n  const handleClick = () => {\n    if (notification.onClick) {\n      notification.onClick()\n    }\n  }\n\n  return (\n    <div\n      className={`alert ${alertTypeClasses[notification.type!]} shadow-lg cursor-pointer min-w-[300px] max-w-[400px]`}\n      onClick={handleClick}\n    >\n      <div className=\"flex-1\">\n        {notification.message && <div className=\"font-bold\">{notification.message}</div>}\n        {notification.description && <div className=\"text-sm\">{notification.description}</div>}\n      </div>\n      {notification.closable && (\n        <button\n          className=\"btn btn-sm btn-ghost btn-circle\"\n          onClick={(e) => {\n            e.stopPropagation()\n            onClose()\n          }}\n        >\n          ✕\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport const notification = new NotificationManager()\n"],"names":["NotificationManager","listener","l","ReactDOM","jsx","NotificationContainer","config","id","notification","n","manager","forceUpdate","useState","useEffect","notifications","grouped","placementClasses","Fragment","placement","items","NotificationItem","onClose","alertTypeClasses","handleClick","jsxs","e"],"mappings":"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"}
+{"version":3,"file":"index59.js","sources":["../src/components/Navbar.tsx"],"sourcesContent":["import React from 'react'\n\nexport type NavbarColor = 'base' | 'neutral' | 'primary' | 'secondary' | 'accent'\nexport type NavbarShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl'\nexport type NavbarRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\nexport interface NavbarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {\n  children?: React.ReactNode\n  /** Content for the start section of the navbar (typically logo/brand) */\n  start?: React.ReactNode\n  /** Content for the center section of the navbar */\n  center?: React.ReactNode\n  /** Content for the end section of the navbar (typically actions/menu) */\n  end?: React.ReactNode\n  /** Background color variant */\n  color?: NavbarColor\n  /** Make navbar sticky at the top */\n  sticky?: boolean\n  /** Shadow depth */\n  shadow?: NavbarShadow\n  /** Border radius */\n  rounded?: NavbarRounded\n}\n\nconst colorClasses: Record<NavbarColor, string> = {\n  base: 'bg-base-100',\n  neutral: 'bg-neutral text-neutral-content',\n  primary: 'bg-primary text-primary-content',\n  secondary: 'bg-secondary text-secondary-content',\n  accent: 'bg-accent text-accent-content',\n}\n\nconst shadowClasses: Record<NavbarShadow, string> = {\n  none: '',\n  sm: 'shadow-sm',\n  md: 'shadow-md',\n  lg: 'shadow-lg',\n  xl: 'shadow-xl',\n}\n\nconst roundedClasses: Record<NavbarRounded, string> = {\n  none: '',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  full: 'rounded-full',\n}\n\nexport const Navbar: React.FC<NavbarProps> = ({\n  children,\n  start,\n  center,\n  end,\n  color = 'base',\n  sticky = false,\n  shadow = 'none',\n  rounded = 'none',\n  className = '',\n  ...rest\n}) => {\n  const navbarClasses = [\n    'navbar',\n    colorClasses[color],\n    sticky && 'sticky top-0 z-50',\n    shadowClasses[shadow],\n    roundedClasses[rounded],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  if (children) {\n    return <nav className={navbarClasses} {...rest}>{children}</nav>\n  }\n\n  return (\n    <nav className={navbarClasses} {...rest}>\n      {start && <div className=\"navbar-start\">{start}</div>}\n      {center && <div className=\"navbar-center\">{center}</div>}\n      {end && <div className=\"navbar-end\">{end}</div>}\n    </nav>\n  )\n}\n"],"names":["colorClasses","shadowClasses","roundedClasses","Navbar","children","start","center","end","color","sticky","shadow","rounded","className","rest","navbarClasses","jsxs","jsx"],"mappings":";AAwBA,MAAMA,IAA4C;AAAA,EAChD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AACV,GAEMC,IAA8C;AAAA,EAClD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAgD;AAAA,EACpD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR,GAEaC,IAAgC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgB;AAAA,IACpB;AAAA,IACAd,EAAaQ,CAAK;AAAA,IAClBC,KAAU;AAAA,IACVR,EAAcS,CAAM;AAAA,IACpBR,EAAeS,CAAO;AAAA,IACtBC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SAAIR,sBACM,OAAA,EAAI,WAAWU,GAAgB,GAAGD,GAAO,UAAAT,GAAS,IAI1D,gBAAAW,EAAC,OAAA,EAAI,WAAWD,GAAgB,GAAGD,GAChC,UAAA;AAAA,IAAAR,KAAS,gBAAAW,EAAC,OAAA,EAAI,WAAU,gBAAgB,UAAAX,GAAM;AAAA,IAC9CC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAU,iBAAiB,UAAAV,GAAO;AAAA,IACjDC,KAAO,gBAAAS,EAAC,OAAA,EAAI,WAAU,cAAc,UAAAT,EAAA,CAAI;AAAA,EAAA,GAC3C;AAEJ;"}

package/dist/index60.js

@@ -1,113 +1,125 @@
-import { jsx as v } from "react/jsx-runtime";
-import { forwardRef as L, useState as M, useRef as V, useImperativeHandle as Z, useEffect as j, useCallback as i } from "react";
-const g = L(
-  ({
-    length: s = 6,
-    value: p = "",
-    onChange: n,
-    onComplete: m,
-    size: k = "md",
-    type: f = "number",
-    mask: y = !1,
-    disabled: c = !1,
-    error: P = !1,
-    autoFocus: A = !1,
-    placeholder: b = "",
-    className: I = ""
-  }, R) => {
-    const [a, o] = M(() => {
-      const t = p.split("").slice(0, s);
-      return [...t, ...Array(s - t.length).fill("")];
-    }), u = V([]), x = {
-      xs: "input-xs w-8 h-8 text-sm",
-      sm: "input-sm w-10 h-10 text-base",
-      md: "w-12 h-12 text-lg",
-      lg: "input-lg w-14 h-14 text-xl",
-      xl: "w-16 h-16 text-2xl"
+import { jsx as i, Fragment as h, jsxs as l } from "react/jsx-runtime";
+import { useState as u, useEffect as p } from "react";
+import d from "react-dom/client";
+class m {
+  notifications = [];
+  listeners = [];
+  container = null;
+  root = null;
+  idCounter = 0;
+  subscribe(t) {
+    return this.listeners.push(t), () => {
+      this.listeners = this.listeners.filter((o) => o !== t);
     };
-    Z(R, () => ({
-      focus: () => {
-        u.current[0]?.focus();
-      },
-      clear: () => {
-        o(Array(s).fill("")), u.current[0]?.focus();
-      }
-    })), j(() => {
-      A && u.current[0]?.focus();
-    }, [A]), j(() => {
-      const t = p.split("").slice(0, s);
-      o([...t, ...Array(s - t.length).fill("")]);
-    }, [p, s]);
-    const w = i(
-      (t, e) => {
-        if (c || f === "number" && !/^\d*$/.test(e) || f === "text" && !/^[a-zA-Z0-9]*$/.test(e)) return;
-        const r = [...a];
-        if (e.length > 1) {
-          const O = e.slice(0, s - t).split("");
-          O.forEach((K, $) => {
-            t + $ < s && (r[t + $] = K);
-          }), o(r);
-          const D = r.join("");
-          n?.(D);
-          const E = Math.min(t + O.length, s - 1);
-          u.current[E]?.focus(), D.length === s && m?.(D);
-          return;
-        }
-        r[t] = e, o(r);
-        const l = r.join("");
-        n?.(l), e && t < s - 1 && u.current[t + 1]?.focus(), l.length === s && !l.includes("") && m?.(l);
-      },
-      [a, s, f, c, n, m]
-    ), z = i(
-      (t, e) => {
-        if (!c)
-          if (e.key === "Backspace") {
-            e.preventDefault();
-            const r = [...a];
-            a[t] ? (r[t] = "", o(r), n?.(r.join(""))) : t > 0 && (r[t - 1] = "", o(r), n?.(r.join("")), u.current[t - 1]?.focus());
-          } else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), u.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < s - 1 && (e.preventDefault(), u.current[t + 1]?.focus());
-      },
-      [a, s, c, n]
-    ), N = i(
-      (t) => {
-        if (t.preventDefault(), c) return;
-        const e = t.clipboardData.getData("text"), r = f === "number" ? e.replace(/\D/g, "") : e.replace(/[^a-zA-Z0-9]/g, "");
-        r && w(0, r);
-      },
-      [f, c, w]
-    ), T = i((t) => {
-      t.target.select();
-    }, []);
-    return /* @__PURE__ */ v("div", { className: `flex gap-2 ${I}`, children: a.map((t, e) => /* @__PURE__ */ v(
-      "input",
-      {
-        ref: (r) => {
-          u.current[e] = r;
-        },
-        type: y ? "password" : f === "number" ? "tel" : "text",
-        inputMode: f === "number" ? "numeric" : "text",
-        maxLength: 1,
-        value: t,
-        placeholder: b,
-        disabled: c,
-        onChange: (r) => w(e, r.target.value),
-        onKeyDown: (r) => z(e, r),
-        onPaste: N,
-        onFocus: T,
-        className: `
-              input input-bordered text-center font-mono
-              ${x[k]}
-              ${P ? "input-error" : ""}
-              ${c ? "input-disabled opacity-50" : ""}
-            `,
-        "aria-label": `OTP digit ${e + 1}`
-      },
-      e
-    )) });
   }
-);
-g.displayName = "OTPInput";
+  getNotifications() {
+    return this.notifications;
+  }
+  emit() {
+    this.listeners.forEach((t) => t());
+  }
+  ensureContainer() {
+    this.container || (this.container = document.createElement("div"), document.body.appendChild(this.container), this.root = d.createRoot(this.container), this.root.render(/* @__PURE__ */ i(f, { manager: this })));
+  }
+  open(t) {
+    this.ensureContainer();
+    const o = `notification-${++this.idCounter}`, s = {
+      ...t,
+      id: o,
+      createdAt: Date.now(),
+      duration: t.duration ?? 4.5,
+      placement: t.placement ?? "topRight",
+      closable: t.closable ?? !0,
+      type: t.type ?? "info"
+    };
+    return this.notifications.push(s), this.emit(), s.duration && s.duration > 0 && setTimeout(() => {
+      this.close(o);
+    }, s.duration * 1e3), o;
+  }
+  close(t) {
+    const o = this.notifications.find((s) => s.id === t);
+    this.notifications = this.notifications.filter((s) => s.id !== t), this.emit(), o?.onClose && o.onClose();
+  }
+  success(t) {
+    return this.open({ ...t, type: "success" });
+  }
+  error(t) {
+    return this.open({ ...t, type: "error" });
+  }
+  info(t) {
+    return this.open({ ...t, type: "info" });
+  }
+  warning(t) {
+    return this.open({ ...t, type: "warning" });
+  }
+  destroy() {
+    this.notifications = [], this.emit();
+  }
+}
+function f({ manager: e }) {
+  const [, t] = u({});
+  p(() => e.subscribe(() => {
+    t({});
+  }), [e]);
+  const o = e.getNotifications(), s = {
+    topLeft: [],
+    topRight: [],
+    bottomLeft: [],
+    bottomRight: []
+  };
+  o.forEach((n) => {
+    s[n.placement].push(n);
+  });
+  const r = {
+    topRight: "toast toast-top toast-end",
+    topLeft: "toast toast-top toast-start",
+    bottomRight: "toast toast-bottom toast-end",
+    bottomLeft: "toast toast-bottom toast-start"
+  };
+  return /* @__PURE__ */ i(h, { children: Object.entries(s).map(([n, c]) => c.length === 0 ? null : /* @__PURE__ */ i("div", { className: r[n], children: c.map((a) => /* @__PURE__ */ i(
+    b,
+    {
+      notification: a,
+      onClose: () => e.close(a.id)
+    },
+    a.id
+  )) }, n)) });
+}
+function b({ notification: e, onClose: t }) {
+  const o = {
+    success: "alert-success",
+    error: "alert-error",
+    info: "alert-info",
+    warning: "alert-warning"
+  }, s = () => {
+    e.onClick && e.onClick();
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `alert ${o[e.type]} shadow-lg cursor-pointer min-w-[300px] max-w-[400px]`,
+      onClick: s,
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex-1", children: [
+          e.message && /* @__PURE__ */ i("div", { className: "font-bold", children: e.message }),
+          e.description && /* @__PURE__ */ i("div", { className: "text-sm", children: e.description })
+        ] }),
+        e.closable && /* @__PURE__ */ i(
+          "button",
+          {
+            className: "btn btn-sm btn-ghost btn-circle",
+            onClick: (r) => {
+              r.stopPropagation(), t();
+            },
+            children: "✕"
+          }
+        )
+      ]
+    }
+  );
+}
+const y = new m();
 export {
-  g as OTPInput
+  y as notification
 };
 //# sourceMappingURL=index60.js.map

package/dist/index60.js.map

@@ -1 +1 @@
-{"version":3,"file":"index60.js","sources":["../src/components/OTPInput.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react'\n\nexport interface OTPInputProps {\n  /** Number of input fields */\n  length?: number\n  /** Current value */\n  value?: string\n  /** Callback when value changes */\n  onChange?: (value: string) => void\n  /** Callback when all fields are filled */\n  onComplete?: (value: string) => void\n  /** Input size */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Input type - number only or alphanumeric */\n  type?: 'number' | 'text'\n  /** Mask input (show dots instead of characters) */\n  mask?: boolean\n  /** Disabled state */\n  disabled?: boolean\n  /** Error state */\n  error?: boolean\n  /** Auto focus first input on mount */\n  autoFocus?: boolean\n  /** Placeholder character */\n  placeholder?: string\n  /** Additional CSS classes */\n  className?: string\n}\n\nexport interface OTPInputRef {\n  focus: () => void\n  clear: () => void\n}\n\nexport const OTPInput = forwardRef<OTPInputRef, OTPInputProps>(\n  (\n    {\n      length = 6,\n      value = '',\n      onChange,\n      onComplete,\n      size = 'md',\n      type = 'number',\n      mask = false,\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      placeholder = '',\n      className = '',\n    },\n    ref\n  ) => {\n    const [otp, setOtp] = useState<string[]>(() => {\n      const initial = value.split('').slice(0, length)\n      return [...initial, ...Array(length - initial.length).fill('')]\n    })\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([])\n\n    const sizeClasses = {\n      xs: 'input-xs w-8 h-8 text-sm',\n      sm: 'input-sm w-10 h-10 text-base',\n      md: 'w-12 h-12 text-lg',\n      lg: 'input-lg w-14 h-14 text-xl',\n      xl: 'w-16 h-16 text-2xl',\n    }\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        inputRefs.current[0]?.focus()\n      },\n      clear: () => {\n        setOtp(Array(length).fill(''))\n        inputRefs.current[0]?.focus()\n      },\n    }))\n\n    useEffect(() => {\n      if (autoFocus) {\n        inputRefs.current[0]?.focus()\n      }\n    }, [autoFocus])\n\n    useEffect(() => {\n      const newOtp = value.split('').slice(0, length)\n      setOtp([...newOtp, ...Array(length - newOtp.length).fill('')])\n    }, [value, length])\n\n    const handleChange = useCallback(\n      (index: number, char: string) => {\n        if (disabled) return\n\n        // Validate input\n        if (type === 'number' && !/^\\d*$/.test(char)) return\n        if (type === 'text' && !/^[a-zA-Z0-9]*$/.test(char)) return\n\n        const newOtp = [...otp]\n\n        // Handle paste of multiple characters\n        if (char.length > 1) {\n          const chars = char.slice(0, length - index).split('')\n          chars.forEach((c, i) => {\n            if (index + i < length) {\n              newOtp[index + i] = c\n            }\n          })\n          setOtp(newOtp)\n\n          const newValue = newOtp.join('')\n          onChange?.(newValue)\n\n          // Focus appropriate field\n          const nextIndex = Math.min(index + chars.length, length - 1)\n          inputRefs.current[nextIndex]?.focus()\n\n          if (newValue.length === length) {\n            onComplete?.(newValue)\n          }\n          return\n        }\n\n        // Single character\n        newOtp[index] = char\n        setOtp(newOtp)\n\n        const newValue = newOtp.join('')\n        onChange?.(newValue)\n\n        // Move to next input\n        if (char && index < length - 1) {\n          inputRefs.current[index + 1]?.focus()\n        }\n\n        if (newValue.length === length && !newValue.includes('')) {\n          onComplete?.(newValue)\n        }\n      },\n      [otp, length, type, disabled, onChange, onComplete]\n    )\n\n    const handleKeyDown = useCallback(\n      (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled) return\n\n        if (e.key === 'Backspace') {\n          e.preventDefault()\n          const newOtp = [...otp]\n\n          if (otp[index]) {\n            // Clear current field\n            newOtp[index] = ''\n            setOtp(newOtp)\n            onChange?.(newOtp.join(''))\n          } else if (index > 0) {\n            // Move to previous field and clear it\n            newOtp[index - 1] = ''\n            setOtp(newOtp)\n            onChange?.(newOtp.join(''))\n            inputRefs.current[index - 1]?.focus()\n          }\n        } else if (e.key === 'ArrowLeft' && index > 0) {\n          e.preventDefault()\n          inputRefs.current[index - 1]?.focus()\n        } else if (e.key === 'ArrowRight' && index < length - 1) {\n          e.preventDefault()\n          inputRefs.current[index + 1]?.focus()\n        }\n      },\n      [otp, length, disabled, onChange]\n    )\n\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent) => {\n        e.preventDefault()\n        if (disabled) return\n\n        const pastedData = e.clipboardData.getData('text')\n        const filteredData =\n          type === 'number'\n            ? pastedData.replace(/\\D/g, '')\n            : pastedData.replace(/[^a-zA-Z0-9]/g, '')\n\n        if (filteredData) {\n          handleChange(0, filteredData)\n        }\n      },\n      [type, disabled, handleChange]\n    )\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select()\n    }, [])\n\n    return (\n      <div className={`flex gap-2 ${className}`}>\n        {otp.map((digit, index) => (\n          <input\n            key={index}\n            ref={(el) => {\n              inputRefs.current[index] = el\n            }}\n            type={mask ? 'password' : type === 'number' ? 'tel' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            maxLength={1}\n            value={digit}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(index, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            className={`\n              input input-bordered text-center font-mono\n              ${sizeClasses[size]}\n              ${error ? 'input-error' : ''}\n              ${disabled ? 'input-disabled opacity-50' : ''}\n            `}\n            aria-label={`OTP digit ${index + 1}`}\n          />\n        ))}\n      </div>\n    )\n  }\n)\n\nOTPInput.displayName = 'OTPInput'\n"],"names":["OTPInput","forwardRef","length","value","onChange","onComplete","size","type","mask","disabled","error","autoFocus","placeholder","className","ref","otp","setOtp","useState","initial","inputRefs","useRef","sizeClasses","useImperativeHandle","useEffect","newOtp","handleChange","useCallback","index","char","chars","c","i","newValue","nextIndex","handleKeyDown","handlePaste","e","pastedData","filteredData","handleFocus","jsx","digit","el"],"mappings":"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"}
+{"version":3,"file":"index60.js","sources":["../src/components/Notification.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport ReactDOM from 'react-dom/client'\n\nexport type NotificationType = 'success' | 'info' | 'warning' | 'error'\nexport type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'\n\nexport interface NotificationConfig {\n  message: React.ReactNode\n  description?: React.ReactNode\n  type?: NotificationType\n  duration?: number // in seconds, 0 = no auto close\n  placement?: NotificationPlacement\n  closable?: boolean\n  onClick?: () => void\n  onClose?: () => void\n}\n\ninterface NotificationItem extends NotificationConfig {\n  id: string\n  createdAt: number\n}\n\ntype Listener = () => void\n\nclass NotificationManager {\n  private notifications: NotificationItem[] = []\n  private listeners: Listener[] = []\n  private container: HTMLDivElement | null = null\n  private root: ReactDOM.Root | null = null\n  private idCounter = 0\n\n  subscribe(listener: Listener) {\n    this.listeners.push(listener)\n    return () => {\n      this.listeners = this.listeners.filter((l) => l !== listener)\n    }\n  }\n\n  getNotifications() {\n    return this.notifications\n  }\n\n  private emit() {\n    this.listeners.forEach((listener) => listener())\n  }\n\n  private ensureContainer() {\n    if (!this.container) {\n      this.container = document.createElement('div')\n      document.body.appendChild(this.container)\n      this.root = ReactDOM.createRoot(this.container)\n      this.root.render(<NotificationContainer manager={this} />)\n    }\n  }\n\n  open(config: NotificationConfig) {\n    this.ensureContainer()\n\n    const id = `notification-${++this.idCounter}`\n    const notification: NotificationItem = {\n      ...config,\n      id,\n      createdAt: Date.now(),\n      duration: config.duration ?? 4.5,\n      placement: config.placement ?? 'topRight',\n      closable: config.closable ?? true,\n      type: config.type ?? 'info',\n    }\n\n    this.notifications.push(notification)\n    this.emit()\n\n    // Auto-dismiss\n    if (notification.duration && notification.duration > 0) {\n      setTimeout(() => {\n        this.close(id)\n      }, notification.duration * 1000)\n    }\n\n    return id\n  }\n\n  close(id: string) {\n    const notification = this.notifications.find((n) => n.id === id)\n    this.notifications = this.notifications.filter((n) => n.id !== id)\n    this.emit()\n\n    if (notification?.onClose) {\n      notification.onClose()\n    }\n  }\n\n  success(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'success' })\n  }\n\n  error(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'error' })\n  }\n\n  info(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'info' })\n  }\n\n  warning(config: Omit<NotificationConfig, 'type'>) {\n    return this.open({ ...config, type: 'warning' })\n  }\n\n  destroy() {\n    this.notifications = []\n    this.emit()\n  }\n}\n\ninterface NotificationContainerProps {\n  manager: NotificationManager\n}\n\nfunction NotificationContainer({ manager }: NotificationContainerProps) {\n  const [, forceUpdate] = useState({})\n\n  useEffect(() => {\n    const unsubscribe = manager.subscribe(() => {\n      forceUpdate({})\n    })\n    return unsubscribe\n  }, [manager])\n\n  const notifications = manager.getNotifications()\n\n  // Group by placement\n  const grouped: Record<NotificationPlacement, NotificationItem[]> = {\n    topLeft: [],\n    topRight: [],\n    bottomLeft: [],\n    bottomRight: [],\n  }\n\n  notifications.forEach((notification) => {\n    grouped[notification.placement!].push(notification)\n  })\n\n  const placementClasses: Record<NotificationPlacement, string> = {\n    topRight: 'toast toast-top toast-end',\n    topLeft: 'toast toast-top toast-start',\n    bottomRight: 'toast toast-bottom toast-end',\n    bottomLeft: 'toast toast-bottom toast-start',\n  }\n\n  return (\n    <>\n      {Object.entries(grouped).map(([placement, items]) => {\n        if (items.length === 0) return null\n\n        return (\n          <div key={placement} className={placementClasses[placement as NotificationPlacement]}>\n            {items.map((notification) => (\n              <NotificationItem\n                key={notification.id}\n                notification={notification}\n                onClose={() => manager.close(notification.id)}\n              />\n            ))}\n          </div>\n        )\n      })}\n    </>\n  )\n}\n\ninterface NotificationItemProps {\n  notification: NotificationItem\n  onClose: () => void\n}\n\nfunction NotificationItem({ notification, onClose }: NotificationItemProps) {\n  const alertTypeClasses: Record<NotificationType, string> = {\n    success: 'alert-success',\n    error: 'alert-error',\n    info: 'alert-info',\n    warning: 'alert-warning',\n  }\n\n  const handleClick = () => {\n    if (notification.onClick) {\n      notification.onClick()\n    }\n  }\n\n  return (\n    <div\n      className={`alert ${alertTypeClasses[notification.type!]} shadow-lg cursor-pointer min-w-[300px] max-w-[400px]`}\n      onClick={handleClick}\n    >\n      <div className=\"flex-1\">\n        {notification.message && <div className=\"font-bold\">{notification.message}</div>}\n        {notification.description && <div className=\"text-sm\">{notification.description}</div>}\n      </div>\n      {notification.closable && (\n        <button\n          className=\"btn btn-sm btn-ghost btn-circle\"\n          onClick={(e) => {\n            e.stopPropagation()\n            onClose()\n          }}\n        >\n          ✕\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport const notification = new NotificationManager()\n"],"names":["NotificationManager","listener","l","ReactDOM","jsx","NotificationContainer","config","id","notification","n","manager","forceUpdate","useState","useEffect","notifications","grouped","placementClasses","Fragment","placement","items","NotificationItem","onClose","alertTypeClasses","handleClick","jsxs","e"],"mappings":"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"}

package/dist/index61.js

@@ -1,173 +1,113 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import f from "react";
-const q = ({
-  current: p,
-  defaultCurrent: P = 1,
-  total: m,
-  pageSize: h,
-  defaultPageSize: C = 10,
-  pageSizeOptions: j = [10, 20, 50, 100],
-  onChange: g,
-  onShowSizeChange: k,
-  showSizeChanger: y = !1,
-  showQuickJumper: S = !1,
-  showTotal: d = !1,
-  simple: I = !1,
-  size: M = "md",
-  disabled: a = !1,
-  className: b = "",
-  ...N
-}) => {
-  const [w, v] = f.useState(P), [J, D] = f.useState(C), [x, $] = f.useState(""), t = p !== void 0 ? p : w, u = h !== void 0 ? h : J, n = Math.ceil(m / u), r = (e) => {
-    e < 1 || e > n || a || (p === void 0 && v(e), g?.(e, u));
-  }, E = (e) => {
-    const c = Math.ceil(m / e), s = t > c ? c : t;
-    h === void 0 && D(e), p === void 0 && s !== t && v(s), k?.(s, e), g?.(s, e);
-  }, F = (e) => {
-    if (e.key === "Enter") {
-      const c = parseInt(x);
-      !isNaN(c) && c >= 1 && c <= n && (r(c), $(""));
-    }
-  }, G = () => {
-    const e = [];
-    if (n <= 7)
-      for (let s = 1; s <= n; s++)
-        e.push(s);
-    else if (t <= 3) {
-      for (let s = 1; s <= 5; s++)
-        e.push(s);
-      e.push("ellipsis"), e.push(n);
-    } else if (t >= n - 2) {
-      e.push(1), e.push("ellipsis");
-      for (let s = n - 4; s <= n; s++)
-        e.push(s);
-    } else {
-      e.push(1), e.push("ellipsis");
-      for (let s = t - 1; s <= t + 1; s++)
-        e.push(s);
-      e.push("ellipsis"), e.push(n);
-    }
-    return e;
-  }, l = {
-    xs: "btn-xs",
-    sm: "btn-sm",
-    md: "",
-    lg: "btn-lg"
-  }[M], K = [
-    (t - 1) * u + 1,
-    Math.min(t * u, m)
-  ];
-  return I ? /* @__PURE__ */ o("div", { className: `flex items-center gap-2 ${b}`, ...N, children: [
-    /* @__PURE__ */ i(
-      "button",
-      {
-        className: `btn btn-ghost ${l}`,
-        onClick: () => r(t - 1),
-        disabled: a || t === 1,
-        children: "‹"
-      }
-    ),
-    /* @__PURE__ */ o("span", { className: "text-sm", children: [
-      t,
-      " / ",
-      n
-    ] }),
-    /* @__PURE__ */ i(
-      "button",
-      {
-        className: `btn btn-ghost ${l}`,
-        onClick: () => r(t + 1),
-        disabled: a || t === n,
-        children: "›"
+import { jsx as v } from "react/jsx-runtime";
+import { forwardRef as L, useState as M, useRef as V, useImperativeHandle as Z, useEffect as j, useCallback as i } from "react";
+const g = L(
+  ({
+    length: s = 6,
+    value: p = "",
+    onChange: n,
+    onComplete: m,
+    size: k = "md",
+    type: f = "number",
+    mask: y = !1,
+    disabled: c = !1,
+    error: P = !1,
+    autoFocus: A = !1,
+    placeholder: b = "",
+    className: I = ""
+  }, R) => {
+    const [a, o] = M(() => {
+      const t = p.split("").slice(0, s);
+      return [...t, ...Array(s - t.length).fill("")];
+    }), u = V([]), x = {
+      xs: "input-xs w-8 h-8 text-sm",
+      sm: "input-sm w-10 h-10 text-base",
+      md: "w-12 h-12 text-lg",
+      lg: "input-lg w-14 h-14 text-xl",
+      xl: "w-16 h-16 text-2xl"
+    };
+    Z(R, () => ({
+      focus: () => {
+        u.current[0]?.focus();
+      },
+      clear: () => {
+        o(Array(s).fill("")), u.current[0]?.focus();
       }
-    )
-  ] }) : /* @__PURE__ */ o("div", { className: `flex flex-wrap items-center gap-4 ${b}`, ...N, children: [
-    d && /* @__PURE__ */ i("div", { className: "text-sm text-base-content/70", children: typeof d == "function" ? d(m, K) : `Total ${m} items` }),
-    y && /* @__PURE__ */ i(
-      "select",
-      {
-        className: `select select-bordered ${l}`,
-        value: u,
-        onChange: (e) => E(Number(e.target.value)),
-        disabled: a,
-        children: j.map((e) => /* @__PURE__ */ o("option", { value: e, children: [
-          e,
-          " / page"
-        ] }, e))
-      }
-    ),
-    /* @__PURE__ */ o("div", { className: "join", children: [
-      /* @__PURE__ */ i(
-        "button",
-        {
-          className: `join-item btn ${l}`,
-          onClick: () => r(1),
-          disabled: a || t === 1,
-          title: "First page",
-          children: "«"
-        }
-      ),
-      /* @__PURE__ */ i(
-        "button",
-        {
-          className: `join-item btn ${l}`,
-          onClick: () => r(t - 1),
-          disabled: a || t === 1,
-          title: "Previous page",
-          children: "‹"
+    })), j(() => {
+      A && u.current[0]?.focus();
+    }, [A]), j(() => {
+      const t = p.split("").slice(0, s);
+      o([...t, ...Array(s - t.length).fill("")]);
+    }, [p, s]);
+    const w = i(
+      (t, e) => {
+        if (c || f === "number" && !/^\d*$/.test(e) || f === "text" && !/^[a-zA-Z0-9]*$/.test(e)) return;
+        const r = [...a];
+        if (e.length > 1) {
+          const O = e.slice(0, s - t).split("");
+          O.forEach((K, $) => {
+            t + $ < s && (r[t + $] = K);
+          }), o(r);
+          const D = r.join("");
+          n?.(D);
+          const E = Math.min(t + O.length, s - 1);
+          u.current[E]?.focus(), D.length === s && m?.(D);
+          return;
         }
-      ),
-      G().map((e, c) => e === "ellipsis" ? /* @__PURE__ */ i("button", { className: `join-item btn btn-disabled ${l}`, children: "..." }, `ellipsis-${c}`) : /* @__PURE__ */ i(
-        "button",
-        {
-          className: `join-item btn ${l} ${t === e ? "btn-active" : ""}`,
-          onClick: () => r(e),
-          disabled: a,
-          children: e
+        r[t] = e, o(r);
+        const l = r.join("");
+        n?.(l), e && t < s - 1 && u.current[t + 1]?.focus(), l.length === s && !l.includes("") && m?.(l);
+      },
+      [a, s, f, c, n, m]
+    ), z = i(
+      (t, e) => {
+        if (!c)
+          if (e.key === "Backspace") {
+            e.preventDefault();
+            const r = [...a];
+            a[t] ? (r[t] = "", o(r), n?.(r.join(""))) : t > 0 && (r[t - 1] = "", o(r), n?.(r.join("")), u.current[t - 1]?.focus());
+          } else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), u.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < s - 1 && (e.preventDefault(), u.current[t + 1]?.focus());
+      },
+      [a, s, c, n]
+    ), N = i(
+      (t) => {
+        if (t.preventDefault(), c) return;
+        const e = t.clipboardData.getData("text"), r = f === "number" ? e.replace(/\D/g, "") : e.replace(/[^a-zA-Z0-9]/g, "");
+        r && w(0, r);
+      },
+      [f, c, w]
+    ), T = i((t) => {
+      t.target.select();
+    }, []);
+    return /* @__PURE__ */ v("div", { className: `flex gap-2 ${I}`, children: a.map((t, e) => /* @__PURE__ */ v(
+      "input",
+      {
+        ref: (r) => {
+          u.current[e] = r;
         },
-        e
-      )),
-      /* @__PURE__ */ i(
-        "button",
-        {
-          className: `join-item btn ${l}`,
-          onClick: () => r(t + 1),
-          disabled: a || t === n,
-          title: "Next page",
-          children: "›"
-        }
-      ),
-      /* @__PURE__ */ i(
-        "button",
-        {
-          className: `join-item btn ${l}`,
-          onClick: () => r(n),
-          disabled: a || t === n,
-          title: "Last page",
-          children: "»"
-        }
-      )
-    ] }),
-    S && /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ i("span", { className: "text-sm", children: "Go to" }),
-      /* @__PURE__ */ i(
-        "input",
-        {
-          type: "number",
-          className: `input input-bordered w-16 ${l}`,
-          min: 1,
-          max: n,
-          value: x,
-          onChange: (e) => $(e.target.value),
-          onKeyDown: F,
-          disabled: a,
-          placeholder: String(t)
-        }
-      )
-    ] })
-  ] });
-};
+        type: y ? "password" : f === "number" ? "tel" : "text",
+        inputMode: f === "number" ? "numeric" : "text",
+        maxLength: 1,
+        value: t,
+        placeholder: b,
+        disabled: c,
+        onChange: (r) => w(e, r.target.value),
+        onKeyDown: (r) => z(e, r),
+        onPaste: N,
+        onFocus: T,
+        className: `
+              input input-bordered text-center font-mono
+              ${x[k]}
+              ${P ? "input-error" : ""}
+              ${c ? "input-disabled opacity-50" : ""}
+            `,
+        "aria-label": `OTP digit ${e + 1}`
+      },
+      e
+    )) });
+  }
+);
+g.displayName = "OTPInput";
 export {
-  q as Pagination
+  g as OTPInput
 };
 //# sourceMappingURL=index61.js.map