@memelabui/ui 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -139,10 +139,12 @@ function matchModifiers(e, mods) {
 }
 function useHotkeys(bindings, options = {}) {
   const { enabled = true } = options;
+  const bindingsRef = React.useRef(bindings);
+  bindingsRef.current = bindings;
   React.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);
         }
@@ -150,7 +152,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;
@@ -206,6 +208,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) {
+  React.useEffect(() => {
+    if (!active) return;
+    lockScroll();
+    return () => unlockScroll();
+  }, [active]);
+}
 
 // src/tokens/colors.ts
 var colors = {
@@ -1257,23 +1283,6 @@ var Card = React.forwardRef(function Card2({ hoverable, variant = "surface", pad
     }
   );
 });
-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,
@@ -1305,11 +1314,7 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    lockScroll();
-    return () => unlockScroll();
-  }, [isOpen]);
+  useScrollLock(isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1458,17 +1463,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 = React.useCallback(() => {
     clearTimer();
@@ -1542,7 +1562,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
         }
@@ -2085,7 +2105,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: [
@@ -3818,23 +3838,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" },
@@ -3884,11 +3887,7 @@ function Drawer({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    lockScroll2();
-    return () => unlockScroll2();
-  }, [isOpen]);
+  useScrollLock(isOpen);
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", role: "presentation", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4271,6 +4270,61 @@ function VisuallyHidden({ children, as: Tag = "span", style, ...props }) {
     }
   );
 }
+var ErrorBoundary = class extends React.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__ */ jsxRuntime.jsxs("div", { role: "alert", className: cn("glass rounded-xl p-6 text-center"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white mb-2", children: "Something went wrong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60 mb-4", children: error.message }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      className: cn(
+        "flex flex-col items-center justify-center min-h-screen bg-ml-bg gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
+        message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: message })
+      ]
+    }
+  );
+}
 
 exports.ActiveFilterPills = ActiveFilterPills;
 exports.Alert = Alert;
@@ -4297,10 +4351,12 @@ exports.DropdownMenu = DropdownMenu;
 exports.DropdownSeparator = DropdownSeparator;
 exports.DropdownTrigger = DropdownTrigger;
 exports.EmptyState = EmptyState;
+exports.ErrorBoundary = ErrorBoundary;
 exports.FormField = FormField;
 exports.Heading = Heading;
 exports.IconButton = IconButton;
 exports.Input = Input;
+exports.LoadingScreen = LoadingScreen;
 exports.Modal = Modal;
 exports.MutationOverlay = MutationOverlay;
 exports.Navbar = Navbar;
@@ -4353,5 +4409,6 @@ exports.useDisclosure = useDisclosure;
 exports.useHotkeys = useHotkeys;
 exports.useIntersectionObserver = useIntersectionObserver;
 exports.useMediaQuery = useMediaQuery;
+exports.useScrollLock = useScrollLock;
 exports.useSharedNow = useSharedNow;
 exports.useToast = useToast;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { MemelabColors, colors } from './tokens/index.cjs';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType, Component, ErrorInfo } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ClassValue = string | number | null | undefined | boolean | Record<string, boolean | null | undefined> | ClassValue[];
@@ -95,6 +95,9 @@ type UseSharedNowOptions = {
  */
 declare function useSharedNow(options?: UseSharedNowOptions): number;
 
+/** Ref-counted body scroll lock. Safe for nested overlays (Modal + Drawer). */
+declare function useScrollLock(active: boolean): void;
+
 type Size = 'sm' | 'md' | 'lg';
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -376,7 +379,7 @@ type ConfirmDialogProps = {
 };
 declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmText, cancelText, loadingText, variant, isLoading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
-type TooltipPlacement = 'top' | 'bottom';
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 type TooltipProps = {
     content: ReactNode;
     delayMs?: number;
@@ -919,4 +922,27 @@ type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
  */
 declare function VisuallyHidden({ children, as: Tag, style, ...props }: VisuallyHiddenProps): react_jsx_runtime.JSX.Element;
 
-export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+};
+type State = {
+    error: Error | null;
+};
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private reset;
+    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
+}
+
+type LoadingScreenProps = {
+    message?: string;
+    size?: SpinnerSize;
+    className?: string;
+};
+declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
+
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { MemelabColors, colors } from './tokens/index.js';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentType, Component, ErrorInfo } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ClassValue = string | number | null | undefined | boolean | Record<string, boolean | null | undefined> | ClassValue[];
@@ -95,6 +95,9 @@ type UseSharedNowOptions = {
  */
 declare function useSharedNow(options?: UseSharedNowOptions): number;
 
+/** Ref-counted body scroll lock. Safe for nested overlays (Modal + Drawer). */
+declare function useScrollLock(active: boolean): void;
+
 type Size = 'sm' | 'md' | 'lg';
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -376,7 +379,7 @@ type ConfirmDialogProps = {
 };
 declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmText, cancelText, loadingText, variant, isLoading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
-type TooltipPlacement = 'top' | 'bottom';
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 type TooltipProps = {
     content: ReactNode;
     delayMs?: number;
@@ -919,4 +922,27 @@ type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
  */
 declare function VisuallyHidden({ children, as: Tag, style, ...props }: VisuallyHiddenProps): react_jsx_runtime.JSX.Element;
 
-export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+};
+type State = {
+    error: Error | null;
+};
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private reset;
+    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
+}
+
+type LoadingScreenProps = {
+    message?: string;
+    size?: SpinnerSize;
+    className?: string;
+};
+declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
+
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardProps, type StatCardTrend, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };

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 = {
@@ -1251,23 +1277,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 +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",
@@ -1452,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();
@@ -1536,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
         }
@@ -2079,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: [
@@ -3812,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" },
@@ -3878,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(
@@ -4265,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 };