@memelabui/ui 0.6.1 → 0.8.0

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, useMemo, useRef, 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 = {
@@ -1230,33 +1256,27 @@ function TabPanel({ value, children, className }) {
     }
   );
 }
-var Card = forwardRef(function Card2({ hoverable, variant = "surface", className, ...props }, ref) {
+var padClass = {
+  none: "",
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-6"
+};
+var Card = forwardRef(function Card2({ hoverable, variant = "surface", padding = "md", className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       ...props,
-      className: cn(variant === "glass" ? "glass" : "surface", hoverable && "surface-hover", className)
+      className: cn(
+        variant === "glass" ? "glass" : "surface",
+        hoverable && "surface-hover",
+        padClass[padding],
+        className
+      )
     }
   );
 });
-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,
@@ -1288,11 +1308,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",
@@ -1441,17 +1457,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();
@@ -1525,7 +1556,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
         }
@@ -2068,7 +2099,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: [
@@ -3801,23 +3832,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" },
@@ -3867,11 +3881,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(
@@ -4254,5 +4264,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 };