entangle-ui 0.8.2 → 0.9.0

package/dist/types/components/primitives/IconButton/IconButton.d.ts

@@ -347,6 +347,7 @@ declare const IconButton: React.NamedExoticComponent<{
     onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     form?: string | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
     name?: string | undefined | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
@@ -354,7 +355,6 @@ declare const IconButton: React.NamedExoticComponent<{
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
-    value?: string | number | readonly string[] | undefined;
 }>;
 
 export { IconButton };

package/dist/types/hooks/useBreakpoint/useBreakpoint.d.ts

@@ -0,0 +1,19 @@
+import { UseBreakpointReturn } from './useBreakpoint.types.js';
+
+/**
+ * Reactive named-breakpoint matcher.
+ *
+ * Returns booleans for each named breakpoint plus the largest matching
+ * `current`. Built on top of `useMediaQuery`. Breakpoint values come from
+ * `@/theme/breakpoints` and match the values used by `Stack` and other
+ * responsive layout components.
+ *
+ * @example
+ * ```tsx
+ * const { md, current } = useBreakpoint();
+ * return md ? <Sidebar /> : <BottomSheet />;
+ * ```
+ */
+declare function useBreakpoint(): UseBreakpointReturn;
+
+export { useBreakpoint };

package/dist/types/hooks/useBreakpoint/useBreakpoint.types.d.ts

@@ -0,0 +1,20 @@
+import { Breakpoint } from '../../theme/breakpoints.js';
+
+interface BreakpointMap {
+    /** Always `true` — base mobile breakpoint. */
+    xs: boolean;
+    /** `min-width: 576px`. */
+    sm: boolean;
+    /** `min-width: 768px`. */
+    md: boolean;
+    /** `min-width: 992px`. */
+    lg: boolean;
+    /** `min-width: 1200px`. */
+    xl: boolean;
+}
+interface UseBreakpointReturn extends BreakpointMap {
+    /** Name of the largest matching breakpoint. */
+    current: Breakpoint;
+}
+
+export type { BreakpointMap, UseBreakpointReturn };

package/dist/types/hooks/useDebounced/useDebounced.types.d.ts

@@ -0,0 +1,15 @@
+interface UseDebouncedCallbackOptions {
+    /** Fire on the leading edge in addition to trailing. @default false */
+    leading?: boolean;
+    /** Maximum time the callback may be deferred before being forced. */
+    maxWait?: number;
+}
+interface DebouncedCallback<Args extends unknown[]> {
+    (...args: Args): void;
+    /** Cancel a pending call. */
+    cancel: () => void;
+    /** Fire a pending call immediately (no-op when nothing is pending). */
+    flush: () => void;
+}
+
+export type { DebouncedCallback, UseDebouncedCallbackOptions };

package/dist/types/hooks/useDebounced/useDebouncedCallback.d.ts

@@ -0,0 +1,22 @@
+import { UseDebouncedCallbackOptions, DebouncedCallback } from './useDebounced.types.js';
+
+/**
+ * Wrap a function so rapid calls collapse into one. By default the call
+ * fires on the trailing edge — pass `leading: true` to also fire
+ * immediately. `maxWait` forces a call even when calls keep coming.
+ *
+ * The wrapper identity is stable; passing fresh inline functions across
+ * renders is safe and does not reset pending timers.
+ *
+ * @example
+ * ```tsx
+ * const onResize = useDebouncedCallback(measure, 150);
+ * useEffect(() => {
+ *   window.addEventListener('resize', onResize);
+ *   return () => window.removeEventListener('resize', onResize);
+ * }, [onResize]);
+ * ```
+ */
+declare function useDebouncedCallback<Args extends unknown[]>(fn: (...args: Args) => void, delay: number, options?: UseDebouncedCallbackOptions): DebouncedCallback<Args>;
+
+export { useDebouncedCallback };

package/dist/types/hooks/useDebounced/useDebouncedValue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns a copy of `value` that updates only after `delay` ms have elapsed
+ * without further changes (trailing-edge debounce).
+ *
+ * Typical use: feeding a search input value into an expensive query.
+ *
+ * @example
+ * ```tsx
+ * const [text, setText] = useState('');
+ * const debounced = useDebouncedValue(text, 200);
+ * useEffect(() => { search(debounced); }, [debounced]);
+ * ```
+ */
+declare function useDebouncedValue<T>(value: T, delay: number): T;
+
+export { useDebouncedValue };

package/dist/types/hooks/useIntersectionObserver/useIntersectionObserver.d.ts

@@ -0,0 +1,22 @@
+import { UseIntersectionObserverOptions, UseIntersectionObserverReturn } from './useIntersectionObserver.types.js';
+
+/**
+ * Observe whether an element intersects a root (defaults to the viewport).
+ * Returns a ref callback to attach to the observed element plus the latest
+ * `IntersectionObserverEntry`. SSR-safe: returns a no-op ref and `null`
+ * entry when `IntersectionObserver` is unavailable.
+ *
+ * @example
+ * ```tsx
+ * const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({
+ *   rootMargin: '200px',
+ * });
+ * useEffect(() => {
+ *   if (isIntersecting) loadMore();
+ * }, [isIntersecting]);
+ * return <div ref={ref} />;
+ * ```
+ */
+declare function useIntersectionObserver<T extends Element = Element>(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn<T>;
+
+export { useIntersectionObserver };

package/dist/types/hooks/useIntersectionObserver/useIntersectionObserver.types.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface UseIntersectionObserverOptions {
+    /** Root element. `null` (default) targets the viewport. */
+    root?: Element | null;
+    /** Margin around the root, e.g. `"0px 0px 200px 0px"`. */
+    rootMargin?: string;
+    /** Single threshold or an array of thresholds. */
+    threshold?: number | number[];
+    /** Disable the observer without unmounting the component. @default true */
+    enabled?: boolean;
+}
+interface UseIntersectionObserverReturn<T extends Element> {
+    /** Ref callback to attach to the observed element. */
+    ref: React.RefCallback<T>;
+    /** Latest IntersectionObserverEntry or null before the first callback. */
+    entry: IntersectionObserverEntry | null;
+    /** Convenience boolean — `entry?.isIntersecting ?? false`. */
+    isIntersecting: boolean;
+}
+
+export type { UseIntersectionObserverOptions, UseIntersectionObserverReturn };

package/dist/types/hooks/useListboxNav/useListboxNav.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+
+interface UseListboxNavOptions<T> {
+    /** Items rendered in the listbox. The hook tracks navigation by index. */
+    items: T[];
+    /**
+     * Whether a given item should be skipped during navigation and rejected by
+     * `selectActive()`.
+     */
+    isItemDisabled?: (item: T, index: number) => boolean;
+    /** Initial active index. Defaults to `-1` (no active item). */
+    defaultActiveIndex?: number;
+    /**
+     * Wrap from last → first (and vice versa) on `next`/`prev`.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Reset the active index when the items array changes by reference.
+     * Useful for filtered listboxes where the previous index would be stale.
+     * @default true
+     */
+    resetOnItemsChange?: boolean;
+    /** Called when the active item is committed via `selectActive()`. */
+    onSelect?: (item: T, index: number) => void;
+    /** Called on `Escape`. */
+    onEscape?: () => void;
+}
+interface UseListboxNavReturn {
+    /** Currently active index, or `-1` when none. */
+    activeIndex: number;
+    /** Direct setter; the value is not validated. */
+    setActiveIndex: (index: number) => void;
+    /** Move to the next non-disabled item. */
+    next: () => void;
+    /** Move to the previous non-disabled item. */
+    prev: () => void;
+    /** Activate the first non-disabled item. */
+    first: () => void;
+    /** Activate the last non-disabled item. */
+    last: () => void;
+    /** Commit the active item via `onSelect`. */
+    selectActive: () => void;
+    /**
+     * Single keyboard handler for ArrowUp/Down/Home/End/Enter/Escape. Returns
+     * `true` when the event was handled (and `preventDefault` was called).
+     */
+    handleKeyDown: (event: KeyboardEvent | React.KeyboardEvent) => boolean;
+    /** Snapshot of the navigable indices (non-disabled, in order). */
+    navigableIndices: number[];
+}
+/**
+ * Shared keyboard navigation for listbox-like surfaces (Select, MultiSelect,
+ * Combobox, CommandPalette). Tracks an `activeIndex`, skips disabled items,
+ * and exposes a single `handleKeyDown` covering Arrow / Home / End / Enter /
+ * Escape semantics.
+ *
+ * The hook is purely logical — consumers render the list and bind the handler
+ * to an input or the listbox container. Scroll-into-view is the consumer's
+ * concern.
+ *
+ * @example
+ * ```tsx
+ * const { activeIndex, handleKeyDown } = useListboxNav({
+ *   items: filtered,
+ *   isItemDisabled: o => o.disabled ?? false,
+ *   onSelect: (item) => commit(item),
+ *   onEscape: () => close(),
+ * });
+ * ```
+ */
+declare function useListboxNav<T>(options: UseListboxNavOptions<T>): UseListboxNavReturn;
+
+export { useListboxNav };
+export type { UseListboxNavOptions, UseListboxNavReturn };

package/dist/types/hooks/useMediaQuery/useMediaQuery.d.ts

@@ -0,0 +1,19 @@
+import { UseMediaQueryOptions } from './useMediaQuery.types.js';
+
+/**
+ * Reactive media query matching.
+ *
+ * Returns `true` when the current viewport matches the query and updates as
+ * the viewport changes. SSR-safe — returns `defaultMatches` when `matchMedia`
+ * is unavailable. Uses the modern `addEventListener('change')` API with a
+ * fallback to the legacy `addListener` for older browsers.
+ *
+ * @example
+ * ```tsx
+ * const isWide = useMediaQuery('(min-width: 768px)');
+ * return isWide ? <DesktopLayout /> : <MobileLayout />;
+ * ```
+ */
+declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
+
+export { useMediaQuery };

package/dist/types/hooks/useMediaQuery/useMediaQuery.types.d.ts

@@ -0,0 +1,6 @@
+interface UseMediaQueryOptions {
+    /** SSR fallback used when `window.matchMedia` is unavailable. @default false */
+    defaultMatches?: boolean;
+}
+
+export type { UseMediaQueryOptions };

package/dist/types/hooks/useThrottledCallback/useThrottledCallback.d.ts

@@ -0,0 +1,23 @@
+import { UseThrottledCallbackOptions, ThrottledCallback } from './useThrottledCallback.types.js';
+
+/**
+ * Wrap a function so it fires at most once per `delay` ms. With both
+ * `leading` and `trailing` enabled (the default), the first call fires
+ * immediately and the most recent call inside the window fires at its
+ * end. Set `leading: false` to defer the first call; set
+ * `trailing: false` to drop calls inside the window.
+ *
+ * Typical use: drag handlers, scroll listeners, resize observers — places
+ * where the input rate exceeds the work rate and you want to bound the
+ * latter.
+ *
+ * The wrapper identity is stable across renders.
+ *
+ * @example
+ * ```tsx
+ * const onPointerMove = useThrottledCallback(updateGuide, 16);
+ * ```
+ */
+declare function useThrottledCallback<Args extends unknown[]>(fn: (...args: Args) => void, delay: number, options?: UseThrottledCallbackOptions): ThrottledCallback<Args>;
+
+export { useThrottledCallback };

package/dist/types/hooks/useThrottledCallback/useThrottledCallback.types.d.ts

@@ -0,0 +1,13 @@
+interface UseThrottledCallbackOptions {
+    /** Fire on the leading edge (first call). @default true */
+    leading?: boolean;
+    /** Fire on the trailing edge (after the last call in the window). @default true */
+    trailing?: boolean;
+}
+interface ThrottledCallback<Args extends unknown[]> {
+    (...args: Args): void;
+    /** Cancel any pending trailing call and reset the throttle window. */
+    cancel: () => void;
+}
+
+export type { ThrottledCallback, UseThrottledCallbackOptions };

package/dist/types/index.d.ts

@@ -6,11 +6,14 @@ export { ThemeValues, createCustomTheme } from './theme/createCustomTheme.js';
 export { createLightTheme } from './theme/createLightTheme.js';
 export { VanillaThemeProvider, VanillaThemeProviderProps } from './theme/VanillaThemeProvider.js';
 export { ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';
+export { BREAKPOINT_ORDER, Breakpoint, breakpoints } from './theme/breakpoints.js';
 export { Accordion } from './components/layout/Accordion/Accordion.js';
 export { AccordionItem } from './components/layout/Accordion/AccordionItem.js';
 export { AccordionTrigger } from './components/layout/Accordion/AccordionTrigger.js';
 export { AccordionContent } from './components/layout/Accordion/AccordionContent.js';
 export { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionSize, AccordionTriggerProps, AccordionVariant } from './components/layout/Accordion/Accordion.types.js';
+export { Card } from './components/layout/Card/Card.js';
+export { CardBaseProps, CardBodyBaseProps, CardBodyProps, CardFooterAlign, CardFooterBaseProps, CardFooterProps, CardHeaderBaseProps, CardHeaderProps, CardMediaBaseProps, CardMediaProps, CardProps, CardVariant } from './components/layout/Card/Card.types.js';
 export { Divider } from './components/layout/Divider/Divider.js';
 export { DividerOrientation, DividerProps, DividerSpacing, DividerVariant } from './components/layout/Divider/Divider.types.js';
 export { Flex, FlexAlign, FlexAlignContent, FlexDirection, FlexJustify, FlexProps, FlexSpacing, FlexWrap } from './components/layout/Flex/Flex.js';
@@ -41,6 +44,8 @@ export { Code } from './components/primitives/Code/Code.js';
 export { CodeProps, CodeSize } from './components/primitives/Code/Code.types.js';
 export { Collapsible } from './components/primitives/Collapsible/Collapsible.js';
 export { CollapsibleProps, CollapsibleSize } from './components/primitives/Collapsible/Collapsible.types.js';
+export { HoverCard } from './components/primitives/HoverCard/HoverCard.js';
+export { HoverCardBaseProps, HoverCardContentBaseProps, HoverCardContentProps, HoverCardContextValue, HoverCardProps, HoverCardTriggerBaseProps, HoverCardTriggerProps } from './components/primitives/HoverCard/HoverCard.types.js';
 export { Icon, IconProps, IconSize } from './components/primitives/Icon/Icon.js';
 export { IconButton } from './components/primitives/IconButton/IconButton.js';
 export { Input, InputProps, InputSize } from './components/primitives/Input/Input.js';
@@ -75,10 +80,18 @@ export { MATERIAL_PALETTE, Palette, PaletteColor, PaletteShade } from './compone
 export { TAILWIND_PALETTE } from './components/controls/ColorPicker/palettes/tailwind.js';
 export { EARTH_PALETTE, MONOCHROME_PALETTE, NEON_PALETTE, PASTEL_PALETTE, PROFESSIONAL_PALETTES, SKIN_TONES_PALETTE, VINTAGE_PALETTE } from './components/controls/ColorPicker/palettes/professional.js';
 export { ColorFormat, ColorInputMode, ColorPickerProps, ColorPickerSize, ColorPreset, ColorSwatchPublicProps as ColorSwatchProps } from './components/controls/ColorPicker/ColorPicker.types.js';
+export { Combobox } from './components/controls/Combobox/Combobox.js';
+export { ComboboxBaseProps, ComboboxOption, ComboboxProps, ComboboxSize, ComboboxVariant } from './components/controls/Combobox/Combobox.types.js';
+export { FileUploader } from './components/controls/FileUploader/FileUploader.js';
+export { FileUploaderBaseProps, FileUploaderItem, FileUploaderItemStatus, FileUploaderProps, FileUploaderRejectReason, FileUploaderRenderItemState, FileUploaderSize } from './components/controls/FileUploader/FileUploader.types.js';
+export { MultiSelect } from './components/controls/MultiSelect/MultiSelect.js';
+export { MultiSelectBaseProps, MultiSelectOption, MultiSelectOptionGroup, MultiSelectProps, MultiSelectSize, MultiSelectVariant } from './components/controls/MultiSelect/MultiSelect.types.js';
 export { NumberInput, NumberInputProps } from './components/controls/NumberInput/NumberInput.js';
 export { Select } from './components/controls/Select/Select.js';
 export { SelectOptionGroup, SelectOptionItem, SelectProps, SelectSize, SelectVariant } from './components/controls/Select/Select.types.js';
 export { Slider, SliderProps } from './components/controls/Slider/Slider.js';
+export { TagInput } from './components/controls/TagInput/TagInput.js';
+export { TagInputBaseProps, TagInputProps, TagInputRenderTagState, TagInputSeparator, TagInputSize, TagInputVariant } from './components/controls/TagInput/TagInput.types.js';
 export { VectorInput } from './components/controls/VectorInput/VectorInput.js';
 export { VectorColorPreset, VectorDimension, VectorInputProps, VectorInputSize, VectorLabelPreset } from './components/controls/VectorInput/VectorInput.types.js';
 export { TreeView } from './components/controls/TreeView/TreeView.js';
@@ -100,6 +113,8 @@ export { ContextMenuBaseProps, ContextMenuConfig, ContextMenuProps, ContextMenuT
 export { Menu } from './components/navigation/Menu/Menu.js';
 export { useMenu } from './components/navigation/Menu/useMenu.js';
 export { ItemSelectionType, MenuBaseProps, MenuConfig, MenuGroup, MenuItem, MenuProps, MenuSelection, SubmenuTrigger } from './components/navigation/Menu/Menu.types.js';
+export { Pagination } from './components/navigation/Pagination/Pagination.js';
+export { PaginationBaseProps, PaginationItem, PaginationItemAriaLabelGetter, PaginationItemType, PaginationProps, PaginationSize } from './components/navigation/Pagination/Pagination.types.js';
 export { SegmentedControl } from './components/navigation/SegmentedControl/SegmentedControl.js';
 export { SegmentedControlItem } from './components/navigation/SegmentedControl/SegmentedControlItem.js';
 export { SegmentedControlItemProps, SegmentedControlOrientation, SegmentedControlProps, SegmentedControlSize, SegmentedControlVariant } from './components/navigation/SegmentedControl/SegmentedControl.types.js';
@@ -108,6 +123,8 @@ export { TabList } from './components/navigation/Tabs/TabList.js';
 export { Tab } from './components/navigation/Tabs/Tab.js';
 export { TabPanel } from './components/navigation/Tabs/TabPanel.js';
 export { TabListProps, TabPanelProps, TabProps, TabsProps, TabsSize, TabsVariant } from './components/navigation/Tabs/Tabs.types.js';
+export { DataTable } from './components/data/DataTable/DataTable.js';
+export { DataTableAlign, DataTableBaseProps, DataTableColumn, DataTableDensity, DataTableProps, DataTableRowRenderInfo, DataTableSelectionMode, DataTableSelectionState, DataTableSortDirection, DataTableSortState, DataTableVirtualizationMode } from './components/data/DataTable/DataTable.types.js';
 export { FormLabel, FormLabelProps } from './components/form/FormLabel.js';
 export { FormHelperText, FormHelperTextProps } from './components/form/FormHelperText.js';
 export { InputWrapper, InputWrapperProps } from './components/form/InputWrapper.js';
@@ -122,6 +139,11 @@ export { DialogBody } from './components/feedback/Dialog/DialogBody.js';
 export { DialogFooter } from './components/feedback/Dialog/DialogFooter.js';
 export { DialogClose } from './components/feedback/Dialog/DialogClose.js';
 export { DialogBodyProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogSize } from './components/feedback/Dialog/Dialog.types.js';
+export { CommandPalette } from './components/feedback/CommandPalette/CommandPalette.js';
+export { FuzzyMatch } from './components/feedback/CommandPalette/fuzzySearch.js';
+export { CommandItem, CommandPaletteBaseProps, CommandPaletteProps, CommandPaletteRenderItemState } from './components/feedback/CommandPalette/CommandPalette.types.js';
+export { Drawer } from './components/feedback/Drawer/Drawer.js';
+export { DrawerAnchor, DrawerBaseProps, DrawerBodyBaseProps, DrawerBodyProps, DrawerCloseButtonBaseProps, DrawerCloseButtonProps, DrawerContextValue, DrawerFooterAlign, DrawerFooterBaseProps, DrawerFooterProps, DrawerHeaderBaseProps, DrawerHeaderProps, DrawerProps, DrawerSize } from './components/feedback/Drawer/Drawer.types.js';
 export { EmptyState } from './components/feedback/EmptyState/EmptyState.js';
 export { EmptyStateProps, EmptyStateVariant } from './components/feedback/EmptyState/EmptyState.types.js';
 export { ProgressBar } from './components/feedback/ProgressBar/ProgressBar.js';
@@ -129,9 +151,12 @@ export { CircularProgress } from './components/feedback/ProgressBar/CircularProg
 export { CircularProgressProps, CircularProgressSize, ProgressBarColor, ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize } from './components/feedback/ProgressBar/ProgressBar.types.js';
 export { Skeleton } from './components/feedback/Skeleton/Skeleton.js';
 export { SkeletonGroup } from './components/feedback/Skeleton/SkeletonGroup.js';
-export { SkeletonAnimation, SkeletonGroupProps, SkeletonProps, SkeletonShape } from './components/feedback/Skeleton/Skeleton.types.js';
+export { SkeletonLayout } from './components/feedback/Skeleton/SkeletonLayout.js';
+export { SkeletonAnimation, SkeletonGroupProps, SkeletonLayoutProps, SkeletonLayoutVariant, SkeletonProps, SkeletonShape } from './components/feedback/Skeleton/Skeleton.types.js';
 export { Spinner } from './components/feedback/Spinner/Spinner.js';
 export { SpinnerColor, SpinnerProps, SpinnerSize, SpinnerVariant } from './components/feedback/Spinner/Spinner.types.js';
+export { Stat } from './components/feedback/Stat/Stat.js';
+export { StatBaseProps, StatDelta, StatDeltaDirection, StatDeltaSemantics, StatProps, StatSize } from './components/feedback/Stat/Stat.types.js';
 export { ToastProvider } from './components/feedback/Toast/ToastProvider.js';
 export { useToast } from './components/feedback/Toast/useToast.js';
 export { ToastData, ToastPosition, ToastProviderProps, ToastSeverity, UseToastReturn } from './components/feedback/Toast/Toast.types.js';
@@ -189,15 +214,18 @@ export { ChevronDownIcon } from './components/Icons/ChevronDownIcon.js';
 export { ChevronUpIcon } from './components/Icons/ChevronUpIcon.js';
 export { ClockIcon } from './components/Icons/ClockIcon.js';
 export { CloseIcon } from './components/Icons/CloseIcon.js';
+export { CloudUploadIcon } from './components/Icons/CloudUploadIcon.js';
 export { CodeIcon } from './components/Icons/CodeIcon.js';
 export { CopyIcon } from './components/Icons/CopyIcon.js';
 export { CutIcon } from './components/Icons/CutIcon.js';
 export { DownloadIcon } from './components/Icons/DownloadIcon.js';
 export { EditIcon } from './components/Icons/EditIcon.js';
 export { ErrorIcon } from './components/Icons/ErrorIcon.js';
+export { ExternalLinkIcon } from './components/Icons/ExternalLinkIcon.js';
 export { EyeDropperIcon } from './components/Icons/EyeDropperIcon.js';
 export { EyeIcon } from './components/Icons/EyeIcon.js';
 export { FilterIcon } from './components/Icons/FilterIcon.js';
+export { FirstIcon } from './components/Icons/FirstIcon.js';
 export { FolderIcon } from './components/Icons/FolderIcon.js';
 export { FullscreenIcon } from './components/Icons/FullscreenIcon.js';
 export { GridIcon } from './components/Icons/GridIcon.js';
@@ -205,6 +233,7 @@ export { HeartIcon } from './components/Icons/HeartIcon.js';
 export { HelpIcon } from './components/Icons/HelpIcon.js';
 export { HomeIcon } from './components/Icons/HomeIcon.js';
 export { InfoIcon } from './components/Icons/InfoIcon.js';
+export { LastIcon } from './components/Icons/LastIcon.js';
 export { LinkIcon } from './components/Icons/LinkIcon.js';
 export { ListIcon } from './components/Icons/ListIcon.js';
 export { LockIcon } from './components/Icons/LockIcon.js';
@@ -225,6 +254,7 @@ export { SuccessIcon } from './components/Icons/SuccessIcon.js';
 export { TagIcon } from './components/Icons/TagIcon.js';
 export { TrashIcon } from './components/Icons/TrashIcon.js';
 export { UndoIcon } from './components/Icons/UndoIcon.js';
+export { UnlinkIcon } from './components/Icons/UnlinkIcon.js';
 export { UnlockIcon } from './components/Icons/UnlockIcon.js';
 export { UploadIcon } from './components/Icons/UploadIcon.js';
 export { UserIcon } from './components/Icons/UserIcon.js';
@@ -270,6 +300,18 @@ export { ClipboardStatus, UseClipboardOptions, UseClipboardReturn } from './hook
 export { UseClickOutsideOptions, useClickOutside } from './hooks/useClickOutside/useClickOutside.js';
 export { useHotkey } from './hooks/useHotkey/useHotkey.js';
 export { UseHotkeyOptions } from './hooks/useHotkey/useHotkey.types.js';
+export { useMediaQuery } from './hooks/useMediaQuery/useMediaQuery.js';
+export { UseMediaQueryOptions } from './hooks/useMediaQuery/useMediaQuery.types.js';
+export { useBreakpoint } from './hooks/useBreakpoint/useBreakpoint.js';
+export { BreakpointMap, UseBreakpointReturn } from './hooks/useBreakpoint/useBreakpoint.types.js';
+export { useDebouncedValue } from './hooks/useDebounced/useDebouncedValue.js';
+export { useDebouncedCallback } from './hooks/useDebounced/useDebouncedCallback.js';
+export { DebouncedCallback, UseDebouncedCallbackOptions } from './hooks/useDebounced/useDebounced.types.js';
+export { useThrottledCallback } from './hooks/useThrottledCallback/useThrottledCallback.js';
+export { ThrottledCallback, UseThrottledCallbackOptions } from './hooks/useThrottledCallback/useThrottledCallback.types.js';
+export { useIntersectionObserver } from './hooks/useIntersectionObserver/useIntersectionObserver.js';
+export { UseIntersectionObserverOptions, UseIntersectionObserverReturn } from './hooks/useIntersectionObserver/useIntersectionObserver.types.js';
+export { UseListboxNavOptions, UseListboxNavReturn, useListboxNav } from './hooks/useListboxNav/useListboxNav.js';
 export { useTheme } from './hooks/useTheme/useTheme.js';
 export { ResolvedThemeValues, ThemeVariant, UseThemeReturn } from './hooks/useTheme/useTheme.types.js';
 export { cx as cn, cx } from './utils/cx.js';

package/dist/types/theme/breakpoints.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Library breakpoint values (px) — used by responsive components like
+ * `Stack` and exposed via `useBreakpoint`.
+ *
+ * Values follow the same scale Stack already uses (576/768/992/1200) and
+ * are part of the public API.
+ *
+ * `xs` is always `0` and effectively means "no minimum"; every viewport
+ * matches `xs`.
+ */
+declare const breakpoints: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+};
+type Breakpoint = keyof typeof breakpoints;
+declare const BREAKPOINT_ORDER: ReadonlyArray<Breakpoint>;
+
+export { BREAKPOINT_ORDER, breakpoints };
+export type { Breakpoint };

package/dist/types/theme/index.d.ts

@@ -7,3 +7,4 @@ export { createLightTheme } from './createLightTheme.js';
 export { VanillaThemeProvider, VanillaThemeProviderProps } from './VanillaThemeProvider.js';
 export { ThemeProvider, ThemeProviderProps } from './ThemeProvider.js';
 export { GLOBAL_SCROLLBARS_CLASS } from './globalScrollbars.css.js';
+export { BREAKPOINT_ORDER, Breakpoint, breakpoints } from './breakpoints.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "entangle-ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "type": "module",
   "sideEffects": [
     "*.css",
@@ -90,6 +90,7 @@
   "peerDependencies": {
     "@base-ui/react": "^1.1.0",
     "@floating-ui/react": "^0.27.17",
+    "@tanstack/react-virtual": "^3.13.0",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "react": ">=19.1.0",
@@ -108,6 +109,7 @@
     "@storybook/addon-onboarding": "^10.2.8",
     "@storybook/addon-themes": "^10.2.8",
     "@storybook/react-vite": "^10.2.8",
+    "@tanstack/react-virtual": "^3.13.24",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",