@accelint/design-toolkit 9.3.0 → 9.4.0

package/dist/components/sidenav/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":["className"],"sources":["../../../src/components/sidenav/menu-item.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 */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { composeRenderProps, ToggleButton } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { SidenavMenuItemProps } from './types';\n\n/**\n * SidenavMenuItem - Menu item component for sidenav\n *\n * Provides a selectable item within a sidenav menu\n */\nexport function SidenavMenuItem({\n  className,\n  children,\n  ...rest\n}: SidenavMenuItemProps) {\n  return (\n    <ToggleButton\n      {...rest}\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.item, className),\n      )}\n    >\n      {children}\n    </ToggleButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,gBAAgB,EAC9B,WACA,UACA,GAAG,QACoB;AACvB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMA,YAAU,CAC7B;EAEA;GACY"}
+{"version":3,"file":"menu-item.js","names":["className"],"sources":["../../../src/components/sidenav/menu-item.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 */\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { composeRenderProps, ToggleButton } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { SidenavMenuItemProps } from './types';\n\n/**\n * SidenavMenuItem - Menu item component for sidenav\n *\n * Provides a selectable item within a sidenav menu\n *\n * @example\n * ```tsx\n * <SidenavMenu icon={<Settings />} title=\"Settings\">\n *   <SidenavMenuItem isSelected={true}>Profile</SidenavMenuItem>\n *   <SidenavMenuItem>Preferences</SidenavMenuItem>\n * </SidenavMenu>\n * ```\n *\n * @param props - {@link SidenavMenuItemProps}\n * @param props.className - CSS class for the menu item.\n * @param props.children - Menu item content.\n * @returns The rendered SidenavMenuItem component.\n */\nexport function SidenavMenuItem({\n  className,\n  children,\n  ...rest\n}: SidenavMenuItemProps) {\n  return (\n    <ToggleButton\n      {...rest}\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.item, className),\n      )}\n    >\n      {children}\n    </ToggleButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,gBAAgB,EAC9B,WACA,UACA,GAAG,QACoB;AACvB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMA,YAAU,CAC7B;EAEA;GACY"}

package/dist/components/sidenav/menu.d.ts

@@ -12,13 +12,30 @@
 
 import { SidenavMenuProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime156 from "react/jsx-runtime";
+import * as react_jsx_runtime141 from "react/jsx-runtime";
 
 //#region src/components/sidenav/menu.d.ts
+
 /**
  * SidenavMenu - Menu component for sidenav
  *
  * Provides a collapsible menu with items for the sidenav
+ *
+ * @example
+ * ```tsx
+ * <SidenavMenu icon={<Icon><Settings /></Icon>} title="Settings">
+ *   <SidenavMenuItem>Profile</SidenavMenuItem>
+ *   <SidenavMenuItem>Preferences</SidenavMenuItem>
+ *   <SidenavMenuItem>Security</SidenavMenuItem>
+ * </SidenavMenu>
+ * ```
+ *
+ * @param props - {@link SidenavMenuProps}
+ * @param props.icon - Icon displayed before the menu title.
+ * @param props.title - Menu title text.
+ * @param props.classNames - Custom CSS class names for menu elements.
+ * @param props.children - Menu items (SidenavMenuItem components).
+ * @returns The rendered SidenavMenu component.
  */
 declare function SidenavMenu({
   icon,
@@ -26,7 +43,7 @@ declare function SidenavMenu({
   classNames,
   children,
   ...rest
-}: SidenavMenuProps): react_jsx_runtime156.JSX.Element;
+}: SidenavMenuProps): react_jsx_runtime141.JSX.Element;
 //#endregion
 export { SidenavMenu };
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/sidenav/menu.js

@@ -22,7 +22,7 @@ import { useContext, useRef } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Button, DialogTrigger, Disclosure, DisclosurePanel, Heading, Popover, composeRenderProps } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "@accelint/icons";
+import ChevronDown from "@accelint/icons/chevron-down";
 import styles from "./styles.module.css";
 
 //#region src/components/sidenav/menu.tsx
@@ -30,6 +30,22 @@ import styles from "./styles.module.css";
 * SidenavMenu - Menu component for sidenav
 *
 * Provides a collapsible menu with items for the sidenav
+*
+* @example
+* ```tsx
+* <SidenavMenu icon={<Icon><Settings /></Icon>} title="Settings">
+*   <SidenavMenuItem>Profile</SidenavMenuItem>
+*   <SidenavMenuItem>Preferences</SidenavMenuItem>
+*   <SidenavMenuItem>Security</SidenavMenuItem>
+* </SidenavMenu>
+* ```
+*
+* @param props - {@link SidenavMenuProps}
+* @param props.icon - Icon displayed before the menu title.
+* @param props.title - Menu title text.
+* @param props.classNames - Custom CSS class names for menu elements.
+* @param props.children - Menu items (SidenavMenuItem components).
+* @returns The rendered SidenavMenu component.
 */
 function SidenavMenu({ icon, title, classNames, children, ...rest }) {
 	const { isOpen } = useContext(SidenavContext);

package/dist/components/sidenav/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["TooltipTrigger","Tooltip"],"sources":["../../../src/components/sidenav/menu.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 { ChevronDown } from '@accelint/icons';\nimport { useContext, useRef } from 'react';\nimport {\n  Button,\n  composeRenderProps,\n  DialogTrigger,\n  Disclosure,\n  DisclosurePanel,\n  Heading,\n  Popover,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Tooltip } from '../tooltip';\nimport { TooltipTrigger } from '../tooltip/trigger';\nimport { SidenavContext } from './context';\nimport styles from './styles.module.css';\nimport type { SidenavMenuProps } from './types';\n\n/**\n * SidenavMenu - Menu component for sidenav\n *\n * Provides a collapsible menu with items for the sidenav\n */\nexport function SidenavMenu({\n  icon,\n  title,\n  classNames,\n  children,\n  ...rest\n}: SidenavMenuProps) {\n  const { isOpen } = useContext(SidenavContext);\n  const ref = useRef(null);\n\n  return isOpen ? (\n    <Disclosure\n      className={composeRenderProps(classNames?.menu, (className) =>\n        clsx('group/menu', styles.menu, className),\n      )}\n    >\n      <Button\n        {...rest}\n        slot='trigger'\n        className={composeRenderProps(classNames?.button, (className) =>\n          clsx(styles.trigger, className),\n        )}\n      >\n        {icon}\n        <Heading slot='menu'>{title}</Heading>\n        <Icon className={clsx(styles.transient, classNames?.icon)}>\n          <ChevronDown className={styles.triggerChevron} />\n        </Icon>\n      </Button>\n      <DisclosurePanel\n        className={composeRenderProps(\n          classNames?.disclosurePanel,\n          (className) => className ?? '',\n        )}\n      >\n        <div className={clsx(styles.content, classNames?.panelContent)}>\n          {children}\n        </div>\n      </DisclosurePanel>\n    </Disclosure>\n  ) : (\n    <DialogTrigger>\n      <TooltipTrigger isDisabled={isOpen}>\n        <Button\n          {...rest}\n          ref={ref}\n          className={composeRenderProps(classNames?.button, (className) =>\n            clsx(styles.trigger, className),\n          )}\n        >\n          {icon}\n        </Button>\n        <Tooltip parentRef={ref} placement='right' className={styles.tooltip}>\n          {title}\n        </Tooltip>\n      </TooltipTrigger>\n      <Popover\n        className={composeRenderProps(classNames?.popoverPanel, (className) =>\n          clsx(styles.panel, className),\n        )}\n        placement='right top'\n        shouldFlip={false}\n      >\n        <Heading slot='panel'>{title}</Heading>\n        <div className={clsx(styles.content, classNames?.panelContent)}>\n          {children}\n        </div>\n      </Popover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,YAAY,EAC1B,MACA,OACA,YACA,UACA,GAAG,QACgB;CACnB,MAAM,EAAE,WAAW,WAAW,eAAe;CAC7C,MAAM,MAAM,OAAO,KAAK;AAExB,QAAO,SACL,qBAAC;EACC,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,cAAc,OAAO,MAAM,UAAU,CAC3C;aAED,qBAAC;GACC,GAAI;GACJ,MAAK;GACL,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,SAAS,UAAU,CAChC;;IAEA;IACD,oBAAC;KAAQ,MAAK;eAAQ;MAAgB;IACtC,oBAAC;KAAK,WAAW,KAAK,OAAO,WAAW,YAAY,KAAK;eACvD,oBAAC,eAAY,WAAW,OAAO,iBAAkB;MAC5C;;IACA,EACT,oBAAC;GACC,WAAW,mBACT,YAAY,kBACX,cAAc,aAAa,GAC7B;aAED,oBAAC;IAAI,WAAW,KAAK,OAAO,SAAS,YAAY,aAAa;IAC3D;KACG;IACU;GACP,GAEb,qBAAC,4BACC,qBAACA;EAAe,YAAY;aAC1B,oBAAC;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,SAAS,UAAU,CAChC;aAEA;IACM,EACT,oBAACC;GAAQ,WAAW;GAAK,WAAU;GAAQ,WAAW,OAAO;aAC1D;IACO;GACK,EACjB,qBAAC;EACC,WAAW,mBAAmB,YAAY,eAAe,cACvD,KAAK,OAAO,OAAO,UAAU,CAC9B;EACD,WAAU;EACV,YAAY;aAEZ,oBAAC;GAAQ,MAAK;aAAS;IAAgB,EACvC,oBAAC;GAAI,WAAW,KAAK,OAAO,SAAS,YAAY,aAAa;GAC3D;IACG;GACE,IACI"}
+{"version":3,"file":"menu.js","names":["TooltipTrigger","Tooltip"],"sources":["../../../src/components/sidenav/menu.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 ChevronDown from '@accelint/icons/chevron-down';\nimport { useContext, useRef } from 'react';\nimport {\n  Button,\n  composeRenderProps,\n  DialogTrigger,\n  Disclosure,\n  DisclosurePanel,\n  Heading,\n  Popover,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Tooltip } from '../tooltip';\nimport { TooltipTrigger } from '../tooltip/trigger';\nimport { SidenavContext } from './context';\nimport styles from './styles.module.css';\nimport type { SidenavMenuProps } from './types';\n\n/**\n * SidenavMenu - Menu component for sidenav\n *\n * Provides a collapsible menu with items for the sidenav\n *\n * @example\n * ```tsx\n * <SidenavMenu icon={<Icon><Settings /></Icon>} title=\"Settings\">\n *   <SidenavMenuItem>Profile</SidenavMenuItem>\n *   <SidenavMenuItem>Preferences</SidenavMenuItem>\n *   <SidenavMenuItem>Security</SidenavMenuItem>\n * </SidenavMenu>\n * ```\n *\n * @param props - {@link SidenavMenuProps}\n * @param props.icon - Icon displayed before the menu title.\n * @param props.title - Menu title text.\n * @param props.classNames - Custom CSS class names for menu elements.\n * @param props.children - Menu items (SidenavMenuItem components).\n * @returns The rendered SidenavMenu component.\n */\nexport function SidenavMenu({\n  icon,\n  title,\n  classNames,\n  children,\n  ...rest\n}: SidenavMenuProps) {\n  const { isOpen } = useContext(SidenavContext);\n  const ref = useRef(null);\n\n  return isOpen ? (\n    <Disclosure\n      className={composeRenderProps(classNames?.menu, (className) =>\n        clsx('group/menu', styles.menu, className),\n      )}\n    >\n      <Button\n        {...rest}\n        slot='trigger'\n        className={composeRenderProps(classNames?.button, (className) =>\n          clsx(styles.trigger, className),\n        )}\n      >\n        {icon}\n        <Heading slot='menu'>{title}</Heading>\n        <Icon className={clsx(styles.transient, classNames?.icon)}>\n          <ChevronDown className={styles.triggerChevron} />\n        </Icon>\n      </Button>\n      <DisclosurePanel\n        className={composeRenderProps(\n          classNames?.disclosurePanel,\n          (className) => className ?? '',\n        )}\n      >\n        <div className={clsx(styles.content, classNames?.panelContent)}>\n          {children}\n        </div>\n      </DisclosurePanel>\n    </Disclosure>\n  ) : (\n    <DialogTrigger>\n      <TooltipTrigger isDisabled={isOpen}>\n        <Button\n          {...rest}\n          ref={ref}\n          className={composeRenderProps(classNames?.button, (className) =>\n            clsx(styles.trigger, className),\n          )}\n        >\n          {icon}\n        </Button>\n        <Tooltip parentRef={ref} placement='right' className={styles.tooltip}>\n          {title}\n        </Tooltip>\n      </TooltipTrigger>\n      <Popover\n        className={composeRenderProps(classNames?.popoverPanel, (className) =>\n          clsx(styles.panel, className),\n        )}\n        placement='right top'\n        shouldFlip={false}\n      >\n        <Heading slot='panel'>{title}</Heading>\n        <div className={clsx(styles.content, classNames?.panelContent)}>\n          {children}\n        </div>\n      </Popover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,YAAY,EAC1B,MACA,OACA,YACA,UACA,GAAG,QACgB;CACnB,MAAM,EAAE,WAAW,WAAW,eAAe;CAC7C,MAAM,MAAM,OAAO,KAAK;AAExB,QAAO,SACL,qBAAC;EACC,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,cAAc,OAAO,MAAM,UAAU,CAC3C;aAED,qBAAC;GACC,GAAI;GACJ,MAAK;GACL,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,SAAS,UAAU,CAChC;;IAEA;IACD,oBAAC;KAAQ,MAAK;eAAQ;MAAgB;IACtC,oBAAC;KAAK,WAAW,KAAK,OAAO,WAAW,YAAY,KAAK;eACvD,oBAAC,eAAY,WAAW,OAAO,iBAAkB;MAC5C;;IACA,EACT,oBAAC;GACC,WAAW,mBACT,YAAY,kBACX,cAAc,aAAa,GAC7B;aAED,oBAAC;IAAI,WAAW,KAAK,OAAO,SAAS,YAAY,aAAa;IAC3D;KACG;IACU;GACP,GAEb,qBAAC,4BACC,qBAACA;EAAe,YAAY;aAC1B,oBAAC;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,SAAS,UAAU,CAChC;aAEA;IACM,EACT,oBAACC;GAAQ,WAAW;GAAK,WAAU;GAAQ,WAAW,OAAO;aAC1D;IACO;GACK,EACjB,qBAAC;EACC,WAAW,mBAAmB,YAAY,eAAe,cACvD,KAAK,OAAO,OAAO,UAAU,CAC9B;EACD,WAAU;EACV,YAAY;aAEZ,oBAAC;GAAQ,MAAK;aAAS;IAAgB,EACvC,oBAAC;GAAI,WAAW,KAAK,OAAO,SAAS,YAAY,aAAa;GAC3D;IACG;GACE,IACI"}

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

@@ -12,19 +12,34 @@
 
 import { SidenavTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime158 from "react/jsx-runtime";
+import * as react_jsx_runtime144 from "react/jsx-runtime";
 
 //#region src/components/sidenav/trigger.d.ts
+
 /**
  * SidenavTrigger - Trigger component for sidenav
  *
  * Provides a trigger button to control the sidenav state
+ *
+ * @example
+ * ```tsx
+ * <SidenavTrigger for="toggle:sidenav-id">
+ *   <Button variant="icon">
+ *     <Icon><Menu /></Icon>
+ *   </Button>
+ * </SidenavTrigger>
+ * ```
+ *
+ * @param props - {@link SidenavTriggerProps}
+ * @param props.children - Trigger content (typically a Button with icon).
+ * @param props.for - Target sidenav ID or targeted event string.
+ * @returns The rendered SidenavTrigger component.
  */
 declare function SidenavTrigger({
   children,
   for: type,
   ...rest
-}: SidenavTriggerProps): react_jsx_runtime158.JSX.Element;
+}: SidenavTriggerProps): react_jsx_runtime144.JSX.Element;
 //#endregion
 export { SidenavTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/sidenav/trigger.js

@@ -25,6 +25,20 @@ import { isUUID } from "@accelint/core";
 * SidenavTrigger - Trigger component for sidenav
 *
 * Provides a trigger button to control the sidenav state
+*
+* @example
+* ```tsx
+* <SidenavTrigger for="toggle:sidenav-id">
+*   <Button variant="icon">
+*     <Icon><Menu /></Icon>
+*   </Button>
+* </SidenavTrigger>
+* ```
+*
+* @param props - {@link SidenavTriggerProps}
+* @param props.children - Trigger content (typically a Button with icon).
+* @param props.for - Target sidenav ID or targeted event string.
+* @returns The rendered SidenavTrigger component.
 */
 function SidenavTrigger({ children, for: type, ...rest }) {
 	const [event, id] = isUUID(type) ? ["toggle", type] : type.split(":");

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

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","names":[],"sources":["../../../src/components/sidenav/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 { useEmit } from '@accelint/bus/react';\nimport { isUUID, type UniqueId } from '@accelint/core';\nimport { Pressable } from 'react-aria-components';\nimport { SidenavEventTypes } from './events';\nimport type { SidenavEvent, SidenavTriggerProps } from './types';\n\n/**\n * SidenavTrigger - Trigger component for sidenav\n *\n * Provides a trigger button to control the sidenav state\n */\nexport function SidenavTrigger({\n  children,\n  for: type,\n  ...rest\n}: SidenavTriggerProps) {\n  const [event, id] = (isUUID(type) ? ['toggle', type] : type.split(':')) as [\n    'close' | 'open' | 'toggle',\n    UniqueId,\n  ];\n  const emit = useEmit<SidenavEvent>(SidenavEventTypes[event]);\n\n  return (\n    <Pressable {...rest} onPress={() => emit({ id })}>\n      {children}\n    </Pressable>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,eAAe,EAC7B,UACA,KAAK,MACL,GAAG,QACmB;CACtB,MAAM,CAAC,OAAO,MAAO,OAAO,KAAK,GAAG,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,IAAI;CAItE,MAAM,OAAO,QAAsB,kBAAkB,OAAO;AAE5D,QACE,oBAAC;EAAU,GAAI;EAAM,eAAe,KAAK,EAAE,IAAI,CAAC;EAC7C;GACS"}
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../src/components/sidenav/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 { useEmit } from '@accelint/bus/react';\nimport { isUUID, type UniqueId } from '@accelint/core';\nimport { Pressable } from 'react-aria-components';\nimport { SidenavEventTypes } from './events';\nimport type { SidenavEvent, SidenavTriggerProps } from './types';\n\n/**\n * SidenavTrigger - Trigger component for sidenav\n *\n * Provides a trigger button to control the sidenav state\n *\n * @example\n * ```tsx\n * <SidenavTrigger for=\"toggle:sidenav-id\">\n *   <Button variant=\"icon\">\n *     <Icon><Menu /></Icon>\n *   </Button>\n * </SidenavTrigger>\n * ```\n *\n * @param props - {@link SidenavTriggerProps}\n * @param props.children - Trigger content (typically a Button with icon).\n * @param props.for - Target sidenav ID or targeted event string.\n * @returns The rendered SidenavTrigger component.\n */\nexport function SidenavTrigger({\n  children,\n  for: type,\n  ...rest\n}: SidenavTriggerProps) {\n  const [event, id] = (isUUID(type) ? ['toggle', type] : type.split(':')) as [\n    'close' | 'open' | 'toggle',\n    UniqueId,\n  ];\n  const emit = useEmit<SidenavEvent>(SidenavEventTypes[event]);\n\n  return (\n    <Pressable {...rest} onPress={() => emit({ id })}>\n      {children}\n    </Pressable>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,eAAe,EAC7B,UACA,KAAK,MACL,GAAG,QACmB;CACtB,MAAM,CAAC,OAAO,MAAO,OAAO,KAAK,GAAG,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,IAAI;CAItE,MAAM,OAAO,QAAsB,kBAAkB,OAAO;AAE5D,QACE,oBAAC;EAAU,GAAI;EAAM,eAAe,KAAK,EAAE,IAAI,CAAC;EAC7C;GACS"}

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

@@ -17,10 +17,22 @@ import { Payload } from "@accelint/bus";
 import { UniqueId } from "@accelint/core";
 
 //#region src/components/sidenav/types.d.ts
+/**
+ * Props for Sidenav component.
+ * - `id` - Unique identifier for the sidenav.
+ * - `isHiddenWhenClosed` - Whether to hide the sidenav when closed.
+ */
 type SidenavProps = ComponentPropsWithRef<'nav'> & {
   id: UniqueId;
   isHiddenWhenClosed?: boolean;
 };
+/**
+ * Props for SidenavHeader component.
+ * - `classNames.header` - CSS class for the header container.
+ * - `classNames.button` - CSS class for the toggle button.
+ * - `classNames.container` - CSS class for the content container.
+ * - `classNames.icon` - CSS class for the chevron icon.
+ */
 type SidenavHeaderProps = PropsWithChildren<{
   classNames?: {
     header?: string;
@@ -29,7 +41,14 @@ type SidenavHeaderProps = PropsWithChildren<{
     icon?: string;
   };
 }>;
+/** Props for SidenavContent component. */
 type SidenavContentProps = ComponentPropsWithRef<'div'>;
+/**
+ * Props for SidenavItem component.
+ * - `classNames.button` - CSS class for the toggle button.
+ * - `classNames.icon` - CSS class for the icon.
+ * - `textValue` - Text displayed in tooltip when sidenav is collapsed.
+ */
 type SidenavItemProps = ToggleButtonProps & {
   classNames?: {
     button?: ToggleButtonProps['className'];
@@ -37,6 +56,12 @@ type SidenavItemProps = ToggleButtonProps & {
   };
   textValue?: string;
 };
+/**
+ * Props for SidenavLink component.
+ * - `classNames.button` - CSS class for the link.
+ * - `classNames.icon` - CSS class for the icon.
+ * - `textValue` - Text displayed in tooltip when sidenav is collapsed.
+ */
 type SidenavLinkProps = LinkProps & {
   classNames?: {
     button?: LinkProps['className'];
@@ -44,27 +69,54 @@ type SidenavLinkProps = LinkProps & {
   };
   textValue: string;
 };
+/** Props for SidenavAvatar component. */
 type SidenavAvatarProps = ComponentPropsWithRef<'div'>;
+/** Props for SidenavDivider component. */
 type SidenavDividerProps = ComponentPropsWithRef<'hr'>;
+/** Props for SidenavFooter component. */
 type SidenavFooterProps = ComponentPropsWithRef<'footer'>;
+/** Event payload for closing a sidenav. */
 type SidenavCloseEvent = Payload<typeof SidenavEventTypes.close, {
   id: UniqueId;
 }>;
+/** Event payload for opening a sidenav. */
 type SidenavOpenEvent = Payload<typeof SidenavEventTypes.open, {
   id: UniqueId;
 }>;
+/** Event payload for toggling a sidenav. */
 type SidenavToggleEvent = Payload<typeof SidenavEventTypes.toggle, {
   id: UniqueId;
 }>;
+/** Union of all sidenav event types. */
 type SidenavEvent = SidenavOpenEvent | SidenavToggleEvent | SidenavCloseEvent;
 type TargetedEvents = `close:${UniqueId}` | `open:${UniqueId}` | `toggle:${UniqueId}`;
+/**
+ * Props for SidenavTrigger component.
+ * - `for` - Target sidenav ID or targeted event string (e.g., 'open:id', 'close:id').
+ */
 type SidenavTriggerProps = ComponentPropsWithRef<typeof Pressable> & {
   for: TargetedEvents | UniqueId;
 };
+/**
+ * Context value for Sidenav.
+ * - `id` - Unique identifier of the sidenav.
+ * - `isOpen` - Whether the sidenav is currently open.
+ */
 type SidenavContextValue = {
   id: UniqueId;
   isOpen: boolean;
 };
+/**
+ * Props for SidenavMenu component.
+ * - `title` - Menu title displayed in header.
+ * - `icon` - Icon displayed before the title.
+ * - `classNames.menu` - CSS class for the disclosure container.
+ * - `classNames.button` - CSS class for the trigger button.
+ * - `classNames.icon` - CSS class for the chevron icon.
+ * - `classNames.disclosurePanel` - CSS class for expanded panel.
+ * - `classNames.popoverPanel` - CSS class for popover panel (collapsed state).
+ * - `classNames.panelContent` - CSS class for panel content wrapper.
+ */
 type SidenavMenuProps = PropsWithChildren & {
   title: string;
   icon: React.ReactNode;
@@ -77,6 +129,7 @@ type SidenavMenuProps = PropsWithChildren & {
     panelContent?: string;
   };
 };
+/** Props for SidenavMenuItem component. */
 type SidenavMenuItemProps = ToggleButtonProps;
 //#endregion
 export { SidenavAvatarProps, SidenavCloseEvent, SidenavContentProps, SidenavContextValue, SidenavDividerProps, SidenavEvent, SidenavFooterProps, SidenavHeaderProps, SidenavItemProps, SidenavLinkProps, SidenavMenuItemProps, SidenavMenuProps, SidenavOpenEvent, SidenavProps, SidenavToggleEvent, SidenavTriggerProps };

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

@@ -11,45 +11,30 @@
  */
 
 import { SkeletonProps } from "./types.js";
-import * as react_jsx_runtime159 from "react/jsx-runtime";
+import * as react_jsx_runtime146 from "react/jsx-runtime";
 
 //#region src/components/skeleton/index.d.ts
-
 /**
- * Skeleton - A flexible skeleton loader component for indicating loading states
- *
- * Used to show placeholder content while data is being fetched or processed.
- * Provides visual feedback to users during loading states with customizable shapes.
- *
- * @example
- * // Basic rectangular placeholder
- * <Skeleton />
+ * Skeleton - Placeholder content for loading states
  *
- * @example
- * // Circular placeholder (useful for avatars)
- * <Skeleton variant="circle" />
- *
- * @example
- * // With loading text content
- * <Skeleton>Loading content...</Skeleton>
+ * Displays a pulsing placeholder while content is being fetched.
  *
- * @example
- * // Nested placeholders for complex layouts
- * <Skeleton className="mb-xl p-m">
- *   <br />
- *   <br />
- *   <Skeleton className="w-[75%]" />
- * </Skeleton>
+ * @param props - {@link SkeletonProps}
+ * @param props.className - CSS class for the skeleton element.
+ * @param props.variant - Shape variant of the skeleton.
+ * @returns The rendered Skeleton component.
  *
  * @example
- * // Custom styling
- * <Skeleton className="w-[50%] mt-l" />
+ * ```tsx
+ * <Skeleton variant="rectangle" style={{ width: 200, height: 20 }} />
+ * <Skeleton variant="circle" style={{ width: 40, height: 40 }} />
+ * ```
  */
 declare function Skeleton({
   className,
   variant,
   ...rest
-}: SkeletonProps): react_jsx_runtime159.JSX.Element;
+}: SkeletonProps): react_jsx_runtime146.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.js

@@ -17,34 +17,20 @@ import styles from "./styles.module.css";
 
 //#region src/components/skeleton/index.tsx
 /**
-* Skeleton - A flexible skeleton loader component for indicating loading states
+* Skeleton - Placeholder content for loading states
 *
-* Used to show placeholder content while data is being fetched or processed.
-* Provides visual feedback to users during loading states with customizable shapes.
+* Displays a pulsing placeholder while content is being fetched.
 *
-* @example
-* // Basic rectangular placeholder
-* <Skeleton />
-*
-* @example
-* // Circular placeholder (useful for avatars)
-* <Skeleton variant="circle" />
-*
-* @example
-* // With loading text content
-* <Skeleton>Loading content...</Skeleton>
-*
-* @example
-* // Nested placeholders for complex layouts
-* <Skeleton className="mb-xl p-m">
-*   <br />
-*   <br />
-*   <Skeleton className="w-[75%]" />
-* </Skeleton>
+* @param props - {@link SkeletonProps}
+* @param props.className - CSS class for the skeleton element.
+* @param props.variant - Shape variant of the skeleton.
+* @returns The rendered Skeleton component.
 *
 * @example
-* // Custom styling
-* <Skeleton className="w-[50%] mt-l" />
+* ```tsx
+* <Skeleton variant="rectangle" style={{ width: 200, height: 20 }} />
+* <Skeleton variant="circle" style={{ width: 40, height: 40 }} />
+* ```
 */
 function Skeleton({ className, variant = "rectangle", ...rest }) {
 	return /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/skeleton/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\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { SkeletonProps } from './types';\n\n/**\n * Skeleton - A flexible skeleton loader component for indicating loading states\n *\n * Used to show placeholder content while data is being fetched or processed.\n * Provides visual feedback to users during loading states with customizable shapes.\n *\n * @example\n * // Basic rectangular placeholder\n * <Skeleton />\n *\n * @example\n * // Circular placeholder (useful for avatars)\n * <Skeleton variant=\"circle\" />\n *\n * @example\n * // With loading text content\n * <Skeleton>Loading content...</Skeleton>\n *\n * @example\n * // Nested placeholders for complex layouts\n * <Skeleton className=\"mb-xl p-m\">\n *   <br />\n *   <br />\n *   <Skeleton className=\"w-[75%]\" />\n * </Skeleton>\n *\n * @example\n * // Custom styling\n * <Skeleton className=\"w-[50%] mt-l\" />\n */\nexport function Skeleton({\n  className,\n  variant = 'rectangle',\n  ...rest\n}: SkeletonProps) {\n  return (\n    <div\n      {...rest}\n      className={clsx(styles.skeleton, styles[variant], className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,SAAS,EACvB,WACA,UAAU,aACV,GAAG,QACa;AAChB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,UAAU,OAAO,UAAU,UAAU;GAC5D"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/skeleton/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\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { SkeletonProps } from './types';\n\n/**\n * Skeleton - Placeholder content for loading states\n *\n * Displays a pulsing placeholder while content is being fetched.\n *\n * @param props - {@link SkeletonProps}\n * @param props.className - CSS class for the skeleton element.\n * @param props.variant - Shape variant of the skeleton.\n * @returns The rendered Skeleton component.\n *\n * @example\n * ```tsx\n * <Skeleton variant=\"rectangle\" style={{ width: 200, height: 20 }} />\n * <Skeleton variant=\"circle\" style={{ width: 40, height: 40 }} />\n * ```\n */\nexport function Skeleton({\n  className,\n  variant = 'rectangle',\n  ...rest\n}: SkeletonProps) {\n  return (\n    <div\n      {...rest}\n      className={clsx(styles.skeleton, styles[variant], className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,SAAS,EACvB,WACA,UAAU,aACV,GAAG,QACa;AAChB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,UAAU,OAAO,UAAU,UAAU;GAC5D"}

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

@@ -13,7 +13,11 @@
 import { ComponentPropsWithRef } from "react";
 
 //#region src/components/skeleton/types.d.ts
+/**
+ * Props for the Skeleton component.
+ */
 type SkeletonProps = ComponentPropsWithRef<'div'> & {
+  /** Shape variant of the skeleton. */
   variant?: 'rectangle' | 'circle';
 };
 //#endregion

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

@@ -12,44 +12,45 @@
 
 import { SliderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime161 from "react/jsx-runtime";
+import * as react_jsx_runtime149 from "react/jsx-runtime";
 
 //#region src/components/slider/index.d.ts
 
 /**
- * Slider - An interactive range input component for numeric value selection
+ * Slider - Range input for numeric value selection
  *
- * Provides accessible slider functionality with optional input field integration,
- * flexible layouts, and comprehensive keyboard and mouse interaction support.
- * Perfect for settings, filters, or any numeric input requiring visual feedback.
+ * Supports single values or ranges, optional input fields, markers, and snap-to-markers behavior.
  *
- * @example
- * // Basic slider
- * <Slider label="Volume" defaultValue={50} />
- *
- * @example
- * // Slider with input field
- * <Slider label="Opacity" defaultValue={50} showInput />
- *
- * @example
- * // Slider with labeled markers
- * <Slider
- *   label="Quality"
- *   markers={[
- *     { value: 0, label: 'Low' },
- *     { value: 50, label: 'Medium' },
- *     { value: 100, label: 'High' },
- *   ]}
- *   showMarkerLabels
- * />
+ * @param props - {@link SliderProps}
+ * @param props.classNames - Custom CSS class names for slider elements.
+ * @param props.defaultValue - Default value(s) for uncontrolled mode.
+ * @param props.label - Label text for the slider.
+ * @param props.layout - Layout variant for the slider.
+ * @param props.markers - Marker configuration for discrete points.
+ * @param props.maxValue - Maximum value of the slider range.
+ * @param props.minValue - Minimum value of the slider range.
+ * @param props.onChange - Callback when value changes.
+ * @param props.onChangeEnd - Callback when user finishes dragging.
+ * @param props.orientation - Slider orientation.
+ * @param props.showInput - Whether to show numeric input fields.
+ * @param props.showLabel - Whether to display the label.
+ * @param props.showMarkerLabels - Whether to show labels on markers.
+ * @param props.showValueLabels - Whether to show min/max value labels.
+ * @param props.snapToMarkers - Whether to snap to marker values only.
+ * @param props.step - Step increment for value changes.
+ * @param props.value - Controlled value(s).
+ * @returns The rendered Slider component.
  *
  * @example
- * // Slider that snaps to marker values only
+ * ```tsx
  * <Slider
- *   label="Rating"
- *   markers={[0, 25, 50, 75, 100]}
- *   snapToMarkers
+ *   label="Volume"
+ *   defaultValue={50}
+ *   minValue={0}
+ *   maxValue={100}
+ *   onChange={setVolume}
  * />
+ * ```
  */
 declare function Slider({
   classNames,
@@ -70,7 +71,7 @@ declare function Slider({
   step: stepProp,
   value: valueProp,
   ...rest
-}: SliderProps): react_jsx_runtime161.JSX.Element;
+}: SliderProps): react_jsx_runtime149.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/slider/index.js

@@ -117,39 +117,40 @@ function normalizeValue(value) {
 	return Array.isArray(value) ? value : [value];
 }
 /**
-* Slider - An interactive range input component for numeric value selection
+* Slider - Range input for numeric value selection
 *
-* Provides accessible slider functionality with optional input field integration,
-* flexible layouts, and comprehensive keyboard and mouse interaction support.
-* Perfect for settings, filters, or any numeric input requiring visual feedback.
+* Supports single values or ranges, optional input fields, markers, and snap-to-markers behavior.
 *
-* @example
-* // Basic slider
-* <Slider label="Volume" defaultValue={50} />
-*
-* @example
-* // Slider with input field
-* <Slider label="Opacity" defaultValue={50} showInput />
-*
-* @example
-* // Slider with labeled markers
-* <Slider
-*   label="Quality"
-*   markers={[
-*     { value: 0, label: 'Low' },
-*     { value: 50, label: 'Medium' },
-*     { value: 100, label: 'High' },
-*   ]}
-*   showMarkerLabels
-* />
+* @param props - {@link SliderProps}
+* @param props.classNames - Custom CSS class names for slider elements.
+* @param props.defaultValue - Default value(s) for uncontrolled mode.
+* @param props.label - Label text for the slider.
+* @param props.layout - Layout variant for the slider.
+* @param props.markers - Marker configuration for discrete points.
+* @param props.maxValue - Maximum value of the slider range.
+* @param props.minValue - Minimum value of the slider range.
+* @param props.onChange - Callback when value changes.
+* @param props.onChangeEnd - Callback when user finishes dragging.
+* @param props.orientation - Slider orientation.
+* @param props.showInput - Whether to show numeric input fields.
+* @param props.showLabel - Whether to display the label.
+* @param props.showMarkerLabels - Whether to show labels on markers.
+* @param props.showValueLabels - Whether to show min/max value labels.
+* @param props.snapToMarkers - Whether to snap to marker values only.
+* @param props.step - Step increment for value changes.
+* @param props.value - Controlled value(s).
+* @returns The rendered Slider component.
 *
 * @example
-* // Slider that snaps to marker values only
+* ```tsx
 * <Slider
-*   label="Rating"
-*   markers={[0, 25, 50, 75, 100]}
-*   snapToMarkers
+*   label="Volume"
+*   defaultValue={50}
+*   minValue={0}
+*   maxValue={100}
+*   onChange={setVolume}
 * />
+* ```
 */
 function Slider({ classNames, defaultValue, label: labelProp, layout = "grid", markers: markersProp, maxValue: maxValueProp = 100, minValue: minValueProp = 0, onChange, onChangeEnd, orientation = "horizontal", showInput, showLabel = true, showMarkerLabels = false, showValueLabels = true, snapToMarkers = false, step: stepProp, value: valueProp, ...rest }) {
 	const normalizedMarkers = useMemo(() => normalizeMarkers(markersProp, minValueProp, maxValueProp), [