@memelabui/ui 0.7.0 → 0.8.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useId, useMemo, useRef, useEffect, createContext, useCallback, isValidElement, cloneElement, useReducer, useContext } from 'react';
+import React, { forwardRef, useState, useId, useRef, useMemo, useEffect, createContext, useCallback, isValidElement, cloneElement, useReducer, useContext, Component } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -133,10 +133,12 @@ function matchModifiers(e, mods) {
 }
 function useHotkeys(bindings, options = {}) {
   const { enabled = true } = options;
+  const bindingsRef = useRef(bindings);
+  bindingsRef.current = bindings;
   useEffect(() => {
     if (!enabled) return;
     const onKeyDown = (e) => {
-      for (const binding of bindings) {
+      for (const binding of bindingsRef.current) {
         if (e.key === binding.key && matchModifiers(e, binding.modifiers)) {
           binding.handler(e);
         }
@@ -144,7 +146,7 @@ function useHotkeys(bindings, options = {}) {
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, [enabled, ...bindings]);
+  }, [enabled]);
 }
 function useIntersectionObserver(options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0, enabled = true } = options;
@@ -200,6 +202,30 @@ function useSharedNow(options = {}) {
   }, [interval, untilMs, enabled]);
   return now;
 }
+var lockCount = 0;
+var savedOverflow = "";
+function lockScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = savedOverflow;
+  }
+}
+function useScrollLock(active) {
+  useEffect(() => {
+    if (!active) return;
+    lockScroll();
+    return () => unlockScroll();
+  }, [active]);
+}
 
 // src/tokens/colors.ts
 var colors = {
@@ -481,126 +507,129 @@ var Textarea = forwardRef(function Textarea2({ hasError, label, error, helperTex
     helperText && !error && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
-function TagInput({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  label,
-  error,
-  maxTags,
-  className,
-  id: externalId
-}) {
-  const generatedId = useId();
-  const inputId = externalId ?? generatedId;
-  const errorId = error ? `${inputId}-error` : void 0;
-  const inputRef = useRef(null);
-  const atMax = maxTags !== void 0 && value.length >= maxTags;
-  function addTag(raw) {
-    const tag = raw.trim();
-    if (!tag || value.includes(tag) || atMax) return;
-    onChange([...value, tag]);
-  }
-  function removeTag(index) {
-    onChange(value.filter((_, i) => i !== index));
-  }
-  function handleKeyDown(e) {
-    const input = inputRef.current;
-    if (!input) return;
-    if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
-      if (input.value) {
-        e.preventDefault();
-        addTag(input.value);
-        input.value = "";
-      }
-      return;
+var TagInput = forwardRef(
+  function TagInput2({
+    value,
+    onChange,
+    placeholder,
+    disabled = false,
+    label,
+    error,
+    maxTags,
+    className,
+    id: externalId
+  }, ref) {
+    const generatedId = useId();
+    const inputId = externalId ?? generatedId;
+    const errorId = error ? `${inputId}-error` : void 0;
+    const internalRef = useRef(null);
+    const inputRef = ref ?? internalRef;
+    const atMax = maxTags !== void 0 && value.length >= maxTags;
+    function addTag(raw) {
+      const tag = raw.trim();
+      if (!tag || value.includes(tag) || atMax) return;
+      onChange([...value, tag]);
     }
-    if (e.key === "Backspace" && !input.value && value.length > 0) {
-      removeTag(value.length - 1);
+    function removeTag(index) {
+      onChange(value.filter((_, i) => i !== index));
     }
-  }
-  function handlePaste(e) {
-    const pasted = e.clipboardData.getData("text");
-    if (!pasted.includes(",")) return;
-    e.preventDefault();
-    const parts = pasted.split(",");
-    const next = [...value];
-    for (const part of parts) {
-      const tag = part.trim();
-      if (tag && !next.includes(tag)) {
-        if (maxTags !== void 0 && next.length >= maxTags) break;
-        next.push(tag);
+    function handleKeyDown(e) {
+      const input = inputRef.current;
+      if (!input) return;
+      if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
+        if (input.value) {
+          e.preventDefault();
+          addTag(input.value);
+          input.value = "";
+        }
+        return;
+      }
+      if (e.key === "Backspace" && !input.value && value.length > 0) {
+        removeTag(value.length - 1);
       }
     }
-    onChange(next);
-    if (inputRef.current) inputRef.current.value = "";
-  }
-  const wrapper = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
-        error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
-        disabled && "opacity-50 cursor-not-allowed",
-        className
-      ),
-      onClick: () => inputRef.current?.focus(),
-      children: [
-        value.map((tag, i) => /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
-            children: [
-              tag,
-              !disabled && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `Remove ${tag}`,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    removeTag(i);
-                  },
-                  className: "text-white/50 hover:text-white/90 transition-colors leading-none",
-                  children: "\u2715"
-                }
-              )
-            ]
-          },
-          `${tag}-${i}`
-        )),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            id: inputId,
-            type: "text",
-            disabled: disabled || atMax,
-            placeholder: value.length === 0 ? placeholder : void 0,
-            "aria-invalid": !!error || void 0,
-            "aria-describedby": errorId,
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            onBlur: (e) => {
-              if (e.target.value) {
-                addTag(e.target.value);
-                e.target.value = "";
-              }
-            },
-            className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
-          }
-        )
-      ]
+    function handlePaste(e) {
+      const pasted = e.clipboardData.getData("text");
+      if (!pasted.includes(",")) return;
+      e.preventDefault();
+      const parts = pasted.split(",");
+      const next = [...value];
+      for (const part of parts) {
+        const tag = part.trim();
+        if (tag && !next.includes(tag)) {
+          if (maxTags !== void 0 && next.length >= maxTags) break;
+          next.push(tag);
+        }
+      }
+      onChange(next);
+      if (inputRef.current) inputRef.current.value = "";
     }
-  );
-  if (!label && !error) return wrapper;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
-    wrapper,
-    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
-  ] });
-}
+    const wrapper = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
+          error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          value.map((tag, i) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
+              children: [
+                tag,
+                !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${tag}`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeTag(i);
+                    },
+                    className: "text-white/50 hover:text-white/90 transition-colors leading-none",
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            `${tag}-${i}`
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              type: "text",
+              disabled: disabled || atMax,
+              placeholder: value.length === 0 ? placeholder : void 0,
+              "aria-invalid": !!error || void 0,
+              "aria-describedby": errorId,
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              onBlur: (e) => {
+                if (e.target.value) {
+                  addTag(e.target.value);
+                  e.target.value = "";
+                }
+              },
+              className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    );
+    if (!label && !error) return wrapper;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+      wrapper,
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
+    ] });
+  }
+);
 var base3 = "inline-flex items-center justify-center rounded-full font-semibold ring-1 ring-white/10";
 var sizeClass4 = {
   sm: "text-xs px-2.5 py-1",
@@ -1251,23 +1280,6 @@ var Card = forwardRef(function Card2({ hoverable, variant = "surface", padding =
     }
   );
 });
-var scrollLockCount = 0;
-var savedOverflow = "";
-function lockScroll() {
-  if (typeof document === "undefined") return;
-  if (scrollLockCount === 0) {
-    savedOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-  }
-  scrollLockCount++;
-}
-function unlockScroll() {
-  if (typeof document === "undefined") return;
-  scrollLockCount = Math.max(0, scrollLockCount - 1);
-  if (scrollLockCount === 0) {
-    document.body.style.overflow = savedOverflow;
-  }
-}
 function Modal({
   isOpen,
   onClose,
@@ -1299,11 +1311,7 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    lockScroll();
-    return () => unlockScroll();
-  }, [isOpen]);
+  useScrollLock(isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -1452,17 +1460,32 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
     const el = anchorRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
+    const vw = window.innerWidth;
     const centerX = r.left + r.width / 2;
-    const preferTop = placement === "top";
+    const centerY = r.top + r.height / 2;
     const topY = r.top - 10;
     const bottomY = r.bottom + 10;
-    const canTop = topY > 8;
-    const effPlacement = preferTop ? canTop ? "top" : "bottom" : "bottom";
-    setPos({
-      left: Math.round(centerX),
-      top: Math.round(effPlacement === "top" ? topY : bottomY),
-      placement: effPlacement
-    });
+    const leftX = r.left - 10;
+    const rightX = r.right + 10;
+    let effPlacement = placement;
+    if (placement === "top" || placement === "bottom") {
+      const canTop = topY > 8;
+      effPlacement = placement === "top" ? canTop ? "top" : "bottom" : "bottom";
+      setPos({
+        left: Math.round(centerX),
+        top: Math.round(effPlacement === "top" ? topY : bottomY),
+        placement: effPlacement
+      });
+    } else {
+      const canLeft = leftX > 8;
+      const canRight = rightX < vw - 8;
+      effPlacement = placement === "left" ? canLeft ? "left" : "right" : canRight ? "right" : "left";
+      setPos({
+        left: Math.round(effPlacement === "left" ? leftX : rightX),
+        top: Math.round(centerY),
+        placement: effPlacement
+      });
+    }
   }, [placement]);
   const scheduleOpen = useCallback(() => {
     clearTimer();
@@ -1536,7 +1559,7 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
           style: pos ? {
             left: pos.left,
             top: pos.top,
-            transform: pos.placement === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0%)"
+            transform: pos.placement === "top" ? "translate(-50%, -100%)" : pos.placement === "bottom" ? "translate(-50%, 0%)" : pos.placement === "left" ? "translate(-100%, -50%)" : "translate(0%, -50%)"
           } : { left: 0, top: 0, transform: "translate(-9999px, -9999px)" },
           children: content
         }
@@ -2079,7 +2102,7 @@ function StatCard({ value, label, icon, trend, className }) {
     "div",
     {
       className: cn(
-        "bg-white/5 ring-1 ring-white/10 rounded-xl p-4 flex items-start gap-3",
+        "glass rounded-xl p-4 flex items-start gap-3",
         className
       ),
       children: [
@@ -3812,23 +3835,6 @@ function Popover({
     ) : null
   ] });
 }
-var scrollLockCount2 = 0;
-var savedOverflow2 = "";
-function lockScroll2() {
-  if (typeof document === "undefined") return;
-  if (scrollLockCount2 === 0) {
-    savedOverflow2 = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-  }
-  scrollLockCount2++;
-}
-function unlockScroll2() {
-  if (typeof document === "undefined") return;
-  scrollLockCount2 = Math.max(0, scrollLockCount2 - 1);
-  if (scrollLockCount2 === 0) {
-    document.body.style.overflow = savedOverflow2;
-  }
-}
 var sizeClass8 = {
   left: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
   right: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
@@ -3878,11 +3884,7 @@ function Drawer({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    lockScroll2();
-    return () => unlockScroll2();
-  }, [isOpen]);
+  useScrollLock(isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", role: "presentation", children: [
     /* @__PURE__ */ jsx(
@@ -4265,5 +4267,60 @@ function VisuallyHidden({ children, as: Tag = "span", style, ...props }) {
     }
   );
 }
+var ErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    const { fallback } = this.props;
+    if (typeof fallback === "function") {
+      return fallback(error, this.reset);
+    }
+    if (fallback !== void 0) {
+      return fallback;
+    }
+    return /* @__PURE__ */ jsxs("div", { role: "alert", className: cn("glass rounded-xl p-6 text-center"), children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-white mb-2", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60 mb-4", children: error.message }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: this.reset,
+          className: "inline-flex items-center justify-center gap-2 rounded-xl font-semibold leading-none px-3.5 py-2.5 text-sm bg-gradient-to-r from-violet-600 to-purple-600 text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02] transition-[transform,background-color,box-shadow,opacity] active:translate-y-[0.5px]",
+          children: "Try again"
+        }
+      )
+    ] });
+  }
+};
+function LoadingScreen({ message, size = "lg", className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: cn(
+        "flex flex-col items-center justify-center min-h-screen bg-ml-bg gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size }),
+        message && /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: message })
+      ]
+    }
+  );
+}
 
-export { ActiveFilterPills, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CollapsibleSection, ColorInput, Combobox, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, Divider, DotIndicator, Drawer, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormField, Heading, IconButton, Input, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, Popover, ProgressBar, ProgressButton, RadioGroup, RadioItem, ScrollArea, SearchInput, SectionCard, Select, Sidebar, Skeleton, Slider, Spinner, Stack, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Text, Textarea, ToastProvider, Toggle, Tooltip, Transition, VisuallyHidden, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };
+export { ActiveFilterPills, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CollapsibleSection, ColorInput, Combobox, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, Divider, DotIndicator, Drawer, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, ErrorBoundary, FormField, Heading, IconButton, Input, LoadingScreen, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, Popover, ProgressBar, ProgressButton, RadioGroup, RadioItem, ScrollArea, SearchInput, SectionCard, Select, Sidebar, Skeleton, Slider, Spinner, Stack, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Text, Textarea, ToastProvider, Toggle, Tooltip, Transition, VisuallyHidden, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };