@atom-learning/components 10.0.1 → 10.1.0

package/dist/components/file-drop/FileDrop.js

@@ -29,12 +29,12 @@ var FileDrop = ({ children, accept, multiple, onDrop, ...rest }) => {
 	const handleDrop = (fileList) => {
 		if (!fileList) return;
 		setIsDragging(false);
-		const files = Array.from(fileList);
+		const files = [...fileList];
 		onDrop(files);
 		setFiles(files);
 	};
 	const handleKeyDown = (event) => {
-		if (["Space", "Enter"].includes(event.key)) fileUploadInputRef.current?.click();
+		if ("Space" === event.key || "Enter" === event.key) fileUploadInputRef.current?.click();
 	};
 	const value = React$1.useMemo(() => ({
 		isDragging,

package/dist/components/file-drop/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...rest\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  // Memoized: consumers otherwise re-render at drag-over event frequency.\n  const value = React.useMemo<FileDropContextValue>(\n    () => ({ isDragging, files }),\n    [isDragging, files]\n  )\n\n  return (\n    <FileDropContext value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,MAAM,KAAK,QAAQ;EACjC,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,GACvC,mBAAmB,SAAS,MAAM;CAEtC;CAGA,MAAM,QAAQ,QAAM,eACX;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,iBAAD;EAAwB;YACtB,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GACjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAXN,CAaG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACF,CAAA;AAErB;AAEA,SAAS,cAAc"}
+{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...rest\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = [...fileList]\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if ('Space' === event.key || 'Enter' === event.key) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  // Memoized: consumers otherwise re-render at drag-over event frequency.\n  const value = React.useMemo<FileDropContextValue>(\n    () => ({ isDragging, files }),\n    [isDragging, files]\n  )\n\n  return (\n    <FileDropContext value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        // A drop zone wraps a file input and arbitrary (possibly interactive)\n        // children, which a native <button> may not contain, so the button role\n        // lives on this container instead.\n        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,CAAC,GAAG,QAAQ;EAC1B,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,YAAY,MAAM,OAAO,YAAY,MAAM,KAC7C,mBAAmB,SAAS,MAAM;CAEtC;CAGA,MAAM,QAAQ,QAAM,eACX;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,iBAAD;EAAwB;YACtB,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GAKjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAfN,CAiBG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACF,CAAA;AAErB;AAEA,SAAS,cAAc"}

package/dist/components/form/useFieldError.js

@@ -1,9 +1,10 @@
 import { useFormContext } from "react-hook-form";
 import delve from "dlv";
 //#region src/components/form/useFieldError.ts
+var FIELD_PATH_SEPARATOR_RE = /[,[\].]+?/;
 var useFieldError = (fieldName) => {
 	const { errors } = useFormContext();
-	const fieldPath = fieldName.split(/[,[\].]+?/).filter(Boolean);
+	const fieldPath = fieldName.split(FIELD_PATH_SEPARATOR_RE).filter(Boolean);
 	const getErrors = () => delve(errors, fieldPath);
 	return { error: getErrors()?.message };
 };

package/dist/components/form/useFieldError.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFieldError.js","names":[],"sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(/[,[\\].]+?/).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"mappings":";;;AAGA,IAAa,iBAAiB,cAAsB;CAClD,MAAM,EAAE,WAAW,eAAe;CAGlC,MAAM,YAAY,UAAU,MAAM,WAAW,CAAC,CAAC,OAAO,OAAO;CAE7D,MAAM,kBAAkB,MAAM,QAAQ,SAAS;CAE/C,OAAO,EACL,OAAO,UAAU,CAAC,EAAE,QACtB;AACF"}
+{"version":3,"file":"useFieldError.js","names":[],"sources":["../../../src/components/form/useFieldError.ts"],"sourcesContent":["import delve from 'dlv'\nimport { useFormContext } from 'react-hook-form'\n\n// Splits react-hook-form field paths on their `,` `[` `]` `.` separators.\nconst FIELD_PATH_SEPARATOR_RE = /[,[\\].]+?/\n\nexport const useFieldError = (fieldName: string) => {\n  const { errors } = useFormContext()\n\n  // in case of migration to a newer version of react-hook-form the path needs to updated to account for dynamic fields naming convention\n  const fieldPath = fieldName.split(FIELD_PATH_SEPARATOR_RE).filter(Boolean)\n\n  const getErrors = () => delve(errors, fieldPath)\n\n  return {\n    error: getErrors()?.message\n  }\n}\n"],"mappings":";;;AAIA,IAAM,0BAA0B;AAEhC,IAAa,iBAAiB,cAAsB;CAClD,MAAM,EAAE,WAAW,eAAe;CAGlC,MAAM,YAAY,UAAU,MAAM,uBAAuB,CAAC,CAAC,OAAO,OAAO;CAEzE,MAAM,kBAAkB,MAAM,QAAQ,SAAS;CAE/C,OAAO,EACL,OAAO,UAAU,CAAC,EAAE,QACtB;AACF"}

package/dist/components/navigation/NavigationMenu.js

@@ -41,7 +41,7 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	}, [React$1.Children.toArray(children).length]);
 	React$1.useEffect(() => {
 		let timer;
-		if (activeItem === "") timer = setTimeout(() => setOffset(null), 200);
+		if (activeItem === "") timer = setTimeout(setOffset, 200, null);
 		return () => {
 			if (timer !== null) clearTimeout(timer);
 		};

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(setOffset, 200, null)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,WAAW,WAAW,KAAK,IAAI;EAGzC,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}

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/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/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 {};

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

@@ -2,11 +2,11 @@ import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
 import { useSelectMenuContext } from "./SelectMenu.context.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Ok } from "@atom-learning/icons";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuItem.tsx
-var Item = styled(RadixSelect.Item, {
+var Item = styled(AriaComponents.ListBoxItem, {
 	base: [
 		"relative",
 		"flex",
@@ -17,11 +17,11 @@ var Item = styled(RadixSelect.Item, {
 		"cursor-pointer",
 		"rounded-sm",
 		"outline-none",
-		"data-disabled:cursor-not-allowed",
-		"data-disabled:opacity-30",
-		"data-disabled:pointer-events-none",
-		"data-highlighted:bg-grey-100",
-		"data-highlighted:outline-none"
+		"data-[disabled]:cursor-not-allowed",
+		"data-[disabled]:opacity-30",
+		"data-[hovered]:bg-grey-100",
+		"data-[focused]:bg-grey-100",
+		"data-[focus-visible]:outline-none"
 	],
 	variants: { size: {
 		sm: [
@@ -41,20 +41,20 @@ var Item = styled(RadixSelect.Item, {
 			"pr-6"
 		]
 	} }
-});
-var SelectMenuItem = ({ ref, children, ...rest }) => {
+}, { enablePolymorphism: false });
+var SelectMenuItem = ({ children, textValue, ...rest }) => {
 	const { size } = useSelectMenuContext();
-	return /* @__PURE__ */ jsxs(Item, {
-		ref,
+	return /* @__PURE__ */ jsx(Item, {
 		size,
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
 		...rest,
-		children: [/* @__PURE__ */ jsx(RadixSelect.ItemIndicator, {
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute left-2 inline-flex items-center",
-			children: /* @__PURE__ */ jsx(Icon, {
+			children: isSelected && /* @__PURE__ */ jsx(Icon, {
 				is: Ok,
 				className: size === "sm" ? "size-3" : "size-4"
 			})
-		}), /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })]
+		}), children] })
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } 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'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(RadixSelect.Item, {\n  base: [\n    'relative',\n    'flex',\n    'items-center',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'cursor-pointer',\n    'rounded-sm',\n    'outline-none',\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-30',\n    'data-disabled:pointer-events-none',\n    'data-highlighted:bg-grey-100',\n    'data-highlighted:outline-none'\n  ],\n  variants: {\n    size: {\n      sm: ['py-1.5', 'pl-7', 'pr-4', 'text-sm'],\n      md: ['py-2', 'pl-8', 'pr-6'],\n      lg: ['py-2', 'pl-8', 'pr-6']\n    }\n  }\n})\n\ntype SelectMenuItemProps = React.ComponentPropsWithRef<typeof RadixSelect.Item>\n\nexport const SelectMenuItem = ({\n  ref,\n  children,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n\n  return (\n    <Item ref={ref} size={size} {...rest}>\n      <RadixSelect.ItemIndicator className=\"absolute left-2 inline-flex items-center\">\n        <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n      </RadixSelect.ItemIndicator>\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OAAO,YAAY,MAAM;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAQ;GAAQ;EAAS;EACxC,IAAI;GAAC;GAAQ;GAAQ;EAAM;EAC3B,IAAI;GAAC;GAAQ;GAAQ;EAAM;CAC7B,EACF;AACF,CAAC;AAID,IAAa,kBAAkB,EAC7B,KACA,UACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAEtC,OACE,qBAAC,MAAD;EAAW;EAAW;EAAM,GAAI;YAAhC,CACE,oBAAC,YAAY,eAAb;GAA2B,WAAU;aACnC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EACtC,CAAA,GAC3B,oBAAC,YAAY,UAAb,EAAuB,SAA+B,CAAA,CAClD;;AAEV"}
+{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n  AriaComponents.ListBoxItem,\n  {\n    base: [\n      'relative',\n      'flex',\n      'items-center',\n      'text-grey-1000',\n      'font-body',\n      'font-normal',\n      'cursor-pointer',\n      'rounded-sm',\n      'outline-none',\n      'data-[disabled]:cursor-not-allowed',\n      'data-[disabled]:opacity-30',\n      // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n      // whose :hover sticks after a tap on touchscreens (this menu targets\n      // webviews). data-focused covers keyboard navigation; together they\n      // replicate the old Radix data-highlighted.\n      'data-[hovered]:bg-grey-100',\n      'data-[focused]:bg-grey-100',\n      'data-[focus-visible]:outline-none'\n    ],\n    variants: {\n      size: {\n        sm: ['py-1.5', 'pl-7', 'pr-4', 'text-sm'],\n        md: ['py-2', 'pl-8', 'pr-6'],\n        lg: ['py-2', 'pl-8', 'pr-6']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n  children,\n  textValue,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n  const resolvedTextValue =\n    textValue ?? (typeof children === 'string' ? children : undefined)\n\n  return (\n    <Item size={size} textValue={resolvedTextValue} {...rest}>\n      {({ isSelected }) => (\n        <>\n          <span className=\"absolute left-2 inline-flex items-center\">\n            {isSelected && (\n              <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n            )}\n          </span>\n          {children}\n        </>\n      )}\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAQ;GAAQ;EAAS;EACxC,IAAI;GAAC;GAAQ;GAAQ;EAAM;EAC3B,IAAI;GAAC;GAAQ;GAAQ;EAAM;CAC7B,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAItC,OACE,oBAAC,MAAD;EAAY;EAAM,WAHlB,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EAGR,GAAI;aAChD,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}

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

@@ -1,6 +1,6 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>;
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>;
 export declare function SelectMenuLabel({ className, ...rest }: SelectMenuLabelProps): React.JSX.Element;
 export declare namespace SelectMenuLabel {
     var displayName: string;

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

@@ -2,10 +2,10 @@ import { cn } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import "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/SelectMenuLabel.tsx
 var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
-	as: RadixSelect.Label,
+	as: AriaComponents.Header,
 	size: "sm",
 	className: cn("p-2", "mb-1", "text-text-subtle", className),
 	...rest

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof RadixSelect.Label>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => (\n  <Text\n    as={RadixSelect.Label}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...rest}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI,YAAY;CAChB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,SAAS;CAC1D,GAAI;AACL,CAAA;AAGH,gBAAgB,cAAc"}
+{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => (\n  <Text\n    as={AriaComponents.Header}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...rest}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI,eAAe;CACnB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,SAAS;CAC1D,GAAI;AACL,CAAA;AAGH,gBAAgB,cAAc"}

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

@@ -1,2 +1,2 @@
-import * as RadixSelect from '@radix-ui/react-select';
-export declare const SelectMenuSeparator: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, unknown>;
+import * as AriaComponents from 'react-aria-components';
+export declare const SelectMenuSeparator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, unknown>;

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

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
-import * as RadixSelect from "@radix-ui/react-select";
+import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuSeparator.tsx
-var SelectMenuSeparator = styled(RadixSelect.Separator, { base: [
+var SelectMenuSeparator = styled(AriaComponents.Separator, { base: [
 	"h-px",
 	"bg-grey-200",
 	"my-2",

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\n\nimport { styled } from '../../styled'\n\nexport const SelectMenuSeparator = styled(\n  RadixSelect.Separator,\n  {\n    base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,YAAY,WACZ,EACE,MAAM;CAAC;CAAQ;CAAe;CAAQ;AAAM,EAC9C,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nexport const SelectMenuSeparator = styled(\n  AriaComponents.Separator,\n  {\n    base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,eAAe,WACf,EACE,MAAM;CAAC;CAAQ;CAAe;CAAQ;AAAM,EAC9C,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

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

@@ -1,7 +1,8 @@
-import * as RadixSelect from '@radix-ui/react-select';
 import * as React from 'react';
-type SelectMenuTriggerProps = React.ComponentPropsWithRef<typeof RadixSelect.Trigger> & {
+import * as AriaComponents from 'react-aria-components';
+type SelectMenuTriggerProps = Omit<React.ComponentPropsWithRef<typeof AriaComponents.Button>, 'children' | 'aria-label' | 'aria-labelledby'> & {
     placeholder?: string;
+    children?: React.ReactNode;
 };
 export declare const SelectMenuTrigger: ({ ref, placeholder, children, ...rest }: SelectMenuTriggerProps) => React.JSX.Element;
 export {};