@memelabui/ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -124,6 +124,82 @@ function useDebounce(value, delayMs = 300) {
   }, [value, delayMs]);
   return debouncedValue;
 }
+function matchModifiers(e, mods) {
+  const ctrl = mods?.ctrl ?? false;
+  const shift = mods?.shift ?? false;
+  const alt = mods?.alt ?? false;
+  const meta = mods?.meta ?? false;
+  return e.ctrlKey === ctrl && e.shiftKey === shift && e.altKey === alt && e.metaKey === meta;
+}
+function useHotkeys(bindings, options = {}) {
+  const { enabled = true } = options;
+  useEffect(() => {
+    if (!enabled) return;
+    const onKeyDown = (e) => {
+      for (const binding of bindings) {
+        if (e.key === binding.key && matchModifiers(e, binding.modifiers)) {
+          binding.handler(e);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled, ...bindings]);
+}
+function useIntersectionObserver(options = {}) {
+  const { root = null, rootMargin = "0px", threshold = 0, enabled = true } = options;
+  const [entry, setEntry] = useState(null);
+  const nodeRef = useRef(null);
+  const observerRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) {
+      setEntry(null);
+      return;
+    }
+    observerRef.current = new IntersectionObserver(
+      ([e]) => setEntry(e),
+      { root, rootMargin, threshold }
+    );
+    if (nodeRef.current) {
+      observerRef.current.observe(nodeRef.current);
+    }
+    return () => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+    };
+  }, [enabled, root, rootMargin, JSON.stringify(threshold)]);
+  const ref = (node) => {
+    if (nodeRef.current) {
+      observerRef.current?.unobserve(nodeRef.current);
+    }
+    nodeRef.current = node;
+    if (node) {
+      observerRef.current?.observe(node);
+    }
+  };
+  return {
+    ref,
+    entry,
+    isIntersecting: entry?.isIntersecting ?? false
+  };
+}
+function useSharedNow(options = {}) {
+  const { interval = 1e3, untilMs, enabled = true } = options;
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    if (!enabled) return;
+    if (untilMs !== void 0 && Date.now() >= untilMs) return;
+    const id = setInterval(() => {
+      const current = Date.now();
+      setNow(current);
+      if (untilMs !== void 0 && current >= untilMs) {
+        clearInterval(id);
+      }
+    }, interval);
+    return () => clearInterval(id);
+  }, [interval, untilMs, enabled]);
+  return now;
+}
 
 // src/tokens/colors.ts
 var colors = {
@@ -552,7 +628,7 @@ var thumbSize = {
   sm: { base: "w-4 h-4", translate: "translate-x-4" },
   md: { base: "w-5 h-5", translate: "translate-x-5" }
 };
-var Toggle = forwardRef(function Toggle2({ checked, onChange, disabled, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
+var Toggle = forwardRef(function Toggle2({ checked, onChange, disabled, busy, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
   const generatedId = useId();
   const toggleId = externalId || generatedId;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -565,7 +641,8 @@ var Toggle = forwardRef(function Toggle2({ checked, onChange, disabled, label, s
         role: "switch",
         "aria-checked": checked,
         "aria-label": ariaLabel || label,
-        disabled,
+        disabled: disabled || busy,
+        "aria-busy": busy || void 0,
         onClick: () => onChange(!checked),
         className: cn(
           "relative rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
@@ -577,9 +654,18 @@ var Toggle = forwardRef(function Toggle2({ checked, onChange, disabled, label, s
           "span",
           {
             className: cn(
-              "absolute top-0.5 left-0.5 rounded-full bg-white transition-transform duration-200",
+              "absolute top-0.5 left-0.5 rounded-full bg-white transition-transform duration-200 flex items-center justify-center",
               thumbSize[size].base,
               checked ? thumbSize[size].translate : "translate-x-0"
+            ),
+            children: busy && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "border-2 border-primary/30 border-t-primary rounded-full animate-spin",
+                  size === "sm" ? "w-2.5 h-2.5" : "w-3 h-3"
+                )
+              }
             )
           }
         )
@@ -2251,6 +2337,309 @@ function ProgressBar({
     )
   ] });
 }
+var sizeMap = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-12 h-12 text-sm",
+  lg: "w-16 h-16 text-base"
+};
+var strokeWidthMap = {
+  sm: 3,
+  md: 3.5,
+  lg: 4
+};
+var RADIUS = 15.9155;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function CooldownRing({
+  duration,
+  remaining,
+  size = "md",
+  className
+}) {
+  const fraction = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0;
+  const offset = CIRCUMFERENCE * (1 - fraction);
+  const color = fraction > 0.5 ? "text-primary" : fraction > 0.25 ? "text-amber-500" : "text-rose-500";
+  const pulse = remaining <= 10 && remaining > 0;
+  const strokeWidth = strokeWidthMap[size];
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex items-center justify-center", sizeMap[size], className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 36 36",
+        className: cn("w-full h-full -rotate-90", color, pulse && "animate-pulse"),
+        "aria-label": `Cooldown: ${remaining} seconds remaining`,
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: RADIUS,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              className: "text-white/10"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: RADIUS,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              strokeDasharray: `${CIRCUMFERENCE} ${CIRCUMFERENCE}`,
+              strokeDashoffset: offset,
+              strokeLinecap: "round",
+              style: { transition: "stroke-dashoffset 0.6s ease" }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute font-semibold tabular-nums text-white select-none",
+        style: { lineHeight: 1 },
+        children: Math.max(0, Math.ceil(remaining))
+      }
+    )
+  ] });
+}
+function StageProgress({ stages, activeStage, className }) {
+  const clampedActive = Math.max(0, Math.min(activeStage, stages.length - 1));
+  const fillPercent = stages.length <= 1 ? 100 : clampedActive / (stages.length - 1) * 100;
+  const isComplete = clampedActive >= stages.length - 1;
+  const isAnimating = !isComplete;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: stages.map((stage, index) => {
+      const isCompleted = index < clampedActive;
+      const isActive = index === clampedActive;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1.5 text-xs font-medium transition-colors duration-300",
+            isCompleted && "text-emerald-400",
+            isActive && "text-white",
+            !isCompleted && !isActive && "text-white/40"
+          ),
+          children: [
+            isCompleted ? (
+              // Completed: emerald check circle
+              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full bg-emerald-400/20", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "h-2.5 w-2.5 text-emerald-400",
+                  viewBox: "0 0 10 10",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M2 5.5L4 7.5L8 3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ) })
+            ) : isActive ? (
+              // Active: primary dot with ring
+              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[var(--ml-primary)] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+            ) : (
+              // Upcoming: hollow dim dot
+              /* @__PURE__ */ jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
+            ),
+            stage
+          ]
+        },
+        stage
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative mt-3 h-1.5 w-full overflow-hidden rounded-full bg-white/10",
+        role: "progressbar",
+        "aria-valuenow": clampedActive,
+        "aria-valuemin": 0,
+        "aria-valuemax": stages.length - 1,
+        "aria-label": `Stage ${clampedActive + 1} of ${stages.length}: ${stages[clampedActive]}`,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-gradient-to-r from-[var(--ml-accent)] to-[var(--ml-primary)] transition-[width] duration-500 ease-in-out",
+            style: { width: `${fillPercent}%` },
+            children: isAnimating && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "pointer-events-none absolute inset-0 -translate-x-full animate-[ml-shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/30 to-transparent",
+                "aria-hidden": "true"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function getUrgencyClasses(remaining, max) {
+  const ratio = max > 0 ? remaining / max : 0;
+  if (ratio > 0.5) {
+    return {
+      filled: "bg-emerald-400",
+      empty: "bg-emerald-400/30",
+      label: "text-emerald-400"
+    };
+  }
+  if (ratio > 0.25) {
+    return {
+      filled: "bg-amber-400",
+      empty: "bg-amber-400/30",
+      label: "text-amber-400"
+    };
+  }
+  return {
+    filled: "bg-rose-400",
+    empty: "bg-rose-400/30",
+    label: "text-rose-400"
+  };
+}
+function DotIndicator({
+  remaining,
+  max,
+  showLabel = false,
+  labelFormat,
+  className
+}) {
+  const clampedRemaining = Math.max(0, Math.min(remaining, max));
+  const used = max - clampedRemaining;
+  const urgency = getUrgencyClasses(clampedRemaining, max);
+  const defaultLabel = `${clampedRemaining}/${max}`;
+  const label = labelFormat ? labelFormat(clampedRemaining, max) : defaultLabel;
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center gap-1",
+        role: "meter",
+        "aria-valuenow": clampedRemaining,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label,
+        children: Array.from({ length: max }, (_, index) => {
+          const isFilled = index < used;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "h-2 w-2 rounded-full transition-colors duration-300",
+                isFilled ? urgency.filled : urgency.empty
+              ),
+              "aria-hidden": "true"
+            },
+            index
+          );
+        })
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium tabular-nums", urgency.label), children: label })
+  ] });
+}
+function ActiveFilterPills({
+  filters,
+  onRemove,
+  onClearAll,
+  clearAllLabel = "Clear all",
+  className
+}) {
+  if (filters.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-1.5", className), children: [
+    filters.map((filter) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-xs text-white/80 ring-1 ring-white/10",
+        children: [
+          filter.label,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(filter.key),
+              className: "ml-0.5 text-white/50 transition-colors duration-150 hover:text-white focus:outline-none focus-visible:text-white",
+              "aria-label": `Remove filter: ${filter.label}`,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "h-3 w-3",
+                  viewBox: "0 0 12 12",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M9 3L3 9M3 3L9 9",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      },
+      filter.key
+    )),
+    filters.length > 1 && onClearAll && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClearAll,
+        className: "text-xs text-white/40 underline-offset-2 transition-colors duration-150 hover:text-white/70 focus:outline-none focus-visible:text-white/70",
+        children: clearAllLabel
+      }
+    )
+  ] });
+}
+function SectionCard({
+  title,
+  description,
+  right,
+  overlay,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative bg-white/5 ring-1 ring-white/10 rounded-xl overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-5 py-4 border-b border-white/[0.06]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-white", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-xs text-white/40 mt-0.5", children: description })
+          ] }),
+          right && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: right })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-5 py-4", children }),
+        overlay
+      ]
+    }
+  );
+}
 var maxWidthClass = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -2899,5 +3288,187 @@ function useToast() {
   }
   return ctx;
 }
+function SavingIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 animate-spin text-white/70",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+function SavedIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 text-green-400",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.4 }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4" })
+      ]
+    }
+  );
+}
+function ErrorIcon2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 text-red-400",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.4 }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 9l-6 6M9 9l6 6" })
+      ]
+    }
+  );
+}
+var statusConfig = {
+  saving: {
+    icon: SavingIcon,
+    defaultText: "Saving...",
+    textClass: "text-white/70"
+  },
+  saved: {
+    icon: SavedIcon,
+    defaultText: "Saved",
+    textClass: "text-green-400"
+  },
+  error: {
+    icon: ErrorIcon2,
+    defaultText: "Error",
+    textClass: "text-red-400"
+  }
+};
+function MutationOverlay({
+  status,
+  savingText,
+  savedText,
+  errorText,
+  className
+}) {
+  if (status === "idle") return null;
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const text = status === "saving" ? savingText ?? config.defaultText : status === "saved" ? savedText ?? config.defaultText : errorText ?? config.defaultText;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 z-10 flex items-center justify-center",
+        "bg-surface-50/80 backdrop-blur-sm",
+        "transition-opacity duration-200",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Icon, {}),
+        /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", config.textClass), children: text })
+      ] })
+    }
+  );
+}
+var sizeClass6 = {
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-12 h-12"
+};
+var iconSizeClass = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+};
+var badgeSizeClass = {
+  sm: "min-w-[16px] h-4 text-[10px] px-1",
+  md: "min-w-[18px] h-[18px] text-[11px] px-1",
+  lg: "min-w-[20px] h-5 text-xs px-1.5"
+};
+var DefaultBellIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+    ]
+  }
+);
+var NotificationBell = forwardRef(
+  function NotificationBell2({ icon, count, maxCount = 99, size = "md", ping, className, disabled, ...props }, ref) {
+    const displayCount = count && count > maxCount ? `${maxCount}+` : count;
+    const hasCount = count !== void 0 && count > 0;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...props,
+        disabled,
+        "aria-label": props["aria-label"] || `Notifications${hasCount ? ` (${count})` : ""}`,
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-xl text-white/70 transition-colors hover:text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:opacity-60 disabled:pointer-events-none",
+          sizeClass6[size],
+          className
+        ),
+        children: [
+          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx(DefaultBellIcon, { className: iconSizeClass[size] }),
+          hasCount && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "absolute top-0 right-0 flex items-center justify-center rounded-full bg-rose-500 text-white font-semibold leading-none",
+                badgeSizeClass[size]
+              ),
+              children: [
+                ping && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-rose-500 animate-ping opacity-75" }),
+                /* @__PURE__ */ jsx("span", { className: "relative", children: displayCount })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 
-export { Alert, Avatar, Badge, Button, Card, Checkbox, CollapsibleSection, ColorInput, ConfirmDialog, CopyField, DashboardLayout, Divider, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormField, IconButton, Input, Modal, Navbar, PageShell, Pagination, Pill, ProgressBar, ProgressButton, RadioGroup, RadioItem, SearchInput, Select, Sidebar, Skeleton, Slider, Spinner, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Textarea, ToastProvider, Toggle, Tooltip, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };
+export { ActiveFilterPills, Alert, Avatar, Badge, Button, Card, Checkbox, CollapsibleSection, ColorInput, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, Divider, DotIndicator, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormField, IconButton, Input, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, ProgressBar, ProgressButton, RadioGroup, RadioItem, SearchInput, SectionCard, Select, Sidebar, Skeleton, Slider, Spinner, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Textarea, ToastProvider, Toggle, Tooltip, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };