@atom-learning/components 10.0.1 → 10.2.0-beta.0

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 * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\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 = ({\n  ref,\n  children,\n  href,\n  disabled,\n  className,\n  variant = 'link',\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n  disabled?: boolean\n  variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  ref?: React.Ref<HTMLAnchorElement>\n}) => (\n  <ListItem>\n    {disabled ? (\n      <DisabledButton disabled className={className}>\n        {children}\n      </DisabledButton>\n    ) : (\n      <StyledLink\n        href={href}\n        ref={ref}\n        elementType={variant}\n        className={className}\n        {...getExternalAnchorProps(href)}\n        {...rest}\n      >\n        {children}\n      </StyledLink>\n    )}\n  </ListItem>\n)\n"],"mappings":";;;;;;;AAOA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;CACF;CACA,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,KACA,UACA,MACA,UACA,WACA,UAAU,QACV,GAAG,WAMH,oBAAC,UAAD,EAAA,UACG,WACC,oBAAC,gBAAD;CAAgB,UAAA;CAAoB;CACjC;AACa,CAAA,IAEhB,oBAAC,YAAD;CACQ;CACD;CACL,aAAa;CACF;CACX,GAAI,uBAAuB,IAAI;CAC/B,GAAI;CAEH;AACS,CAAA,EAEN,CAAA"}
+{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\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 = ({\n  ref,\n  children,\n  href,\n  disabled,\n  className,\n  variant = 'link',\n  reloadDocument,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n  disabled?: boolean\n  variant?: React.ComponentProps<typeof StyledLink>['elementType']\n  reloadDocument?: boolean\n  ref?: React.Ref<HTMLAnchorElement>\n}) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n  const RouterLink = routerLinkProps.as\n\n  return (\n    <ListItem>\n      {disabled ? (\n        <DisabledButton disabled className={className}>\n          {children}\n        </DisabledButton>\n      ) : RouterLink ? (\n        <StyledLink\n          href={href}\n          ref={ref}\n          elementType={variant}\n          className={className}\n          asChild\n          {...rest}\n        >\n          <RouterLink href={href}>{children}</RouterLink>\n        </StyledLink>\n      ) : (\n        <StyledLink\n          href={href}\n          ref={ref}\n          elementType={variant}\n          className={className}\n          {...getExternalAnchorProps(href)}\n          {...rest}\n        >\n          {children}\n        </StyledLink>\n      )}\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;CACF;CACA,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,KACA,UACA,MACA,UACA,WACA,UAAU,QACV,gBACA,GAAG,WAMC;CAEJ,MAAM,aADkB,mBAAmB,MAAM,EAAE,eAAe,CAC/C,CAAA,CAAgB;CAEnC,OACE,oBAAC,UAAD,EAAA,UACG,WACC,oBAAC,gBAAD;EAAgB,UAAA;EAAoB;EACjC;CACa,CAAA,IACd,aACF,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,SAAA;EACA,GAAI;YAEJ,oBAAC,YAAD;GAAkB;GAAO;EAAqB,CAAA;CACpC,CAAA,IAEZ,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,GAAI,uBAAuB,IAAI;EAC/B,GAAI;EAEH;CACS,CAAA,EAEN,CAAA;AAEd"}

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

@@ -2,11 +2,13 @@ import * as React from 'react';
 declare const StyledRoot: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-navigation-menu").NavigationMenuProps & React.RefAttributes<HTMLElement>>, unknown>;
 type NavigationVerticalProps = Omit<React.ComponentProps<typeof StyledRoot>, 'delayDuration' | 'skipDelayDuration' | 'defaultValue' | 'value' | 'onValueChange'>;
 export declare const NavigationMenuVertical: (({ children, ...rest }: NavigationVerticalProps) => React.JSX.Element) & {
-    Link: ({ as, href, children, ...rest }: {
+    Link: ({ as, href, children, reloadDocument, ...rest }: {
         size?: "lg" | "md" | undefined;
     } & {
         as?: never;
-    } & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "as" | "size">) => React.JSX.Element;
+    } & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "as" | "size"> & {
+        reloadDocument?: boolean;
+    }) => React.JSX.Element;
     Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
         key?: React.Key | null | undefined;
         ref?: React.Ref<HTMLLIElement> | undefined;

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 declare const StyledNavigationMenuVerticalLink: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
     size?: "lg" | "md" | undefined;
 }>;
-type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink>;
-export declare const NavigationMenuVerticalLink: ({ as, href, children, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
+type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink> & {
+    reloadDocument?: boolean;
+};
+export declare const NavigationMenuVerticalLink: ({ as, href, children, reloadDocument, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
 import { getExternalAnchorProps } from "../../utilities/uri/index.js";
+import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
 import { preventEvent } from "../../utilities/event/preventEvent.js";
 import { NavigationMenuVerticalItem } from "./NavigationMenuVerticalItem.js";
 import { navigationMenuVerticalItemStyles } from "./NavigationMenuVertical.styles.js";
@@ -15,9 +16,10 @@ var StyledNavigationMenuVerticalLink = styled(Link, {
 		lg: ["min-h-12"]
 	} }
 });
-var NavigationMenuVerticalLink = ({ as, href, children, ...rest }) => {
-	const Component = as || (href ? "a" : "button");
-	const componentProps = as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
+var NavigationMenuVerticalLink = ({ as, href, children, reloadDocument, ...rest }) => {
+	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
+	const Component = as || routerLinkProps.as || (href ? "a" : "button");
+	const componentProps = as || routerLinkProps.as ? {} : href ? getExternalAnchorProps(href) : { type: "button" };
 	return /* @__PURE__ */ jsx(NavigationMenuVerticalItem, { children: /* @__PURE__ */ jsx(StyledNavigationMenuVerticalLink, {
 		size: "lg",
 		href,

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalLink.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalLink = styled(Link, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\ntype NavigationMenuVerticalItemProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalLink\n>\n\nexport const NavigationMenuVerticalLink = ({\n  as,\n  href,\n  children,\n  ...rest\n}: NavigationMenuVerticalItemProps) => {\n  const Component = (as || (href ? 'a' : 'button')) as React.ElementType\n  const componentProps = as\n    ? {}\n    : href\n      ? getExternalAnchorProps(href)\n      : { type: 'button' }\n\n  return (\n    <NavigationMenuVerticalItem>\n      <StyledNavigationMenuVerticalLink\n        size=\"lg\"\n        href={href}\n        {...rest}\n        {...componentProps}\n        onSelect={preventEvent}\n        asChild // ?: Can't use `as` for this as we lose `data-active` etc. attributes when we try to. Using `asChild` and `Component` as a workaround.\n      >\n        <Component>\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n        </Component>\n      </StyledNavigationMenuVerticalLink>\n    </NavigationMenuVerticalItem>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;CACjB,EACF;AACF,CAAC;AAMD,IAAa,8BAA8B,EACzC,IACA,MACA,UACA,GAAG,WACkC;CACrC,MAAM,YAAa,OAAO,OAAO,MAAM;CACvC,MAAM,iBAAiB,KACnB,CAAC,IACD,OACE,uBAAuB,IAAI,IAC3B,EAAE,MAAM,SAAS;CAEvB,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,kCAAD;EACE,MAAK;EACC;EACN,GAAI;EACJ,GAAI;EACJ,UAAU;EACV,SAAA;YAEA,oBAAC,WAAD,EAAA,UACE,oBAAC,mCAAD,EACG,SACgC,CAAA,EAC1B,CAAA;CACqB,CAAA,EACR,CAAA;AAEhC"}
+{"version":3,"file":"NavigationMenuVerticalLink.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalLink.tsx"],"sourcesContent":["import { Link } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { preventEvent } from '../../utilities/event/preventEvent'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalLink = styled(Link, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\ntype NavigationMenuVerticalItemProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalLink\n> & { reloadDocument?: boolean }\n\nexport const NavigationMenuVerticalLink = ({\n  as,\n  href,\n  children,\n  reloadDocument,\n  ...rest\n}: NavigationMenuVerticalItemProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n  const Component = as || routerLinkProps.as || (href ? 'a' : 'button')\n  const componentProps =\n    as || routerLinkProps.as\n      ? {}\n      : href\n        ? getExternalAnchorProps(href)\n        : { type: 'button' }\n\n  return (\n    <NavigationMenuVerticalItem>\n      <StyledNavigationMenuVerticalLink\n        size=\"lg\"\n        href={href}\n        {...rest}\n        {...componentProps}\n        onSelect={preventEvent}\n        asChild // ?: Can't use `as` for this as we lose `data-active` etc. attributes when we try to. Using `asChild` and `Component` as a workaround.\n      >\n        <Component>\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n        </Component>\n      </StyledNavigationMenuVerticalLink>\n    </NavigationMenuVerticalItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,mCAAmC,OAAO,MAAM;CACpD,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;CACjB,EACF;AACF,CAAC;AAMD,IAAa,8BAA8B,EACzC,IACA,MACA,UACA,gBACA,GAAG,WACkC;CACrC,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CACnE,MAAM,YAAY,MAAM,gBAAgB,OAAO,OAAO,MAAM;CAC5D,MAAM,iBACJ,MAAM,gBAAgB,KAClB,CAAC,IACD,OACE,uBAAuB,IAAI,IAC3B,EAAE,MAAM,SAAS;CAEzB,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,kCAAD;EACE,MAAK;EACC;EACN,GAAI;EACJ,GAAI;EACJ,UAAU;EACV,SAAA;YAEA,oBAAC,WAAD,EAAA,UACE,oBAAC,mCAAD,EACG,SACgC,CAAA,EAC1B,CAAA;CACqB,CAAA,EACR,CAAA;AAEhC"}

package/dist/components/number-input/NumberInputStepper.d.ts

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import { ActionIcon } from '../action-icon/ActionIcon';
-declare const StyledStepperButton: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+declare const StyledStepperButton: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
     theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
     as?: React.ElementType;
     children: React.ReactNode;
+    href?: string;
     label: string;
-} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, {
+    reloadDocument?: boolean;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, {
     fieldAppearance?: "modern" | "standard" | undefined;
     fieldTheme?: "grey" | "white" | undefined;
     emphasis?: "bold" | undefined;

package/dist/components/pagination/PaginationItems.js

@@ -9,9 +9,9 @@ import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/components/pagination/PaginationItems.tsx
 var PaginationItems = () => {
 	const { paginationItems } = usePagination();
-	return /* @__PURE__ */ jsx(Fragment, { children: paginationItems.map((paginationItem, i) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: paginationItems.map((paginationItem) => {
 		switch (paginationItem) {
-			case VIEW_ALL_POPOVER: return /* @__PURE__ */ jsx(PaginationPopover, {}, paginationItem + i);
+			case VIEW_ALL_POPOVER: return /* @__PURE__ */ jsx(PaginationPopover, {}, paginationItem);
 			case GO_TO_PREVIOUS_PAGE: return /* @__PURE__ */ jsx(PaginationPreviousButton, {}, paginationItem);
 			case GO_TO_NEXT_PAGE: return /* @__PURE__ */ jsx(PaginationNextButton, {}, paginationItem);
 			default: return /* @__PURE__ */ jsx(PaginationPage, { pageNumber: paginationItem }, paginationItem);

package/dist/components/pagination/PaginationItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = () => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem, i) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem + i} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,wBAAwB;CACnC,MAAM,EAAE,oBAAoB,cAAc;CAE1C,OACE,oBAAA,UAAA,EAAA,UACG,gBAAgB,KAAK,gBAAgB,MAAM;EAC1C,QAAQ,gBAAR;GACE,KAAK,kBACH,OAAO,oBAAC,mBAAD,CAA6C,GAArB,iBAAiB,CAAI;GACtD,KAAK,qBACH,OAAO,oBAAC,0BAAD,CAAgD,GAAjB,cAAiB;GACzD,KAAK,iBACH,OAAO,oBAAC,sBAAD,CAA4C,GAAjB,cAAiB;GACrD,SACE,OACE,oBAAC,gBAAD,EAEE,YAAY,eACb,GAFM,cAEN;EAEP;CACF,CAAC,EACD,CAAA;AAEN"}
+{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = () => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,wBAAwB;CACnC,MAAM,EAAE,oBAAoB,cAAc;CAE1C,OACE,oBAAA,UAAA,EAAA,UACG,gBAAgB,KAAK,mBAAmB;EACvC,QAAQ,gBAAR;GACE,KAAK,kBACH,OAAO,oBAAC,mBAAD,CAAyC,GAAjB,cAAiB;GAClD,KAAK,qBACH,OAAO,oBAAC,0BAAD,CAAgD,GAAjB,cAAiB;GACzD,KAAK,iBACH,OAAO,oBAAC,sBAAD,CAA4C,GAAjB,cAAiB;GACrD,SACE,OACE,oBAAC,gBAAD,EAEE,YAAY,eACb,GAFM,cAEN;EAEP;CACF,CAAC,EACD,CAAA;AAEN"}

package/dist/components/pagination/PaginationNextButton.d.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';
-declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
     theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
     as?: React.ElementType;
     children: React.ReactNode;
+    href?: string;
     label: string;
-} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, unknown>;
+    reloadDocument?: boolean;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, unknown>;
 export declare const PaginationNextButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;
 export {};

package/dist/components/pagination/PaginationPreviousButton.d.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';
-declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
+declare const StyledActionIcon: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
     theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "tooltipSide" | keyof import("../..").NavigatorActions> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
     as?: React.ElementType;
     children: React.ReactNode;
+    href?: string;
     label: string;
-} & Omit<import("../..").OptionalTooltipWrapperProps, "label"> & import("../..").NavigatorActions) => React.JSX.Element, unknown>;
+    reloadDocument?: boolean;
+} & Omit<import("../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, unknown>;
 export declare const PaginationPreviousButton: (props: Partial<React.ComponentProps<typeof StyledActionIcon>>) => React.JSX.Element;
 export {};

package/dist/components/pagination/pagination.helper.js

@@ -29,7 +29,7 @@ var getPaginationElementsToRender = (currentPage, pagesCount, visibleElementsCou
 	if (canFitViewAllPopover) visiblePagesCount -= 1;
 	if (canFitEdgePage) visiblePagesCount -= 1;
 	const firstPage = paginationPages[0];
-	const lastPage = paginationPages[paginationPages.length - 1];
+	const lastPage = paginationPages.at(-1);
 	/**
 	* If we're truncating and current page is at the start of the page list,
 	* render the initial truncated page list, e.g.
@@ -104,14 +104,16 @@ var getPaginationElementsToRender = (currentPage, pagesCount, visibleElementsCou
 };
 var findNextAvailablePage = (startPage, disabledPages, pagesCount) => {
 	if (startPage > pagesCount) return;
+	const disabledSet = new Set(disabledPages);
 	let nextPage = startPage;
-	while (disabledPages.includes(nextPage)) nextPage++;
+	while (disabledSet.has(nextPage)) nextPage++;
 	return nextPage;
 };
 var findPreviousAvailablePage = (startPage, disabledPages) => {
 	if (startPage < 1) return;
+	const disabledSet = new Set(disabledPages);
 	let previousPage = startPage;
-	while (disabledPages.includes(previousPage)) previousPage--;
+	while (disabledSet.has(previousPage)) previousPage--;
 	return previousPage;
 };
 //#endregion

package/dist/components/pagination/pagination.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.helper.js","names":[],"sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport type { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  visibleElementsCount: number\n): PaginationItemsToRender => {\n  const paginationPages = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  /*\n   * As we always show the `<` `>` arrows,\n   * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n   * to get the `visiblePagesCount`\n   */\n  let visiblePagesCount = visibleElementsCount - 2\n  const withPreviousNextPageArrows = (paginationPages) => [\n    GO_TO_PREVIOUS_PAGE,\n    ...paginationPages,\n    GO_TO_NEXT_PAGE\n  ]\n\n  /**\n   * If fewer pages than threshold for truncating render them all.\n   *\n   * pagesCount: 6\n   * visibleElementsCount: >=6\n   * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (pagesCount <= visiblePagesCount) {\n    return withPreviousNextPageArrows(paginationPages)\n  }\n\n  /**\n   * If current page is either at the very start or at the very end of the pages\n   */\n  const canFitEdgePage = visibleElementsCount >= 5\n  const canFitViewAllPopover = visibleElementsCount >= 4\n  const canFitPages = visibleElementsCount >= 3\n\n  if (canFitViewAllPopover) {\n    // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n    visiblePagesCount -= 1\n  }\n\n  if (canFitEdgePage) {\n    // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n    visiblePagesCount -= 1\n  }\n\n  const firstPage = paginationPages[0]\n  const lastPage = paginationPages[paginationPages.length - 1]\n\n  /**\n   * If we're truncating and current page is at the start of the page list,\n   * render the initial truncated page list, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 1/2\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage < visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitPages) {\n      newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitEdgePage) {\n      newPaginationItems.push(lastPage)\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page is towards the end of the\n   * page list (depending on visibleElementsCount),\n   * render a truncated page list from the end, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 7/8\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage > pagesCount - visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitEdgePage) {\n      newPaginationItems.push(firstPage)\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitPages) {\n      newPaginationItems.push(\n        ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n      )\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page doesn't meet any of the previous conditions\n   * (we're in the middle)\n   * render a truncated page list from a specific index relative to `currentPage`, e.g.\n   *\n   *  currentPage: 4\n   *  visibleElementsCount: 6 // VisibleElementsAmount.LESS\n   *  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   *  currentPage: 6\n   *  visibleElementsCount: 8 // VisibleElementsAmount.MORE\n   *  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   */\n  const canFitCurrentPage = canFitPages\n  const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n  const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n  const canFitLastPage = canFitEdgePage\n\n  const newPaginationItems = [] as PaginationItemsToRender\n  if (canFitCurrentPageAndPreviousPageAndNextPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(\n        currentPage + 1 - visiblePagesCount,\n        currentPage + 1\n      )\n    )\n  } else if (canFitCurrentPageAndPreviousPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n    )\n  } else if (canFitCurrentPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n    )\n  }\n  if (canFitViewAllPopover) {\n    newPaginationItems.push(VIEW_ALL_POPOVER)\n  }\n  if (canFitLastPage) {\n    newPaginationItems.push(lastPage)\n  }\n  return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[],\n  pagesCount: number\n): number | undefined => {\n  if (startPage > pagesCount) return\n  let nextPage = startPage\n  while (disabledPages.includes(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number | undefined => {\n  if (startPage < 1) return\n  let previousPage = startPage\n  while (disabledPages.includes(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,WAAW,IACpB,GAAG,UAAU,QAAQ,CACxB;CAOA,IAAI,oBAAoB,uBAAuB;CAC/C,MAAM,8BAA8B,oBAAoB;EACtD;EACA,GAAG;EACH;CACF;;;;;;;;;;;;CAaA,IAAI,cAAc,mBAChB,OAAO,2BAA2B,eAAe;;;;CAMnD,MAAM,iBAAiB,wBAAwB;CAC/C,MAAM,uBAAuB,wBAAwB;CACrD,MAAM,cAAc,wBAAwB;CAE5C,IAAI,sBAEF,qBAAqB;CAGvB,IAAI,gBAEF,qBAAqB;CAGvB,MAAM,YAAY,gBAAgB;CAClC,MAAM,WAAW,gBAAgB,gBAAgB,SAAS;;;;;;;;;;;;;;CAe1D,IAAI,cAAc,mBAAmB;EACnC,MAAM,qBAAqB,CAAC;EAC5B,IAAI,aACF,mBAAmB,KAAK,GAAG,gBAAgB,MAAM,GAAG,iBAAiB,CAAC;EAExE,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;EAE1C,IAAI,gBACF,mBAAmB,KAAK,QAAQ;EAElC,OAAO,2BAA2B,kBAAkB;CACtD;;;;;;;;;;;;;;;CAgBA,IAAI,cAAc,aAAa,mBAAmB;EAChD,MAAM,qBAAqB,CAAC;EAC5B,IAAI,gBACF,mBAAmB,KAAK,SAAS;EAEnC,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;EAE1C,IAAI,aACF,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,aAAa,mBAAmB,UAAU,CACrE;EAEF,OAAO,2BAA2B,kBAAkB;CACtD;;;;;;;;;;;;;;;;;;;;CAqBA,MAAM,oBAAoB;CAC1B,MAAM,mCAAmC,wBAAwB;CACjE,MAAM,8CAA8C,wBAAwB;CAC5E,MAAM,iBAAiB;CAEvB,MAAM,qBAAqB,CAAC;CAC5B,IAAI,6CACF,mBAAmB,KACjB,GAAG,gBAAgB,MACjB,cAAc,IAAI,mBAClB,cAAc,CAChB,CACF;MACK,IAAI,kCACT,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,mBAAmB,WAAW,CACvE;MACK,IAAI,mBACT,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,GAAG,cAAc,IAAI,CAAC,CAC/D;CAEF,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;CAE1C,IAAI,gBACF,mBAAmB,KAAK,QAAQ;CAElC,OAAO,2BAA2B,kBAAkB;AACtD;AAEA,IAAa,yBACX,WACA,eACA,eACuB;CACvB,IAAI,YAAY,YAAY;CAC5B,IAAI,WAAW;CACf,OAAO,cAAc,SAAS,QAAQ,GACpC;CAEF,OAAO;AACT;AAEA,IAAa,6BACX,WACA,kBACuB;CACvB,IAAI,YAAY,GAAG;CACnB,IAAI,eAAe;CACnB,OAAO,cAAc,SAAS,YAAY,GACxC;CAEF,OAAO;AACT"}
+{"version":3,"file":"pagination.helper.js","names":[],"sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport type { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  visibleElementsCount: number\n): PaginationItemsToRender => {\n  const paginationPages = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  /*\n   * As we always show the `<` `>` arrows,\n   * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n   * to get the `visiblePagesCount`\n   */\n  let visiblePagesCount = visibleElementsCount - 2\n  const withPreviousNextPageArrows = (paginationPages) => [\n    GO_TO_PREVIOUS_PAGE,\n    ...paginationPages,\n    GO_TO_NEXT_PAGE\n  ]\n\n  /**\n   * If fewer pages than threshold for truncating render them all.\n   *\n   * pagesCount: 6\n   * visibleElementsCount: >=6\n   * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (pagesCount <= visiblePagesCount) {\n    return withPreviousNextPageArrows(paginationPages)\n  }\n\n  /**\n   * If current page is either at the very start or at the very end of the pages\n   */\n  const canFitEdgePage = visibleElementsCount >= 5\n  const canFitViewAllPopover = visibleElementsCount >= 4\n  const canFitPages = visibleElementsCount >= 3\n\n  if (canFitViewAllPopover) {\n    // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n    visiblePagesCount -= 1\n  }\n\n  if (canFitEdgePage) {\n    // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n    visiblePagesCount -= 1\n  }\n\n  const firstPage = paginationPages[0]\n  // Non-null: this line is only reached when pagesCount exceeds the visible\n  // threshold, so paginationPages always has a last element. `.at()` widens to\n  // `T | undefined`, which the index access it replaced did not.\n  const lastPage = paginationPages.at(-1)!\n\n  /**\n   * If we're truncating and current page is at the start of the page list,\n   * render the initial truncated page list, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 1/2\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage < visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitPages) {\n      newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitEdgePage) {\n      newPaginationItems.push(lastPage)\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page is towards the end of the\n   * page list (depending on visibleElementsCount),\n   * render a truncated page list from the end, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 7/8\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage > pagesCount - visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitEdgePage) {\n      newPaginationItems.push(firstPage)\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitPages) {\n      newPaginationItems.push(\n        ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n      )\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page doesn't meet any of the previous conditions\n   * (we're in the middle)\n   * render a truncated page list from a specific index relative to `currentPage`, e.g.\n   *\n   *  currentPage: 4\n   *  visibleElementsCount: 6 // VisibleElementsAmount.LESS\n   *  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   *  currentPage: 6\n   *  visibleElementsCount: 8 // VisibleElementsAmount.MORE\n   *  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   */\n  const canFitCurrentPage = canFitPages\n  const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n  const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n  const canFitLastPage = canFitEdgePage\n\n  const newPaginationItems = [] as PaginationItemsToRender\n  if (canFitCurrentPageAndPreviousPageAndNextPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(\n        currentPage + 1 - visiblePagesCount,\n        currentPage + 1\n      )\n    )\n  } else if (canFitCurrentPageAndPreviousPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n    )\n  } else if (canFitCurrentPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n    )\n  }\n  if (canFitViewAllPopover) {\n    newPaginationItems.push(VIEW_ALL_POPOVER)\n  }\n  if (canFitLastPage) {\n    newPaginationItems.push(lastPage)\n  }\n  return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[],\n  pagesCount: number\n): number | undefined => {\n  if (startPage > pagesCount) return\n  const disabledSet = new Set(disabledPages)\n  let nextPage = startPage\n  while (disabledSet.has(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number | undefined => {\n  if (startPage < 1) return\n  const disabledSet = new Set(disabledPages)\n  let previousPage = startPage\n  while (disabledSet.has(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,WAAW,IACpB,GAAG,UAAU,QAAQ,CACxB;CAOA,IAAI,oBAAoB,uBAAuB;CAC/C,MAAM,8BAA8B,oBAAoB;EACtD;EACA,GAAG;EACH;CACF;;;;;;;;;;;;CAaA,IAAI,cAAc,mBAChB,OAAO,2BAA2B,eAAe;;;;CAMnD,MAAM,iBAAiB,wBAAwB;CAC/C,MAAM,uBAAuB,wBAAwB;CACrD,MAAM,cAAc,wBAAwB;CAE5C,IAAI,sBAEF,qBAAqB;CAGvB,IAAI,gBAEF,qBAAqB;CAGvB,MAAM,YAAY,gBAAgB;CAIlC,MAAM,WAAW,gBAAgB,GAAG,EAAE;;;;;;;;;;;;;;CAetC,IAAI,cAAc,mBAAmB;EACnC,MAAM,qBAAqB,CAAC;EAC5B,IAAI,aACF,mBAAmB,KAAK,GAAG,gBAAgB,MAAM,GAAG,iBAAiB,CAAC;EAExE,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;EAE1C,IAAI,gBACF,mBAAmB,KAAK,QAAQ;EAElC,OAAO,2BAA2B,kBAAkB;CACtD;;;;;;;;;;;;;;;CAgBA,IAAI,cAAc,aAAa,mBAAmB;EAChD,MAAM,qBAAqB,CAAC;EAC5B,IAAI,gBACF,mBAAmB,KAAK,SAAS;EAEnC,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;EAE1C,IAAI,aACF,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,aAAa,mBAAmB,UAAU,CACrE;EAEF,OAAO,2BAA2B,kBAAkB;CACtD;;;;;;;;;;;;;;;;;;;;CAqBA,MAAM,oBAAoB;CAC1B,MAAM,mCAAmC,wBAAwB;CACjE,MAAM,8CAA8C,wBAAwB;CAC5E,MAAM,iBAAiB;CAEvB,MAAM,qBAAqB,CAAC;CAC5B,IAAI,6CACF,mBAAmB,KACjB,GAAG,gBAAgB,MACjB,cAAc,IAAI,mBAClB,cAAc,CAChB,CACF;MACK,IAAI,kCACT,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,mBAAmB,WAAW,CACvE;MACK,IAAI,mBACT,mBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,GAAG,cAAc,IAAI,CAAC,CAC/D;CAEF,IAAI,sBACF,mBAAmB,KAAK,gBAAgB;CAE1C,IAAI,gBACF,mBAAmB,KAAK,QAAQ;CAElC,OAAO,2BAA2B,kBAAkB;AACtD;AAEA,IAAa,yBACX,WACA,eACA,eACuB;CACvB,IAAI,YAAY,YAAY;CAC5B,MAAM,cAAc,IAAI,IAAI,aAAa;CACzC,IAAI,WAAW;CACf,OAAO,YAAY,IAAI,QAAQ,GAC7B;CAEF,OAAO;AACT;AAEA,IAAa,6BACX,WACA,kBACuB;CACvB,IAAI,YAAY,GAAG;CACnB,MAAM,cAAc,IAAI,IAAI,aAAa;CACzC,IAAI,eAAe;CACnB,OAAO,YAAY,IAAI,YAAY,GACjC;CAEF,OAAO;AACT"}

package/dist/components/router-provider/Router.d.ts

@@ -0,0 +1,9 @@
+export declare const Router: {
+    Provider: {
+        ({ link, children }: {
+            link: import("react").ComponentClass<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, any> | import("react").FunctionComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
+            children: React.ReactNode;
+        }): import("react").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/router-provider/Router.js

@@ -0,0 +1,7 @@
+import { RouterProvider } from "./RouterProvider.js";
+//#region src/components/router-provider/Router.ts
+var Router = { Provider: RouterProvider };
+//#endregion
+export { Router };
+
+//# sourceMappingURL=Router.js.map

package/dist/components/router-provider/Router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.js","names":[],"sources":["../../../src/components/router-provider/Router.ts"],"sourcesContent":["import { RouterProvider } from './RouterProvider'\n\n// The router integration lives under the `Router` name; there is no root\n// component to render, only the context provider. This compound must live in\n// its own module, not the components barrel — a value declared in the barrel\n// forces the root barrel's `export *` to pull the whole barrel (all components)\n// into the eager entry chunk instead of resolving each export to its individual\n// module.\nexport const Router = { Provider: RouterProvider }\n"],"mappings":";;AAQA,IAAa,SAAS,EAAE,UAAU,eAAe"}

package/dist/components/router-provider/RouterProvider.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+type LinkComponent = React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+type RouterProviderProps = {
+    link: LinkComponent;
+    children: React.ReactNode;
+};
+export declare function RouterProvider({ link, children }: RouterProviderProps): React.JSX.Element;
+export declare namespace RouterProvider {
+    var displayName: string;
+}
+export declare const useRouterLinkProps: (href?: string, { reloadDocument }?: {
+    reloadDocument?: boolean;
+}) => {
+    as?: React.ElementType;
+};
+export {};

package/dist/components/router-provider/RouterProvider.js

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/router-provider/RouterProvider.tsx
+var RouterContext = React$1.createContext({});
+var RouterProvider = ({ link, children }) => {
+	const value = React$1.useMemo(() => ({ link }), [link]);
+	return /* @__PURE__ */ jsx(RouterContext.Provider, {
+		value,
+		children
+	});
+};
+var isAbsoluteUrl = (url) => /^https?:\/\//.test(url || "");
+var EMPTY = {};
+var useRouterLinkProps = (href, { reloadDocument } = {}) => {
+	const { link } = React$1.useContext(RouterContext);
+	if (!link || !href || isAbsoluteUrl(href) || reloadDocument) return EMPTY;
+	return { as: link };
+};
+RouterProvider.displayName = "Router.Provider";
+//#endregion
+export { RouterProvider, useRouterLinkProps };
+
+//# sourceMappingURL=RouterProvider.js.map

package/dist/components/router-provider/RouterProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterProvider.js","names":[],"sources":["../../../src/components/router-provider/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype LinkComponent = React.ComponentType<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>\n\ntype RouterContextValue = {\n  link?: LinkComponent\n}\n\nconst RouterContext = React.createContext<RouterContextValue>({})\n\ntype RouterProviderProps = {\n  link: LinkComponent\n  children: React.ReactNode\n}\n\nexport const RouterProvider = ({ link, children }: RouterProviderProps) => {\n  const value = React.useMemo<RouterContextValue>(() => ({ link }), [link])\n  return (\n    <RouterContext.Provider value={value}>{children}</RouterContext.Provider>\n  )\n}\n\nconst isAbsoluteUrl = (url?: string) => /^https?:\\/\\//.test(url || '')\n\n// `as` is surfaced as the broad `React.ElementType` (not the narrower\n// `LinkComponent`) so it feeds straight into styled()'s polymorphic `as` prop:\n// a concrete component type makes TS infer element-specific props and reject the\n// call, whereas `ElementType` lets inference land on the polymorphic signature.\nconst EMPTY: { as?: React.ElementType } = {}\n\nexport const useRouterLinkProps = (\n  href?: string,\n  { reloadDocument }: { reloadDocument?: boolean } = {}\n): { as?: React.ElementType } => {\n  const { link } = React.useContext(RouterContext)\n\n  if (!link || !href || isAbsoluteUrl(href) || reloadDocument) {\n    return EMPTY\n  }\n\n  return { as: link }\n}\n\nRouterProvider.displayName = 'Router.Provider'\n"],"mappings":";;;AAUA,IAAM,gBAAgB,QAAM,cAAkC,CAAC,CAAC;AAOhE,IAAa,kBAAkB,EAAE,MAAM,eAAoC;CACzE,MAAM,QAAQ,QAAM,eAAmC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;CACxE,OACE,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AAE5E;AAEA,IAAM,iBAAiB,QAAiB,eAAe,KAAK,OAAO,EAAE;AAMrE,IAAM,QAAoC,CAAC;AAE3C,IAAa,sBACX,MACA,EAAE,mBAAiD,CAAC,MACrB;CAC/B,MAAM,EAAE,SAAS,QAAM,WAAW,aAAa;CAE/C,IAAI,CAAC,QAAQ,CAAC,QAAQ,cAAc,IAAI,KAAK,gBAC3C,OAAO;CAGT,OAAO,EAAE,IAAI,KAAK;AACpB;AAEA,eAAe,cAAc"}

package/dist/components/select-menu/SelectMenu.d.ts

@@ -1,21 +1,28 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuProps = Omit<AriaComponents.SelectProps<object>, 'className' | 'style' | 'children'> & {
     size?: 'sm' | 'md' | 'lg';
     theme?: 'white' | 'grey';
     state?: 'error';
+    className?: string;
+    children?: React.ReactNode;
 };
-export declare const SelectMenu: (({ size, theme, state, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
-    Trigger: ({ ref, placeholder, children, ...rest }: RadixSelect.SelectTriggerProps & React.RefAttributes<HTMLButtonElement> & {
+export declare const SelectMenu: (({ size, theme, state, className, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
+    Trigger: ({ ref, placeholder, children, ...rest }: Omit<AriaComponents.ButtonProps & React.RefAttributes<HTMLButtonElement>, "aria-label" | "aria-labelledby" | "children"> & {
         placeholder?: string;
+        children?: React.ReactNode;
     }) => React.JSX.Element;
-    Content: ({ ref, children, position, sideOffset, ...rest }: RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
-    Item: ({ ref, children, ...rest }: RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
-    Group: React.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Content: ({ ref, children, offset, ...rest }: Omit<AriaComponents.PopoverProps & React.RefAttributes<HTMLElement>, "children"> & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Item: ({ children, textValue, ...rest }: Omit<AriaComponents.ListBoxItemProps<object>, "children"> & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Group: <T>(props: AriaComponents.ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
     Label: {
-        ({ className, ...rest }: RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+        ({ className, ...rest }: AriaComponents.HeaderProps & React.RefAttributes<HTMLElement>): React.JSX.Element;
         displayName: string;
     };
-    Separator: import("../..").StyledComponent<React.ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>, unknown>;
+    Separator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, unknown>;
 };
 export {};

package/dist/components/select-menu/SelectMenu.js

@@ -1,3 +1,4 @@
+import { cn } from "../../styled.js";
 import { SelectMenuContext } from "./SelectMenu.context.js";
 import { SelectMenuContent } from "./SelectMenuContent.js";
 import { SelectMenuItem } from "./SelectMenuItem.js";
@@ -6,9 +7,9 @@ import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
 import { SelectMenuTrigger } from "./SelectMenuTrigger.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => {
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, className, children, ...rest }) => {
 	return /* @__PURE__ */ jsx(SelectMenuContext, {
 		value: React$1.useMemo(() => ({
 			size,
@@ -19,7 +20,8 @@ var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest })
 			theme,
 			state
 		]),
-		children: /* @__PURE__ */ jsx(RadixSelect.Root, {
+		children: /* @__PURE__ */ jsx(AriaComponents.Select, {
+			className: cn("w-full", className),
 			...rest,
 			children
 		})
@@ -29,7 +31,7 @@ var SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {
 	Trigger: SelectMenuTrigger,
 	Content: SelectMenuContent,
 	Item: SelectMenuItem,
-	Group: RadixSelect.Group,
+	Group: AriaComponents.ListBoxSection,
 	Label: SelectMenuLabel,
 	Separator: SelectMenuSeparator
 });

package/dist/components/select-menu/SelectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YACxB,oBAAC,YAAY,MAAb;GAAkB,GAAI;GAAO;EAA2B,CAAA;CACvC,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = Omit<\n  AriaComponents.SelectProps<object>,\n  'className' | 'style' | 'children'\n> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n  className?: string\n  children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  className,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      {/* w-full so the trigger fills its container even in flex/inline layouts\n          (react-aria wraps the trigger in an extra div). Consumers can override\n          the width — or anything else — via className, e.g. w-auto / w-64. */}\n      <AriaComponents.Select className={cn('w-full', className)} {...rest}>\n        {children}\n      </AriaComponents.Select>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: AriaComponents.ListBoxSection,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,WACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YAIxB,oBAAC,eAAe,QAAhB;GAAuB,WAAW,GAAG,UAAU,SAAS;GAAG,GAAI;GAC5D;EACoB,CAAA;CACN,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,eAAe;CACtB,OAAO;CACP,WAAW;AACb,CAAC"}

package/dist/components/select-menu/SelectMenuContent.d.ts

@@ -1,5 +1,7 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuContentProps = React.ComponentPropsWithRef<typeof RadixSelect.Content>;
-export declare const SelectMenuContent: ({ ref, children, position, sideOffset, ...rest }: SelectMenuContentProps) => React.JSX.Element;
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuContentProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Popover>, 'children'> & {
+    children?: React.ReactNode;
+};
+export declare const SelectMenuContent: ({ ref, children, offset, ...rest }: SelectMenuContentProps) => React.JSX.Element;
 export {};

package/dist/components/select-menu/SelectMenuContent.js

@@ -1,73 +1,32 @@
 import { styled } from "../../styled.js";
-import { Icon } from "../icon/Icon.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronUp } from "@atom-learning/icons";
-import * as RadixSelect from "@radix-ui/react-select";
+import { jsx } from "react/jsx-runtime";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuContent.tsx
-var Content = styled(RadixSelect.Content, {
-	base: [
-		"bg-white",
-		"rounded-md",
-		"shadow-lg",
-		"z-10",
-		"overflow-hidden",
-		"will-change-transform",
-		"will-change-opacity",
-		"[--slide-opacity-out:0]",
-		"data-[side=top]:[--slide-direction-out-y:-4px]",
-		"data-[side=right]:[--slide-direction-out-x:4px]",
-		"data-[side=bottom]:[--slide-direction-out-y:4px]",
-		"data-[side=left]:[--slide-direction-out-x:-4px]",
-		"motion-safe:data-[state=open]:animate-slide-direction-in",
-		"motion-safe:data-[state=closed]:animate-slide-direction-out"
-	],
-	variants: { position: {
-		popper: ["max-h-(--radix-select-content-available-height)", "min-w-(--radix-select-trigger-width)"],
-		"item-aligned": []
-	} }
-});
-var Viewport = styled(RadixSelect.Viewport, {
-	base: ["p-1", "w-full"],
-	variants: { position: {
-		popper: ["h-(--radix-select-content-available-height)"],
-		"item-aligned": []
-	} }
-});
-var ScrollUpButton = styled(RadixSelect.ScrollUpButton, { base: [
-	"flex",
-	"items-center",
-	"justify-center",
-	"h-6",
-	"cursor-default"
-] });
-var ScrollDownButton = styled(RadixSelect.ScrollDownButton, { base: [
-	"flex",
-	"items-center",
-	"justify-center",
-	"h-6",
-	"cursor-default"
-] });
-var SelectMenuContent = ({ ref, children, position = "popper", sideOffset = 4, ...rest }) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(Content, {
+var Content = styled(AriaComponents.Popover, { base: [
+	"bg-white",
+	"rounded-md",
+	"shadow-lg",
+	"z-10",
+	"overflow-hidden",
+	"will-change-transform",
+	"min-w-[var(--trigger-width)]",
+	"max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"
+] }, { enablePolymorphism: false });
+var Viewport = styled(AriaComponents.ListBox, { base: [
+	"max-h-[inherit]",
+	"w-full",
+	"overflow-auto",
+	"p-1",
+	"outline-none"
+] }, { enablePolymorphism: false });
+var SelectMenuContent = ({ ref, children, offset = 4, ...rest }) => /* @__PURE__ */ jsx(Content, {
 	ref,
-	position,
-	sideOffset,
+	offset,
+	containerPadding: 8,
 	...rest,
-	children: [
-		/* @__PURE__ */ jsx(ScrollUpButton, { children: /* @__PURE__ */ jsx(Icon, {
-			is: ChevronUp,
-			className: "text-grey-700 size-4"
-		}) }),
-		/* @__PURE__ */ jsx(Viewport, {
-			position,
-			children
-		}),
-		/* @__PURE__ */ jsx(ScrollDownButton, { children: /* @__PURE__ */ jsx(Icon, {
-			is: ChevronDown,
-			className: "text-grey-700 size-4"
-		}) })
-	]
-}) });
+	children: /* @__PURE__ */ jsx(Viewport, { children })
+});
 //#endregion
 export { SelectMenuContent };
 

package/dist/components/select-menu/SelectMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from '@atom-learning/icons'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nconst Content = styled(RadixSelect.Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'z-10',\n    'overflow-hidden',\n    'will-change-transform',\n    'will-change-opacity',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      popper: [\n        'max-h-(--radix-select-content-available-height)',\n        'min-w-(--radix-select-trigger-width)'\n      ],\n      'item-aligned': []\n    }\n  }\n})\n\nconst Viewport = styled(RadixSelect.Viewport, {\n  base: ['p-1', 'w-full'],\n  variants: {\n    position: {\n      popper: ['h-(--radix-select-content-available-height)'],\n      'item-aligned': []\n    }\n  }\n})\n\nconst ScrollUpButton = styled(RadixSelect.ScrollUpButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\nconst ScrollDownButton = styled(RadixSelect.ScrollDownButton, {\n  base: ['flex', 'items-center', 'justify-center', 'h-6', 'cursor-default']\n})\n\ntype SelectMenuContentProps = React.ComponentPropsWithRef<\n  typeof RadixSelect.Content\n>\n\nexport const SelectMenuContent = ({\n  ref,\n  children,\n  position = 'popper',\n  sideOffset = 4,\n  ...rest\n}: SelectMenuContentProps) => (\n  <RadixSelect.Portal>\n    <Content ref={ref} position={position} sideOffset={sideOffset} {...rest}>\n      <ScrollUpButton>\n        <Icon is={ChevronUp} className=\"text-grey-700 size-4\" />\n      </ScrollUpButton>\n      <Viewport position={position}>{children}</Viewport>\n      <ScrollDownButton>\n        <Icon is={ChevronDown} className=\"text-grey-700 size-4\" />\n      </ScrollDownButton>\n    </Content>\n  </RadixSelect.Portal>\n)\n"],"mappings":";;;;;;;AAOA,IAAM,UAAU,OAAO,YAAY,SAAS;CAC1C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,UAAU;EACR,QAAQ,CACN,mDACA,sCACF;EACA,gBAAgB,CAAC;CACnB,EACF;AACF,CAAC;AAED,IAAM,WAAW,OAAO,YAAY,UAAU;CAC5C,MAAM,CAAC,OAAO,QAAQ;CACtB,UAAU,EACR,UAAU;EACR,QAAQ,CAAC,6CAA6C;EACtD,gBAAgB,CAAC;CACnB,EACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,YAAY,gBAAgB,EACxD,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;AAAgB,EAC1E,CAAC;AAED,IAAM,mBAAmB,OAAO,YAAY,kBAAkB,EAC5D,MAAM;CAAC;CAAQ;CAAgB;CAAkB;CAAO;AAAgB,EAC1E,CAAC;AAMD,IAAa,qBAAqB,EAChC,KACA,UACA,WAAW,UACX,aAAa,GACb,GAAG,WAEH,oBAAC,YAAY,QAAb,EAAA,UACE,qBAAC,SAAD;CAAc;CAAe;CAAsB;CAAY,GAAI;WAAnE;EACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,MAAD;GAAM,IAAI;GAAW,WAAU;EAAwB,CAAA,EACzC,CAAA;EAChB,oBAAC,UAAD;GAAoB;GAAW;EAAmB,CAAA;EAClD,oBAAC,kBAAD,EAAA,UACE,oBAAC,MAAD;GAAM,IAAI;GAAa,WAAU;EAAwB,CAAA,EACzC,CAAA;CACX;GACS,CAAA"}
+{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nconst Content = styled(\n  AriaComponents.Popover,\n  {\n    base: [\n      'bg-white',\n      'rounded-md',\n      'shadow-lg',\n      'z-10',\n      'overflow-hidden',\n      'will-change-transform',\n      // Floors at the trigger width; caps at min(viewport − 8px per edge, 400px)\n      // on the --spacing() scale: --spacing(4)=16px (2×8px), --spacing(100)=400px.\n      'min-w-[var(--trigger-width)]',\n      'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n  AriaComponents.ListBox,\n  {\n    base: ['max-h-[inherit]', 'w-full', 'overflow-auto', 'p-1', 'outline-none']\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n  'children'\n> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuContent = ({\n  ref,\n  children,\n  offset = 4,\n  ...rest\n}: SelectMenuContentProps) => (\n  // offset/containerPadding are react-aria positioner props in px (JS numbers,\n  // not CSS), so they can't use the --spacing() scale: 4px gap from the trigger,\n  // 8px minimum inset from every viewport edge (the 2×8px behind the max-width).\n  <Content ref={ref} offset={offset} containerPadding={8} {...rest}>\n    <Viewport>{children}</Viewport>\n  </Content>\n)\n"],"mappings":";;;;;AAKA,IAAM,UAAU,OACd,eAAe,SACf,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,WAAW,OACf,eAAe,SACf,EACE,MAAM;CAAC;CAAmB;CAAU;CAAiB;CAAO;AAAc,EAC5E,GACA,EAAE,oBAAoB,MAAM,CAC9B;AASA,IAAa,qBAAqB,EAChC,KACA,UACA,SAAS,GACT,GAAG,WAKH,oBAAC,SAAD;CAAc;CAAa;CAAQ,kBAAkB;CAAG,GAAI;WAC1D,oBAAC,UAAD,EAAW,SAAmB,CAAA;AACvB,CAAA"}

package/dist/components/select-menu/SelectMenuItem.d.ts

@@ -1,5 +1,7 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuItemProps = React.ComponentPropsWithRef<typeof RadixSelect.Item>;
-export declare const SelectMenuItem: ({ ref, children, ...rest }: SelectMenuItemProps) => React.JSX.Element;
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {
+    children?: React.ReactNode;
+};
+export declare const SelectMenuItem: ({ children, textValue, ...rest }: SelectMenuItemProps) => React.JSX.Element;
 export {};