@memelabui/ui 0.3.0 → 0.5.0

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';
@@ -158,6 +222,7 @@ type ToggleProps = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    busy?: boolean;
     label?: string;
     size?: ToggleSize;
     id?: string;
@@ -473,6 +538,56 @@ type ProgressBarProps = {
 };
 declare function ProgressBar({ value, max, variant, label, showValue, size, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
+type CooldownRingSize = 'sm' | 'md' | 'lg';
+type CooldownRingProps = {
+    duration: number;
+    remaining: number;
+    onTick?: () => void;
+    onComplete?: () => void;
+    size?: CooldownRingSize;
+    className?: string;
+};
+declare function CooldownRing({ duration, remaining, size, className, }: CooldownRingProps): react_jsx_runtime.JSX.Element;
+
+type StageProgressProps = {
+    stages: string[];
+    activeStage: number;
+    className?: string;
+};
+declare function StageProgress({ stages, activeStage, className }: StageProgressProps): react_jsx_runtime.JSX.Element;
+
+type DotIndicatorProps = {
+    remaining: number;
+    max: number;
+    showLabel?: boolean;
+    labelFormat?: (remaining: number, max: number) => string;
+    className?: string;
+};
+declare function DotIndicator({ remaining, max, showLabel, labelFormat, className, }: DotIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type FilterPill = {
+    key: string;
+    label: string;
+};
+type ActiveFilterPillsProps = {
+    filters: FilterPill[];
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    className?: string;
+};
+declare function ActiveFilterPills({ filters, onRemove, onClearAll, clearAllLabel, className, }: ActiveFilterPillsProps): react_jsx_runtime.JSX.Element | null;
+
+type SectionCardProps = {
+    title: string;
+    description?: string;
+    right?: ReactNode;
+    overlay?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare function SectionCard({ title, description, right, overlay, children, className, }: SectionCardProps): react_jsx_runtime.JSX.Element;
+
 type PageShellVariant = 'plain' | 'glass' | 'minimal';
 type PageShellProps = {
     header?: ReactNode;
@@ -569,4 +684,39 @@ type ToastContextValue = {
 declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 declare function useToast(): ToastContextValue;
 
-export { 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, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, 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, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, 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 MutationOverlayStatus = 'idle' | 'saving' | 'saved' | 'error';
+type MutationOverlayProps = {
+    status: MutationOverlayStatus;
+    savingText?: string;
+    savedText?: string;
+    errorText?: string;
+    className?: string;
+};
+declare function MutationOverlay({ status, savingText, savedText, errorText, className, }: MutationOverlayProps): react_jsx_runtime.JSX.Element | null;
+
+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';
@@ -158,6 +222,7 @@ type ToggleProps = {
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    busy?: boolean;
     label?: string;
     size?: ToggleSize;
     id?: string;
@@ -473,6 +538,56 @@ type ProgressBarProps = {
 };
 declare function ProgressBar({ value, max, variant, label, showValue, size, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
+type CooldownRingSize = 'sm' | 'md' | 'lg';
+type CooldownRingProps = {
+    duration: number;
+    remaining: number;
+    onTick?: () => void;
+    onComplete?: () => void;
+    size?: CooldownRingSize;
+    className?: string;
+};
+declare function CooldownRing({ duration, remaining, size, className, }: CooldownRingProps): react_jsx_runtime.JSX.Element;
+
+type StageProgressProps = {
+    stages: string[];
+    activeStage: number;
+    className?: string;
+};
+declare function StageProgress({ stages, activeStage, className }: StageProgressProps): react_jsx_runtime.JSX.Element;
+
+type DotIndicatorProps = {
+    remaining: number;
+    max: number;
+    showLabel?: boolean;
+    labelFormat?: (remaining: number, max: number) => string;
+    className?: string;
+};
+declare function DotIndicator({ remaining, max, showLabel, labelFormat, className, }: DotIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type FilterPill = {
+    key: string;
+    label: string;
+};
+type ActiveFilterPillsProps = {
+    filters: FilterPill[];
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    className?: string;
+};
+declare function ActiveFilterPills({ filters, onRemove, onClearAll, clearAllLabel, className, }: ActiveFilterPillsProps): react_jsx_runtime.JSX.Element | null;
+
+type SectionCardProps = {
+    title: string;
+    description?: string;
+    right?: ReactNode;
+    overlay?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare function SectionCard({ title, description, right, overlay, children, className, }: SectionCardProps): react_jsx_runtime.JSX.Element;
+
 type PageShellVariant = 'plain' | 'glass' | 'minimal';
 type PageShellProps = {
     header?: ReactNode;
@@ -569,4 +684,39 @@ type ToastContextValue = {
 declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 declare function useToast(): ToastContextValue;
 
-export { 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, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutProps, Divider, type DividerProps, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Input, type InputProps, Modal, type ModalProps, 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, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, 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 MutationOverlayStatus = 'idle' | 'saving' | 'saved' | 'error';
+type MutationOverlayProps = {
+    status: MutationOverlayStatus;
+    savingText?: string;
+    savedText?: string;
+    errorText?: string;
+    className?: string;
+};
+declare function MutationOverlay({ status, savingText, savedText, errorText, className, }: MutationOverlayProps): react_jsx_runtime.JSX.Element | null;
+
+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 };