@memelabui/ui 0.4.0 → 0.5.1

package/README.md

@@ -121,6 +121,7 @@ function App() {
 | `Tooltip` | Hover/focus tooltip with portal positioning |
 | `Dropdown` | Compound menu (Trigger, Menu, Item, Separator) |
 | `MutationOverlay` | Saving/saved/error status overlay for cards |
+| `NotificationBell` | Notification bell button with unread count badge and ping animation |
 
 ### Layout
 
@@ -147,6 +148,9 @@ function App() {
 | `useDisclosure` | Open/close state management |
 | `useMediaQuery` | Responsive media query listener |
 | `useDebounce` | Debounced value |
+| `useHotkeys` | Global keyboard shortcuts with modifier support |
+| `useIntersectionObserver` | IntersectionObserver for infinite scroll and lazy loading |
+| `useSharedNow` | Reactive current-time for countdowns and "X ago" labels |
 
 ## Customization
 

package/dist/index.cjs

@@ -130,6 +130,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;
+  React.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] = React.useState(null);
+  const nodeRef = React.useRef(null);
+  const observerRef = React.useRef(null);
+  React.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] = React.useState(Date.now);
+  React.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 = {
@@ -631,7 +707,7 @@ var Slider = React.forwardRef(function Slider2({
     if (numMax === numMin) return 0;
     return Math.max(0, Math.min(100, (numericValue - numMin) / (numMax - numMin) * 100));
   }, [numericValue, min, max]);
-  const trackGradient = `linear-gradient(to right, var(--ml-primary, #8b5cf6) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
+  const trackGradient = `linear-gradient(to right, rgb(var(--ml-primary, 139 92 246)) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
   const displayValue = formatValue ? formatValue(numericValue) : String(numericValue);
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
@@ -663,7 +739,7 @@ var Slider = React.forwardRef(function Slider2({
         "[&::-webkit-slider-thumb]:rounded-full",
         "[&::-webkit-slider-thumb]:bg-white",
         "[&::-webkit-slider-thumb]:border-2",
-        "[&::-webkit-slider-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-webkit-slider-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-webkit-slider-thumb]:transition-shadow",
         "[&::-webkit-slider-thumb]:duration-150",
         // Moz thumb
@@ -672,7 +748,7 @@ var Slider = React.forwardRef(function Slider2({
         "[&::-moz-range-thumb]:rounded-full",
         "[&::-moz-range-thumb]:bg-white",
         "[&::-moz-range-thumb]:border-2",
-        "[&::-moz-range-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-moz-range-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-moz-range-thumb]:transition-shadow",
         "[&::-moz-range-thumb]:duration-150",
         // Moz track — transparent so the gradient on the element shows through
@@ -2382,7 +2458,7 @@ function StageProgress({ stages, activeStage, className }) {
               ) })
             ) : isActive ? (
               // Active: primary dot with ring
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[rgb(var(--ml-primary))] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(var(--ml-primary))]" }) })
             ) : (
               // Upcoming: hollow dim dot
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
@@ -2405,7 +2481,7 @@ function StageProgress({ stages, activeStage, className }) {
         children: /* @__PURE__ */ jsxRuntime.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",
+            className: "h-full rounded-full bg-gradient-to-r from-[rgb(var(--ml-accent))] to-[rgb(var(--ml-primary))] transition-[width] duration-500 ease-in-out",
             style: { width: `${fillPercent}%` },
             children: isAnimating && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
@@ -3330,6 +3406,76 @@ function MutationOverlay({
     }
   );
 }
+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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+    ]
+  }
+);
+var NotificationBell = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultBellIcon, { className: iconSizeClass[size] }),
+          hasCount && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 rounded-full bg-rose-500 animate-ping opacity-75" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: displayCount })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 
 exports.ActiveFilterPills = ActiveFilterPills;
 exports.Alert = Alert;
@@ -3359,6 +3505,7 @@ exports.Input = Input;
 exports.Modal = Modal;
 exports.MutationOverlay = MutationOverlay;
 exports.Navbar = Navbar;
+exports.NotificationBell = NotificationBell;
 exports.PageShell = PageShell;
 exports.Pagination = Pagination;
 exports.Pill = Pill;
@@ -3398,5 +3545,8 @@ exports.getFocusableElements = getFocusableElements;
 exports.useClipboard = useClipboard;
 exports.useDebounce = useDebounce;
 exports.useDisclosure = useDisclosure;
+exports.useHotkeys = useHotkeys;
+exports.useIntersectionObserver = useIntersectionObserver;
 exports.useMediaQuery = useMediaQuery;
+exports.useSharedNow = useSharedNow;
 exports.useToast = useToast;

package/dist/index.d.cts

@@ -31,6 +31,70 @@ declare function useMediaQuery(query: string): boolean;
 
 declare function useDebounce<T>(value: T, delayMs?: number): T;
 
+type HotkeyModifiers = {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+};
+type HotkeyBinding = {
+    key: string;
+    modifiers?: HotkeyModifiers;
+    handler: (e: KeyboardEvent) => void;
+};
+type UseHotkeysOptions = {
+    enabled?: boolean;
+};
+/**
+ * Global keyboard shortcut hook.
+ *
+ * @example
+ * useHotkeys([
+ *   { key: 'Escape', handler: () => close() },
+ *   { key: 's', modifiers: { ctrl: true }, handler: (e) => { e.preventDefault(); save(); } },
+ * ]);
+ */
+declare function useHotkeys(bindings: HotkeyBinding[], options?: UseHotkeysOptions): void;
+
+type UseIntersectionObserverOptions = {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    enabled?: boolean;
+};
+type UseIntersectionObserverReturn = {
+    ref: (node: Element | null) => void;
+    entry: IntersectionObserverEntry | null;
+    isIntersecting: boolean;
+};
+/**
+ * IntersectionObserver hook for infinite scroll, lazy loading, etc.
+ *
+ * @example
+ * const { ref, isIntersecting } = useIntersectionObserver({ rootMargin: '200px' });
+ * useEffect(() => { if (isIntersecting) loadMore(); }, [isIntersecting]);
+ * return <div ref={ref} />;
+ */
+declare function useIntersectionObserver(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;
+
+type UseSharedNowOptions = {
+    /** Tick interval in ms. Default: 1000 */
+    interval?: number;
+    /** Stop ticking after this timestamp (ms). Undefined = never stop. */
+    untilMs?: number;
+    /** Enable/disable. Default: true */
+    enabled?: boolean;
+};
+/**
+ * Reactive current-time hook that ticks on a shared interval.
+ * Useful for countdowns, "X minutes ago" labels, and CooldownRing.
+ *
+ * @example
+ * const now = useSharedNow({ interval: 1000 });
+ * const remaining = Math.max(0, deadline - now);
+ */
+declare function useSharedNow(options?: UseSharedNowOptions): number;
+
 type Size = 'sm' | 'md' | 'lg';
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -630,4 +694,29 @@ type MutationOverlayProps = {
 };
 declare function MutationOverlay({ status, savingText, savedText, errorText, className, }: MutationOverlayProps): react_jsx_runtime.JSX.Element | null;
 
-export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, 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, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, 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, 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, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };
+type NotificationBellProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    /** Icon to display (bell SVG, etc.). If omitted, renders a default bell. */
+    icon?: ReactNode;
+    /** Unread count. 0 or undefined hides the badge. */
+    count?: number;
+    /** Max count to display before showing "N+". Default: 99 */
+    maxCount?: number;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show a ping animation on the badge */
+    ping?: boolean;
+};
+declare const NotificationBell: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** Icon to display (bell SVG, etc.). If omitted, renders a default bell. */
+    icon?: ReactNode;
+    /** Unread count. 0 or undefined hides the badge. */
+    count?: number;
+    /** Max count to display before showing "N+". Default: 99 */
+    maxCount?: number;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Whether to show a ping animation on the badge */
+    ping?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, 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, 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, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, 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, 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, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };

package/dist/index.d.ts

@@ -31,6 +31,70 @@ declare function useMediaQuery(query: string): boolean;
 
 declare function useDebounce<T>(value: T, delayMs?: number): T;
 
+type HotkeyModifiers = {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+};
+type HotkeyBinding = {
+    key: string;
+    modifiers?: HotkeyModifiers;
+    handler: (e: KeyboardEvent) => void;
+};
+type UseHotkeysOptions = {
+    enabled?: boolean;
+};
+/**
+ * Global keyboard shortcut hook.
+ *
+ * @example
+ * useHotkeys([
+ *   { key: 'Escape', handler: () => close() },
+ *   { key: 's', modifiers: { ctrl: true }, handler: (e) => { e.preventDefault(); save(); } },
+ * ]);
+ */
+declare function useHotkeys(bindings: HotkeyBinding[], options?: UseHotkeysOptions): void;
+
+type UseIntersectionObserverOptions = {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    enabled?: boolean;
+};
+type UseIntersectionObserverReturn = {
+    ref: (node: Element | null) => void;
+    entry: IntersectionObserverEntry | null;
+    isIntersecting: boolean;
+};
+/**
+ * IntersectionObserver hook for infinite scroll, lazy loading, etc.
+ *
+ * @example
+ * const { ref, isIntersecting } = useIntersectionObserver({ rootMargin: '200px' });
+ * useEffect(() => { if (isIntersecting) loadMore(); }, [isIntersecting]);
+ * return <div ref={ref} />;
+ */
+declare function useIntersectionObserver(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;
+
+type UseSharedNowOptions = {
+    /** Tick interval in ms. Default: 1000 */
+    interval?: number;
+    /** Stop ticking after this timestamp (ms). Undefined = never stop. */
+    untilMs?: number;
+    /** Enable/disable. Default: true */
+    enabled?: boolean;
+};
+/**
+ * Reactive current-time hook that ticks on a shared interval.
+ * Useful for countdowns, "X minutes ago" labels, and CooldownRing.
+ *
+ * @example
+ * const now = useSharedNow({ interval: 1000 });
+ * const remaining = Math.max(0, deadline - now);
+ */
+declare function useSharedNow(options?: UseSharedNowOptions): number;
+
 type Size = 'sm' | 'md' | 'lg';
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -630,4 +694,29 @@ type MutationOverlayProps = {
 };
 declare function MutationOverlay({ status, savingText, savedText, errorText, className, }: MutationOverlayProps): react_jsx_runtime.JSX.Element | null;
 
-export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, 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, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, 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, 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, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useMediaQuery, useToast };
+type NotificationBellProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    /** Icon to display (bell SVG, etc.). If omitted, renders a default bell. */
+    icon?: ReactNode;
+    /** Unread count. 0 or undefined hides the badge. */
+    count?: number;
+    /** Max count to display before showing "N+". Default: 99 */
+    maxCount?: number;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show a ping animation on the badge */
+    ping?: boolean;
+};
+declare const NotificationBell: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** Icon to display (bell SVG, etc.). If omitted, renders a default bell. */
+    icon?: ReactNode;
+    /** Unread count. 0 or undefined hides the badge. */
+    count?: number;
+    /** Max count to display before showing "N+". Default: 99 */
+    maxCount?: number;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Whether to show a ping animation on the badge */
+    ping?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, 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, 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, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, 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, 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, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };

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 = {
@@ -625,7 +701,7 @@ var Slider = forwardRef(function Slider2({
     if (numMax === numMin) return 0;
     return Math.max(0, Math.min(100, (numericValue - numMin) / (numMax - numMin) * 100));
   }, [numericValue, min, max]);
-  const trackGradient = `linear-gradient(to right, var(--ml-primary, #8b5cf6) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
+  const trackGradient = `linear-gradient(to right, rgb(var(--ml-primary, 139 92 246)) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
   const displayValue = formatValue ? formatValue(numericValue) : String(numericValue);
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
@@ -657,7 +733,7 @@ var Slider = forwardRef(function Slider2({
         "[&::-webkit-slider-thumb]:rounded-full",
         "[&::-webkit-slider-thumb]:bg-white",
         "[&::-webkit-slider-thumb]:border-2",
-        "[&::-webkit-slider-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-webkit-slider-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-webkit-slider-thumb]:transition-shadow",
         "[&::-webkit-slider-thumb]:duration-150",
         // Moz thumb
@@ -666,7 +742,7 @@ var Slider = forwardRef(function Slider2({
         "[&::-moz-range-thumb]:rounded-full",
         "[&::-moz-range-thumb]:bg-white",
         "[&::-moz-range-thumb]:border-2",
-        "[&::-moz-range-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-moz-range-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-moz-range-thumb]:transition-shadow",
         "[&::-moz-range-thumb]:duration-150",
         // Moz track — transparent so the gradient on the element shows through
@@ -2376,7 +2452,7 @@ function StageProgress({ stages, activeStage, className }) {
               ) })
             ) : 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)]" }) })
+              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[rgb(var(--ml-primary))] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(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" })
@@ -2399,7 +2475,7 @@ function StageProgress({ stages, activeStage, className }) {
         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",
+            className: "h-full rounded-full bg-gradient-to-r from-[rgb(var(--ml-accent))] to-[rgb(var(--ml-primary))] transition-[width] duration-500 ease-in-out",
             style: { width: `${fillPercent}%` },
             children: isAnimating && /* @__PURE__ */ jsx(
               "span",
@@ -3324,5 +3400,75 @@ function MutationOverlay({
     }
   );
 }
+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 { 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, 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, 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 };

package/dist/preset/index.cjs

@@ -1,37 +1,38 @@
 'use strict';
 
 // src/preset/index.ts
+var rgb = (cssVar) => `rgb(var(${cssVar}) / <alpha-value>)`;
 var memelabPreset = {
   darkMode: "class",
   theme: {
     extend: {
       colors: {
         surface: {
-          DEFAULT: "var(--ml-bg)",
-          0: "var(--ml-surface-0)",
-          50: "var(--ml-surface-50)",
-          100: "var(--ml-surface-100)",
-          200: "var(--ml-surface-200)",
-          300: "var(--ml-surface-300)",
-          400: "var(--ml-surface-400)"
+          DEFAULT: rgb("--ml-bg"),
+          0: rgb("--ml-surface-0"),
+          50: rgb("--ml-surface-50"),
+          100: rgb("--ml-surface-100"),
+          200: rgb("--ml-surface-200"),
+          300: rgb("--ml-surface-300"),
+          400: rgb("--ml-surface-400")
         },
         primary: {
-          DEFAULT: "var(--ml-primary)",
-          light: "var(--ml-primary-light)",
-          dark: "var(--ml-primary-dark)"
+          DEFAULT: rgb("--ml-primary"),
+          light: rgb("--ml-primary-light"),
+          dark: rgb("--ml-primary-dark")
         },
         accent: {
-          DEFAULT: "var(--ml-accent)",
-          light: "var(--ml-accent-light)",
-          dark: "var(--ml-accent-dark)"
+          DEFAULT: rgb("--ml-accent"),
+          light: rgb("--ml-accent-light"),
+          dark: rgb("--ml-accent-dark")
         },
         glow: {
-          purple: "var(--ml-glow-purple)",
-          pink: "var(--ml-glow-pink)"
+          purple: rgb("--ml-glow-purple"),
+          pink: rgb("--ml-glow-pink")
         },
-        success: "var(--ml-success)",
-        warning: "var(--ml-warning)",
-        danger: "var(--ml-danger)"
+        success: rgb("--ml-success"),
+        warning: rgb("--ml-warning"),
+        danger: rgb("--ml-danger")
       },
       fontFamily: {
         sans: ["var(--ml-font-sans)"]

package/dist/preset/index.js

@@ -1,35 +1,36 @@
 // src/preset/index.ts
+var rgb = (cssVar) => `rgb(var(${cssVar}) / <alpha-value>)`;
 var memelabPreset = {
   darkMode: "class",
   theme: {
     extend: {
       colors: {
         surface: {
-          DEFAULT: "var(--ml-bg)",
-          0: "var(--ml-surface-0)",
-          50: "var(--ml-surface-50)",
-          100: "var(--ml-surface-100)",
-          200: "var(--ml-surface-200)",
-          300: "var(--ml-surface-300)",
-          400: "var(--ml-surface-400)"
+          DEFAULT: rgb("--ml-bg"),
+          0: rgb("--ml-surface-0"),
+          50: rgb("--ml-surface-50"),
+          100: rgb("--ml-surface-100"),
+          200: rgb("--ml-surface-200"),
+          300: rgb("--ml-surface-300"),
+          400: rgb("--ml-surface-400")
         },
         primary: {
-          DEFAULT: "var(--ml-primary)",
-          light: "var(--ml-primary-light)",
-          dark: "var(--ml-primary-dark)"
+          DEFAULT: rgb("--ml-primary"),
+          light: rgb("--ml-primary-light"),
+          dark: rgb("--ml-primary-dark")
         },
         accent: {
-          DEFAULT: "var(--ml-accent)",
-          light: "var(--ml-accent-light)",
-          dark: "var(--ml-accent-dark)"
+          DEFAULT: rgb("--ml-accent"),
+          light: rgb("--ml-accent-light"),
+          dark: rgb("--ml-accent-dark")
         },
         glow: {
-          purple: "var(--ml-glow-purple)",
-          pink: "var(--ml-glow-pink)"
+          purple: rgb("--ml-glow-purple"),
+          pink: rgb("--ml-glow-pink")
         },
-        success: "var(--ml-success)",
-        warning: "var(--ml-warning)",
-        danger: "var(--ml-danger)"
+        success: rgb("--ml-success"),
+        warning: rgb("--ml-warning"),
+        danger: rgb("--ml-danger")
       },
       fontFamily: {
         sans: ["var(--ml-font-sans)"]

package/dist/styles/index.css

@@ -1,15 +1,15 @@
 :root {
   /* ---- Background ---- */
-  --ml-bg: #0a0a0f;
-  --ml-fg: #f9fafb;
+  --ml-bg: 10 10 15;
+  --ml-fg: 249 250 251;
 
   /* ---- Surface scale ---- */
-  --ml-surface-0: #0a0a0f;
-  --ml-surface-50: #0f0f18;
-  --ml-surface-100: #141420;
-  --ml-surface-200: #1a1a2e;
-  --ml-surface-300: #24243a;
-  --ml-surface-400: #2a2a4a;
+  --ml-surface-0: 10 10 15;
+  --ml-surface-50: 15 15 24;
+  --ml-surface-100: 20 20 32;
+  --ml-surface-200: 26 26 46;
+  --ml-surface-300: 36 36 58;
+  --ml-surface-400: 42 42 74;
 
   /* ---- Glass ---- */
   --ml-glass-bg: rgba(255, 255, 255, 0.05);
@@ -19,23 +19,23 @@
   --ml-glass-blur: 16px;
 
   /* ---- Primary palette ---- */
-  --ml-primary: #8b5cf6;
-  --ml-primary-light: #a78bfa;
-  --ml-primary-dark: #7c3aed;
+  --ml-primary: 139 92 246;
+  --ml-primary-light: 167 139 250;
+  --ml-primary-dark: 124 58 237;
 
   /* ---- Accent (gradient source) ---- */
-  --ml-accent: #667eea;
-  --ml-accent-light: #8b9cf7;
-  --ml-accent-dark: #4c5fd4;
+  --ml-accent: 102 126 234;
+  --ml-accent-light: 139 156 247;
+  --ml-accent-dark: 76 95 212;
 
   /* ---- Glow ---- */
-  --ml-glow-purple: #764ba2;
-  --ml-glow-pink: #f093fb;
+  --ml-glow-purple: 118 75 162;
+  --ml-glow-pink: 240 147 251;
 
   /* ---- Semantic ---- */
-  --ml-success: #10b981;
-  --ml-warning: #f59e0b;
-  --ml-danger: #f43f5e;
+  --ml-success: 16 185 129;
+  --ml-warning: 245 158 11;
+  --ml-danger: 244 63 94;
 
   /* ---- Typography ---- */
   --ml-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -589,8 +589,8 @@ video {
   display: none;
 }
 body {
-    background-color: var(--ml-bg, #0a0a0f);
-    color: var(--ml-fg, #f9fafb);
+    background-color: rgb(var(--ml-bg, 10 10 15));
+    color: rgb(var(--ml-fg, 249 250 251));
     font-family: var(--ml-font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -600,17 +600,17 @@ body {
     width: 6px;
   }
 ::-webkit-scrollbar-track {
-    background: var(--ml-surface-50, #0f0f18);
+    background: rgb(var(--ml-surface-50, 15 15 24));
   }
 ::-webkit-scrollbar-thumb {
-    background: var(--ml-surface-300, #24243a);
+    background: rgb(var(--ml-surface-300, 36 36 58));
     border-radius: 9999px;
   }
 /* Global focus-visible */
 :where(a, button, input, select, textarea, [role='button'], [role='menuitem'], [role='tab']):focus-visible {
     outline: none;
     box-shadow:
-      0 0 0 2px var(--ml-primary, #8b5cf6),
+      0 0 0 2px rgb(var(--ml-primary, 139 92 246)),
       0 0 0 4px transparent;
   }
 /* Dark select */
@@ -619,8 +619,8 @@ select {
   }
 select option,
   select optgroup {
-    background-color: var(--ml-surface-50, #0f0f18);
-    color: var(--ml-fg, #f9fafb);
+    background-color: rgb(var(--ml-surface-50, 15 15 24));
+    color: rgb(var(--ml-fg, 249 250 251));
   }
 /* Accessibility: link underline offset */
 a {
@@ -691,9 +691,9 @@ a {
 .animated-gradient {
     background: linear-gradient(
       270deg,
-      var(--ml-accent, #667eea),
-      var(--ml-glow-purple, #764ba2),
-      var(--ml-glow-pink, #f093fb)
+      rgb(var(--ml-accent, 102 126 234)),
+      rgb(var(--ml-glow-purple, 118 75 162)),
+      rgb(var(--ml-glow-pink, 240 147 251))
     );
     background-size: 400% 400%;
     animation: ml-gradient 15s ease infinite;
@@ -708,10 +708,10 @@ a {
     pointer-events: none;
   }
 .orb-purple {
-    background: var(--ml-glow-purple, #764ba2);
+    background: rgb(var(--ml-glow-purple, 118 75 162));
   }
 .orb-blue {
-    background: var(--ml-accent, #667eea);
+    background: rgb(var(--ml-accent, 102 126 234));
   }
 /* iOS safe-area */
 .pb-safe {
@@ -793,6 +793,9 @@ a {
 .left-3 {
   left: 0.75rem;
 }
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -993,6 +996,9 @@ a {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[18px\] {
+  height: 18px;
+}
 .h-\[2px\] {
   height: 2px;
 }
@@ -1123,6 +1129,15 @@ a {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-\[16px\] {
+  min-width: 16px;
+}
+.min-w-\[18px\] {
+  min-width: 18px;
+}
+.min-w-\[20px\] {
+  min-width: 20px;
+}
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1257,6 +1272,15 @@ a {
 .animate-modal-pop {
   animation: ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both;
 }
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -1477,7 +1501,11 @@ a {
   border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
 }
 .border-primary {
-  border-color: var(--ml-primary);
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--ml-primary) / var(--tw-border-opacity, 1));
+}
+.border-primary\/30 {
+  border-color: rgb(var(--ml-primary) / 0.3);
 }
 .border-rose-500 {
   --tw-border-opacity: 1;
@@ -1502,14 +1530,21 @@ a {
   border-color: rgb(255 255 255 / 0.06);
 }
 .border-t-primary {
-  border-top-color: var(--ml-primary);
+  --tw-border-opacity: 1;
+  border-top-color: rgb(var(--ml-primary) / var(--tw-border-opacity, 1));
 }
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
-.bg-\[var\(--ml-primary\)\] {
-  background-color: var(--ml-primary);
+.bg-\[rgb\(var\(--ml-primary\)\)\] {
+  background-color: rgb(var(--ml-primary));
+}
+.bg-accent\/15 {
+  background-color: rgb(var(--ml-accent) / 0.15);
+}
+.bg-accent\/\[0\.10\] {
+  background-color: rgb(var(--ml-accent) / 0.10);
 }
 .bg-amber-400 {
   --tw-bg-opacity: 1;
@@ -1554,7 +1589,17 @@ a {
   background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
 }
 .bg-primary {
-  background-color: var(--ml-primary);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-primary) / var(--tw-bg-opacity, 1));
+}
+.bg-primary\/10 {
+  background-color: rgb(var(--ml-primary) / 0.1);
+}
+.bg-primary\/15 {
+  background-color: rgb(var(--ml-primary) / 0.15);
+}
+.bg-primary\/20 {
+  background-color: rgb(var(--ml-primary) / 0.2);
 }
 .bg-purple-500\/\[0\.12\] {
   background-color: rgb(168 85 247 / 0.12);
@@ -1578,13 +1623,25 @@ a {
   background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
 }
 .bg-surface {
-  background-color: var(--ml-bg);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-bg) / var(--tw-bg-opacity, 1));
 }
 .bg-surface-100 {
-  background-color: var(--ml-surface-100);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-surface-100) / var(--tw-bg-opacity, 1));
+}
+.bg-surface-100\/95 {
+  background-color: rgb(var(--ml-surface-100) / 0.95);
 }
 .bg-surface-300 {
-  background-color: var(--ml-surface-300);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--ml-surface-300) / var(--tw-bg-opacity, 1));
+}
+.bg-surface-50\/80 {
+  background-color: rgb(var(--ml-surface-50) / 0.8);
+}
+.bg-surface-50\/90 {
+  background-color: rgb(var(--ml-surface-50) / 0.9);
 }
 .bg-transparent {
   background-color: transparent;
@@ -1615,14 +1672,14 @@ a {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
-.from-\[var\(--ml-accent\)\] {
-  --tw-gradient-from: var(--ml-accent) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+.from-\[rgb\(var\(--ml-accent\)\)\] {
+  --tw-gradient-from: rgb(var(--ml-accent)) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--ml-accent) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-primary {
-  --tw-gradient-from: var(--ml-primary) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-from: rgb(var(--ml-primary) / 1) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(var(--ml-primary) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .from-transparent {
@@ -1639,11 +1696,11 @@ a {
   --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
-.to-\[var\(--ml-primary\)\] {
-  --tw-gradient-to: var(--ml-primary) var(--tw-gradient-to-position);
+.to-\[rgb\(var\(--ml-primary\)\)\] {
+  --tw-gradient-to: rgb(var(--ml-primary)) var(--tw-gradient-to-position);
 }
 .to-accent {
-  --tw-gradient-to: var(--ml-accent) var(--tw-gradient-to-position);
+  --tw-gradient-to: rgb(var(--ml-accent) / 1) var(--tw-gradient-to-position);
 }
 .to-purple-600 {
   --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
@@ -1676,6 +1733,14 @@ a {
 .p-6 {
   padding: 1.5rem;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1782,6 +1847,9 @@ a {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
 .text-\[11px\] {
   font-size: 11px;
 }
@@ -1834,7 +1902,8 @@ a {
   letter-spacing: 0.05em;
 }
 .text-accent-light {
-  color: var(--ml-accent-light);
+  --tw-text-opacity: 1;
+  color: rgb(var(--ml-accent-light) / var(--tw-text-opacity, 1));
 }
 .text-amber-400 {
   --tw-text-opacity: 1;
@@ -1857,7 +1926,8 @@ a {
   color: rgb(74 222 128 / var(--tw-text-opacity, 1));
 }
 .text-primary {
-  color: var(--ml-primary);
+  --tw-text-opacity: 1;
+  color: rgb(var(--ml-primary) / var(--tw-text-opacity, 1));
 }
 .text-red-400 {
   --tw-text-opacity: 1;
@@ -2003,8 +2073,11 @@ a {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.ring-\[var\(--ml-primary\)\] {
-  --tw-ring-color: var(--ml-primary);
+.ring-\[rgb\(var\(--ml-primary\)\)\] {
+  --tw-ring-color: rgb(var(--ml-primary));
+}
+.ring-accent\/20 {
+  --tw-ring-color: rgb(var(--ml-accent) / 0.2);
 }
 .ring-amber-500\/20 {
   --tw-ring-color: rgb(245 158 11 / 0.2);
@@ -2012,6 +2085,12 @@ a {
 .ring-emerald-500\/20 {
   --tw-ring-color: rgb(16 185 129 / 0.2);
 }
+.ring-primary\/20 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.2);
+}
+.ring-primary\/40 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .ring-rose-500\/20 {
   --tw-ring-color: rgb(244 63 94 / 0.2);
 }
@@ -2143,6 +2222,9 @@ a {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus-within\:ring-primary\/40:focus-within {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .focus-within\:ring-rose-500\/40:focus-within {
   --tw-ring-color: rgb(244 63 94 / 0.4);
 }
@@ -2156,6 +2238,9 @@ a {
   --tw-scale-y: 1.02;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hover\:border-primary\/50:hover {
+  border-color: rgb(var(--ml-primary) / 0.5);
+}
 .hover\:border-transparent:hover {
   border-color: transparent;
 }
@@ -2254,7 +2339,14 @@ a {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .focus-visible\:ring-primary:focus-visible {
-  --tw-ring-color: var(--ml-primary);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--ml-primary) / var(--tw-ring-opacity, 1));
+}
+.focus-visible\:ring-primary\/40:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
+.focus-visible\:ring-primary\/60:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.6);
 }
 .focus-visible\:ring-offset-1:focus-visible {
   --tw-ring-offset-width: 1px;
@@ -2263,7 +2355,7 @@ a {
   --tw-ring-offset-width: 2px;
 }
 .focus-visible\:ring-offset-surface:focus-visible {
-  --tw-ring-offset-color: var(--ml-bg);
+  --tw-ring-offset-color: rgb(var(--ml-bg) / 1);
 }
 .focus-visible\:ring-offset-transparent:focus-visible {
   --tw-ring-offset-color: transparent;
@@ -2291,6 +2383,9 @@ a {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.peer:focus-visible ~ .peer-focus-visible\:ring-primary\/40 {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -2358,8 +2453,8 @@ a {
 .\[\&\:\:-moz-range-thumb\]\:border-2::-moz-range-thumb {
   border-width: 2px;
 }
-.\[\&\:\:-moz-range-thumb\]\:border-\[var\(--ml-primary\2c \#8b5cf6\)\]::-moz-range-thumb {
-  border-color: var(--ml-primary,#8b5cf6);
+.\[\&\:\:-moz-range-thumb\]\:border-\[rgb\(var\(--ml-primary\2c 139_92_246\)\)\]::-moz-range-thumb {
+  border-color: rgb(var(--ml-primary,139 92 246));
 }
 .\[\&\:\:-moz-range-thumb\]\:bg-white::-moz-range-thumb {
   --tw-bg-opacity: 1;
@@ -2379,6 +2474,9 @@ a {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-primary\/40::-moz-range-thumb:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track {
   border-radius: 9999px;
 }
@@ -2401,8 +2499,8 @@ a {
 .\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb {
   border-width: 2px;
 }
-.\[\&\:\:-webkit-slider-thumb\]\:border-\[var\(--ml-primary\2c \#8b5cf6\)\]::-webkit-slider-thumb {
-  border-color: var(--ml-primary,#8b5cf6);
+.\[\&\:\:-webkit-slider-thumb\]\:border-\[rgb\(var\(--ml-primary\2c 139_92_246\)\)\]::-webkit-slider-thumb {
+  border-color: rgb(var(--ml-primary,139 92 246));
 }
 .\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb {
   --tw-bg-opacity: 1;
@@ -2422,9 +2520,12 @@ a {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-primary\/40::-webkit-slider-thumb:focus-visible {
+  --tw-ring-color: rgb(var(--ml-primary) / 0.4);
+}
 .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-2::-webkit-slider-thumb:focus-visible {
   --tw-ring-offset-width: 2px;
 }
 .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-surface::-webkit-slider-thumb:focus-visible {
-  --tw-ring-offset-color: var(--ml-bg);
+  --tw-ring-offset-color: rgb(var(--ml-bg) / 1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memelabui/ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "MemeLab shared UI component library — React + Tailwind + Glassmorphism",
   "type": "module",
   "sideEffects": [