@accelint/design-toolkit 9.2.0 → 9.4.0

package/dist/index.js

@@ -71,13 +71,14 @@ import { DialogTrigger } from "./components/dialog/trigger.js";
 import { Popover } from "./components/popover/index.js";
 import { PopoverContent } from "./components/popover/content.js";
 import { PopoverTitle } from "./components/popover/title.js";
-import { PopoverTrigger } from "./components/popover/trigger.js";
 import { Radio } from "./components/radio/index.js";
 import { RadioContext } from "./components/radio/context.js";
 import { RadioGroup } from "./components/radio/group.js";
 import { CoordinateSegment } from "./components/coordinate-field/segment.js";
 import { CoordinateField } from "./components/coordinate-field/index.js";
 import { DateField } from "./components/date-field/index.js";
+import { useFrameDelay } from "./hooks/use-frame-delay/index.js";
+import { DeferredCollection } from "./components/deferred-collection/index.js";
 import { DetailsListContext, DetailsListProvider } from "./components/details-list/context.js";
 import { DetailsList } from "./components/details-list/index.js";
 import { DetailsListLabel } from "./components/details-list/label.js";
@@ -175,6 +176,7 @@ import { PaginationPages } from "./components/pagination/pages.js";
 import { PaginationPrev } from "./components/pagination/prev.js";
 import { Pagination } from "./components/pagination/index.js";
 import { PopoverFooter } from "./components/popover/footer.js";
+import { PopoverTrigger } from "./components/popover/trigger.js";
 import { CloneAction, LockAction, RemoveRuleAction } from "./components/query-builder/actions.js";
 import { CombinatorSelector } from "./components/query-builder/combinator-selector.js";
 import { SwitchContext, SwitchProvider } from "./components/switch/context.js";
@@ -222,4 +224,4 @@ import { useTreeActions } from "./hooks/use-tree/actions/index.js";
 import { useTreeState } from "./hooks/use-tree/state/index.js";
 import { ThemeProvider, useTheme } from "./providers/theme-provider.js";
 
-export { Accordion, AccordionContext, AccordionGroup, AccordionHeader, AccordionPanel, AccordionTrigger, ActionBar, Avatar, AvatarContext, AvatarProvider, Badge, BadgeContext, BadgeProvider, BreadcrumbItem, Breadcrumbs, Button, ButtonContext, ButtonProvider, COORDINATE_EPSILON, COORDINATE_ERROR_MESSAGES, COORDINATE_FORMAT_LABELS, COORDINATE_FORMAT_NAMES, COORDINATE_SYSTEMS, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, Chip, ChipContext, ChipList, ChipListRenderingContext, ChipProvider, ClassificationBadge, ClassificationBadgeContext, ClassificationBadgeProvider, ClassificationBanner, ClassificationBannerContext, ClassificationBannerProvider, Clock, CloneAction, ColorPicker, CombinatorSelector, ComboBoxField, ComboBoxFieldContext, ComboBoxFieldProvider, CoordinateField, CoordinateFieldContext, CoordinateFieldProvider, CoordinateFieldStateContext, CoordinateFieldStateProvider, CoordinateSegment, DateField, DeletableChip, DetailsList, DetailsListContext, DetailsListLabel, DetailsListProvider, DetailsListValue, Dialog, DialogContent, DialogContext, DialogFooter, DialogTitle, DialogTrigger, Divider, DividerContext, DividerProvider, DragContext, Drawer, DrawerBack, DrawerClose, DrawerContent, DrawerContext, DrawerEventHandlers, DrawerEventNamespace, DrawerEventTypes, DrawerFooter, DrawerHeader, DrawerHeaderTitle, DrawerLayout, DrawerLayoutMain, DrawerMenu, DrawerMenuItem, DrawerPanel, DrawerTrigger, DrawerView, EXPECTED_SEGMENT_COUNTS, Flashcard, FlashcardAdditionalData, FlashcardContext, FlashcardDetailsLabel, FlashcardDetailsList, FlashcardDetailsValue, FlashcardHero, GROUP_SEPARATOR, HeaderColumnAction, Hero, HeroContext, HeroSubtitle, HeroTitle, Hotkey, HotkeyContext, HotkeyProvider, HotkeySet, Icon, IconContext, IconProvider, Input, InputContext, Kanban, KanbanCard, KanbanCardBody, KanbanCardHeader, KanbanCardHeaderActions, KanbanCardHeaderTitle, KanbanColumn, KanbanColumnActions, KanbanColumnContainer, KanbanColumnContent, KanbanColumnHeader, KanbanColumnHeaderActions, KanbanColumnHeaderDragHandle, KanbanColumnHeaderTitle, KanbanHeader, KanbanHeaderActions, KanbanHeaderSearch, KanbanHeaderTitle, KanbanProvider, Label, LabelContext, LabelProvider, Lines, Link, LinkButton, LinkButtonContext, LinkButtonProvider, LinkProvider, List, ListContext, ListItem, ListItemContent, ListItemDescription, ListItemTitle, LockAction, Menu, MenuContext, MenuItem, MenuItemDescription, MenuItemLabel, MenuSection, MenuSeparator, MenuSubmenu, MenuTrigger, Notice, NoticeEventNamespace, NoticeEventTypes, NoticeIcon, NoticeList, Options, OptionsContext, OptionsItem, OptionsItemContent, OptionsItemDescription, OptionsItemLabel, OptionsSection, Pagination, PaginationContext, PaginationNext, PaginationPages, PaginationPrev, Popover, PopoverContent, PopoverFooter, PopoverTitle, PopoverTrigger, PortalProvider, QueryBuilder, Radio, RadioContext, RadioGroup, RemoveRuleAction, SearchField, SearchFieldContext, SearchFieldProvider, SelectField, SelectFieldContext, SelectFieldProvider, SelectableChip, Sidenav, SidenavAvatar, SidenavContent, SidenavContext, SidenavEventNamespace, SidenavEventTypes, SidenavFooter, SidenavHeader, SidenavItem, SidenavLink, SidenavMenu, SidenavMenuItem, SidenavTrigger, Skeleton, Slider, SortDirection, Switch, SwitchContext, SwitchProvider, Tab, TabList, TabPanel, Table, TableContext, Tabs, TabsContext, TabsProvider, TextAreaField, TextAreaFieldContext, TextAreaFieldProvider, TextField, TextFieldContext, TextFieldProvider, ThemeProvider, TimeField, ToggleButton, ToggleButtonContext, ToggleButtonProvider, Tooltip, TooltipContext, TooltipTrigger, Tree, TreeContext, TreeItem, TreeItemActions, TreeItemContent, TreeItemContext, TreeItemDescription, TreeItemLabel, TreeItemPrefixIcon, TreeLines, ViewStack, ViewStackContext, ViewStackEventHandlers, ViewStackEventNamespace, ViewStackEventTypes, ViewStackTrigger, ViewStackView, areAllSegmentsFilled, areCoordinatesEqual, bus, calculateClosestEdge, columnData, convertDDToDisplaySegments, convertDisplaySegmentsToDD, ddSegmentConfigs, ddmSegmentConfigs, deduplicateMatchesByLocation, dmsSegmentConfigs, formatSegmentsToCoordinateString, getAllCoordinateFormats, getEditableSegmentCount, getFormatDescription, getInsertIndex, getSegmentConfigs, getSegmentLabel, hasAnySegmentValue, headerColumnActionValues, isCompleteCoordinate, isSlottedContextValue, matchesMetadata, mgrsSegmentConfigs, parseCoordinatePaste, parseCoordinateStringToSegments, parseDropTarget, sortDirectionValues, useCardInteractions, useColumnInteractions, useCoordinateCopy, useCoordinateField, useCoordinateFieldState, useCoordinateFieldStateContext, useCoordinateFocus, useCoordinatePaste, useDragContext, useDrawerEmit, useKanban, useListItemVariant, useTheme, useTimeoutCleanup, useTreeActions, useTreeState, useViewStackEmit, utmSegmentConfigs, validateCoordinateSegments, validateMoveCard };
+export { Accordion, AccordionContext, AccordionGroup, AccordionHeader, AccordionPanel, AccordionTrigger, ActionBar, Avatar, AvatarContext, AvatarProvider, Badge, BadgeContext, BadgeProvider, BreadcrumbItem, Breadcrumbs, Button, ButtonContext, ButtonProvider, COORDINATE_EPSILON, COORDINATE_ERROR_MESSAGES, COORDINATE_FORMAT_LABELS, COORDINATE_FORMAT_NAMES, COORDINATE_SYSTEMS, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, Chip, ChipContext, ChipList, ChipListRenderingContext, ChipProvider, ClassificationBadge, ClassificationBadgeContext, ClassificationBadgeProvider, ClassificationBanner, ClassificationBannerContext, ClassificationBannerProvider, Clock, CloneAction, ColorPicker, CombinatorSelector, ComboBoxField, ComboBoxFieldContext, ComboBoxFieldProvider, CoordinateField, CoordinateFieldContext, CoordinateFieldProvider, CoordinateFieldStateContext, CoordinateFieldStateProvider, CoordinateSegment, DateField, DeferredCollection, DeletableChip, DetailsList, DetailsListContext, DetailsListLabel, DetailsListProvider, DetailsListValue, Dialog, DialogContent, DialogContext, DialogFooter, DialogTitle, DialogTrigger, Divider, DividerContext, DividerProvider, DragContext, Drawer, DrawerBack, DrawerClose, DrawerContent, DrawerContext, DrawerEventHandlers, DrawerEventNamespace, DrawerEventTypes, DrawerFooter, DrawerHeader, DrawerHeaderTitle, DrawerLayout, DrawerLayoutMain, DrawerMenu, DrawerMenuItem, DrawerPanel, DrawerTrigger, DrawerView, EXPECTED_SEGMENT_COUNTS, Flashcard, FlashcardAdditionalData, FlashcardContext, FlashcardDetailsLabel, FlashcardDetailsList, FlashcardDetailsValue, FlashcardHero, GROUP_SEPARATOR, HeaderColumnAction, Hero, HeroContext, HeroSubtitle, HeroTitle, Hotkey, HotkeyContext, HotkeyProvider, HotkeySet, Icon, IconContext, IconProvider, Input, InputContext, Kanban, KanbanCard, KanbanCardBody, KanbanCardHeader, KanbanCardHeaderActions, KanbanCardHeaderTitle, KanbanColumn, KanbanColumnActions, KanbanColumnContainer, KanbanColumnContent, KanbanColumnHeader, KanbanColumnHeaderActions, KanbanColumnHeaderDragHandle, KanbanColumnHeaderTitle, KanbanHeader, KanbanHeaderActions, KanbanHeaderSearch, KanbanHeaderTitle, KanbanProvider, Label, LabelContext, LabelProvider, Lines, Link, LinkButton, LinkButtonContext, LinkButtonProvider, LinkProvider, List, ListContext, ListItem, ListItemContent, ListItemDescription, ListItemTitle, LockAction, Menu, MenuContext, MenuItem, MenuItemDescription, MenuItemLabel, MenuSection, MenuSeparator, MenuSubmenu, MenuTrigger, Notice, NoticeEventNamespace, NoticeEventTypes, NoticeIcon, NoticeList, Options, OptionsContext, OptionsItem, OptionsItemContent, OptionsItemDescription, OptionsItemLabel, OptionsSection, Pagination, PaginationContext, PaginationNext, PaginationPages, PaginationPrev, Popover, PopoverContent, PopoverFooter, PopoverTitle, PopoverTrigger, PortalProvider, QueryBuilder, Radio, RadioContext, RadioGroup, RemoveRuleAction, SearchField, SearchFieldContext, SearchFieldProvider, SelectField, SelectFieldContext, SelectFieldProvider, SelectableChip, Sidenav, SidenavAvatar, SidenavContent, SidenavContext, SidenavEventNamespace, SidenavEventTypes, SidenavFooter, SidenavHeader, SidenavItem, SidenavLink, SidenavMenu, SidenavMenuItem, SidenavTrigger, Skeleton, Slider, SortDirection, Switch, SwitchContext, SwitchProvider, Tab, TabList, TabPanel, Table, TableContext, Tabs, TabsContext, TabsProvider, TextAreaField, TextAreaFieldContext, TextAreaFieldProvider, TextField, TextFieldContext, TextFieldProvider, ThemeProvider, TimeField, ToggleButton, ToggleButtonContext, ToggleButtonProvider, Tooltip, TooltipContext, TooltipTrigger, Tree, TreeContext, TreeItem, TreeItemActions, TreeItemContent, TreeItemContext, TreeItemDescription, TreeItemLabel, TreeItemPrefixIcon, TreeLines, ViewStack, ViewStackContext, ViewStackEventHandlers, ViewStackEventNamespace, ViewStackEventTypes, ViewStackTrigger, ViewStackView, areAllSegmentsFilled, areCoordinatesEqual, bus, calculateClosestEdge, columnData, convertDDToDisplaySegments, convertDisplaySegmentsToDD, ddSegmentConfigs, ddmSegmentConfigs, deduplicateMatchesByLocation, dmsSegmentConfigs, formatSegmentsToCoordinateString, getAllCoordinateFormats, getEditableSegmentCount, getFormatDescription, getInsertIndex, getSegmentConfigs, getSegmentLabel, hasAnySegmentValue, headerColumnActionValues, isCompleteCoordinate, isSlottedContextValue, matchesMetadata, mgrsSegmentConfigs, parseCoordinatePaste, parseCoordinateStringToSegments, parseDropTarget, sortDirectionValues, useCardInteractions, useColumnInteractions, useCoordinateCopy, useCoordinateField, useCoordinateFieldState, useCoordinateFieldStateContext, useCoordinateFocus, useCoordinatePaste, useDragContext, useDrawerEmit, useFrameDelay, useKanban, useListItemVariant, useTheme, useTimeoutCleanup, useTreeActions, useTreeState, useViewStackEmit, utmSegmentConfigs, validateCoordinateSegments, validateMoveCard };

package/dist/lib/types.d.ts

@@ -16,35 +16,52 @@ import { AriaAttributes as AriaAttributes$1, AriaRole, CSSProperties, PropsWithC
 /**
  * Re-export due to not being exported by library
  */
+/** Render props with optional default className merged with generic state */
 type ClassNameRenderProps<T extends object> = T & {
+  /** Optional default CSS class name */
   defaultClassName?: string;
 };
+/** CSS class name as string or render function receiving component state */
 type RenderPropsClassName<T extends object> = string | ((values: ClassNameRenderProps<T>) => string);
+/** Render props with optional default style merged with generic state */
 type StylePropRenderProps<T extends object> = T & {
+  /** Optional default inline styles */
   defaultStyle?: CSSProperties;
 };
+/** Inline styles as CSSProperties or render function receiving component state */
 type RenderPropsStyle<T extends object> = CSSProperties | ((values: StylePropRenderProps<T>) => CSSProperties);
+/** Render props with optional default children merged with generic state */
 type ChildrenRenderProps<T extends object> = T & {
+  /** Optional default children content */
   defaultChildren?: ReactNode;
 };
+/** Children as ReactNode or render function receiving component state */
 type RenderPropsChildren<T extends object> = ReactNode | ((values: ChildrenRenderProps<T>) => ReactNode);
+/** Props for className and style that accept render functions */
 type StyleRenderProps<T extends object> = {
   /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
   className?: RenderPropsClassName<T>;
   /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
   style?: RenderPropsStyle<T>;
 };
+/** Combined render props for className, style, and children */
 type RenderProps<T extends object> = StyleRenderProps<T> & {
   /** The children of the component. A function may be provided to alter the children based on component state. */
   children?: RenderPropsChildren<T>;
 };
+/** Container for slot-based context values */
 type SlottedValue<T> = {
+  /** Map of slot names to their values */
   slots?: Record<string | symbol, T>;
 };
+/** Props for context providers with slot support */
 type ProviderProps<T> = PropsWithChildren<Omit<T, 'children' | 'slot'> & SlottedValue<T>>;
+/** Extended ARIA attributes including role */
 type AriaAttributes = AriaAttributes$1 & {
+  /** ARIA role for the element */
   role?: AriaRole;
 };
+/** ARIA attributes combined with ref forwarding support */
 type AriaAttributesWithRef<T> = AriaAttributes & RefAttributes<T>;
 //#endregion
 export { AriaAttributes, AriaAttributesWithRef, ChildrenRenderProps, ClassNameRenderProps, ProviderProps, RenderProps, RenderPropsChildren, RenderPropsClassName, RenderPropsStyle, SlottedValue, StylePropRenderProps, StyleRenderProps };

package/dist/lib/utils.d.ts

@@ -22,6 +22,21 @@ interface SlottedValue<T> {
 }
 /**
  * A helper to narrow the type of Context Value
+ *
+ * @example
+ * ```tsx
+ * function ComponentWithContext({ context }: { context: ContextValue<Props, HTMLElement> }) {
+ *   if (isSlottedContextValue(context)) {
+ *     // TypeScript knows context has 'slots' property
+ *     const slotValue = context.slots?.['header'];
+ *     return <div>{slotValue && 'Has header slot'}</div>;
+ *   }
+ *   return <div>No slots</div>;
+ * }
+ * ```
+ *
+ * @param context - The context value to check.
+ * @returns True if the context contains slot definitions.
  */
 declare function isSlottedContextValue<T, E>(context: ContextValue<T, E>): context is SlottedValue<WithRef<T, E>>;
 //#endregion

package/dist/lib/utils.js

@@ -14,6 +14,21 @@
 //#region src/lib/utils.ts
 /**
 * A helper to narrow the type of Context Value
+*
+* @example
+* ```tsx
+* function ComponentWithContext({ context }: { context: ContextValue<Props, HTMLElement> }) {
+*   if (isSlottedContextValue(context)) {
+*     // TypeScript knows context has 'slots' property
+*     const slotValue = context.slots?.['header'];
+*     return <div>{slotValue && 'Has header slot'}</div>;
+*   }
+*   return <div>No slots</div>;
+* }
+* ```
+*
+* @param context - The context value to check.
+* @returns True if the context contains slot definitions.
 */
 function isSlottedContextValue(context) {
 	return !!context && "slots" in context;

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ForwardedRef } from 'react';\nimport type { ContextValue } from 'react-aria-components';\n\n// Types copied from RAC due to not being exported\ntype WithRef<T, E> = T & {\n  ref?: ForwardedRef<E>;\n};\n\ninterface SlottedValue<T> {\n  slots?: Record<string | symbol, T>;\n}\n\n/**\n * A helper to narrow the type of Context Value\n */\nexport function isSlottedContextValue<T, E>(\n  context: ContextValue<T, E>,\n): context is SlottedValue<WithRef<T, E>> {\n  return !!context && 'slots' in context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,SAAgB,sBACd,SACwC;AACxC,QAAO,CAAC,CAAC,WAAW,WAAW"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ForwardedRef } from 'react';\nimport type { ContextValue } from 'react-aria-components';\n\n// Types copied from RAC due to not being exported\ntype WithRef<T, E> = T & {\n  ref?: ForwardedRef<E>;\n};\n\ninterface SlottedValue<T> {\n  slots?: Record<string | symbol, T>;\n}\n\n/**\n * A helper to narrow the type of Context Value\n *\n * @example\n * ```tsx\n * function ComponentWithContext({ context }: { context: ContextValue<Props, HTMLElement> }) {\n *   if (isSlottedContextValue(context)) {\n *     // TypeScript knows context has 'slots' property\n *     const slotValue = context.slots?.['header'];\n *     return <div>{slotValue && 'Has header slot'}</div>;\n *   }\n *   return <div>No slots</div>;\n * }\n * ```\n *\n * @param context - The context value to check.\n * @returns True if the context contains slot definitions.\n */\nexport function isSlottedContextValue<T, E>(\n  context: ContextValue<T, E>,\n): context is SlottedValue<WithRef<T, E>> {\n  return !!context && 'slots' in context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,sBACd,SACwC;AACxC,QAAO,CAAC,CAAC,WAAW,WAAW"}

package/dist/providers/portal.d.ts

@@ -11,9 +11,18 @@
  */
 
 import { PropsWithChildren, RefObject } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/providers/portal.d.ts
+/**
+ * Provides a portal container for rendering overlays and modals
+ *
+ * @param props - Component props.
+ * @param props.parentRef - Optional ref to parent element for portal attachment.
+ * @param props.inject - Optional element to inject as portal container.
+ * @param props.children - Content to render within the portal context.
+ * @returns The portal provider wrapping children.
+ */
 declare function PortalProvider({
   parentRef,
   inject,
@@ -21,7 +30,7 @@ declare function PortalProvider({
 }: PropsWithChildren<{
   parentRef?: RefObject<HTMLElement | null>;
   inject?: HTMLElement | null;
-}>): react_jsx_runtime0.JSX.Element;
+}>): react_jsx_runtime9.JSX.Element;
 //#endregion
 export { PortalProvider };
 //# sourceMappingURL=portal.d.ts.map

package/dist/providers/portal.js

@@ -17,6 +17,15 @@ import { UNSAFE_PortalProvider } from "@react-aria/overlays";
 import { useIsSSR } from "@react-aria/ssr";
 
 //#region src/providers/portal.tsx
+/**
+* Provides a portal container for rendering overlays and modals
+*
+* @param props - Component props.
+* @param props.parentRef - Optional ref to parent element for portal attachment.
+* @param props.inject - Optional element to inject as portal container.
+* @param props.children - Content to render within the portal context.
+* @returns The portal provider wrapping children.
+*/
 function PortalProvider({ parentRef, inject, children }) {
 	const isSSR = useIsSSR();
 	const [portal, setPortal] = useState(isSSR ? null : document.body);

package/dist/providers/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","names":[],"sources":["../../src/providers/portal.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { UNSAFE_PortalProvider } from '@react-aria/overlays';\nimport { useIsSSR } from '@react-aria/ssr';\nimport {\n  type PropsWithChildren,\n  type RefObject,\n  useEffect,\n  useState,\n} from 'react';\n\nexport function PortalProvider({\n  parentRef,\n  inject,\n  children,\n}: PropsWithChildren<{\n  parentRef?: RefObject<HTMLElement | null>;\n  inject?: HTMLElement | null;\n}>) {\n  const isSSR = useIsSSR();\n  const [portal, setPortal] = useState(isSSR ? null : document.body);\n\n  useEffect(() => {\n    const node = parentRef?.current;\n    // TODO: Ensure proper ssr hydration\n    const port = isSSR ? null : inject;\n\n    if (node && port) {\n      node.appendChild(port);\n\n      setPortal(port);\n    } else if (node) {\n      setPortal(node);\n    }\n\n    return () => {\n      port?.remove();\n\n      setPortal(isSSR ? null : document.body);\n    };\n  }, [isSSR, parentRef, inject]);\n\n  return (\n    <UNSAFE_PortalProvider getContainer={() => portal}>\n      {children}\n    </UNSAFE_PortalProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,eAAe,EAC7B,WACA,QACA,YAIE;CACF,MAAM,QAAQ,UAAU;CACxB,MAAM,CAAC,QAAQ,aAAa,SAAS,QAAQ,OAAO,SAAS,KAAK;AAElE,iBAAgB;EACd,MAAM,OAAO,WAAW;EAExB,MAAM,OAAO,QAAQ,OAAO;AAE5B,MAAI,QAAQ,MAAM;AAChB,QAAK,YAAY,KAAK;AAEtB,aAAU,KAAK;aACN,KACT,WAAU,KAAK;AAGjB,eAAa;AACX,SAAM,QAAQ;AAEd,aAAU,QAAQ,OAAO,SAAS,KAAK;;IAExC;EAAC;EAAO;EAAW;EAAO,CAAC;AAE9B,QACE,oBAAC;EAAsB,oBAAoB;EACxC;GACqB"}
+{"version":3,"file":"portal.js","names":[],"sources":["../../src/providers/portal.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { UNSAFE_PortalProvider } from '@react-aria/overlays';\nimport { useIsSSR } from '@react-aria/ssr';\nimport {\n  type PropsWithChildren,\n  type RefObject,\n  useEffect,\n  useState,\n} from 'react';\n\n/**\n * Provides a portal container for rendering overlays and modals\n *\n * @param props - Component props.\n * @param props.parentRef - Optional ref to parent element for portal attachment.\n * @param props.inject - Optional element to inject as portal container.\n * @param props.children - Content to render within the portal context.\n * @returns The portal provider wrapping children.\n */\nexport function PortalProvider({\n  parentRef,\n  inject,\n  children,\n}: PropsWithChildren<{\n  parentRef?: RefObject<HTMLElement | null>;\n  inject?: HTMLElement | null;\n}>) {\n  const isSSR = useIsSSR();\n  const [portal, setPortal] = useState(isSSR ? null : document.body);\n\n  useEffect(() => {\n    const node = parentRef?.current;\n    // TODO: Ensure proper ssr hydration\n    const port = isSSR ? null : inject;\n\n    if (node && port) {\n      node.appendChild(port);\n\n      setPortal(port);\n    } else if (node) {\n      setPortal(node);\n    }\n\n    return () => {\n      port?.remove();\n\n      setPortal(isSSR ? null : document.body);\n    };\n  }, [isSSR, parentRef, inject]);\n\n  return (\n    <UNSAFE_PortalProvider getContainer={() => portal}>\n      {children}\n    </UNSAFE_PortalProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,eAAe,EAC7B,WACA,QACA,YAIE;CACF,MAAM,QAAQ,UAAU;CACxB,MAAM,CAAC,QAAQ,aAAa,SAAS,QAAQ,OAAO,SAAS,KAAK;AAElE,iBAAgB;EACd,MAAM,OAAO,WAAW;EAExB,MAAM,OAAO,QAAQ,OAAO;AAE5B,MAAI,QAAQ,MAAM;AAChB,QAAK,YAAY,KAAK;AAEtB,aAAU,KAAK;aACN,KACT,WAAU,KAAK;AAGjB,eAAa;AACX,SAAM,QAAQ;AAEd,aAAU,QAAQ,OAAO,SAAS,KAAK;;IAExC;EAAC;EAAO;EAAW;EAAO,CAAC;AAE9B,QACE,oBAAC;EAAsB,oBAAoB;EACxC;GACqB"}

package/dist/providers/theme-provider.d.ts

@@ -12,11 +12,12 @@
 
 import "client-only";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { PartialDeep } from "type-fest";
 import { SemanticColorTokens, StaticColorTokens, ThemeTokens } from "@accelint/design-foundation/tokens/types";
 
 //#region src/providers/theme-provider.d.ts
+/** Theme mode for light or dark appearance */
 type ThemeMode = 'dark' | 'light';
 type ContextColorTokens = SemanticColorTokens & StaticColorTokens;
 type ThemeContextValue = {
@@ -30,12 +31,27 @@ type ThemeProviderProps = PropsWithChildren & {
   /** override existing values in the theme */
   overrides?: PartialDeep<ThemeTokens>;
 };
+/**
+ * Provides theme context with mode toggling and token overrides
+ *
+ * @param props - {@link ThemeProviderProps}
+ * @param props.children - Content to render within the theme context.
+ * @param props.defaultMode - Initial theme mode (defaults to 'dark').
+ * @param props.onChange - Callback when theme mode changes.
+ * @param props.overrides - Partial overrides for theme tokens.
+ * @returns The theme provider wrapping children.
+ */
 declare function ThemeProvider({
   children,
   defaultMode,
   onChange,
   overrides
-}: ThemeProviderProps): react_jsx_runtime1.JSX.Element;
+}: ThemeProviderProps): react_jsx_runtime2.JSX.Element;
+/**
+ * Access the current theme context
+ *
+ * @returns Theme context with mode, tokens, and toggleMode function.
+ */
 declare function useTheme(): ThemeContextValue;
 //#endregion
 export { ThemeMode, ThemeProvider, useTheme };

package/dist/providers/theme-provider.js

@@ -28,6 +28,16 @@ const ThemeContext = createContext({
 	},
 	toggleMode: (_mode) => {}
 });
+/**
+* Provides theme context with mode toggling and token overrides
+*
+* @param props - {@link ThemeProviderProps}
+* @param props.children - Content to render within the theme context.
+* @param props.defaultMode - Initial theme mode (defaults to 'dark').
+* @param props.onChange - Callback when theme mode changes.
+* @param props.overrides - Partial overrides for theme tokens.
+* @returns The theme provider wrapping children.
+*/
 function ThemeProvider({ children, defaultMode, onChange, overrides }) {
 	const [mode, setMode] = useState(defaultMode ?? "dark");
 	useEffect(() => {
@@ -56,6 +66,11 @@ function ThemeProvider({ children, defaultMode, onChange, overrides }) {
 		children
 	});
 }
+/**
+* Access the current theme context
+*
+* @returns Theme context with mode, tokens, and toggleMode function.
+*/
 function useTheme() {
 	return useContext(ThemeContext);
 }

package/dist/providers/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["tokens: ContextColorTokens","mode"],"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { designTokens } from '@accelint/design-foundation/tokens';\nimport { assign } from 'radashi';\nimport {\n  createContext,\n  type PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type {\n  SemanticColorTokens,\n  StaticColorTokens,\n  ThemeTokens,\n} from '@accelint/design-foundation/tokens/types';\nimport type { PartialDeep } from 'type-fest';\n\nexport type ThemeMode = 'dark' | 'light';\ntype ContextColorTokens = SemanticColorTokens & StaticColorTokens;\n\ntype ThemeContextValue = {\n  mode: ThemeMode;\n  tokens: ContextColorTokens;\n  toggleMode: (mode: ThemeMode) => void;\n};\n/** provide default context value to avoid optional chaining and null checks on the client */\nconst defaultContextValue: ThemeContextValue = {\n  mode: 'dark',\n  tokens: { ...designTokens.dark, ...designTokens.static },\n  toggleMode: (_mode) => {\n    // no-op\n  },\n};\nconst ThemeContext = createContext<ThemeContextValue>(defaultContextValue);\n\ntype ThemeProviderProps = PropsWithChildren & {\n  defaultMode?: ThemeMode;\n  onChange?: (mode: ThemeMode) => void;\n  /** override existing values in the theme */\n  overrides?: PartialDeep<ThemeTokens>;\n};\n\nexport function ThemeProvider({\n  children,\n  defaultMode,\n  onChange,\n  overrides,\n}: ThemeProviderProps) {\n  const [mode, setMode] = useState<ThemeMode>(defaultMode ?? 'dark');\n\n  useEffect(() => {\n    if (document) {\n      const { documentElement } = document;\n      documentElement.classList.remove('dark', 'light');\n      documentElement.classList.add(mode);\n    }\n  }, [mode]);\n\n  const tokens: ContextColorTokens = useMemo(() => {\n    const tokensWithOverrides = assign(designTokens, overrides as ThemeTokens);\n    return {\n      ...tokensWithOverrides[mode],\n      ...tokensWithOverrides.static,\n    };\n  }, [mode, overrides]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        mode,\n        tokens,\n        toggleMode: (mode: ThemeMode) => {\n          setMode(mode);\n          onChange?.(mode);\n        },\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,eAAe,cAP0B;CAC7C,MAAM;CACN,QAAQ;EAAE,GAAG,aAAa;EAAM,GAAG,aAAa;EAAQ;CACxD,aAAa,UAAU;CAGxB,CACyE;AAS1E,SAAgB,cAAc,EAC5B,UACA,aACA,UACA,aACqB;CACrB,MAAM,CAAC,MAAM,WAAW,SAAoB,eAAe,OAAO;AAElE,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,EAAE,oBAAoB;AAC5B,mBAAgB,UAAU,OAAO,QAAQ,QAAQ;AACjD,mBAAgB,UAAU,IAAI,KAAK;;IAEpC,CAAC,KAAK,CAAC;CAEV,MAAMA,SAA6B,cAAc;EAC/C,MAAM,sBAAsB,OAAO,cAAc,UAAyB;AAC1E,SAAO;GACL,GAAG,oBAAoB;GACvB,GAAG,oBAAoB;GACxB;IACA,CAAC,MAAM,UAAU,CAAC;AAErB,QACE,oBAAC,aAAa;EACZ,OAAO;GACL;GACA;GACA,aAAa,WAAoB;AAC/B,YAAQC,OAAK;AACb,eAAWA,OAAK;;GAEnB;EAEA;GACqB;;AAI5B,SAAgB,WAAW;AACzB,QAAO,WAAW,aAAa"}
+{"version":3,"file":"theme-provider.js","names":["tokens: ContextColorTokens","mode"],"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { designTokens } from '@accelint/design-foundation/tokens';\nimport { assign } from 'radashi';\nimport {\n  createContext,\n  type PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type {\n  SemanticColorTokens,\n  StaticColorTokens,\n  ThemeTokens,\n} from '@accelint/design-foundation/tokens/types';\nimport type { PartialDeep } from 'type-fest';\n\n/** Theme mode for light or dark appearance */\nexport type ThemeMode = 'dark' | 'light';\ntype ContextColorTokens = SemanticColorTokens & StaticColorTokens;\n\ntype ThemeContextValue = {\n  mode: ThemeMode;\n  tokens: ContextColorTokens;\n  toggleMode: (mode: ThemeMode) => void;\n};\n/** provide default context value to avoid optional chaining and null checks on the client */\nconst defaultContextValue: ThemeContextValue = {\n  mode: 'dark',\n  tokens: { ...designTokens.dark, ...designTokens.static },\n  toggleMode: (_mode) => {\n    // no-op\n  },\n};\nconst ThemeContext = createContext<ThemeContextValue>(defaultContextValue);\n\ntype ThemeProviderProps = PropsWithChildren & {\n  defaultMode?: ThemeMode;\n  onChange?: (mode: ThemeMode) => void;\n  /** override existing values in the theme */\n  overrides?: PartialDeep<ThemeTokens>;\n};\n\n/**\n * Provides theme context with mode toggling and token overrides\n *\n * @param props - {@link ThemeProviderProps}\n * @param props.children - Content to render within the theme context.\n * @param props.defaultMode - Initial theme mode (defaults to 'dark').\n * @param props.onChange - Callback when theme mode changes.\n * @param props.overrides - Partial overrides for theme tokens.\n * @returns The theme provider wrapping children.\n */\nexport function ThemeProvider({\n  children,\n  defaultMode,\n  onChange,\n  overrides,\n}: ThemeProviderProps) {\n  const [mode, setMode] = useState<ThemeMode>(defaultMode ?? 'dark');\n\n  useEffect(() => {\n    if (document) {\n      const { documentElement } = document;\n      documentElement.classList.remove('dark', 'light');\n      documentElement.classList.add(mode);\n    }\n  }, [mode]);\n\n  const tokens: ContextColorTokens = useMemo(() => {\n    const tokensWithOverrides = assign(designTokens, overrides as ThemeTokens);\n    return {\n      ...tokensWithOverrides[mode],\n      ...tokensWithOverrides.static,\n    };\n  }, [mode, overrides]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        mode,\n        tokens,\n        toggleMode: (mode: ThemeMode) => {\n          setMode(mode);\n          onChange?.(mode);\n        },\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * Access the current theme context\n *\n * @returns Theme context with mode, tokens, and toggleMode function.\n */\nexport function useTheme() {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAM,eAAe,cAP0B;CAC7C,MAAM;CACN,QAAQ;EAAE,GAAG,aAAa;EAAM,GAAG,aAAa;EAAQ;CACxD,aAAa,UAAU;CAGxB,CACyE;;;;;;;;;;;AAmB1E,SAAgB,cAAc,EAC5B,UACA,aACA,UACA,aACqB;CACrB,MAAM,CAAC,MAAM,WAAW,SAAoB,eAAe,OAAO;AAElE,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,EAAE,oBAAoB;AAC5B,mBAAgB,UAAU,OAAO,QAAQ,QAAQ;AACjD,mBAAgB,UAAU,IAAI,KAAK;;IAEpC,CAAC,KAAK,CAAC;CAEV,MAAMA,SAA6B,cAAc;EAC/C,MAAM,sBAAsB,OAAO,cAAc,UAAyB;AAC1E,SAAO;GACL,GAAG,oBAAoB;GACvB,GAAG,oBAAoB;GACxB;IACA,CAAC,MAAM,UAAU,CAAC;AAErB,QACE,oBAAC,aAAa;EACZ,OAAO;GACL;GACA;GACA,aAAa,WAAoB;AAC/B,YAAQC,OAAK;AACb,eAAWA,OAAK;;GAEnB;EAEA;GACqB;;;;;;;AAS5B,SAAgB,WAAW;AACzB,QAAO,WAAW,aAAa"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@accelint/design-toolkit",
   "description": "An open-source component library to serve as part of the entire ecosystem of UX for Accelint.",
-  "version": "9.2.0",
+  "version": "9.4.0",
   "author": "https://hypergiant.com",
   "$schema": "https://json.schemastore.org/package",
   "devDependencies": {
@@ -60,17 +60,17 @@
     "vitest": "^4.0.15",
     "zod": "^4.1.12",
     "@accelint/biome-config": "1.1.0",
-    "@accelint/design-foundation": "2.0.0",
-    "@accelint/core": "0.5.2",
     "@accelint/bus": "3.0.2",
-    "@accelint/geo": "0.5.0",
+    "@accelint/core": "0.5.2",
+    "@accelint/design-foundation": "2.1.0",
+    "@accelint/geo": "0.5.1",
     "@accelint/icons": "2.1.2",
+    "@accelint/logger": "0.1.5",
+    "@accelint/postcss-tailwind-css-modules": "1.0.1",
     "@accelint/prettier-config": "0.2.1",
     "@accelint/temporal": "0.1.4",
     "@accelint/typescript-config": "0.1.4",
-    "@accelint/vitest-config": "0.1.6",
-    "@accelint/logger": "0.1.4",
-    "@accelint/postcss-tailwind-css-modules": "1.0.1"
+    "@accelint/vitest-config": "0.1.6"
   },
   "exports": {
     ".": "./dist/index.js",
@@ -129,6 +129,8 @@
     "./components/coordinate-field/width-utils": "./dist/components/coordinate-field/width-utils.js",
     "./components/date-field": "./dist/components/date-field/index.js",
     "./components/date-field/types": "./dist/components/date-field/types.js",
+    "./components/deferred-collection": "./dist/components/deferred-collection/index.js",
+    "./components/deferred-collection/types": "./dist/components/deferred-collection/types.js",
     "./components/details-list": "./dist/components/details-list/index.js",
     "./components/details-list/context": "./dist/components/details-list/context.js",
     "./components/details-list/label": "./dist/components/details-list/label.js",
@@ -344,6 +346,7 @@
     "./hooks/coordinate-field/use-coordinate-paste": "./dist/hooks/coordinate-field/use-coordinate-paste.js",
     "./hooks/coordinate-field/use-timeout-cleanup": "./dist/hooks/coordinate-field/use-timeout-cleanup.js",
     "./hooks/kanban": "./dist/hooks/kanban/index.js",
+    "./hooks/use-frame-delay": "./dist/hooks/use-frame-delay/index.js",
     "./hooks/use-tree/actions": "./dist/hooks/use-tree/actions/index.js",
     "./hooks/use-tree/actions/cache": "./dist/hooks/use-tree/actions/cache.js",
     "./hooks/use-tree/state": "./dist/hooks/use-tree/state/index.js",
@@ -397,10 +400,10 @@
     "zod": "^4.1.12",
     "@accelint/bus": "3.0.2",
     "@accelint/core": "0.5.2",
-    "@accelint/design-foundation": "2.0.0",
+    "@accelint/design-foundation": "2.1.0",
+    "@accelint/geo": "0.5.1",
     "@accelint/icons": "2.1.2",
-    "@accelint/geo": "0.5.0",
-    "@accelint/logger": "0.1.4",
+    "@accelint/logger": "0.1.5",
     "@accelint/temporal": "0.1.4"
   },
   "private": false,
@@ -425,8 +428,8 @@
     "format:biome": "pnpm biome format . --write --verbose",
     "format:biome:check": "pnpm biome format . --verbose",
     "format:check": "pnpm format:biome:check && pnpm format:prettier:check",
-    "format:prettier": "pnpm prettier --write './**/*.css'",
-    "format:prettier:check": "pnpm prettier --check './**/*.css'",
+    "format:prettier": "pnpm prettier --write ./**/*.css",
+    "format:prettier:check": "pnpm prettier --check ./**/*.css",
     "index": "pnpm zx ../../scripts/indexer.mjs packages/design-toolkit",
     "license": "pnpm zx ../../scripts/license.mjs",
     "lint": "pnpm biome lint . --verbose",