@atom-learning/components 6.17.0 → 8.0.0

package/dist/components/navigation/NavigationMenuDropdownTrigger.js

@@ -3,6 +3,7 @@ import { Icon } from "../icon/Icon.js";
 import { preventEvent } from "../../utilities/event/preventEvent.js";
 import { navigationMenuActiveItemStyles, navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";
 import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation/NavigationMenuDropdownTrigger.tsx
@@ -17,17 +18,18 @@ var StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {
 	],
 	variants: { active: { true: navigationMenuActiveItemStyles } }
 });
-var NavigationMenuDropdownTrigger = React.forwardRef(({ children, active, ...props }, forwardedRef) => /* @__PURE__ */ React.createElement(StyledTrigger, {
+var NavigationMenuDropdownTrigger = React.forwardRef(({ children, active, ...props }, forwardedRef) => /* @__PURE__ */ jsxs(StyledTrigger, {
 	active,
 	...props,
 	ref: forwardedRef,
 	onPointerMove: preventEvent,
-	onPointerLeave: preventEvent
-}, children, /* @__PURE__ */ React.createElement(Icon, {
-	is: ChevronDown,
-	size: "sm",
-	className: cn("ml-1", "in-data-[state=open]:-rotate-180", "motion-safe:duration-200", "motion-safe:ease-in", "motion-safe:transition-transform")
-})));
+	onPointerLeave: preventEvent,
+	children: [children, /* @__PURE__ */ jsx(Icon, {
+		is: ChevronDown,
+		size: "sm",
+		className: cn("ml-1", "in-data-[state=open]:-rotate-180", "motion-safe:duration-200", "motion-safe:ease-in", "motion-safe:transition-transform")
+	})]
+}));
 NavigationMenuDropdownTrigger.displayName = "NavigationMenuDropdownTrigger";
 //#endregion
 export { NavigationMenuDropdownTrigger };

package/dist/components/navigation/NavigationMenuDropdownTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\n\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTrigger>\n>(({ children, active, ...props }, forwardedRef) => (\n  <StyledTrigger\n    active={active}\n    {...props}\n    ref={forwardedRef}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n))\n\nNavigationMenuDropdownTrigger.displayName = 'NavigationMenuDropdownTrigger'\n"],"mappings":";;;;;;;;AAcA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ,EACN,MAAM,gCACP,EACF;CACF,CAAC;AAEF,IAAa,gCAAgC,MAAM,YAGhD,EAAE,UAAU,QAAQ,GAAG,SAAS,iBACjC,sBAAA,cAAC,eAAD;CACU;CACR,GAAI;CACJ,KAAK;CACL,eAAe;CACf,gBAAgB;CAcF,EAZb,UACD,sBAAA,cAAC,MAAD;CACE,IAAI;CACJ,MAAK;CACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,mCACD;CACD,CAAA,CACY,CAChB;AAEF,8BAA8B,cAAc"}
+{"version":3,"file":"NavigationMenuDropdownTrigger.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuDropdownTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\nimport { preventEvent } from '~/utilities/event/preventEvent'\n\nimport { Icon } from '../icon/Icon'\nimport {\n  navigationMenuActiveItemStyles,\n  navigationMenuBaseItemStyles\n} from './NavigationMenu.styles'\n\nconst StyledTrigger = styled(NavigationMenuPrimitive.Trigger, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'flex',\n    'items-center',\n    'rounded-md',\n    'justify-between',\n    'data-[state=open]:bg-(--trigger-background-open)'\n  ],\n  variants: {\n    active: {\n      true: navigationMenuActiveItemStyles\n    }\n  }\n})\n\nexport const NavigationMenuDropdownTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTrigger>\n>(({ children, active, ...props }, forwardedRef) => (\n  <StyledTrigger\n    active={active}\n    {...props}\n    ref={forwardedRef}\n    onPointerMove={preventEvent}\n    onPointerLeave={preventEvent}\n  >\n    {children}\n    <Icon\n      is={ChevronDown}\n      size=\"sm\"\n      className={cn(\n        'ml-1',\n        'in-data-[state=open]:-rotate-180',\n        'motion-safe:duration-200',\n        'motion-safe:ease-in',\n        'motion-safe:transition-transform'\n      )}\n    />\n  </StyledTrigger>\n))\n\nNavigationMenuDropdownTrigger.displayName = 'NavigationMenuDropdownTrigger'\n"],"mappings":";;;;;;;;;AAcA,IAAM,gBAAgB,OAAO,wBAAwB,SAAS;CAC5D,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,QAAQ,EACN,MAAM,gCACP,EACF;CACF,CAAC;AAEF,IAAa,gCAAgC,MAAM,YAGhD,EAAE,UAAU,QAAQ,GAAG,SAAS,iBACjC,qBAAC,eAAD;CACU;CACR,GAAI;CACJ,KAAK;CACL,eAAe;CACf,gBAAgB;WALlB,CAOG,UACD,oBAAC,MAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW,GACT,QACA,oCACA,4BACA,uBACA,mCACD;EACD,CAAA,CACY;GAChB;AAEF,8BAA8B,cAAc"}

package/dist/components/navigation/NavigationMenuLink.d.ts

@@ -1,11 +1,15 @@
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import React from 'react';
-declare const StyledLink: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "elementType"> & {
+declare const StyledLink: React.ForwardRefExoticComponent<Omit<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLAnchorElement> | null | undefined;
+}, "elementType"> & {
     elementType?: "link" | "dropdownItem" | undefined;
 } & {
     as?: React.ElementType;
 }>;
-export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "elementType"> & {
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLAnchorElement> | null | undefined;
+}, "elementType"> & {
     elementType?: "link" | "dropdownItem" | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/navigation/NavigationMenuLink.js

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
 import { navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation/NavigationMenuLink.tsx
 var DisabledButton = styled("button", { base: [
@@ -46,17 +47,19 @@ var StyledLink = styled(NavigationMenuPrimitive.Link, {
 		]
 	} }
 });
-var NavigationMenuLink = React.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, ...props }, forwardedRef) => /* @__PURE__ */ React.createElement(ListItem, null, disabled ? /* @__PURE__ */ React.createElement(DisabledButton, {
+var NavigationMenuLink = React.forwardRef(({ children, href, disabled, className, variant = "link", ...props }, forwardedRef) => /* @__PURE__ */ jsx(ListItem, { children: disabled ? /* @__PURE__ */ jsx(DisabledButton, {
 	disabled: true,
-	className
-}, children) : /* @__PURE__ */ React.createElement(StyledLink, {
+	className,
+	children
+}) : /* @__PURE__ */ jsx(StyledLink, {
 	href,
 	ref: forwardedRef,
 	elementType: variant,
 	className,
 	...getExternalAnchorProps(href),
-	...props
-}, children)));
+	...props,
+	children
+}) }));
 NavigationMenuLink.displayName = "NavigationMenuLink";
 //#endregion
 export { NavigationMenuLink };

package/dist/components/navigation/NavigationMenuLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'disabled:bg-none',\n    'disabled:cursor-default',\n    'disabled:opacity-30',\n    'disabled:text-text'\n  ]\n})\n\nconst ListItem = NavigationMenuPrimitive.Item\n\nconst StyledLink = styled(NavigationMenuPrimitive.Link, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'block',\n    'no-underline',\n    'leading-none'\n  ],\n  variants: {\n    elementType: {\n      dropdownItem: [\n        'data-active:bg-background-selected',\n        'data-active:text-text-selected',\n        'data-active:hover:bg-background-selected-hover',\n        'data-active:hover:text-text-selected-hover',\n        'data-active:active:bg-background-selected-pressed',\n        'data-active:active:text-text-selected-pressed',\n        'data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]',\n        'data-active:focus-visible:text-text-selected-focus'\n      ],\n      link: [\n        'data-active:font-semibold',\n        'data-active:text-item-(--background-selected)',\n        'data-active:after:-translate-x-1/2',\n        'data-active:after:absolute',\n        'data-active:after:bg-item-(--background-selected)',\n        'data-active:after:block',\n        'data-active:after:bottom-0',\n        'data-active:after:h-0.5',\n        'data-active:after:left-1/2',\n        'data-active:after:rounded-md',\n        'data-active:after:translate-y-0',\n        'data-active:after:w-6'\n      ]\n    }\n  }\n})\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n    disabled?: boolean\n    variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  }\n>(\n  (\n    {\n      children,\n      href,\n      disabled,\n      className,\n      variant = 'link',\n      ref: _ref,\n      ...props\n    },\n    forwardedRef\n  ) => (\n    <ListItem>\n      {disabled ? (\n        <DisabledButton disabled className={className}>\n          {children}\n        </DisabledButton>\n      ) : (\n        <StyledLink\n          href={href}\n          ref={forwardedRef as any}\n          elementType={variant}\n          className={className}\n          {...getExternalAnchorProps(href)}\n          {...props}\n        >\n          {children}\n        </StyledLink>\n      )}\n    </ListItem>\n  )\n)\n\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n"],"mappings":";;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACD;CACD,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,CAAC;AAEF,IAAa,qBAAqB,MAAM,YAQpC,EACE,UACA,MACA,UACA,WACA,UAAU,QACV,KAAK,MACL,GAAG,SAEL,iBAEA,sBAAA,cAAC,UAAA,MACE,WACC,sBAAA,cAAC,gBAAD;CAAgB,UAAA;CAAoB;CAEnB,EADd,SACc,GAEjB,sBAAA,cAAC,YAAD;CACQ;CACN,KAAK;CACL,aAAa;CACF;CACX,GAAI,uBAAuB,KAAK;CAChC,GAAI;CAGO,EADV,SACU,CAEN,CAEd;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'disabled:bg-none',\n    'disabled:cursor-default',\n    'disabled:opacity-30',\n    'disabled:text-text'\n  ]\n})\n\nconst ListItem = NavigationMenuPrimitive.Item\n\nconst StyledLink = styled(NavigationMenuPrimitive.Link, {\n  base: [\n    ...navigationMenuBaseItemStyles,\n    'block',\n    'no-underline',\n    'leading-none'\n  ],\n  variants: {\n    elementType: {\n      dropdownItem: [\n        'data-active:bg-background-selected',\n        'data-active:text-text-selected',\n        'data-active:hover:bg-background-selected-hover',\n        'data-active:hover:text-text-selected-hover',\n        'data-active:active:bg-background-selected-pressed',\n        'data-active:active:text-text-selected-pressed',\n        'data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]',\n        'data-active:focus-visible:text-text-selected-focus'\n      ],\n      link: [\n        'data-active:font-semibold',\n        'data-active:text-item-(--background-selected)',\n        'data-active:after:-translate-x-1/2',\n        'data-active:after:absolute',\n        'data-active:after:bg-item-(--background-selected)',\n        'data-active:after:block',\n        'data-active:after:bottom-0',\n        'data-active:after:h-0.5',\n        'data-active:after:left-1/2',\n        'data-active:after:rounded-md',\n        'data-active:after:translate-y-0',\n        'data-active:after:w-6'\n      ]\n    }\n  }\n})\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n    disabled?: boolean\n    variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  }\n>(\n  (\n    {\n      children,\n      href,\n      disabled,\n      className,\n      variant = 'link',\n      ...props\n    },\n    forwardedRef\n  ) => (\n    <ListItem>\n      {disabled ? (\n        <DisabledButton disabled className={className}>\n          {children}\n        </DisabledButton>\n      ) : (\n        <StyledLink\n          href={href}\n          ref={forwardedRef as any}\n          elementType={variant}\n          className={className}\n          {...getExternalAnchorProps(href)}\n          {...props}\n        >\n          {children}\n        </StyledLink>\n      )}\n    </ListItem>\n  )\n)\n\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n"],"mappings":";;;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACD;CACD,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,CAAC;AAEF,IAAa,qBAAqB,MAAM,YAQpC,EACE,UACA,MACA,UACA,WACA,UAAU,QACV,GAAG,SAEL,iBAEA,oBAAC,UAAD,EAAA,UACG,WACC,oBAAC,gBAAD;CAAgB,UAAA;CAAoB;CACjC;CACc,CAAA,GAEjB,oBAAC,YAAD;CACQ;CACN,KAAK;CACL,aAAa;CACF;CACX,GAAI,uBAAuB,KAAK;CAChC,GAAI;CAEH;CACU,CAAA,EAEN,CAAA,CAEd;AAED,mBAAmB,cAAc"}

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-declare const StyledRoot: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuProps & React.RefAttributes<HTMLElement>, never> & {
+declare const StyledRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLElement> | null | undefined;
+}, never> & {
     as?: React.ElementType;
 }>;
 type TNavigationVerticalProps = Omit<React.ComponentProps<typeof StyledRoot>, 'delayDuration' | 'skipDelayDuration' | 'defaultValue' | 'value' | 'onValueChange'>;
 export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigationVerticalProps) => React.JSX.Element) & {
-    Link: ({ as, href, children, ...rest }: Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "size"> & {
+    Link: ({ as, href, children, ...rest }: Omit<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
+        ref?: ((instance: HTMLAnchorElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLAnchorElement> | null | undefined;
+    }, "size"> & {
         size?: "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;
@@ -18,7 +22,8 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        ref?: React.Ref<HTMLLIElement> | undefined;
+        ref?: React.LegacyRef<HTMLLIElement> | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
@@ -27,14 +32,18 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-colcount"?: number | undefined | undefined;
         "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
         "aria-colspan"?: number | undefined | undefined;
         "aria-controls"?: string | undefined | undefined;
         "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
         "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
         "aria-details"?: string | undefined | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
@@ -64,6 +73,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         "aria-roledescription"?: string | undefined | undefined;
         "aria-rowcount"?: number | undefined | undefined;
         "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
         "aria-rowspan"?: number | undefined | undefined;
         "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined | undefined;
@@ -93,7 +103,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         onBlurCapture?: React.FocusEventHandler<HTMLLIElement> | undefined;
         onChange?: React.FormEventHandler<HTMLLIElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLLIElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLLIElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLLIElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLLIElement> | undefined;
         onInput?: React.FormEventHandler<HTMLLIElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLLIElement> | undefined;
@@ -212,9 +222,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         onPointerCancel?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerCancelCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerEnter?: React.PointerEventHandler<HTMLLIElement> | undefined;
-        onPointerEnterCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerLeave?: React.PointerEventHandler<HTMLLIElement> | undefined;
-        onPointerLeaveCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerOver?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerOverCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerOut?: React.PointerEventHandler<HTMLLIElement> | undefined;
@@ -239,16 +247,16 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
         accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         nonce?: string | undefined | undefined;
-        placeholder?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         radioGroup?: string | undefined | undefined;
         about?: string | undefined | undefined;
@@ -260,7 +268,6 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         rev?: string | undefined | undefined;
         typeof?: string | undefined | undefined;
         vocab?: string | undefined | undefined;
-        autoCapitalize?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
@@ -273,12 +280,18 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         asChild?: boolean | undefined;
-    }) => JSX.Element;
-    AccordionContent: ({ children, ...rest }: import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, never> & {
+    }) => React.JSX.Element;
+    AccordionContent: ({ children, ...rest }: import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement> & Omit<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & {
+        ref?: ((instance: HTMLUListElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLUListElement> | null | undefined;
+    }, never> & {
         as?: React.ElementType;
-    }) => JSX.Element;
-    AccordionTrigger: ({ children, ...rest }: Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
+    }) => React.JSX.Element;
+    AccordionTrigger: ({ children, ...rest }: Omit<Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "size"> & {
         size?: "md" | "lg" | undefined;
     } & {
         as?: React.ElementType;
@@ -292,7 +305,8 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        ref?: React.Ref<HTMLLIElement> | undefined;
+        ref?: React.LegacyRef<HTMLLIElement> | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
@@ -301,14 +315,18 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-colcount"?: number | undefined | undefined;
         "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
         "aria-colspan"?: number | undefined | undefined;
         "aria-controls"?: string | undefined | undefined;
         "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
         "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
         "aria-details"?: string | undefined | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
@@ -338,6 +356,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         "aria-roledescription"?: string | undefined | undefined;
         "aria-rowcount"?: number | undefined | undefined;
         "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
         "aria-rowspan"?: number | undefined | undefined;
         "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined | undefined;
@@ -367,7 +386,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         onBlurCapture?: React.FocusEventHandler<HTMLLIElement> | undefined;
         onChange?: React.FormEventHandler<HTMLLIElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLLIElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLLIElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLLIElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLLIElement> | undefined;
         onInput?: React.FormEventHandler<HTMLLIElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLLIElement> | undefined;
@@ -486,9 +505,7 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         onPointerCancel?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerCancelCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerEnter?: React.PointerEventHandler<HTMLLIElement> | undefined;
-        onPointerEnterCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerLeave?: React.PointerEventHandler<HTMLLIElement> | undefined;
-        onPointerLeaveCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerOver?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerOverCapture?: React.PointerEventHandler<HTMLLIElement> | undefined;
         onPointerOut?: React.PointerEventHandler<HTMLLIElement> | undefined;
@@ -513,16 +530,16 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
         accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         nonce?: string | undefined | undefined;
-        placeholder?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         radioGroup?: string | undefined | undefined;
         about?: string | undefined | undefined;
@@ -534,7 +551,6 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         rev?: string | undefined | undefined;
         typeof?: string | undefined | undefined;
         vocab?: string | undefined | undefined;
-        autoCapitalize?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
@@ -547,11 +563,13 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         asChild?: boolean | undefined;
-    }) => JSX.Element;
-    ItemContent: ({ children, className, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
-    Icon: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-        ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
+    }) => React.JSX.Element;
+    ItemContent: ({ children, className, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => React.JSX.Element;
+    Icon: (props: React.ComponentProps<React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+        ref?: ((instance: SVGSVGElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<SVGSVGElement> | null | undefined;
     }, "size"> & {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
@@ -559,11 +577,13 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
     }, "is" | "as"> & {
         is: React.FC<React.SVGProps<SVGSVGElement>>;
         as?: never;
-    }, "ref"> & React.RefAttributes<SVGSVGElement>, never> & {
+    }, "ref"> & React.RefAttributes<SVGSVGElement>, "ref"> & {
+        ref?: ((instance: SVGSVGElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<SVGSVGElement> | null | undefined;
+    }, never> & {
         as?: React.ElementType;
-    }>>) => JSX.Element;
-    Text: (props: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    }>>) => React.JSX.Element;
+    Text: (props: Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "noCapsize" | "weight" | "family"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
         noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
@@ -573,10 +593,12 @@ export declare const NavigationMenuVertical: (({ children, ...rest }: TNavigatio
         as?: React.ElementType;
     }, "as"> & {
         as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
-    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "isExpanded"> & {
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    }, "isExpanded"> & {
         isExpanded?: boolean | undefined;
     } & {
         as?: React.ElementType;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.js

@@ -9,14 +9,19 @@ import { NavigationMenuVerticalText } from "./NavigationMenuVerticalText.js";
 import { NavigationMenuVerticalItemContent } from "./NavigationMenuVerticalItemContent.js";
 import { NavigationMenuVerticalAccordionTrigger } from "./NavigationMenuVerticalAccordionTrigger.js";
 import { NavigationMenuVerticalLink } from "./NavigationMenuVerticalLink.js";
-import React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation-menu-vertical/NavigationMenuVertical.tsx
 var StyledRoot = styled(Root, { base: ["w-full"] });
-var NavigationMenuVertical = Object.assign(({ children, ...rest }) => /* @__PURE__ */ React.createElement(Theme, { theme: colorSchemes["light"] }, /* @__PURE__ */ React.createElement(StyledRoot, {
-	...rest,
-	orientation: "vertical"
-}, /* @__PURE__ */ React.createElement(NavigationMenuVerticalList, null, children))), {
+var NavigationMenuVertical = Object.assign(({ children, ...rest }) => /* @__PURE__ */ jsx(Theme, {
+	theme: colorSchemes["light"],
+	children: /* @__PURE__ */ jsx(StyledRoot, {
+		...rest,
+		orientation: "vertical",
+		children: /* @__PURE__ */ jsx(NavigationMenuVerticalList, { children })
+	})
+}), {
 	Link: NavigationMenuVerticalLink,
 	Accordion: NavigationMenuVerticalAccordion,
 	AccordionContent: NavigationMenuVerticalAccordionContent,

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVertical.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled, Theme } from '~/styled'\n\nimport { colorSchemes as navigationMenuVerticalColorSchemes } from './NavigationMenuVertical.colorscheme.config'\nimport { NavigationMenuVerticalAccordion } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalAccordionContent } from './NavigationMenuVerticalAccordionContent'\nimport { NavigationMenuVerticalAccordionTrigger } from './NavigationMenuVerticalAccordionTrigger'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\nimport { NavigationMenuVerticalLink } from './NavigationMenuVerticalLink'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the below `value` based props and `Trigger`/`Content`\n * animations do nothing, so removing them from typescript\n */\ntype TNavigationVerticalProps = Omit<\n  React.ComponentProps<typeof StyledRoot>,\n  | 'delayDuration'\n  | 'skipDelayDuration'\n  | 'defaultValue'\n  | 'value'\n  | 'onValueChange'\n>\n\nexport const NavigationMenuVertical = Object.assign(\n  ({ children, ...rest }: TNavigationVerticalProps) => (\n    <Theme theme={navigationMenuVerticalColorSchemes['light']}>\n      <StyledRoot {...rest} orientation=\"vertical\">\n        <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n      </StyledRoot>\n    </Theme>\n  ),\n  {\n    Link: NavigationMenuVerticalLink,\n    Accordion: NavigationMenuVerticalAccordion,\n    AccordionContent: NavigationMenuVerticalAccordionContent,\n    AccordionTrigger: NavigationMenuVerticalAccordionTrigger,\n    Item: NavigationMenuVerticalItem,\n    ItemContent: NavigationMenuVerticalItemContent,\n    Icon: NavigationMenuVerticalIcon,\n    Text: NavigationMenuVerticalText\n  }\n)\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,SAAS,EACjB,CAAC;AAkBF,IAAa,yBAAyB,OAAO,QAC1C,EAAE,UAAU,GAAG,WACd,sBAAA,cAAC,OAAD,EAAO,OAAO,aAAmC,UAIzC,EAHN,sBAAA,cAAC,YAAD;CAAY,GAAI;CAAM,aAAY;CAErB,EADX,sBAAA,cAAC,4BAAA,MAA4B,SAAsC,CACxD,CACP,EAEV;CACE,MAAM;CACN,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAClB,MAAM;CACN,aAAa;CACb,MAAM;CACN,MAAM;CACP,CACF"}
+{"version":3,"file":"NavigationMenuVertical.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled, Theme } from '~/styled'\n\nimport { colorSchemes as navigationMenuVerticalColorSchemes } from './NavigationMenuVertical.colorscheme.config'\nimport { NavigationMenuVerticalAccordion } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalAccordionContent } from './NavigationMenuVerticalAccordionContent'\nimport { NavigationMenuVerticalAccordionTrigger } from './NavigationMenuVerticalAccordionTrigger'\nimport { NavigationMenuVerticalIcon } from './NavigationMenuVerticalIcon'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\nimport { NavigationMenuVerticalLink } from './NavigationMenuVerticalLink'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\nimport { NavigationMenuVerticalText } from './NavigationMenuVerticalText'\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\n/*\n * (!)\n * NavigationMenu vertical behaviour was buggy so had to build the\n * opening/closing nested Content(Accordion) based on `Collapsible` instead.\n * This means that the below `value` based props and `Trigger`/`Content`\n * animations do nothing, so removing them from typescript\n */\ntype TNavigationVerticalProps = Omit<\n  React.ComponentProps<typeof StyledRoot>,\n  | 'delayDuration'\n  | 'skipDelayDuration'\n  | 'defaultValue'\n  | 'value'\n  | 'onValueChange'\n>\n\nexport const NavigationMenuVertical = Object.assign(\n  ({ children, ...rest }: TNavigationVerticalProps) => (\n    <Theme theme={navigationMenuVerticalColorSchemes['light']}>\n      <StyledRoot {...rest} orientation=\"vertical\">\n        <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n      </StyledRoot>\n    </Theme>\n  ),\n  {\n    Link: NavigationMenuVerticalLink,\n    Accordion: NavigationMenuVerticalAccordion,\n    AccordionContent: NavigationMenuVerticalAccordionContent,\n    AccordionTrigger: NavigationMenuVerticalAccordionTrigger,\n    Item: NavigationMenuVerticalItem,\n    ItemContent: NavigationMenuVerticalItemContent,\n    Icon: NavigationMenuVerticalIcon,\n    Text: NavigationMenuVerticalText\n  }\n)\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,CAAC,SAAS,EACjB,CAAC;AAkBF,IAAa,yBAAyB,OAAO,QAC1C,EAAE,UAAU,GAAG,WACd,oBAAC,OAAD;CAAO,OAAO,aAAmC;WAC/C,oBAAC,YAAD;EAAY,GAAI;EAAM,aAAY;YAChC,oBAAC,4BAAD,EAA6B,UAAsC,CAAA;EACxD,CAAA;CACP,CAAA,EAEV;CACE,MAAM;CACN,WAAW;CACX,kBAAkB;CAClB,kBAAkB;CAClB,MAAM;CACN,aAAa;CACb,MAAM;CACN,MAAM;CACP,CACF"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.d.ts

@@ -7,5 +7,5 @@ type TNavigationMenuVerticalAccordionContextValue = {
 };
 export declare const NavigationMenuVerticalAccordionContext: React.Context<TNavigationMenuVerticalAccordionContextValue>;
 type TNavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> & React.ComponentProps<typeof NavigationMenuVerticalItem>;
-export declare const NavigationMenuVerticalAccordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: TNavigationMenuVerticalAccordionProps) => JSX.Element;
+export declare const NavigationMenuVerticalAccordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: TNavigationMenuVerticalAccordionProps) => React.JSX.Element;
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.js

@@ -1,27 +1,29 @@
 import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
 import { NavigationMenuVerticalItem } from "./NavigationMenuVerticalItem.js";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-collapsible";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx
 var NavigationMenuVerticalAccordionContext = React$1.createContext({});
 var NavigationMenuVerticalAccordionProvider = ({ children }) => {
 	const [triggerRef, setTriggerRef] = useCallbackRef();
-	return /* @__PURE__ */ React$1.createElement(NavigationMenuVerticalAccordionContext.Provider, { value: {
-		triggerRef,
-		setTriggerRef
-	} }, children);
+	return /* @__PURE__ */ jsx(NavigationMenuVerticalAccordionContext.Provider, {
+		value: {
+			triggerRef,
+			setTriggerRef
+		},
+		children
+	});
 };
 var NavigationMenuVerticalAccordion = ({ defaultOpen, open, onOpenChange, disabled, ...rest }) => {
-	const collapsibleProps = {
+	return /* @__PURE__ */ jsx(NavigationMenuVerticalAccordionProvider, { children: /* @__PURE__ */ jsx(Root, {
 		defaultOpen,
 		open,
 		onOpenChange,
-		disabled
-	};
-	return /* @__PURE__ */ React$1.createElement(NavigationMenuVerticalAccordionProvider, null, /* @__PURE__ */ React$1.createElement(Root, {
-		...collapsibleProps,
-		asChild: true
-	}, /* @__PURE__ */ React$1.createElement(NavigationMenuVerticalItem, rest)));
+		disabled,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(NavigationMenuVerticalItem, { ...rest })
+	}) });
 };
 //#endregion
 export { NavigationMenuVerticalAccordion, NavigationMenuVerticalAccordionContext };

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordion.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\n\ntype TNavigationMenuVerticalAccordionContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const NavigationMenuVerticalAccordionContext =\n  React.createContext<TNavigationMenuVerticalAccordionContextValue>({})\nconst NavigationMenuVerticalAccordionProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <NavigationMenuVerticalAccordionContext.Provider\n      value={{ triggerRef, setTriggerRef }}\n    >\n      {children}\n    </NavigationMenuVerticalAccordionContext.Provider>\n  )\n}\n\ntype TNavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof NavigationMenuVerticalItem>\nexport const NavigationMenuVerticalAccordion = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  disabled,\n  ...rest\n}: TNavigationMenuVerticalAccordionProps): JSX.Element => {\n  const collapsibleProps = { defaultOpen, open, onOpenChange, disabled }\n  return (\n    <NavigationMenuVerticalAccordionProvider>\n      <Root {...collapsibleProps} asChild>\n        <NavigationMenuVerticalItem {...rest} />\n      </Root>\n    </NavigationMenuVerticalAccordionProvider>\n  )\n}\n"],"mappings":";;;;;AAWA,IAAa,yCACX,QAAM,cAA4D,EAAE,CAAC;AACvE,IAAM,2CAA2C,EAAE,eAAe;CAChE,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;AACpD,QACE,wBAAA,cAAC,uCAAuC,UAAxC,EACE,OAAO;EAAE;EAAY;EAAe,EAGY,EAD/C,SAC+C;;AAMtD,IAAa,mCAAmC,EAC9C,aACA,MACA,cACA,UACA,GAAG,WACqD;CACxD,MAAM,mBAAmB;EAAE;EAAa;EAAM;EAAc;EAAU;AACtE,QACE,wBAAA,cAAC,yCAAA,MACC,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAkB,SAAA;EAErB,EADL,wBAAA,cAAC,4BAA+B,KAAQ,CACnC,CACiC"}
+{"version":3,"file":"NavigationMenuVerticalAccordion.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\n\ntype TNavigationMenuVerticalAccordionContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const NavigationMenuVerticalAccordionContext =\n  React.createContext<TNavigationMenuVerticalAccordionContextValue>({})\nconst NavigationMenuVerticalAccordionProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <NavigationMenuVerticalAccordionContext.Provider\n      value={{ triggerRef, setTriggerRef }}\n    >\n      {children}\n    </NavigationMenuVerticalAccordionContext.Provider>\n  )\n}\n\ntype TNavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof NavigationMenuVerticalItem>\nexport const NavigationMenuVerticalAccordion = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  disabled,\n  ...rest\n}: TNavigationMenuVerticalAccordionProps): React.JSX.Element => {\n  const collapsibleProps = { defaultOpen, open, onOpenChange, disabled }\n  return (\n    <NavigationMenuVerticalAccordionProvider>\n      <Root {...collapsibleProps} asChild>\n        <NavigationMenuVerticalItem {...rest} />\n      </Root>\n    </NavigationMenuVerticalAccordionProvider>\n  )\n}\n"],"mappings":";;;;;;AAWA,IAAa,yCACX,QAAM,cAA4D,EAAE,CAAC;AACvE,IAAM,2CAA2C,EAAE,eAAe;CAChE,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;AACpD,QACE,oBAAC,uCAAuC,UAAxC;EACE,OAAO;GAAE;GAAY;GAAe;EAEnC;EAC+C,CAAA;;AAMtD,IAAa,mCAAmC,EAC9C,aACA,MACA,cACA,UACA,GAAG,WAC2D;AAE9D,QACE,oBAAC,yCAAD,EAAA,UACE,oBAAC,MAAD;EAHuB;EAAa;EAAM;EAAc;EAG5B,SAAA;YAC1B,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA;EACnC,CAAA,EACiC,CAAA"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { NavigationMenuVerticalList } from './NavigationMenuVerticalList';
 declare const StyledNavigationMenuVerticalAccordionContent: React.ForwardRefExoticComponent<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
 type TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<typeof StyledNavigationMenuVerticalAccordionContent> & React.ComponentProps<typeof NavigationMenuVerticalList>;
-export declare const NavigationMenuVerticalAccordionContent: ({ children, ...rest }: TNavigationMenuVerticalAccordionContentProps) => JSX.Element;
+export declare const NavigationMenuVerticalAccordionContent: ({ children, ...rest }: TNavigationMenuVerticalAccordionContentProps) => React.JSX.Element;
 export {};

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js

@@ -1,6 +1,7 @@
 import { NavigationMenuVerticalAccordionContext } from "./NavigationMenuVerticalAccordion.js";
 import { NavigationMenuVerticalList } from "./NavigationMenuVerticalList.js";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 import { Content } from "@radix-ui/react-collapsible";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx
 var StyledNavigationMenuVerticalAccordionContent = Content;
@@ -15,10 +16,11 @@ var NavigationMenuVerticalAccordionContent = ({ children, ...rest }) => {
 			triggerRef.current.click();
 		}
 	};
-	return /* @__PURE__ */ React.createElement(StyledNavigationMenuVerticalAccordionContent, {
+	return /* @__PURE__ */ jsx(StyledNavigationMenuVerticalAccordionContent, {
 		onKeyDown: handleOnKeydown,
-		...rest
-	}, /* @__PURE__ */ React.createElement(NavigationMenuVerticalList, null, children));
+		...rest,
+		children: /* @__PURE__ */ jsx(NavigationMenuVerticalList, { children })
+	});
 };
 //#endregion
 export { NavigationMenuVerticalAccordionContent };

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionContent\n> &\n  React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n  children,\n  ...rest\n}: TNavigationMenuVerticalAccordionContentProps): JSX.Element => {\n  const { triggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <StyledNavigationMenuVerticalAccordionContent\n      onKeyDown={handleOnKeydown}\n      {...rest}\n    >\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledNavigationMenuVerticalAccordionContent>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WAC4D;CAC/D,MAAM,EAAE,eAAe,MAAM,WAC3B,uCACD;CAED,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,sBAAA,cAAC,8CAAD;EACE,WAAW;EACX,GAAI;EAGyC,EAD7C,sBAAA,cAAC,4BAAA,MAA4B,SAAsC,CACtB"}
+{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype TNavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionContent\n> &\n  React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n  children,\n  ...rest\n}: TNavigationMenuVerticalAccordionContentProps): React.JSX.Element => {\n  const { triggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <StyledNavigationMenuVerticalAccordionContent\n      onKeyDown={handleOnKeydown}\n      {...rest}\n    >\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledNavigationMenuVerticalAccordionContent>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WACkE;CACrE,MAAM,EAAE,eAAe,MAAM,WAC3B,uCACD;CAED,MAAM,mBAAmB,MAAM;AAC7B,MAAI,CAAC,YAAY,QAAS;AAC1B,MAAI,EAAE,QAAQ,UAAU;AACtB,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,cAAW,QAAQ,OAAO;AAC1B,cAAW,QAAQ,OAAO;;;AAI9B,QACE,oBAAC,8CAAD;EACE,WAAW;EACX,GAAI;YAEJ,oBAAC,4BAAD,EAA6B,UAAsC,CAAA;EACtB,CAAA"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const StyledNavigationMenuVerticalAccordionTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "size"> & {
+declare const StyledNavigationMenuVerticalAccordionTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "size"> & {
     size?: "md" | "lg" | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js

@@ -4,6 +4,7 @@ import { NavigationMenuVerticalAccordionContext } from "./NavigationMenuVertical
 import { navigationMenuVerticalItemStyles } from "./NavigationMenuVertical.styles.js";
 import { NavigationMenuVerticalItemContent } from "./NavigationMenuVerticalItemContent.js";
 import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "@atom-learning/icons";
 import { Trigger } from "@radix-ui/react-collapsible";
 import { Link } from "@radix-ui/react-navigation-menu";
@@ -22,18 +23,23 @@ var StyledIcon = styled(Icon, { base: [
 ] });
 var NavigationMenuVerticalAccordionTrigger = ({ children, ...rest }) => {
 	const { setTriggerRef } = React.useContext(NavigationMenuVerticalAccordionContext);
-	return /* @__PURE__ */ React.createElement(Link, { asChild: true }, /* @__PURE__ */ React.createElement(StyledNavigationMenuVerticalAccordionTrigger, {
-		size: "lg",
-		...rest,
-		asChild: true
-	}, /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		className: "flex items-center justify-between gap-3",
-		ref: setTriggerRef
-	}, /* @__PURE__ */ React.createElement(NavigationMenuVerticalItemContent, null, children), /* @__PURE__ */ React.createElement(StyledIcon, {
-		size: "sm",
-		is: ChevronDown
-	}))));
+	return /* @__PURE__ */ jsx(Link, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(StyledNavigationMenuVerticalAccordionTrigger, {
+			size: "lg",
+			...rest,
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "flex items-center justify-between gap-3",
+				ref: setTriggerRef,
+				children: [/* @__PURE__ */ jsx(NavigationMenuVerticalItemContent, { children }), /* @__PURE__ */ jsx(StyledIcon, {
+					size: "sm",
+					is: ChevronDown
+				})]
+			})
+		})
+	});
 };
 //#endregion
 export { NavigationMenuVerticalAccordionTrigger };