@accelint/design-toolkit 9.2.0 → 9.4.0

package/dist/components/time-field/types.d.ts

@@ -13,7 +13,11 @@
 import { DateInputProps, DateSegmentProps, FieldErrorProps, LabelProps, TimeFieldProps as TimeFieldProps$1, TimeValue } from "react-aria-components";
 
 //#region src/components/time-field/types.d.ts
+/**
+ * Props for the TimeField component.
+ */
 type TimeFieldProps<T extends TimeValue> = Omit<TimeFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & {
+  /** Custom CSS class names for field elements. */
   classNames?: {
     field?: TimeFieldProps$1<T>['className'];
     label?: LabelProps['className'];
@@ -23,10 +27,15 @@ type TimeFieldProps<T extends TimeValue> = Omit<TimeFieldProps$1<T>, 'children'
     description?: string;
     error?: FieldErrorProps['className'];
   };
+  /** Label text for the field. */
   label?: string;
+  /** Props passed to the underlying DateInput element. */
   inputProps?: Omit<DateInputProps, 'children' | 'className'>;
+  /** Helper text displayed below the input. */
   description?: string;
+  /** Error message displayed when validation fails. */
   errorMessage?: string;
+  /** Size variant of the field. */
   size?: 'small' | 'medium';
 };
 //#endregion

package/dist/components/tooltip/context.d.ts

@@ -12,11 +12,12 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react35 from "react";
+import * as react38 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/tooltip/context.d.ts
-declare const TooltipContext: react35.Context<ContextValue<TooltipTriggerProps, HTMLDivElement>>;
+/** Context for sharing props across TooltipTrigger components */
+declare const TooltipContext: react38.Context<ContextValue<TooltipTriggerProps, HTMLDivElement>>;
 //#endregion
 export { TooltipContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/tooltip/context.js

@@ -17,6 +17,7 @@ import "client-only";
 import { createContext } from "react";
 
 //#region src/components/tooltip/context.tsx
+/** Context for sharing props across TooltipTrigger components */
 const TooltipContext = createContext(null);
 
 //#endregion

package/dist/components/tooltip/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/tooltip/context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { TooltipTriggerProps } from './types';\n\nexport const TooltipContext =\n  createContext<ContextValue<TooltipTriggerProps, HTMLDivElement>>(null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,iBACX,cAAiE,KAAK"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/tooltip/context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { TooltipTriggerProps } from './types';\n\n/** Context for sharing props across TooltipTrigger components */\nexport const TooltipContext =\n  createContext<ContextValue<TooltipTriggerProps, HTMLDivElement>>(null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,iBACX,cAAiE,KAAK"}

package/dist/components/tooltip/index.d.ts

@@ -12,45 +12,30 @@
 
 import { TooltipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime144 from "react/jsx-runtime";
+import * as react_jsx_runtime165 from "react/jsx-runtime";
 
 //#region src/components/tooltip/index.d.ts
 
 /**
- * Tooltip - A contextual popup component for providing additional information
+ * Tooltip - Contextual popup for additional information
  *
- * Displays helpful information when users hover over or focus on an element.
- * Provides accessible tooltip functionality with proper positioning, keyboard
- * navigation, and screen reader support for enhanced user experience.
+ * Displays on hover or focus with automatic positioning and accessibility support.
  *
- * @example
- * // Basic tooltip
- * <TooltipTrigger>
- *   <Button>Hover me</Button>
- *   <Tooltip>
- *     This is helpful information
- *   </Tooltip>
- * </TooltipTrigger>
+ * @param props - {@link TooltipProps}
+ * @param props.children - Tooltip content.
+ * @param props.parentRef - Ref to the parent element for portal positioning.
+ * @param props.className - CSS class for the tooltip.
+ * @param props.offset - Distance from the trigger element.
+ * @param props.placement - Position relative to the trigger.
+ * @returns The rendered Tooltip component.
  *
  * @example
- * // Tooltip with custom positioning
+ * ```tsx
  * <TooltipTrigger>
- *   <Button>Hover for info</Button>
- *   <Tooltip placement="top" offset={10}>
- *     Positioned above with custom offset
- *   </Tooltip>
- * </TooltipTrigger>
- *
- * @example
- * // Icon with tooltip
- * <TooltipTrigger>
- *   <Button variant="icon">
- *     <Icon><Info /></Icon>
- *   </Button>
- *   <Tooltip>
- *     Additional context for this action
- *   </Tooltip>
+ *   <Button>Hover me</Button>
+ *   <Tooltip>Additional information</Tooltip>
  * </TooltipTrigger>
+ * ```
  */
 declare function Tooltip({
   children,
@@ -59,7 +44,7 @@ declare function Tooltip({
   offset,
   placement,
   ...props
-}: TooltipProps): react_jsx_runtime144.JSX.Element;
+}: TooltipProps): react_jsx_runtime165.JSX.Element;
 //#endregion
 export { Tooltip };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.js

@@ -24,40 +24,25 @@ import styles from "./styles.module.css";
 
 //#region src/components/tooltip/index.tsx
 /**
-* Tooltip - A contextual popup component for providing additional information
+* Tooltip - Contextual popup for additional information
 *
-* Displays helpful information when users hover over or focus on an element.
-* Provides accessible tooltip functionality with proper positioning, keyboard
-* navigation, and screen reader support for enhanced user experience.
+* Displays on hover or focus with automatic positioning and accessibility support.
 *
-* @example
-* // Basic tooltip
-* <TooltipTrigger>
-*   <Button>Hover me</Button>
-*   <Tooltip>
-*     This is helpful information
-*   </Tooltip>
-* </TooltipTrigger>
+* @param props - {@link TooltipProps}
+* @param props.children - Tooltip content.
+* @param props.parentRef - Ref to the parent element for portal positioning.
+* @param props.className - CSS class for the tooltip.
+* @param props.offset - Distance from the trigger element.
+* @param props.placement - Position relative to the trigger.
+* @returns The rendered Tooltip component.
 *
 * @example
-* // Tooltip with custom positioning
+* ```tsx
 * <TooltipTrigger>
-*   <Button>Hover for info</Button>
-*   <Tooltip placement="top" offset={10}>
-*     Positioned above with custom offset
-*   </Tooltip>
-* </TooltipTrigger>
-*
-* @example
-* // Icon with tooltip
-* <TooltipTrigger>
-*   <Button variant="icon">
-*     <Icon><Info /></Icon>
-*   </Button>
-*   <Tooltip>
-*     Additional context for this action
-*   </Tooltip>
+*   <Button>Hover me</Button>
+*   <Tooltip>Additional information</Tooltip>
 * </TooltipTrigger>
+* ```
 */
 function Tooltip({ children, parentRef, className, offset = 5, placement = "bottom", ...props }) {
 	const isSSR = useIsSSR();

package/dist/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaTooltip","className"],"sources":["../../../src/components/tooltip/index.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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useIsSSR } from '@react-aria/ssr';\nimport { useMemo } from 'react';\nimport {\n  Tooltip as AriaTooltip,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { PortalProvider } from '@/providers/portal';\nimport styles from './styles.module.css';\nimport type { TooltipProps } from './types';\n\n/**\n * Tooltip - A contextual popup component for providing additional information\n *\n * Displays helpful information when users hover over or focus on an element.\n * Provides accessible tooltip functionality with proper positioning, keyboard\n * navigation, and screen reader support for enhanced user experience.\n *\n * @example\n * // Basic tooltip\n * <TooltipTrigger>\n *   <Button>Hover me</Button>\n *   <Tooltip>\n *     This is helpful information\n *   </Tooltip>\n * </TooltipTrigger>\n *\n * @example\n * // Tooltip with custom positioning\n * <TooltipTrigger>\n *   <Button>Hover for info</Button>\n *   <Tooltip placement=\"top\" offset={10}>\n *     Positioned above with custom offset\n *   </Tooltip>\n * </TooltipTrigger>\n *\n * @example\n * // Icon with tooltip\n * <TooltipTrigger>\n *   <Button variant=\"icon\">\n *     <Icon><Info /></Icon>\n *   </Button>\n *   <Tooltip>\n *     Additional context for this action\n *   </Tooltip>\n * </TooltipTrigger>\n */\nexport function Tooltip({\n  children,\n  parentRef,\n  className,\n  offset = 5,\n  placement = 'bottom',\n  ...props\n}: TooltipProps) {\n  const isSSR = useIsSSR();\n  const overlayContainer = useMemo(() => {\n    if (isSSR) {\n      return null;\n    }\n\n    const div = document.createElement('div');\n\n    div.setAttribute('class', 'absolute');\n\n    return div;\n  }, [isSSR]);\n\n  return (\n    <PortalProvider parentRef={parentRef} inject={overlayContainer}>\n      <AriaTooltip\n        {...props}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tooltip, className),\n        )}\n        offset={offset}\n        placement={placement}\n      >\n        {children}\n      </AriaTooltip>\n    </PortalProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB,QAAQ,EACtB,UACA,WACA,WACA,SAAS,GACT,YAAY,UACZ,GAAG,SACY;CACf,MAAM,QAAQ,UAAU;AAaxB,QACE,oBAAC;EAA0B;EAAW,QAbf,cAAc;AACrC,OAAI,MACF,QAAO;GAGT,MAAM,MAAM,SAAS,cAAc,MAAM;AAEzC,OAAI,aAAa,SAAS,WAAW;AAErC,UAAO;KACN,CAAC,MAAM,CAAC;YAIP,oBAACA;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,SAASC,YAAU,CAChC;GACO;GACG;GAEV;IACW;GACC"}
+{"version":3,"file":"index.js","names":["AriaTooltip","className"],"sources":["../../../src/components/tooltip/index.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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useIsSSR } from '@react-aria/ssr';\nimport { useMemo } from 'react';\nimport {\n  Tooltip as AriaTooltip,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { PortalProvider } from '@/providers/portal';\nimport styles from './styles.module.css';\nimport type { TooltipProps } from './types';\n\n/**\n * Tooltip - Contextual popup for additional information\n *\n * Displays on hover or focus with automatic positioning and accessibility support.\n *\n * @param props - {@link TooltipProps}\n * @param props.children - Tooltip content.\n * @param props.parentRef - Ref to the parent element for portal positioning.\n * @param props.className - CSS class for the tooltip.\n * @param props.offset - Distance from the trigger element.\n * @param props.placement - Position relative to the trigger.\n * @returns The rendered Tooltip component.\n *\n * @example\n * ```tsx\n * <TooltipTrigger>\n *   <Button>Hover me</Button>\n *   <Tooltip>Additional information</Tooltip>\n * </TooltipTrigger>\n * ```\n */\nexport function Tooltip({\n  children,\n  parentRef,\n  className,\n  offset = 5,\n  placement = 'bottom',\n  ...props\n}: TooltipProps) {\n  const isSSR = useIsSSR();\n  const overlayContainer = useMemo(() => {\n    if (isSSR) {\n      return null;\n    }\n\n    const div = document.createElement('div');\n\n    div.setAttribute('class', 'absolute');\n\n    return div;\n  }, [isSSR]);\n\n  return (\n    <PortalProvider parentRef={parentRef} inject={overlayContainer}>\n      <AriaTooltip\n        {...props}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tooltip, className),\n        )}\n        offset={offset}\n        placement={placement}\n      >\n        {children}\n      </AriaTooltip>\n    </PortalProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,QAAQ,EACtB,UACA,WACA,WACA,SAAS,GACT,YAAY,UACZ,GAAG,SACY;CACf,MAAM,QAAQ,UAAU;AAaxB,QACE,oBAAC;EAA0B;EAAW,QAbf,cAAc;AACrC,OAAI,MACF,QAAO;GAGT,MAAM,MAAM,SAAS,cAAc,MAAM;AAEzC,OAAI,aAAa,SAAS,WAAW;AAErC,UAAO;KACN,CAAC,MAAM,CAAC;YAIP,oBAACA;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,SAASC,YAAU,CAChC;GACO;GACG;GAEV;IACW;GACC"}

package/dist/components/tooltip/trigger.d.ts

@@ -12,13 +12,33 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime147 from "react/jsx-runtime";
+import * as react_jsx_runtime167 from "react/jsx-runtime";
 
 //#region src/components/tooltip/trigger.d.ts
+
+/**
+ * TooltipTrigger - Wrapper that manages tooltip display on hover or focus
+ *
+ * @example
+ * ```tsx
+ * <TooltipTrigger delay={500}>
+ *   <Button>
+ *     <Icon><Info /></Icon>
+ *   </Button>
+ *   <Tooltip>Additional information about this action</Tooltip>
+ * </TooltipTrigger>
+ * ```
+ *
+ * @param props - {@link TooltipTriggerProps}
+ * @param props.ref - Ref to the focusable trigger element.
+ * @param props.children - Trigger element and Tooltip content.
+ * @param props.delay - Delay in milliseconds before showing the tooltip.
+ * @returns The rendered TooltipTrigger component.
+ */
 declare function TooltipTrigger({
   ref,
   ...props
-}: TooltipTriggerProps): react_jsx_runtime147.JSX.Element;
+}: TooltipTriggerProps): react_jsx_runtime167.JSX.Element;
 //#endregion
 export { TooltipTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/tooltip/trigger.js

@@ -32,6 +32,25 @@ function TooltipFocusable({ children, ref, ...props }) {
 		ref: mergeRefs(childRef, ref)
 	}), tooltip] });
 }
+/**
+* TooltipTrigger - Wrapper that manages tooltip display on hover or focus
+*
+* @example
+* ```tsx
+* <TooltipTrigger delay={500}>
+*   <Button>
+*     <Icon><Info /></Icon>
+*   </Button>
+*   <Tooltip>Additional information about this action</Tooltip>
+* </TooltipTrigger>
+* ```
+*
+* @param props - {@link TooltipTriggerProps}
+* @param props.ref - Ref to the focusable trigger element.
+* @param props.children - Trigger element and Tooltip content.
+* @param props.delay - Delay in milliseconds before showing the tooltip.
+* @returns The rendered TooltipTrigger component.
+*/
 function TooltipTrigger({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, TooltipContext);
 	const { children, delay = 250, ...rest } = props;

package/dist/components/tooltip/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","names":["AriaTooltipTrigger"],"sources":["../../../src/components/tooltip/trigger.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'use client';\n\nimport 'client-only';\nimport {\n  type FocusableProviderProps,\n  useFocusable,\n} from '@react-aria/interactions';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport {\n  Children,\n  cloneElement,\n  type DOMAttributes,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n  version,\n} from 'react';\nimport {\n  TooltipTrigger as AriaTooltipTrigger,\n  useContextProps,\n} from 'react-aria-components';\nimport { TooltipContext } from './context';\nimport type { FocusableElement } from '@react-types/shared';\nimport type { TooltipTriggerProps } from './types';\n\nfunction TooltipFocusable({\n  children,\n  ref,\n  ...props\n}: FocusableProviderProps & RefAttributes<FocusableElement>) {\n  ref = useObjectRef(ref);\n\n  const { focusableProps } = useFocusable(props, ref);\n  const [trigger, tooltip] = Children.toArray(children) as [\n    ReactElement<DOMAttributes<FocusableElement>, string>,\n    ReactNode,\n  ];\n\n  const childRef =\n    //@ts-expect-error\n    Number.parseInt(version, 10) < 19 ? trigger.ref : trigger.props.ref;\n\n  return (\n    <>\n      {cloneElement(trigger, {\n        ...mergeProps(focusableProps, trigger.props),\n        //@ts-expect-error\n        ref: mergeRefs(childRef, ref),\n      })}\n      {tooltip}\n    </>\n  );\n}\n\nexport function TooltipTrigger({ ref, ...props }: TooltipTriggerProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TooltipContext);\n\n  const { children, delay = 250, ...rest } = props;\n\n  return (\n    <AriaTooltipTrigger {...rest} delay={delay}>\n      <TooltipFocusable ref={ref}>{children}</TooltipFocusable>\n    </AriaTooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAS,iBAAiB,EACxB,UACA,KACA,GAAG,SACwD;AAC3D,OAAM,aAAa,IAAI;CAEvB,MAAM,EAAE,mBAAmB,aAAa,OAAO,IAAI;CACnD,MAAM,CAAC,SAAS,WAAW,SAAS,QAAQ,SAAS;CAKrD,MAAM,WAEJ,OAAO,SAAS,SAAS,GAAG,GAAG,KAAK,QAAQ,MAAM,QAAQ,MAAM;AAElE,QACE,8CACG,aAAa,SAAS;EACrB,GAAG,WAAW,gBAAgB,QAAQ,MAAM;EAE5C,KAAK,UAAU,UAAU,IAAI;EAC9B,CAAC,EACD,WACA;;AAIP,SAAgB,eAAe,EAAE,KAAK,GAAG,SAA8B;AACrE,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,eAAe;CAElE,MAAM,EAAE,UAAU,QAAQ,KAAK,GAAG,SAAS;AAE3C,QACE,oBAACA;EAAmB,GAAI;EAAa;YACnC,oBAAC;GAAsB;GAAM;IAA4B;GACtC"}
+{"version":3,"file":"trigger.js","names":["AriaTooltipTrigger"],"sources":["../../../src/components/tooltip/trigger.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'use client';\n\nimport 'client-only';\nimport {\n  type FocusableProviderProps,\n  useFocusable,\n} from '@react-aria/interactions';\nimport { mergeProps, mergeRefs, useObjectRef } from '@react-aria/utils';\nimport {\n  Children,\n  cloneElement,\n  type DOMAttributes,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n  version,\n} from 'react';\nimport {\n  TooltipTrigger as AriaTooltipTrigger,\n  useContextProps,\n} from 'react-aria-components';\nimport { TooltipContext } from './context';\nimport type { FocusableElement } from '@react-types/shared';\nimport type { TooltipTriggerProps } from './types';\n\nfunction TooltipFocusable({\n  children,\n  ref,\n  ...props\n}: FocusableProviderProps & RefAttributes<FocusableElement>) {\n  ref = useObjectRef(ref);\n\n  const { focusableProps } = useFocusable(props, ref);\n  const [trigger, tooltip] = Children.toArray(children) as [\n    ReactElement<DOMAttributes<FocusableElement>, string>,\n    ReactNode,\n  ];\n\n  const childRef =\n    //@ts-expect-error\n    Number.parseInt(version, 10) < 19 ? trigger.ref : trigger.props.ref;\n\n  return (\n    <>\n      {cloneElement(trigger, {\n        ...mergeProps(focusableProps, trigger.props),\n        //@ts-expect-error\n        ref: mergeRefs(childRef, ref),\n      })}\n      {tooltip}\n    </>\n  );\n}\n\n/**\n * TooltipTrigger - Wrapper that manages tooltip display on hover or focus\n *\n * @example\n * ```tsx\n * <TooltipTrigger delay={500}>\n *   <Button>\n *     <Icon><Info /></Icon>\n *   </Button>\n *   <Tooltip>Additional information about this action</Tooltip>\n * </TooltipTrigger>\n * ```\n *\n * @param props - {@link TooltipTriggerProps}\n * @param props.ref - Ref to the focusable trigger element.\n * @param props.children - Trigger element and Tooltip content.\n * @param props.delay - Delay in milliseconds before showing the tooltip.\n * @returns The rendered TooltipTrigger component.\n */\nexport function TooltipTrigger({ ref, ...props }: TooltipTriggerProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TooltipContext);\n\n  const { children, delay = 250, ...rest } = props;\n\n  return (\n    <AriaTooltipTrigger {...rest} delay={delay}>\n      <TooltipFocusable ref={ref}>{children}</TooltipFocusable>\n    </AriaTooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAS,iBAAiB,EACxB,UACA,KACA,GAAG,SACwD;AAC3D,OAAM,aAAa,IAAI;CAEvB,MAAM,EAAE,mBAAmB,aAAa,OAAO,IAAI;CACnD,MAAM,CAAC,SAAS,WAAW,SAAS,QAAQ,SAAS;CAKrD,MAAM,WAEJ,OAAO,SAAS,SAAS,GAAG,GAAG,KAAK,QAAQ,MAAM,QAAQ,MAAM;AAElE,QACE,8CACG,aAAa,SAAS;EACrB,GAAG,WAAW,gBAAgB,QAAQ,MAAM;EAE5C,KAAK,UAAU,UAAU,IAAI;EAC9B,CAAC,EACD,WACA;;;;;;;;;;;;;;;;;;;;;AAuBP,SAAgB,eAAe,EAAE,KAAK,GAAG,SAA8B;AACrE,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,eAAe;CAElE,MAAM,EAAE,UAAU,QAAQ,KAAK,GAAG,SAAS;AAE3C,QACE,oBAACA;EAAmB,GAAI;EAAa;YACnC,oBAAC;GAAsB;GAAM;IAA4B;GACtC"}

package/dist/components/tooltip/types.d.ts

@@ -14,8 +14,15 @@ import { ComponentPropsWithRef } from "react";
 import { TooltipProps as TooltipProps$1, TooltipTriggerComponentProps } from "react-aria-components";
 
 //#region src/components/tooltip/types.d.ts
+/**
+ * Props for the TooltipTrigger component.
+ */
 type TooltipTriggerProps = Omit<ComponentPropsWithRef<'div'>, 'className'> & TooltipTriggerComponentProps;
+/**
+ * Props for the Tooltip component.
+ */
 type TooltipProps = TooltipProps$1 & {
+  /** Ref to the parent element for portal positioning. */
   parentRef?: React.RefObject<HTMLElement | null>;
 };
 //#endregion

package/dist/components/tree/context.d.ts

@@ -12,17 +12,13 @@
 
 import { TreeContextValue, TreeItemContextValue } from "./types.js";
 import "client-only";
-import * as react36 from "react";
+import * as react41 from "react";
 
 //#region src/components/tree/context.d.ts
-/**
- * Context for Tree component
- */
-declare const TreeContext: react36.Context<TreeContextValue>;
-/**
- * Context for TreeItem component
- */
-declare const TreeItemContext: react36.Context<TreeItemContextValue>;
+/** Context for sharing state across Tree components */
+declare const TreeContext: react41.Context<TreeContextValue>;
+/** Context for sharing state within a TreeItem */
+declare const TreeItemContext: react41.Context<TreeItemContextValue>;
 //#endregion
 export { TreeContext, TreeItemContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/tree/context.js

@@ -17,9 +17,7 @@ import "client-only";
 import { createContext } from "react";
 
 //#region src/components/tree/context.tsx
-/**
-* Context for Tree component
-*/
+/** Context for sharing state across Tree components */
 const TreeContext = createContext({
 	visibilityComputedKeys: /* @__PURE__ */ new Set(),
 	showRuleLines: true,
@@ -28,9 +26,7 @@ const TreeContext = createContext({
 	isStatic: true,
 	onVisibilityChange: () => void 0
 });
-/**
-* Context for TreeItem component
-*/
+/** Context for sharing state within a TreeItem */
 const TreeItemContext = createContext({
 	isVisible: true,
 	isViewable: true,

package/dist/components/tree/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/tree/context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { TreeContextValue, TreeItemContextValue } from './types';\n\n/**\n * Context for Tree component\n */\nexport const TreeContext = createContext<TreeContextValue>({\n  visibilityComputedKeys: new Set(),\n  showRuleLines: true,\n  showVisibility: false,\n  variant: 'cozy',\n  isStatic: true,\n  onVisibilityChange: () => undefined,\n});\n\n/**\n * Context for TreeItem component\n */\nexport const TreeItemContext = createContext<TreeItemContextValue>({\n  isVisible: true,\n  isViewable: true,\n  ancestors: [],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,cAAc,cAAgC;CACzD,wCAAwB,IAAI,KAAK;CACjC,eAAe;CACf,gBAAgB;CAChB,SAAS;CACT,UAAU;CACV,0BAA0B;CAC3B,CAAC;;;;AAKF,MAAa,kBAAkB,cAAoC;CACjE,WAAW;CACX,YAAY;CACZ,WAAW,EAAE;CACd,CAAC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/tree/context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { TreeContextValue, TreeItemContextValue } from './types';\n\n/** Context for sharing state across Tree components */\nexport const TreeContext = createContext<TreeContextValue>({\n  visibilityComputedKeys: new Set(),\n  showRuleLines: true,\n  showVisibility: false,\n  variant: 'cozy',\n  isStatic: true,\n  onVisibilityChange: () => undefined,\n});\n\n/** Context for sharing state within a TreeItem */\nexport const TreeItemContext = createContext<TreeItemContextValue>({\n  isVisible: true,\n  isViewable: true,\n  ancestors: [],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,cAAgC;CACzD,wCAAwB,IAAI,KAAK;CACjC,eAAe;CACf,gBAAgB;CAChB,SAAS;CACT,UAAU;CACV,0BAA0B;CAC3B,CAAC;;AAGF,MAAa,kBAAkB,cAAoC;CACjE,WAAW;CACX,YAAY;CACZ,WAAW,EAAE;CACd,CAAC"}

package/dist/components/tree/index.d.ts

@@ -12,30 +12,52 @@
 
 import { TreeProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime146 from "react/jsx-runtime";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
 
 //#region src/components/tree/index.d.ts
 
 /**
- * Tree - Hierarchical tree view with optional drag-and-drop and visibility
+ * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop
  *
- * Renders a selectable tree with support for nested items, drag-and-drop,
- * selection modes, and visibility controls. Use TreeItem to define nodes.
+ * Supports static or dynamic collections with keyboard navigation and accessibility.
+ *
+ * @param props - {@link TreeProps}
+ * @param props.children - Tree items or render function for dynamic collections.
+ * @param props.className - CSS class for the tree container.
+ * @param props.disabledKeys - Set of disabled item keys.
+ * @param props.dragAndDropConfig - Configuration for drag and drop behavior.
+ * @param props.expandedKeys - Set of expanded item keys.
+ * @param props.items - Data source for dynamic collections.
+ * @param props.selectedKeys - Set of selected item keys.
+ * @param props.showRuleLines - Whether to show connecting lines between items.
+ * @param props.showVisibility - Whether to show visibility toggle buttons.
+ * @param props.selectionMode - Selection mode for the tree.
+ * @param props.variant - Visual density variant.
+ * @param props.visibleKeys - Set of visible item keys.
+ * @param props.onVisibilityChange - Callback when item visibility changes.
+ * @param props.onSelectionChange - Callback when selection changes.
+ * @returns The rendered Tree component.
  *
  * @example
+ * // Dynamic collection
+ * ```tsx
  * <Tree items={items} expandedKeys={expandedKeys}>
- *   {(node) => <Node key={node.key} node={node} />}
+ *   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}
  * </Tree>
+ * ```
  *
  * @example
+ * ```tsx
+ * // Static collection
  * <Tree>
- *   <TreeItem id='one' textValue='one'>
+ *   <TreeItem id="one" textValue="one">
  *     <TreeItemContent>One</TreeItemContent>
- *     <TreeItem id='two' textValue='two'>
+ *     <TreeItem id="two" textValue="two">
  *       <TreeItemContent>Two</TreeItemContent>
  *     </TreeItem>
  *   </TreeItem>
  * </Tree>
+ * ```
  */
 declare function Tree<T>({
   children,
@@ -53,7 +75,7 @@ declare function Tree<T>({
   onVisibilityChange,
   onSelectionChange,
   ...rest
-}: TreeProps<T>): react_jsx_runtime146.JSX.Element;
+}: TreeProps<T>): react_jsx_runtime178.JSX.Element;
 //#endregion
 export { Tree };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tree/index.js

@@ -28,25 +28,47 @@ const defaultRenderDropIndicator = (target) => /* @__PURE__ */ jsx(DropIndicator
 	className: styles.dropIndicator
 });
 /**
-* Tree - Hierarchical tree view with optional drag-and-drop and visibility
+* Tree - Hierarchical tree view with selection, visibility, and drag-and-drop
 *
-* Renders a selectable tree with support for nested items, drag-and-drop,
-* selection modes, and visibility controls. Use TreeItem to define nodes.
+* Supports static or dynamic collections with keyboard navigation and accessibility.
+*
+* @param props - {@link TreeProps}
+* @param props.children - Tree items or render function for dynamic collections.
+* @param props.className - CSS class for the tree container.
+* @param props.disabledKeys - Set of disabled item keys.
+* @param props.dragAndDropConfig - Configuration for drag and drop behavior.
+* @param props.expandedKeys - Set of expanded item keys.
+* @param props.items - Data source for dynamic collections.
+* @param props.selectedKeys - Set of selected item keys.
+* @param props.showRuleLines - Whether to show connecting lines between items.
+* @param props.showVisibility - Whether to show visibility toggle buttons.
+* @param props.selectionMode - Selection mode for the tree.
+* @param props.variant - Visual density variant.
+* @param props.visibleKeys - Set of visible item keys.
+* @param props.onVisibilityChange - Callback when item visibility changes.
+* @param props.onSelectionChange - Callback when selection changes.
+* @returns The rendered Tree component.
 *
 * @example
+* // Dynamic collection
+* ```tsx
 * <Tree items={items} expandedKeys={expandedKeys}>
-*   {(node) => <Node key={node.key} node={node} />}
+*   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}
 * </Tree>
+* ```
 *
 * @example
+* ```tsx
+* // Static collection
 * <Tree>
-*   <TreeItem id='one' textValue='one'>
+*   <TreeItem id="one" textValue="one">
 *     <TreeItemContent>One</TreeItemContent>
-*     <TreeItem id='two' textValue='two'>
+*     <TreeItem id="two" textValue="two">
 *       <TreeItemContent>Two</TreeItemContent>
 *     </TreeItem>
 *   </TreeItem>
 * </Tree>
+* ```
 */
 function Tree({ children, className, disabledKeys: disabledKeysProp, dragAndDropConfig, expandedKeys: expandedKeysProp, items, selectedKeys: selectedKeysProp, showRuleLines = true, showVisibility = true, selectionMode = "multiple", variant = "cozy", visibleKeys: visibleKeysProp, onVisibilityChange, onSelectionChange, ...rest }) {
 	/**

package/dist/components/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["acc","AriaTree","className"],"sources":["../../../src/components/tree/index.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'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => (\n  <DropIndicator target={target} className={styles.dropIndicator} />\n);\n\n/**\n * Tree - Hierarchical tree view with optional drag-and-drop and visibility\n *\n * Renders a selectable tree with support for nested items, drag-and-drop,\n * selection modes, and visibility controls. Use TreeItem to define nodes.\n *\n * @example\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <Node key={node.key} node={node} />}\n * </Tree>\n *\n * @example\n * <Tree>\n *   <TreeItem id='one' textValue='one'>\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id='two' textValue='two'>\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,8BAA8B,WAClC,oBAAC;CAAsB;CAAQ,WAAW,OAAO;EAAiB;;;;;;;;;;;;;;;;;;;;;;AAwBpE,SAAgB,KAAQ,EACtB,UACA,WACA,cAAc,kBACd,mBACA,cAAc,kBACd,OACA,cAAc,kBACd,gBAAgB,MAChB,iBAAiB,MACjB,gBAAgB,YAChB,UAAU,QACV,aAAa,iBACb,oBACA,mBACA,GAAG,QACY;;;;;;;AAOf,KACE,UACC,oBACC,oBACA,oBACA,iBAEF,OAAM,IAAI,MACR,wFACD;;;;AAMH,KAAI,CAAC,CAAC,WAAW,OAAO,aAAa,YACnC,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB;EACrB,gCAAgC,CAAC,OAAO;EACxC,wBAAwB;EACxB,GAAG;EACJ,CAAC;CACF,MAAM,QAAQ,cAAe,QAAQ,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAO,CAAC,MAAM,CAAC;CAC5E,MAAM,QAAQ,cAAc,OAAO,aAAa,EAAE,CAAC,MAAM,CAAC;CAC1D,MAAM,EACJ,cACA,cACA,cACA,aACA,2BACE,cAAc;EAChB,MAAM,MAAM;GACV,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,aAAa,wBAAQ,IAAI,KAAU,GAAG;GACtC,wCAAwB,IAAI,KAAU;GACvC;AAED,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,MAAM,QAET,OACA,EACE,KACA,YACA,YACA,YACA,WACA,wBAEC;AACH,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,UACF,OAAI,aAAa,IAAI,IAAI;AAE3B,OAAI,kBACF,OAAI,uBAAuB,IAAI,IAAI;AAErC,UAAOA;KAET,IACD;IACA;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,gBACzB,cAAyB;AACxB,MAAI,cAAc,MAChB,qBAAoB,UAAU;KAGlC;AAEJ,QACE,oBAAC,YAAY;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,OAAO,aAAa;GAC9B,oBAAoB,6BAA6B;GAClD;YAED,oBAACC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMC,YAAU,CAC7B;GACa;GACI;GACJ;GACP;GACO;GACd,mBAAmB;GACJ;GAEd;IACQ;GACU"}
+{"version":3,"file":"index.js","names":["acc","AriaTree","className"],"sources":["../../../src/components/tree/index.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'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => (\n  <DropIndicator target={target} className={styles.dropIndicator} />\n);\n\n/**\n * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop\n *\n * Supports static or dynamic collections with keyboard navigation and accessibility.\n *\n * @param props - {@link TreeProps}\n * @param props.children - Tree items or render function for dynamic collections.\n * @param props.className - CSS class for the tree container.\n * @param props.disabledKeys - Set of disabled item keys.\n * @param props.dragAndDropConfig - Configuration for drag and drop behavior.\n * @param props.expandedKeys - Set of expanded item keys.\n * @param props.items - Data source for dynamic collections.\n * @param props.selectedKeys - Set of selected item keys.\n * @param props.showRuleLines - Whether to show connecting lines between items.\n * @param props.showVisibility - Whether to show visibility toggle buttons.\n * @param props.selectionMode - Selection mode for the tree.\n * @param props.variant - Visual density variant.\n * @param props.visibleKeys - Set of visible item keys.\n * @param props.onVisibilityChange - Callback when item visibility changes.\n * @param props.onSelectionChange - Callback when selection changes.\n * @returns The rendered Tree component.\n *\n * @example\n * // Dynamic collection\n * ```tsx\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}\n * </Tree>\n * ```\n *\n * @example\n * ```tsx\n * // Static collection\n * <Tree>\n *   <TreeItem id=\"one\" textValue=\"one\">\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id=\"two\" textValue=\"two\">\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n * ```\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,8BAA8B,WAClC,oBAAC;CAAsB;CAAQ,WAAW,OAAO;EAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CpE,SAAgB,KAAQ,EACtB,UACA,WACA,cAAc,kBACd,mBACA,cAAc,kBACd,OACA,cAAc,kBACd,gBAAgB,MAChB,iBAAiB,MACjB,gBAAgB,YAChB,UAAU,QACV,aAAa,iBACb,oBACA,mBACA,GAAG,QACY;;;;;;;AAOf,KACE,UACC,oBACC,oBACA,oBACA,iBAEF,OAAM,IAAI,MACR,wFACD;;;;AAMH,KAAI,CAAC,CAAC,WAAW,OAAO,aAAa,YACnC,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB;EACrB,gCAAgC,CAAC,OAAO;EACxC,wBAAwB;EACxB,GAAG;EACJ,CAAC;CACF,MAAM,QAAQ,cAAe,QAAQ,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAO,CAAC,MAAM,CAAC;CAC5E,MAAM,QAAQ,cAAc,OAAO,aAAa,EAAE,CAAC,MAAM,CAAC;CAC1D,MAAM,EACJ,cACA,cACA,cACA,aACA,2BACE,cAAc;EAChB,MAAM,MAAM;GACV,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,aAAa,wBAAQ,IAAI,KAAU,GAAG;GACtC,wCAAwB,IAAI,KAAU;GACvC;AAED,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,MAAM,QAET,OACA,EACE,KACA,YACA,YACA,YACA,WACA,wBAEC;AACH,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,UACF,OAAI,aAAa,IAAI,IAAI;AAE3B,OAAI,kBACF,OAAI,uBAAuB,IAAI,IAAI;AAErC,UAAOA;KAET,IACD;IACA;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,gBACzB,cAAyB;AACxB,MAAI,cAAc,MAChB,qBAAoB,UAAU;KAGlC;AAEJ,QACE,oBAAC,YAAY;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,OAAO,aAAa;GAC9B,oBAAoB,6BAA6B;GAClD;YAED,oBAACC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMC,YAAU,CAC7B;GACa;GACI;GACJ;GACP;GACO;GACd,mBAAmB;GACJ;GAEd;IACQ;GACU"}

package/dist/components/tree/item-actions.d.ts

@@ -11,20 +11,35 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime151 from "react/jsx-runtime";
+import * as react_jsx_runtime171 from "react/jsx-runtime";
 
 //#region src/components/tree/item-actions.d.ts
+
 /**
- * ItemActions - Action buttons for a tree item
+ * TreeItemActions - Container for action buttons in a tree item
+ *
+ * @example
+ * ```tsx
+ * <TreeItemContent>
+ *   <TreeItemLabel>Document</TreeItemLabel>
+ *   <TreeItemActions>
+ *     <Button variant="icon"><Icon><Edit /></Icon></Button>
+ *     <Button variant="icon"><Icon><Delete /></Icon></Button>
+ *   </TreeItemActions>
+ * </TreeItemContent>
+ * ```
  *
- * Container for action buttons in a tree item
+ * @param props - Component props.
+ * @param props.children - Action buttons to render.
+ * @param props.className - CSS class for the actions container.
+ * @returns The rendered TreeItemActions component.
  */
 declare function TreeItemActions({
   children,
   className
 }: PropsWithChildren & {
   className?: string;
-}): react_jsx_runtime151.JSX.Element;
+}): react_jsx_runtime171.JSX.Element;
 //#endregion
 export { TreeItemActions };
 //# sourceMappingURL=item-actions.d.ts.map

package/dist/components/tree/item-actions.js

@@ -19,9 +19,23 @@ import styles from "./styles.module.css";
 
 //#region src/components/tree/item-actions.tsx
 /**
-* ItemActions - Action buttons for a tree item
+* TreeItemActions - Container for action buttons in a tree item
 *
-* Container for action buttons in a tree item
+* @example
+* ```tsx
+* <TreeItemContent>
+*   <TreeItemLabel>Document</TreeItemLabel>
+*   <TreeItemActions>
+*     <Button variant="icon"><Icon><Edit /></Icon></Button>
+*     <Button variant="icon"><Icon><Delete /></Icon></Button>
+*   </TreeItemActions>
+* </TreeItemContent>
+* ```
+*
+* @param props - Component props.
+* @param props.children - Action buttons to render.
+* @param props.className - CSS class for the actions container.
+* @returns The rendered TreeItemActions component.
 */
 function TreeItemActions({ children, className }) {
 	const { variant } = useContext(TreeContext);

package/dist/components/tree/item-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-actions.js","names":[],"sources":["../../../src/components/tree/item-actions.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { type PropsWithChildren, useContext } from 'react';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\n\n/**\n * ItemActions - Action buttons for a tree item\n *\n * Container for action buttons in a tree item\n */\nexport function TreeItemActions({\n  children,\n  className,\n}: PropsWithChildren & { className?: string }) {\n  const { variant } = useContext(TreeContext);\n  return (\n    <div className={clsx(styles.actions, styles[variant], className)}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,gBAAgB,EAC9B,UACA,aAC6C;CAC7C,MAAM,EAAE,YAAY,WAAW,YAAY;AAC3C,QACE,oBAAC;EAAI,WAAW,KAAK,OAAO,SAAS,OAAO,UAAU,UAAU;EAC7D;GACG"}
+{"version":3,"file":"item-actions.js","names":[],"sources":["../../../src/components/tree/item-actions.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { type PropsWithChildren, useContext } from 'react';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\n\n/**\n * TreeItemActions - Container for action buttons in a tree item\n *\n * @example\n * ```tsx\n * <TreeItemContent>\n *   <TreeItemLabel>Document</TreeItemLabel>\n *   <TreeItemActions>\n *     <Button variant=\"icon\"><Icon><Edit /></Icon></Button>\n *     <Button variant=\"icon\"><Icon><Delete /></Icon></Button>\n *   </TreeItemActions>\n * </TreeItemContent>\n * ```\n *\n * @param props - Component props.\n * @param props.children - Action buttons to render.\n * @param props.className - CSS class for the actions container.\n * @returns The rendered TreeItemActions component.\n */\nexport function TreeItemActions({\n  children,\n  className,\n}: PropsWithChildren & { className?: string }) {\n  const { variant } = useContext(TreeContext);\n  return (\n    <div className={clsx(styles.actions, styles[variant], className)}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,gBAAgB,EAC9B,UACA,aAC6C;CAC7C,MAAM,EAAE,YAAY,WAAW,YAAY;AAC3C,QACE,oBAAC;EAAI,WAAW,KAAK,OAAO,SAAS,OAAO,UAAU,UAAU;EAC7D;GACG"}