asterui 0.12.19 → 0.12.21

package/dist/index20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index20.js","sources":["../src/components/Countdown.tsx"],"sourcesContent":["import React, { useEffect, useState, useCallback } from 'react'\n\nexport interface CountdownProps {\n  /** Target timestamp in milliseconds or Date object */\n  value: number | Date\n  /** Format string: 'D' days, 'H' hours, 'M' minutes, 'S' seconds */\n  format?: string\n  /** Callback when countdown reaches zero */\n  onFinish?: () => void\n  /** Callback on each tick with remaining time */\n  onChange?: (value: number) => void\n  /** Additional CSS classes */\n  className?: string\n  /** Size variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Show labels under each unit */\n  showLabels?: boolean\n  /** Custom labels */\n  labels?: {\n    days?: string\n    hours?: string\n    minutes?: string\n    seconds?: string\n  }\n  /** Show box style around each unit */\n  boxed?: boolean\n}\n\ninterface TimeLeft {\n  days: number\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nconst calculateTimeLeft = (targetTime: number): TimeLeft => {\n  const difference = targetTime - Date.now()\n\n  if (difference <= 0) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n  }\n\n  return {\n    days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n    minutes: Math.floor((difference / 1000 / 60) % 60),\n    seconds: Math.floor((difference / 1000) % 60),\n  }\n}\n\nconst CountdownUnit: React.FC<{\n  value: number\n  label?: string\n  size?: CountdownProps['size']\n  showLabel?: boolean\n  boxed?: boolean\n}> = ({ value, label, size, showLabel, boxed }) => {\n  const sizeClasses = {\n    xs: 'text-lg',\n    sm: 'text-2xl',\n    md: 'text-4xl',\n    lg: 'text-5xl',\n    xl: 'text-6xl',\n  }\n\n  const content = (\n    <span className={`countdown font-mono ${sizeClasses[size || 'md']}`}>\n      <span\n        style={{ '--value': value, '--digits': 2 } as React.CSSProperties}\n        aria-live=\"polite\"\n        aria-label={String(value)}\n      >\n        {String(value).padStart(2, '0')}\n      </span>\n    </span>\n  )\n\n  if (boxed) {\n    return (\n      <div className=\"flex flex-col items-center bg-neutral text-neutral-content rounded-box p-2\">\n        {content}\n        {showLabel && label && <span className=\"text-xs mt-1\">{label}</span>}\n      </div>\n    )\n  }\n\n  if (showLabel) {\n    return (\n      <div className=\"flex flex-col items-center\">\n        {content}\n        {label && <span className=\"text-xs text-base-content/70\">{label}</span>}\n      </div>\n    )\n  }\n\n  return content\n}\n\nexport const Countdown: React.FC<CountdownProps> = ({\n  value,\n  format = 'HH:MM:SS',\n  onFinish,\n  onChange,\n  className = '',\n  size = 'md',\n  showLabels = false,\n  labels = {},\n  boxed = false,\n}) => {\n  const targetTime = value instanceof Date ? value.getTime() : value\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>(() => calculateTimeLeft(targetTime))\n  const [finished, setFinished] = useState(false)\n\n  const defaultLabels = {\n    days: labels.days || 'days',\n    hours: labels.hours || 'hours',\n    minutes: labels.minutes || 'min',\n    seconds: labels.seconds || 'sec',\n  }\n\n  const tick = useCallback(() => {\n    const newTimeLeft = calculateTimeLeft(targetTime)\n    setTimeLeft(newTimeLeft)\n\n    const remaining = targetTime - Date.now()\n    onChange?.(Math.max(0, remaining))\n\n    if (remaining <= 0 && !finished) {\n      setFinished(true)\n      onFinish?.()\n    }\n  }, [targetTime, onChange, onFinish, finished])\n\n  useEffect(() => {\n    const timer = setInterval(tick, 1000)\n    tick() // Initial tick\n\n    return () => clearInterval(timer)\n  }, [tick])\n\n  const showDays = format.includes('D')\n  const showHours = format.includes('H')\n  const showMinutes = format.includes('M')\n  const showSeconds = format.includes('S')\n\n  const separatorSize = size === 'lg' || size === 'xl' ? 'text-3xl' : size === 'md' ? 'text-2xl' : 'text-xl'\n  const showSeparators = !showLabels && !boxed\n\n  return (\n    <div className={`flex gap-4 items-center ${className}`}>\n      {showDays && (\n        <>\n          <CountdownUnit\n            value={timeLeft.days}\n            label={defaultLabels.days}\n            size={size}\n            showLabel={showLabels}\n            boxed={boxed}\n          />\n          {showSeparators && (showHours || showMinutes || showSeconds) && (\n            <span className={separatorSize}>:</span>\n          )}\n        </>\n      )}\n      {showHours && (\n        <>\n          <CountdownUnit\n            value={timeLeft.hours}\n            label={defaultLabels.hours}\n            size={size}\n            showLabel={showLabels}\n            boxed={boxed}\n          />\n          {showSeparators && (showMinutes || showSeconds) && (\n            <span className={separatorSize}>:</span>\n          )}\n        </>\n      )}\n      {showMinutes && (\n        <>\n          <CountdownUnit\n            value={timeLeft.minutes}\n            label={defaultLabels.minutes}\n            size={size}\n            showLabel={showLabels}\n            boxed={boxed}\n          />\n          {showSeparators && showSeconds && <span className={separatorSize}>:</span>}\n        </>\n      )}\n      {showSeconds && (\n        <CountdownUnit\n          value={timeLeft.seconds}\n          label={defaultLabels.seconds}\n          size={size}\n          showLabel={showLabels}\n          boxed={boxed}\n        />\n      )}\n    </div>\n  )\n}\n\nCountdown.displayName = 'Countdown'\n"],"names":["calculateTimeLeft","targetTime","difference","CountdownUnit","value","label","size","showLabel","boxed","content","jsx","jsxs","Countdown","format","onFinish","onChange","className","showLabels","labels","timeLeft","setTimeLeft","useState","finished","setFinished","defaultLabels","tick","useCallback","newTimeLeft","remaining","useEffect","timer","showDays","showHours","showMinutes","showSeconds","separatorSize","showSeparators","Fragment"],"mappings":"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"}
+{"version":3,"file":"index20.js","sources":["../src/components/ContextMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback, createContext, useContext } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface ContextMenuItem {\n  key: string\n  label: React.ReactNode\n  icon?: React.ReactNode\n  disabled?: boolean\n  danger?: boolean\n  divider?: boolean\n  children?: ContextMenuItem[]\n}\n\nexport interface ContextMenuProps {\n  /** Element that triggers the context menu on right-click */\n  children: React.ReactNode\n  /** Menu items (data-driven pattern) */\n  items?: ContextMenuItem[]\n  /** Callback when an item is selected */\n  onSelect?: (key: string) => void\n  /** Whether the context menu is disabled */\n  disabled?: boolean\n  /** Additional CSS classes for the menu */\n  className?: string\n}\n\nexport interface ContextMenuItemProps {\n  /** Unique key for the item */\n  itemKey: string\n  /** Item content */\n  children: React.ReactNode\n  /** Icon to display before label */\n  icon?: React.ReactNode\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Show as danger/destructive action */\n  danger?: boolean\n  /** Additional CSS classes */\n  className?: string\n}\n\nexport interface ContextMenuDividerProps {\n  /** Additional CSS classes */\n  className?: string\n}\n\nexport interface ContextMenuSubMenuProps {\n  /** Unique key for the submenu */\n  itemKey: string\n  /** Submenu label */\n  label: React.ReactNode\n  /** Icon to display before label */\n  icon?: React.ReactNode\n  /** Whether the submenu is disabled */\n  disabled?: boolean\n  /** Submenu items */\n  children: React.ReactNode\n  /** Additional CSS classes */\n  className?: string\n}\n\ninterface ContextMenuContextValue {\n  onSelect: (key: string) => void\n  onClose: () => void\n}\n\ninterface MenuPosition {\n  x: number\n  y: number\n}\n\nconst ContextMenuContext = createContext<ContextMenuContextValue | null>(null)\n\nconst useContextMenuContext = () => {\n  const context = useContext(ContextMenuContext)\n  if (!context) {\n    throw new Error('ContextMenu compound components must be used within a ContextMenu')\n  }\n  return context\n}\n\n// Compound pattern components\nconst ContextMenuItemComponent: React.FC<ContextMenuItemProps> = ({\n  itemKey,\n  children,\n  icon,\n  disabled = false,\n  danger = false,\n  className = '',\n}) => {\n  const { onSelect, onClose } = useContextMenuContext()\n\n  const handleClick = () => {\n    if (disabled) return\n    onSelect(itemKey)\n    onClose()\n  }\n\n  return (\n    <li className={className}>\n      <button\n        onClick={handleClick}\n        disabled={disabled}\n        className={`\n          flex items-center gap-2 w-full px-4 py-2 text-left text-sm\n          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-base-200'}\n          ${danger ? 'text-error hover:bg-error/10' : ''}\n        `}\n      >\n        {icon && <span className=\"w-4 h-4\">{icon}</span>}\n        <span className=\"flex-1\">{children}</span>\n      </button>\n    </li>\n  )\n}\n\nconst ContextMenuDividerComponent: React.FC<ContextMenuDividerProps> = ({ className = '' }) => {\n  return <li className={`divider my-1 ${className}`}></li>\n}\n\nconst ContextMenuSubMenuComponent: React.FC<ContextMenuSubMenuProps> = ({\n  itemKey: _itemKey,\n  label,\n  icon,\n  disabled = false,\n  children,\n  className = '',\n}) => {\n  const [showSubmenu, setShowSubmenu] = useState(false)\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const handleMouseEnter = () => {\n    if (disabled) return\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    setShowSubmenu(true)\n  }\n\n  const handleMouseLeave = () => {\n    timeoutRef.current = setTimeout(() => setShowSubmenu(false), 100)\n  }\n\n  return (\n    <li\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={`relative ${className}`}\n    >\n      <button\n        disabled={disabled}\n        className={`\n          flex items-center gap-2 w-full px-4 py-2 text-left text-sm\n          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-base-200'}\n        `}\n      >\n        {icon && <span className=\"w-4 h-4\">{icon}</span>}\n        <span className=\"flex-1\">{label}</span>\n        <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n      {showSubmenu && (\n        <ul\n          className=\"menu bg-base-100 rounded-box shadow-lg border border-base-300 absolute left-full top-0 min-w-[160px] z-50 p-1\"\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          {children}\n        </ul>\n      )}\n    </li>\n  )\n}\n\n// Data-driven pattern internal component\nconst MenuItem: React.FC<{\n  item: ContextMenuItem\n  onSelect: (key: string) => void\n  onClose: () => void\n}> = ({ item, onSelect, onClose }) => {\n  const [showSubmenu, setShowSubmenu] = useState(false)\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  if (item.divider) {\n    return <li className=\"divider my-1\"></li>\n  }\n\n  const handleClick = () => {\n    if (item.disabled) return\n    if (item.children && item.children.length > 0) return\n    onSelect(item.key)\n    onClose()\n  }\n\n  const hasSubmenu = item.children && item.children.length > 0\n\n  const handleMouseEnter = () => {\n    if (!hasSubmenu) return\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    setShowSubmenu(true)\n  }\n\n  const handleMouseLeave = () => {\n    if (!hasSubmenu) return\n    timeoutRef.current = setTimeout(() => setShowSubmenu(false), 100)\n  }\n\n  return (\n    <li\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className=\"relative\"\n    >\n      <button\n        onClick={handleClick}\n        disabled={item.disabled}\n        className={`\n          flex items-center gap-2 w-full px-4 py-2 text-left text-sm\n          ${item.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-base-200'}\n          ${item.danger ? 'text-error hover:bg-error/10' : ''}\n        `}\n      >\n        {item.icon && <span className=\"w-4 h-4\">{item.icon}</span>}\n        <span className=\"flex-1\">{item.label}</span>\n        {hasSubmenu && (\n          <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n          </svg>\n        )}\n      </button>\n      {hasSubmenu && showSubmenu && (\n        <ul\n          className=\"menu bg-base-100 rounded-box shadow-lg border border-base-300 absolute left-full top-0 min-w-[160px] z-50 p-1\"\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n        >\n          {item.children!.map((child) => (\n            <MenuItem key={child.key} item={child} onSelect={onSelect} onClose={onClose} />\n          ))}\n        </ul>\n      )}\n    </li>\n  )\n}\n\nconst ContextMenuRoot: React.FC<ContextMenuProps> = ({\n  children,\n  items,\n  onSelect,\n  disabled = false,\n  className = '',\n}) => {\n  const [visible, setVisible] = useState(false)\n  const [position, setPosition] = useState<MenuPosition>({ x: 0, y: 0 })\n  const menuRef = useRef<HTMLUListElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  const handleContextMenu = useCallback(\n    (e: React.MouseEvent) => {\n      if (disabled) return\n      e.preventDefault()\n      e.stopPropagation()\n\n      // Calculate position, ensuring menu stays within viewport\n      let x = e.clientX\n      let y = e.clientY\n\n      // We'll adjust after render when we know menu dimensions\n      setPosition({ x, y })\n      setVisible(true)\n    },\n    [disabled]\n  )\n\n  const handleClose = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleSelect = useCallback(\n    (key: string) => {\n      onSelect?.(key)\n    },\n    [onSelect]\n  )\n\n  // Adjust position after menu renders to keep it in viewport\n  useEffect(() => {\n    if (visible && menuRef.current) {\n      const menu = menuRef.current\n      const rect = menu.getBoundingClientRect()\n      const viewportWidth = window.innerWidth\n      const viewportHeight = window.innerHeight\n\n      let { x, y } = position\n\n      if (x + rect.width > viewportWidth) {\n        x = viewportWidth - rect.width - 8\n      }\n      if (y + rect.height > viewportHeight) {\n        y = viewportHeight - rect.height - 8\n      }\n\n      if (x !== position.x || y !== position.y) {\n        setPosition({ x, y })\n      }\n    }\n  }, [visible, position])\n\n  // Close on click outside or escape\n  useEffect(() => {\n    if (!visible) return\n\n    const handleClickOutside = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        handleClose()\n      }\n    }\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose()\n      }\n    }\n\n    const handleScroll = () => {\n      handleClose()\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleEscape)\n    document.addEventListener('scroll', handleScroll, true)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleEscape)\n      document.removeEventListener('scroll', handleScroll, true)\n    }\n  }, [visible, handleClose])\n\n  // Determine if using data-driven or compound pattern\n  // Find menu content children (not the trigger element)\n  const childArray = React.Children.toArray(children)\n  const triggerChild = childArray[0]\n  const menuChildren = childArray.slice(1)\n  const useDataDriven = items && items.length > 0\n\n  const contextValue: ContextMenuContextValue = {\n    onSelect: handleSelect,\n    onClose: handleClose,\n  }\n\n  return (\n    <>\n      <div ref={triggerRef} onContextMenu={handleContextMenu} className=\"inline-block\">\n        {triggerChild}\n      </div>\n      {visible &&\n        createPortal(\n          <ContextMenuContext.Provider value={contextValue}>\n            <ul\n              ref={menuRef}\n              className={`menu bg-base-100 rounded-box shadow-lg border border-base-300 min-w-[160px] p-1 fixed z-[9999] ${className}`}\n              style={{ left: position.x, top: position.y }}\n            >\n              {useDataDriven\n                ? items!.map((item) => (\n                    <MenuItem key={item.key} item={item} onSelect={handleSelect} onClose={handleClose} />\n                  ))\n                : menuChildren}\n            </ul>\n          </ContextMenuContext.Provider>,\n          document.body\n        )}\n    </>\n  )\n}\n\n// Assign compound components\nexport const ContextMenu = Object.assign(ContextMenuRoot, {\n  Item: ContextMenuItemComponent,\n  Divider: ContextMenuDividerComponent,\n  SubMenu: ContextMenuSubMenuComponent,\n})\n"],"names":["ContextMenuContext","createContext","useContextMenuContext","context","useContext","ContextMenuItemComponent","itemKey","children","icon","disabled","danger","className","onSelect","onClose","jsx","jsxs","ContextMenuDividerComponent","ContextMenuSubMenuComponent","_itemKey","label","showSubmenu","setShowSubmenu","useState","timeoutRef","useRef","handleMouseEnter","handleMouseLeave","MenuItem","item","handleClick","hasSubmenu","child","ContextMenuRoot","items","visible","setVisible","position","setPosition","menuRef","triggerRef","handleContextMenu","useCallback","e","x","y","handleClose","handleSelect","key","useEffect","rect","viewportWidth","viewportHeight","handleClickOutside","handleEscape","handleScroll","childArray","React","triggerChild","menuChildren","useDataDriven","contextValue","Fragment","createPortal","ContextMenu"],"mappings":"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"}

package/dist/index21.js

@@ -1,187 +1,117 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { useState as h, useRef as j, useEffect as y } from "react";
-import { Input as T } from "./index42.js";
-const $ = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], I = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-function L(t, l = "MM/DD/YYYY") {
-  if (!t) return "";
-  const u = t.getFullYear(), f = String(t.getMonth() + 1).padStart(2, "0"), g = String(t.getDate()).padStart(2, "0");
-  return l.replace("YYYY", String(u)).replace("MM", f).replace("DD", g);
-}
-function q(t, l) {
-  return new Date(t, l + 1, 0).getDate();
-}
-function z(t, l) {
-  return new Date(t, l, 1).getDay();
-}
-const B = ({
-  value: t,
-  defaultValue: l,
-  onChange: u,
-  format: f,
-  placeholder: g = "Select date",
-  disabled: v = !1,
-  className: x = "",
-  size: N = "md",
-  ...Y
-}) => {
-  const [o, b] = h(
-    t || l || null
-  ), [c, d] = h(!1), [r, i] = h(
-    o ? o.getMonth() : (/* @__PURE__ */ new Date()).getMonth()
-  ), [a, p] = h(
-    o ? o.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear()
-  ), w = j(null);
-  y(() => {
-    t !== void 0 && b(t);
-  }, [t]), y(() => {
-    function e(s) {
-      w.current && !w.current.contains(s.target) && d(!1);
-    }
-    if (c)
-      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [c]);
-  const S = (e) => {
-    const s = new Date(a, r, e);
-    b(s), u?.(s), d(!1);
-  }, F = () => {
-    r === 0 ? (i(11), p(a - 1)) : i(r - 1);
-  }, O = () => {
-    r === 11 ? (i(0), p(a + 1)) : i(r + 1);
-  }, k = q(a, r), C = z(a, r), D = [];
-  for (let e = 0; e < C; e++)
-    D.push(null);
-  for (let e = 1; e <= k; e++)
-    D.push(e);
-  const M = (e) => !e || !o ? !1 : o.getDate() === e && o.getMonth() === r && o.getFullYear() === a, R = (e) => {
-    if (!e) return !1;
-    const s = /* @__PURE__ */ new Date();
-    return s.getDate() === e && s.getMonth() === r && s.getFullYear() === a;
+import { jsxs as c, jsx as t, Fragment as S } from "react/jsx-runtime";
+import { useState as D, useCallback as k, useEffect as I } from "react";
+const T = (s) => {
+  const e = s - Date.now();
+  return e <= 0 ? { days: 0, hours: 0, minutes: 0, seconds: 0 } : {
+    days: Math.floor(e / (1e3 * 60 * 60 * 24)),
+    hours: Math.floor(e / (1e3 * 60 * 60) % 24),
+    minutes: Math.floor(e / 1e3 / 60 % 60),
+    seconds: Math.floor(e / 1e3 % 60)
   };
-  return /* @__PURE__ */ m("div", { ref: w, className: `relative ${x}`, "data-state": c ? "open" : "closed", ...Y, children: [
-    /* @__PURE__ */ n(
-      T,
-      {
-        value: L(o, f),
-        placeholder: g,
-        disabled: v,
-        size: N,
-        readOnly: !0,
-        onClick: () => !v && d(!c),
-        className: "cursor-pointer"
-      }
-    ),
-    c && /* @__PURE__ */ m("div", { className: "absolute top-full left-0 mt-2 bg-base-100 border border-base-300 rounded-lg shadow-lg p-4 z-50 w-80", children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center justify-between mb-4", children: [
-        /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            onClick: F,
-            className: "btn btn-ghost btn-sm btn-square",
-            children: /* @__PURE__ */ n(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "h-5 w-5",
-                viewBox: "0 0 20 20",
-                fill: "currentColor",
-                children: /* @__PURE__ */ n(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
-                    clipRule: "evenodd"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ m("div", { className: "text-base font-semibold", children: [
-          I[r],
-          " ",
-          a
-        ] }),
-        /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            onClick: O,
-            className: "btn btn-ghost btn-sm btn-square",
-            children: /* @__PURE__ */ n(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                className: "h-5 w-5",
-                viewBox: "0 0 20 20",
-                fill: "currentColor",
-                children: /* @__PURE__ */ n(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
-                    clipRule: "evenodd"
-                  }
-                )
-              }
-            )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ n("div", { className: "grid grid-cols-7 gap-1 mb-2", children: $.map((e) => /* @__PURE__ */ n(
-        "div",
+}, h = ({ value: s, label: e, size: r, showLabel: l, boxed: f }) => {
+  const n = /* @__PURE__ */ t("span", { className: `countdown font-mono ${{
+    xs: "text-lg",
+    sm: "text-2xl",
+    md: "text-4xl",
+    lg: "text-5xl",
+    xl: "text-6xl"
+  }[r || "md"]}`, children: /* @__PURE__ */ t(
+    "span",
+    {
+      style: { "--value": s, "--digits": 2 },
+      "aria-live": "polite",
+      "aria-label": String(s),
+      children: String(s).padStart(2, "0")
+    }
+  ) });
+  return f ? /* @__PURE__ */ c("div", { className: "flex flex-col items-center bg-neutral text-neutral-content rounded-box p-2", children: [
+    n,
+    l && e && /* @__PURE__ */ t("span", { className: "text-xs mt-1", children: e })
+  ] }) : l ? /* @__PURE__ */ c("div", { className: "flex flex-col items-center", children: [
+    n,
+    e && /* @__PURE__ */ t("span", { className: "text-xs text-base-content/70", children: e })
+  ] }) : n;
+}, $ = ({
+  value: s,
+  format: e = "HH:MM:SS",
+  onFinish: r,
+  onChange: l,
+  className: f = "",
+  size: a = "md",
+  showLabels: n = !1,
+  labels: i = {},
+  boxed: o = !1
+}) => {
+  const d = s instanceof Date ? s.getTime() : s, [u, H] = D(() => T(d)), [M, L] = D(!1), m = {
+    days: i.days || "days",
+    hours: i.hours || "hours",
+    minutes: i.minutes || "min",
+    seconds: i.seconds || "sec"
+  }, p = k(() => {
+    const N = T(d);
+    H(N);
+    const C = d - Date.now();
+    l?.(Math.max(0, C)), C <= 0 && !M && (L(!0), r?.());
+  }, [d, l, r, M]);
+  I(() => {
+    const N = setInterval(p, 1e3);
+    return p(), () => clearInterval(N);
+  }, [p]);
+  const j = e.includes("D"), v = e.includes("H"), g = e.includes("M"), x = e.includes("S"), w = a === "lg" || a === "xl" ? "text-3xl" : a === "md" ? "text-2xl" : "text-xl", y = !n && !o;
+  return /* @__PURE__ */ c("div", { className: `flex gap-4 items-center ${f}`, children: [
+    j && /* @__PURE__ */ c(S, { children: [
+      /* @__PURE__ */ t(
+        h,
         {
-          className: "text-center text-xs font-semibold text-base-content/60 py-2",
-          children: e
-        },
-        e
-      )) }),
-      /* @__PURE__ */ n("div", { className: "grid grid-cols-7 gap-1", children: D.map((e, s) => /* @__PURE__ */ n(
-        "button",
+          value: u.days,
+          label: m.days,
+          size: a,
+          showLabel: n,
+          boxed: o
+        }
+      ),
+      y && (v || g || x) && /* @__PURE__ */ t("span", { className: w, children: ":" })
+    ] }),
+    v && /* @__PURE__ */ c(S, { children: [
+      /* @__PURE__ */ t(
+        h,
         {
-          type: "button",
-          disabled: !e,
-          onClick: () => e && S(e),
-          className: `
-                  aspect-square flex items-center justify-center text-sm rounded-lg
-                  ${e ? "hover:bg-base-200" : "invisible"}
-                  ${M(e) ? "bg-primary text-primary-content hover:bg-primary/90" : ""}
-                  ${R(e) && !M(e) ? "border border-primary" : ""}
-                  ${e ? "cursor-pointer" : ""}
-                `,
-          children: e
-        },
-        s
-      )) }),
-      /* @__PURE__ */ n("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ n(
-        "button",
+          value: u.hours,
+          label: m.hours,
+          size: a,
+          showLabel: n,
+          boxed: o
+        }
+      ),
+      y && (g || x) && /* @__PURE__ */ t("span", { className: w, children: ":" })
+    ] }),
+    g && /* @__PURE__ */ c(S, { children: [
+      /* @__PURE__ */ t(
+        h,
         {
-          type: "button",
-          onClick: () => {
-            const e = /* @__PURE__ */ new Date();
-            b(e), i(e.getMonth()), p(e.getFullYear()), u?.(e), d(!1);
-          },
-          className: "btn btn-ghost btn-sm",
-          children: "Today"
+          value: u.minutes,
+          label: m.minutes,
+          size: a,
+          showLabel: n,
+          boxed: o
         }
-      ) })
-    ] })
+      ),
+      y && x && /* @__PURE__ */ t("span", { className: w, children: ":" })
+    ] }),
+    x && /* @__PURE__ */ t(
+      h,
+      {
+        value: u.seconds,
+        label: m.seconds,
+        size: a,
+        showLabel: n,
+        boxed: o
+      }
+    )
   ] });
 };
+$.displayName = "Countdown";
 export {
-  B as DatePicker
+  $ as Countdown
 };
 //# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/DatePicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport { Input } from './Input'\n\nexport interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  value?: Date | null\n  defaultValue?: Date | null\n  onChange?: (date: Date | null) => void\n  format?: string\n  placeholder?: string\n  disabled?: boolean\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n}\n\nconst DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']\nconst MONTHS = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n]\n\nfunction formatDate(date: Date | null, format: string = 'MM/DD/YYYY'): string {\n  if (!date) return ''\n\n  const year = date.getFullYear()\n  const month = String(date.getMonth() + 1).padStart(2, '0')\n  const day = String(date.getDate()).padStart(2, '0')\n\n  return format\n    .replace('YYYY', String(year))\n    .replace('MM', month)\n    .replace('DD', day)\n}\n\nfunction getDaysInMonth(year: number, month: number): number {\n  return new Date(year, month + 1, 0).getDate()\n}\n\nfunction getFirstDayOfMonth(year: number, month: number): number {\n  return new Date(year, month, 1).getDay()\n}\n\nexport const DatePicker: React.FC<DatePickerProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  format,\n  placeholder = 'Select date',\n  disabled = false,\n  className = '',\n  size = 'md',\n  ...rest\n}) => {\n  const [selectedDate, setSelectedDate] = useState<Date | null>(\n    value || defaultValue || null\n  )\n  const [isOpen, setIsOpen] = useState(false)\n  const [viewMonth, setViewMonth] = useState(\n    selectedDate ? selectedDate.getMonth() : new Date().getMonth()\n  )\n  const [viewYear, setViewYear] = useState(\n    selectedDate ? selectedDate.getFullYear() : new Date().getFullYear()\n  )\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setSelectedDate(value)\n    }\n  }, [value])\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen])\n\n  const handleDateSelect = (day: number) => {\n    const newDate = new Date(viewYear, viewMonth, day)\n    setSelectedDate(newDate)\n    onChange?.(newDate)\n    setIsOpen(false)\n  }\n\n  const handlePrevMonth = () => {\n    if (viewMonth === 0) {\n      setViewMonth(11)\n      setViewYear(viewYear - 1)\n    } else {\n      setViewMonth(viewMonth - 1)\n    }\n  }\n\n  const handleNextMonth = () => {\n    if (viewMonth === 11) {\n      setViewMonth(0)\n      setViewYear(viewYear + 1)\n    } else {\n      setViewMonth(viewMonth + 1)\n    }\n  }\n\n  const daysInMonth = getDaysInMonth(viewYear, viewMonth)\n  const firstDayOfMonth = getFirstDayOfMonth(viewYear, viewMonth)\n\n  const calendarDays: (number | null)[] = []\n  for (let i = 0; i < firstDayOfMonth; i++) {\n    calendarDays.push(null)\n  }\n  for (let i = 1; i <= daysInMonth; i++) {\n    calendarDays.push(i)\n  }\n\n  const isSelectedDay = (day: number | null): boolean => {\n    if (!day || !selectedDate) return false\n    return (\n      selectedDate.getDate() === day &&\n      selectedDate.getMonth() === viewMonth &&\n      selectedDate.getFullYear() === viewYear\n    )\n  }\n\n  const isToday = (day: number | null): boolean => {\n    if (!day) return false\n    const today = new Date()\n    return (\n      today.getDate() === day &&\n      today.getMonth() === viewMonth &&\n      today.getFullYear() === viewYear\n    )\n  }\n\n  return (\n    <div ref={containerRef} className={`relative ${className}`} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n      <Input\n        value={formatDate(selectedDate, format)}\n        placeholder={placeholder}\n        disabled={disabled}\n        size={size}\n        readOnly\n        onClick={() => !disabled && setIsOpen(!isOpen)}\n        className=\"cursor-pointer\"\n      />\n\n      {isOpen && (\n        <div className=\"absolute top-full left-0 mt-2 bg-base-100 border border-base-300 rounded-lg shadow-lg p-4 z-50 w-80\">\n          {/* Header */}\n          <div className=\"flex items-center justify-between mb-4\">\n            <button\n              type=\"button\"\n              onClick={handlePrevMonth}\n              className=\"btn btn-ghost btn-sm btn-square\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-5 w-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </button>\n\n            <div className=\"text-base font-semibold\">\n              {MONTHS[viewMonth]} {viewYear}\n            </div>\n\n            <button\n              type=\"button\"\n              onClick={handleNextMonth}\n              className=\"btn btn-ghost btn-sm btn-square\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-5 w-5\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          {/* Days of week */}\n          <div className=\"grid grid-cols-7 gap-1 mb-2\">\n            {DAYS.map((day) => (\n              <div\n                key={day}\n                className=\"text-center text-xs font-semibold text-base-content/60 py-2\"\n              >\n                {day}\n              </div>\n            ))}\n          </div>\n\n          {/* Calendar grid */}\n          <div className=\"grid grid-cols-7 gap-1\">\n            {calendarDays.map((day, index) => (\n              <button\n                key={index}\n                type=\"button\"\n                disabled={!day}\n                onClick={() => day && handleDateSelect(day)}\n                className={`\n                  aspect-square flex items-center justify-center text-sm rounded-lg\n                  ${!day ? 'invisible' : 'hover:bg-base-200'}\n                  ${isSelectedDay(day) ? 'bg-primary text-primary-content hover:bg-primary/90' : ''}\n                  ${isToday(day) && !isSelectedDay(day) ? 'border border-primary' : ''}\n                  ${day ? 'cursor-pointer' : ''}\n                `}\n              >\n                {day}\n              </button>\n            ))}\n          </div>\n\n          {/* Today button */}\n          <div className=\"mt-4 flex justify-end\">\n            <button\n              type=\"button\"\n              onClick={() => {\n                const today = new Date()\n                setSelectedDate(today)\n                setViewMonth(today.getMonth())\n                setViewYear(today.getFullYear())\n                onChange?.(today)\n                setIsOpen(false)\n              }}\n              className=\"btn btn-ghost btn-sm\"\n            >\n              Today\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DAYS","MONTHS","formatDate","date","format","year","month","day","getDaysInMonth","getFirstDayOfMonth","DatePicker","value","defaultValue","onChange","placeholder","disabled","className","size","rest","selectedDate","setSelectedDate","useState","isOpen","setIsOpen","viewMonth","setViewMonth","viewYear","setViewYear","containerRef","useRef","useEffect","handleClickOutside","event","handleDateSelect","newDate","handlePrevMonth","handleNextMonth","daysInMonth","firstDayOfMonth","calendarDays","i","isSelectedDay","isToday","today","jsxs","jsx","Input","index"],"mappings":"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"}
+{"version":3,"file":"index21.js","sources":["../src/components/Countdown.tsx"],"sourcesContent":["import React, { useEffect, useState, useCallback } from 'react'\n\nexport interface CountdownProps {\n  /** Target timestamp in milliseconds or Date object */\n  value: number | Date\n  /** Format string: 'D' days, 'H' hours, 'M' minutes, 'S' seconds */\n  format?: string\n  /** Callback when countdown reaches zero */\n  onFinish?: () => void\n  /** Callback on each tick with remaining time */\n  onChange?: (value: number) => void\n  /** Additional CSS classes */\n  className?: string\n  /** Size variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Show labels under each unit */\n  showLabels?: boolean\n  /** Custom labels */\n  labels?: {\n    days?: string\n    hours?: string\n    minutes?: string\n    seconds?: string\n  }\n  /** Show box style around each unit */\n  boxed?: boolean\n}\n\ninterface TimeLeft {\n  days: number\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nconst calculateTimeLeft = (targetTime: number): TimeLeft => {\n  const difference = targetTime - Date.now()\n\n  if (difference <= 0) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n  }\n\n  return {\n    days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n    minutes: Math.floor((difference / 1000 / 60) % 60),\n    seconds: Math.floor((difference / 1000) % 60),\n  }\n}\n\nconst CountdownUnit: React.FC<{\n  value: number\n  label?: string\n  size?: CountdownProps['size']\n  showLabel?: boolean\n  boxed?: boolean\n}> = ({ value, label, size, showLabel, boxed }) => {\n  const sizeClasses = {\n    xs: 'text-lg',\n    sm: 'text-2xl',\n    md: 'text-4xl',\n    lg: 'text-5xl',\n    xl: 'text-6xl',\n  }\n\n  const content = (\n    <span className={`countdown font-mono ${sizeClasses[size || 'md']}`}>\n      <span\n        style={{ '--value': value, '--digits': 2 } as React.CSSProperties}\n        aria-live=\"polite\"\n        aria-label={String(value)}\n      >\n        {String(value).padStart(2, '0')}\n      </span>\n    </span>\n  )\n\n  if (boxed) {\n    return (\n      <div className=\"flex flex-col items-center bg-neutral text-neutral-content rounded-box p-2\">\n        {content}\n        {showLabel && label && <span className=\"text-xs mt-1\">{label}</span>}\n      </div>\n    )\n  }\n\n  if (showLabel) {\n    return (\n      <div className=\"flex flex-col items-center\">\n        {content}\n        {label && <span className=\"text-xs text-base-content/70\">{label}</span>}\n      </div>\n    )\n  }\n\n  return content\n}\n\nexport const Countdown: React.FC<CountdownProps> = ({\n  value,\n  format = 'HH:MM:SS',\n  onFinish,\n  onChange,\n  className = '',\n  size = 'md',\n  showLabels = false,\n  labels = {},\n  boxed = false,\n}) => {\n  const targetTime = value instanceof Date ? value.getTime() : value\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>(() => calculateTimeLeft(targetTime))\n  const [finished, setFinished] = useState(false)\n\n  const defaultLabels = {\n    days: labels.days || 'days',\n    hours: labels.hours || 'hours',\n    minutes: labels.minutes || 'min',\n    seconds: labels.seconds || 'sec',\n  }\n\n  const tick = useCallback(() => {\n    const newTimeLeft = calculateTimeLeft(targetTime)\n    setTimeLeft(newTimeLeft)\n\n    const remaining = targetTime - Date.now()\n    onChange?.(Math.max(0, remaining))\n\n    if (remaining <= 0 && !finished) {\n      setFinished(true)\n      onFinish?.()\n    }\n  }, [targetTime, onChange, onFinish, finished])\n\n  useEffect(() => {\n    const timer = setInterval(tick, 1000)\n    tick() // Initial tick\n\n    return () => clearInterval(timer)\n  }, [tick])\n\n  const showDays = format.includes('D')\n  const showHours = format.includes('H')\n  const showMinutes = format.includes('M')\n  const showSeconds = format.includes('S')\n\n  const separatorSize = size === 'lg' || size === 'xl' ? 'text-3xl' : size === 'md' ? 'text-2xl' : 'text-xl'\n  const showSeparators = !showLabels && !boxed\n\n  return (\n    <div className={`flex gap-4 items-center ${className}`}>\n      {showDays && (\n        <>\n          <CountdownUnit\n            value={timeLeft.days}\n            label={defaultLabels.days}\n            size={size}\n            showLabel={showLabels}\n            boxed={boxed}\n          />\n          {showSeparators && (showHours || showMinutes || showSeconds) && (\n            <span className={separatorSize}>:</span>\n          )}\n        </>\n      )}\n      {showHours && (\n        <>\n          <CountdownUnit\n            value={timeLeft.hours}\n            label={defaultLabels.hours}\n            size={size}\n            showLabel={showLabels}\n            boxed={boxed}\n          />\n          {showSeparators && (showMinutes || showSeconds) && (\n            <span className={separatorSize}>:</span>\n          )}\n        </>\n      )}\n      {showMinutes && (\n        <>\n          <CountdownUnit\n            value={timeLeft.minutes}\n            label={defaultLabels.minutes}\n            size={size}\n            showLabel={showLabels}\n            boxed={boxed}\n          />\n          {showSeparators && showSeconds && <span className={separatorSize}>:</span>}\n        </>\n      )}\n      {showSeconds && (\n        <CountdownUnit\n          value={timeLeft.seconds}\n          label={defaultLabels.seconds}\n          size={size}\n          showLabel={showLabels}\n          boxed={boxed}\n        />\n      )}\n    </div>\n  )\n}\n\nCountdown.displayName = 'Countdown'\n"],"names":["calculateTimeLeft","targetTime","difference","CountdownUnit","value","label","size","showLabel","boxed","content","jsx","jsxs","Countdown","format","onFinish","onChange","className","showLabels","labels","timeLeft","setTimeLeft","useState","finished","setFinished","defaultLabels","tick","useCallback","newTimeLeft","remaining","useEffect","timer","showDays","showHours","showMinutes","showSeconds","separatorSize","showSeparators","Fragment"],"mappings":"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"}