@memelabui/ui 0.4.0 → 0.5.0

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 = {
@@ -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 = {
@@ -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/styles/index.css

@@ -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;
@@ -1676,6 +1700,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 +1814,9 @@ a {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
 .text-\[11px\] {
   font-size: 11px;
 }

package/package.json

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