@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.0

package/components/listbox/ActiveDescendantListbox.js

@@ -0,0 +1,74 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useCallback } from 'react';
+import { ListboxActionType } from './types.js';
+import { ListboxContext } from './context.js';
+import { useFocusOnList } from '../focus-within-group/useFocusOnList.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+
+const _excluded = ["children", "id", "isDisabled", "context"];
+const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _context$state$active;
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    activedescendant,
+    handleKeyDown: handleFocusKeyDown,
+    handleFocus,
+    handleBlur
+  } = useFocusOnList();
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        var _activedescendant$;
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
+            activedescendant
+          }
+        });
+      } else {
+        var _activedescendant$2;
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
+            activedescendant
+          }
+        });
+      }
+    }
+  }, [activedescendant]);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
+    "aria-multiselectable": context.state.selectionMode === 'multiple',
+    tabIndex: 0,
+    style: {
+      outline: 'none'
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseDown: event => event.preventDefault(),
+    onMouseLeave: handleBlur,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+export { ActiveDescendantListbox };
+//# sourceMappingURL=ActiveDescendantListbox.js.map

package/components/listbox/ActiveDescendantListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveDescendantListbox.js","sources":["../../../src/components/listbox/ActiveDescendantListbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, KeyboardEvent } from 'react';\nimport { ListboxActionType, ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\nimport { useFocusOnList } from '../focus-within-group';\n\nexport const ActiveDescendantListbox = forwardRef<\n  HTMLDivElement,\n  Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n  const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n  const { activedescendant, handleKeyDown: handleFocusKeyDown, handleFocus, handleBlur } = useFocusOnList();\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      handleFocusKeyDown(event);\n      const code = event.code;\n      if (code === 'Enter' || code === 'Space') {\n        if (context.state.selectionMode === 'multiple') {\n          context.dispatch({\n            type: ListboxActionType.TOGGLE,\n            payload: { value: activedescendant?.[1] ?? '', activedescendant },\n          });\n        } else {\n          context.dispatch({\n            type: ListboxActionType.SET,\n            payload: {\n              values: [activedescendant?.[1] ?? ''],\n              activedescendant,\n            },\n          });\n        }\n      }\n    },\n    [activedescendant]\n  );\n\n  return (\n    <Flexbox\n      flexDirection=\"column\"\n      gap=\"8px\"\n      {...forwardedProps}\n      aria-disabled={isDisabled}\n      ref={ref}\n      id={id}\n      role=\"listbox\"\n      aria-activedescendant={context.state.activedescendant?.[0]}\n      aria-multiselectable={context.state.selectionMode === 'multiple'}\n      tabIndex={0}\n      style={{ outline: 'none' }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={(event) => event.preventDefault()}\n      onMouseLeave={handleBlur}\n      onKeyDown={handleKeyDown}\n    >\n      <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n    </Flexbox>\n  );\n});\n"],"names":["ActiveDescendantListbox","forwardRef","props","ref","_context$state$active","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","activedescendant","handleKeyDown","handleFocusKeyDown","handleFocus","handleBlur","useFocusOnList","useCallback","event","code","state","selectionMode","_activedescendant$","dispatch","type","ListboxActionType","TOGGLE","payload","value","_activedescendant$2","SET","values","React","createElement","Flexbox","_extends","flexDirection","gap","role","tabIndex","style","outline","onFocus","onBlur","onMouseDown","preventDefault","onMouseLeave","onKeyDown","ListboxContext","Provider"],"mappings":"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"}

package/components/listbox/Listbox.d.ts

@@ -0,0 +1,10 @@
+import { ListboxProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The Listbox component.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const Listbox: Comp<ListboxProps, HTMLDivElement>;
+
+export { Listbox };

package/components/listbox/Listbox.js

@@ -0,0 +1,110 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useReducer, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { ListboxVariant, ListboxActionType } from './types.js';
+import { LISTBOX_INITIAL_STATE } from './context.js';
+import { StyledListbox } from './styles.js';
+import { ListboxReducer } from './reducer.js';
+import { RovingTabindexListbox } from './RovingTabindexListbox.js';
+import { ActiveDescendantListbox } from './ActiveDescendantListbox.js';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { FocusWithinGroup } from '../focus-within-group/FocusWithinGroup.js';
+import { useId } from '../../utils/useId.js';
+import { ConditionalWrapper } from '../conditional-wrapper/ConditionalWrapper.js';
+
+const _excluded = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
+const COMPONENT_NAME = 'Listbox';
+const CLASSNAME = 'redsift-listbox';
+
+/**
+ * The Listbox component.
+ * Can be used as controlled or uncontrolled.
+ */
+const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      direction,
+      focusOnClick = false,
+      focusType = 'roving-tabindex',
+      id: propsId,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      loopAround,
+      onChange,
+      selectionMode = 'single',
+      values,
+      variant = ListboxVariant.standalone
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
+    isDisabled,
+    isReadOnly,
+    selectedValues: values || defaultValues || [],
+    selectionMode
+  }));
+  useEffect(() => {
+    if (values && values.length >= 0) {
+      dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values
+        }
+      });
+    }
+  }, [values]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  useEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
+  }, [state.selectedValues]);
+  warnIfNoAccessibleLabelFound(props, [label]);
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends({
+      flexDirection: "column",
+      gap: "8px"
+    }, forwardedProps, {
+      $isDisabled: isDisabled,
+      $isInvalid: isInvalid || isRequired && state.selectedValues.length === 0,
+      $isReadOnly: isReadOnly,
+      className: classNames(Listbox.className, className),
+      ref: divRef,
+      id: id,
+      $variant: variant
+    }), children),
+    condition: variant === ListboxVariant.standalone
+  }, /*#__PURE__*/React__default.createElement(FocusWithinGroup, {
+    direction: direction,
+    focusOnClick: focusOnClick,
+    loopAround: loopAround,
+    focusType: focusType
+  }, label ? /*#__PURE__*/React__default.createElement("span", {
+    id: `${id}-label`,
+    className: `${Listbox.className}-label`
+  }, label, isRequired ? /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, ' *') : null) : null, focusType === 'roving-tabindex' ? /*#__PURE__*/React__default.createElement(RovingTabindexListbox, _extends({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children) : /*#__PURE__*/React__default.createElement(ActiveDescendantListbox, _extends({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children)));
+});
+Listbox.className = CLASSNAME;
+Listbox.displayName = COMPONENT_NAME;
+
+export { Listbox };
+//# sourceMappingURL=Listbox.js.map

package/components/listbox/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sources":["../../../src/components/listbox/Listbox.tsx"],"sourcesContent":["import React, { ComponentProps, forwardRef, RefObject, useEffect, useMemo, useReducer, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { ListboxActionType, ListboxContextProps, ListboxProps, ListboxState, ListboxVariant } from './types';\nimport { LISTBOX_INITIAL_STATE } from './context';\nimport { StyledListbox } from './styles';\nimport { ListboxReducer } from './reducer';\nimport { FocusWithinGroup } from '../focus-within-group';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { RovingTabindexListbox } from './RovingTabindexListbox';\nimport { ActiveDescendantListbox } from './ActiveDescendantListbox';\nimport { useId, warnIfNoAccessibleLabelFound } from '../../utils';\n\nconst COMPONENT_NAME = 'Listbox';\nconst CLASSNAME = 'redsift-listbox';\n\n/**\n * The Listbox component.\n * Can be used as controlled or uncontrolled.\n */\nexport const Listbox: Comp<ListboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    defaultValues,\n    direction,\n    focusOnClick = false,\n    focusType = 'roving-tabindex',\n    id: propsId,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    loopAround,\n    onChange,\n    selectionMode = 'single',\n    values,\n    variant = ListboxVariant.standalone,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n  const _ref = useRef<HTMLDivElement>();\n  const divRef = ref ?? _ref;\n\n  const [state, dispatch] = useReducer(ListboxReducer, {\n    ...LISTBOX_INITIAL_STATE,\n    isDisabled,\n    isReadOnly,\n    selectedValues: values || defaultValues || [],\n    selectionMode,\n  } as ListboxState);\n\n  useEffect(() => {\n    if (values && values.length >= 0) {\n      dispatch({\n        type: ListboxActionType.SET,\n        payload: {\n          values,\n        },\n      });\n    }\n  }, [values]);\n\n  const context = useMemo<ListboxContextProps>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state]\n  );\n\n  useEffect(() => {\n    onChange?.(state.selectedValues);\n  }, [state.selectedValues]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<keyof JSX.IntrinsicElements>, [label]);\n\n  return (\n    <ConditionalWrapper\n      wrapper={(children) => (\n        <StyledListbox\n          flexDirection=\"column\"\n          gap=\"8px\"\n          {...forwardedProps}\n          $isDisabled={isDisabled}\n          $isInvalid={isInvalid || (isRequired && state.selectedValues.length === 0)}\n          $isReadOnly={isReadOnly}\n          className={classNames(Listbox.className, className)}\n          ref={divRef as RefObject<HTMLDivElement>}\n          id={id}\n          $variant={variant}\n        >\n          {children}\n        </StyledListbox>\n      )}\n      condition={variant === ListboxVariant.standalone}\n    >\n      <FocusWithinGroup direction={direction} focusOnClick={focusOnClick} loopAround={loopAround} focusType={focusType}>\n        {label ? (\n          <span id={`${id}-label`} className={`${Listbox.className}-label`}>\n            {label}\n            {isRequired ? <span aria-hidden=\"true\">{' *'}</span> : null}\n          </span>\n        ) : null}\n        {focusType === 'roving-tabindex' ? (\n          <RovingTabindexListbox\n            {...forwardedProps}\n            className={`${Listbox.className}-list`}\n            context={context}\n            ref={divRef as RefObject<HTMLDivElement>}\n          >\n            {children}\n          </RovingTabindexListbox>\n        ) : (\n          <ActiveDescendantListbox\n            {...forwardedProps}\n            className={`${Listbox.className}-list`}\n            context={context}\n            ref={divRef as RefObject<HTMLDivElement>}\n          >\n            {children}\n          </ActiveDescendantListbox>\n        )}\n      </FocusWithinGroup>\n    </ConditionalWrapper>\n  );\n});\nListbox.className = CLASSNAME;\nListbox.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Listbox","forwardRef","props","ref","children","className","defaultValues","direction","focusOnClick","focusType","id","propsId","isDisabled","isInvalid","isReadOnly","isRequired","label","loopAround","onChange","selectionMode","values","variant","ListboxVariant","standalone","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","_ref","useRef","divRef","state","dispatch","useReducer","ListboxReducer","_objectSpread","LISTBOX_INITIAL_STATE","selectedValues","useEffect","length","type","ListboxActionType","SET","payload","context","useMemo","warnIfNoAccessibleLabelFound","React","createElement","ConditionalWrapper","wrapper","StyledListbox","_extends","flexDirection","gap","$isDisabled","$isInvalid","$isReadOnly","classNames","$variant","condition","FocusWithinGroup","RovingTabindexListbox","ActiveDescendantListbox","displayName"],"mappings":"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"}

package/components/listbox/RovingTabindexListbox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ListboxProps, ListboxContextProps } from './types.js';
+
+declare const RovingTabindexListbox: React.ForwardRefExoticComponent<Pick<Omit<ListboxProps, "onChange"> & {
+    context: ListboxContextProps;
+}, "label" | "slot" | "style" | "title" | "left" | "right" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width" | "alignContent" | "alignItems" | "flexDirection" | "flexWrap" | "gap" | "justifyContent" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyItems" | "display" | "position" | "top" | "bottom" | "zIndex" | "background" | "backgroundColor" | "border" | "borderTop" | "borderBottom" | "borderLeft" | "borderRight" | "borderRadius" | "boxShadow" | "aria-label" | "aria-labelledby" | "variant" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isInvalid" | "isRequired" | "isDisabled" | "padding" | "paddingTop" | "paddingBottom" | "direction" | "paddingLeft" | "paddingRight" | "values" | "defaultValues" | "isReadOnly" | "context" | "focusOnClick" | "focusOnInit" | "loopAround" | "focusType" | "listRole" | "activedescendant" | "maxOptionsLength" | "selectionMode"> & React.RefAttributes<HTMLDivElement>>;
+
+export { RovingTabindexListbox };

package/components/listbox/RovingTabindexListbox.js

@@ -0,0 +1,30 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { ListboxContext } from './context.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+
+const _excluded = ["children", "id", "isDisabled", "context"];
+const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-multiselectable": context.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+export { RovingTabindexListbox };
+//# sourceMappingURL=RovingTabindexListbox.js.map

package/components/listbox/RovingTabindexListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RovingTabindexListbox.js","sources":["../../../src/components/listbox/RovingTabindexListbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\n\nexport const RovingTabindexListbox = forwardRef<\n  HTMLDivElement,\n  Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n  const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n  return (\n    <Flexbox\n      flexDirection=\"column\"\n      gap=\"8px\"\n      {...forwardedProps}\n      aria-disabled={isDisabled}\n      ref={ref}\n      id={id}\n      role=\"listbox\"\n      aria-multiselectable={context.state.selectionMode === 'multiple'}\n    >\n      <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n    </Flexbox>\n  );\n});\n"],"names":["RovingTabindexListbox","forwardRef","props","ref","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","Flexbox","_extends","flexDirection","gap","role","state","selectionMode","ListboxContext","Provider","value"],"mappings":";;;;;;AAKO,MAAMA,qBAAqB,gBAAGC,UAAU,CAG7C,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAM;MAAEC,QAAQ;MAAEC,EAAE;MAAEC,UAAU;AAAEC,MAAAA,OAAAA;AAA2B,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;AAEtE,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,GAAG,EAAC,KAAA;AAAK,GAAA,EACLR,cAAc,EAAA;AAClB,IAAA,eAAA,EAAeF,UAAW;AAC1BH,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,EAAE,EAAEA,EAAG;AACPY,IAAAA,IAAI,EAAC,SAAS;AACd,IAAA,sBAAA,EAAsBV,OAAO,CAACW,KAAK,CAACC,aAAa,KAAK,UAAA;AAAW,GAAA,CAAA,eAEjER,cAAA,CAAAC,aAAA,CAACQ,cAAc,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEf,OAAAA;GAAUH,EAAAA,QAAkC,CACrE,CAAC,CAAA;AAEd,CAAC;;;;"}

package/components/listbox/context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListboxState, ListboxContextProps } from './types.js';
+
+declare const LISTBOX_INITIAL_STATE: ListboxState;
+declare const ListboxContext: React.Context<ListboxContextProps>;
+
+export { LISTBOX_INITIAL_STATE, ListboxContext };

package/components/listbox/context.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+
+const LISTBOX_INITIAL_STATE = {
+  isDisabled: false,
+  isReadOnly: false,
+  selectedValues: [],
+  selectionMode: 'single'
+};
+const ListboxContext = /*#__PURE__*/React__default.createContext({
+  state: LISTBOX_INITIAL_STATE,
+  dispatch: () => {}
+});
+
+export { LISTBOX_INITIAL_STATE, ListboxContext };
+//# sourceMappingURL=context.js.map

package/components/listbox/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/listbox/context.ts"],"sourcesContent":["import React from 'react';\nimport { ListboxContextProps, ListboxState } from './types';\n\nexport const LISTBOX_INITIAL_STATE: ListboxState = {\n  isDisabled: false,\n  isReadOnly: false,\n  selectedValues: [],\n  selectionMode: 'single',\n};\n\nexport const ListboxContext = React.createContext<ListboxContextProps>({\n  state: LISTBOX_INITIAL_STATE,\n  dispatch: () => {},\n});\n"],"names":["LISTBOX_INITIAL_STATE","isDisabled","isReadOnly","selectedValues","selectionMode","ListboxContext","React","createContext","state","dispatch"],"mappings":";;AAGO,MAAMA,qBAAmC,GAAG;AACjDC,EAAAA,UAAU,EAAE,KAAK;AACjBC,EAAAA,UAAU,EAAE,KAAK;AACjBC,EAAAA,cAAc,EAAE,EAAE;AAClBC,EAAAA,aAAa,EAAE,QAAA;AACjB,EAAC;MAEYC,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAsB;AACrEC,EAAAA,KAAK,EAAER,qBAAqB;EAC5BS,QAAQ,EAAEA,MAAM,EAAC;AACnB,CAAC;;;;"}

package/components/listbox/reducer.d.ts

@@ -0,0 +1,5 @@
+import { ListboxState, ListboxAction } from './types.js';
+
+declare const ListboxReducer: (state: ListboxState, action: ListboxAction) => ListboxState;
+
+export { ListboxReducer };

package/components/listbox/reducer.js

@@ -0,0 +1,45 @@
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ListboxActionType } from './types.js';
+
+const ListboxReducer = (state, action) => {
+  switch (action.type) {
+    case ListboxActionType.TOGGLE:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        if (!state.selectedValues.includes(action.payload.value)) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            selectedValues: state.selectedValues.concat(action.payload.value)
+          }, action.payload.activedescendant && {
+            activedescendant: action.payload.activedescendant
+          });
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: state.selectedValues.filter(existingValue => existingValue !== action.payload.value)
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.SET:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: action.payload.values
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.UPDATE_OPTIONS:
+      {
+        return _objectSpread2(_objectSpread2({}, state), action.payload);
+      }
+    default:
+      return state;
+  }
+};
+
+export { ListboxReducer };
+//# sourceMappingURL=reducer.js.map

package/components/listbox/reducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.js","sources":["../../../src/components/listbox/reducer.ts"],"sourcesContent":["import { ListboxState, ListboxAction, ListboxActionType } from './types';\n\nexport const ListboxReducer = (state: ListboxState, action: ListboxAction): ListboxState => {\n  switch (action.type) {\n    case ListboxActionType.TOGGLE: {\n      if (state.isReadOnly || state.isDisabled) {\n        return state;\n      }\n      if (!state.selectedValues.includes(action.payload.value)) {\n        return {\n          ...state,\n          selectedValues: state.selectedValues.concat(action.payload.value),\n          ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n        };\n      }\n      return {\n        ...state,\n        selectedValues: state.selectedValues.filter((existingValue) => existingValue !== action.payload.value),\n        ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n      };\n    }\n    case ListboxActionType.SET: {\n      if (state.isReadOnly || state.isDisabled) {\n        return state;\n      }\n      return {\n        ...state,\n        selectedValues: action.payload.values,\n        ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n      };\n    }\n    case ListboxActionType.UPDATE_OPTIONS: {\n      return {\n        ...state,\n        ...action.payload,\n      };\n    }\n    default:\n      return state;\n  }\n};\n"],"names":["ListboxReducer","state","action","type","ListboxActionType","TOGGLE","isReadOnly","isDisabled","selectedValues","includes","payload","value","_objectSpread","concat","activedescendant","filter","existingValue","SET","values","UPDATE_OPTIONS"],"mappings":";;;MAEaA,cAAc,GAAGA,CAACC,KAAmB,EAAEC,MAAqB,KAAmB;EAC1F,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAKC,iBAAiB,CAACC,MAAM;AAAE,MAAA;AAC7B,QAAA,IAAIJ,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,UAAU,EAAE;AACxC,UAAA,OAAON,KAAK,CAAA;AACd,SAAA;AACA,QAAA,IAAI,CAACA,KAAK,CAACO,cAAc,CAACC,QAAQ,CAACP,MAAM,CAACQ,OAAO,CAACC,KAAK,CAAC,EAAE;AACxD,UAAA,OAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACKX,KAAK,CAAA,EAAA,EAAA,EAAA;YACRO,cAAc,EAAEP,KAAK,CAACO,cAAc,CAACK,MAAM,CAACX,MAAM,CAACQ,OAAO,CAACC,KAAK,CAAA;AAAC,WAAA,EAC7DT,MAAM,CAACQ,OAAO,CAACI,gBAAgB,IAAI;AAAEA,YAAAA,gBAAgB,EAAEZ,MAAM,CAACQ,OAAO,CAACI,gBAAAA;WAAkB,CAAA,CAAA;AAEhG,SAAA;AACA,QAAA,OAAAF,cAAA,CAAAA,cAAA,CAAA,EAAA,EACKX,KAAK,CAAA,EAAA,EAAA,EAAA;AACRO,UAAAA,cAAc,EAAEP,KAAK,CAACO,cAAc,CAACO,MAAM,CAAEC,aAAa,IAAKA,aAAa,KAAKd,MAAM,CAACQ,OAAO,CAACC,KAAK,CAAA;AAAC,SAAA,EAClGT,MAAM,CAACQ,OAAO,CAACI,gBAAgB,IAAI;AAAEA,UAAAA,gBAAgB,EAAEZ,MAAM,CAACQ,OAAO,CAACI,gBAAAA;SAAkB,CAAA,CAAA;AAEhG,OAAA;IACA,KAAKV,iBAAiB,CAACa,GAAG;AAAE,MAAA;AAC1B,QAAA,IAAIhB,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,UAAU,EAAE;AACxC,UAAA,OAAON,KAAK,CAAA;AACd,SAAA;AACA,QAAA,OAAAW,cAAA,CAAAA,cAAA,CAAA,EAAA,EACKX,KAAK,CAAA,EAAA,EAAA,EAAA;AACRO,UAAAA,cAAc,EAAEN,MAAM,CAACQ,OAAO,CAACQ,MAAAA;AAAM,SAAA,EACjChB,MAAM,CAACQ,OAAO,CAACI,gBAAgB,IAAI;AAAEA,UAAAA,gBAAgB,EAAEZ,MAAM,CAACQ,OAAO,CAACI,gBAAAA;SAAkB,CAAA,CAAA;AAEhG,OAAA;IACA,KAAKV,iBAAiB,CAACe,cAAc;AAAE,MAAA;QACrC,OAAAP,cAAA,CAAAA,cAAA,CAAA,EAAA,EACKX,KAAK,CACLC,EAAAA,MAAM,CAACQ,OAAO,CAAA,CAAA;AAErB,OAAA;AACA,IAAA;AACE,MAAA,OAAOT,KAAK,CAAA;AAChB,GAAA;AACF;;;;"}

package/components/listbox/styles.js

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components';
+import { ListboxVariant } from './types.js';
+import { baseContainer } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledListbox = styled.div`
+  ${baseContainer}
+  outline: none;
+
+  ${_ref => {
+  let {
+    $variant,
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $variant === ListboxVariant.standalone ? css`
+          span.redsift-listbox-label {
+            font-family: var(--redsift-typography-body-font-family);
+            font-weight: var(--redsift-typography-body-font-weight);
+            font-size: var(--redsift-typography-body-font-size);
+            line-height: var(--redsift-typography-body-line-height);
+
+            color: var(--redsift-color-neutral-black);
+            ${$isDisabled ? `
+          color: var(--redsift-color-neutral-mid-grey);
+        ` : ''}
+            ${$isInvalid ? `
+          color: var(--redsift-color-red-n);
+        ` : ''}
+          }
+
+          .redsift-listbox-list {
+            border: 1px solid var(--redsift-color-neutral-mid-grey);
+            padding: 4px;
+            min-width: 200px;
+          }
+        ` : '';
+}}
+`;
+
+export { StyledListbox };
+//# sourceMappingURL=styles.js.map

package/components/listbox/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/listbox/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n  ${baseContainer}\n  outline: none;\n\n  ${({ $variant, $isDisabled, $isInvalid }) =>\n    $variant === ListboxVariant.standalone\n      ? css`\n          span.redsift-listbox-label {\n            font-family: var(--redsift-typography-body-font-family);\n            font-weight: var(--redsift-typography-body-font-weight);\n            font-size: var(--redsift-typography-body-font-size);\n            line-height: var(--redsift-typography-body-line-height);\n\n            color: var(--redsift-color-neutral-black);\n            ${$isDisabled\n              ? `\n          color: var(--redsift-color-neutral-mid-grey);\n        `\n              : ''}\n            ${$isInvalid\n              ? `\n          color: var(--redsift-color-red-n);\n        `\n              : ''}\n          }\n\n          .redsift-listbox-list {\n            border: 1px solid var(--redsift-color-neutral-mid-grey);\n            padding: 4px;\n            min-width: 200px;\n          }\n        `\n      : ''}\n`;\n"],"names":["StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css"],"mappings":";;;;AAIA;AACA;AACA;AACaA,MAAAA,aAAa,GAAGC,MAAM,CAACC,GAAwB,CAAA;AAC5D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OACtCC,QAAQ,KAAKG,cAAc,CAACC,UAAU,GAClCC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcJ,WAAW,GACR,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB,YAAA,EAAcC,UAAU,GACP,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/listbox/types.d.ts

@@ -0,0 +1,101 @@
+import { ComponentProps } from 'react';
+import { UseFocusWithinGroupProps, FocusWithinGroupOptions } from '../focus-within-group/types.js';
+import { ValueOf } from '../../types/helpers.js';
+import { ContainerProps } from '../../types/styles.js';
+
+/**
+ * Component variant.
+ */
+declare const ListboxSelectionMode: {
+    readonly single: "single";
+    readonly multiple: "multiple";
+};
+type ListboxSelectionMode = ValueOf<typeof ListboxSelectionMode>;
+/**
+ * Context props.
+ */
+type ListboxState = Readonly<{
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    selectedValues: string[];
+    selectionMode: ListboxSelectionMode;
+    activedescendant?: [string, string];
+}>;
+declare enum ListboxActionType {
+    TOGGLE = "TOGGLE",
+    SET = "SET",
+    UPDATE_OPTIONS = "UPDATE_OPTIONS"
+}
+type ListboxAction = {
+    type: ListboxActionType.TOGGLE;
+    payload: {
+        value: string;
+        activedescendant?: [string, string];
+    };
+} | {
+    type: ListboxActionType.SET;
+    payload: {
+        values: string[];
+        activedescendant?: [string, string];
+    };
+} | {
+    type: ListboxActionType.UPDATE_OPTIONS;
+    payload: {
+        isDisabled: boolean;
+    };
+};
+type UseListboxItemProps = UseFocusWithinGroupProps & {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+};
+type ListboxContextProps = {
+    state: ListboxState;
+    dispatch: React.Dispatch<ListboxAction>;
+};
+/**
+ * Component variant.
+ */
+declare const ListboxVariant: {
+    readonly standalone: "standalone";
+    readonly unstyled: "unstyled";
+};
+type ListboxVariant = ValueOf<typeof ListboxVariant>;
+/**
+ * Component props.
+ */
+interface ListboxProps extends Omit<ComponentProps<'div'>, 'onChange'>, ContainerProps, FocusWithinGroupOptions {
+    /**
+     * Default selected values.
+     * Used for uncontrolled version.
+     */
+    defaultValues?: string[];
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Whether the component is read only or not. */
+    isReadOnly?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** Label of the switch group. */
+    label?: string;
+    /** Method to handle component change. */
+    onChange?(values: string[]): void;
+    /** Whether the listbox allows multiple selections or single ones. */
+    selectionMode?: 'single' | 'multiple';
+    /**
+     * Currently selected values.
+     * Used for controlled version.
+     */
+    values?: string[];
+    /** Whether the Listbox is used as standalone or is unstyled within another component. */
+    variant?: ListboxVariant;
+}
+type StyledListboxProps = Omit<ListboxProps, 'onChange'> & {
+    $isDisabled: ListboxProps['isDisabled'];
+    $isInvalid: ListboxProps['isInvalid'];
+    $isReadOnly: ListboxProps['isReadOnly'];
+    $variant: ListboxProps['variant'];
+};
+
+export { ListboxAction, ListboxActionType, ListboxContextProps, ListboxProps, ListboxSelectionMode, ListboxState, ListboxVariant, StyledListboxProps, UseListboxItemProps };

package/components/listbox/types.js

@@ -0,0 +1,32 @@
+/**
+ * Component variant.
+ */
+const ListboxSelectionMode = {
+  single: 'single',
+  multiple: 'multiple'
+};
+
+/**
+ * Context props.
+ */
+
+let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
+  ListboxActionType["TOGGLE"] = "TOGGLE";
+  ListboxActionType["SET"] = "SET";
+  ListboxActionType["UPDATE_OPTIONS"] = "UPDATE_OPTIONS";
+  return ListboxActionType;
+}({});
+/**
+ * Component variant.
+ */
+const ListboxVariant = {
+  standalone: 'standalone',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component props.
+ */
+
+export { ListboxActionType, ListboxSelectionMode, ListboxVariant };
+//# sourceMappingURL=types.js.map

package/components/listbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/listbox/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ContainerProps, ValueOf } from '../../types';\nimport { FocusWithinGroupOptions, UseFocusWithinGroupProps } from '../focus-within-group';\n\n/**\n * Component variant.\n */\nexport const ListboxSelectionMode = {\n  single: 'single',\n  multiple: 'multiple',\n} as const;\nexport type ListboxSelectionMode = ValueOf<typeof ListboxSelectionMode>;\n\n/**\n * Context props.\n */\n\nexport type ListboxState = Readonly<{\n  isDisabled: boolean;\n  isReadOnly: boolean;\n  selectedValues: string[];\n  selectionMode: ListboxSelectionMode;\n  activedescendant?: [string, string];\n}>;\n\nexport enum ListboxActionType {\n  TOGGLE = 'TOGGLE',\n  SET = 'SET',\n  UPDATE_OPTIONS = 'UPDATE_OPTIONS',\n}\n\nexport type ListboxAction =\n  | {\n      type: ListboxActionType.TOGGLE;\n      payload: { value: string; activedescendant?: [string, string] };\n    }\n  | {\n      type: ListboxActionType.SET;\n      payload: { values: string[]; activedescendant?: [string, string] };\n    }\n  | {\n      type: ListboxActionType.UPDATE_OPTIONS;\n      payload: { isDisabled: boolean };\n    };\n\nexport type UseListboxItemProps = UseFocusWithinGroupProps & {\n  isSelected?: boolean;\n  isDisabled?: boolean;\n};\n\nexport type ListboxContextProps = {\n  state: ListboxState;\n  dispatch: React.Dispatch<ListboxAction>;\n};\n\n/**\n * Component variant.\n */\nexport const ListboxVariant = {\n  standalone: 'standalone',\n  unstyled: 'unstyled',\n} as const;\nexport type ListboxVariant = ValueOf<typeof ListboxVariant>;\n\n/**\n * Component props.\n */\nexport interface ListboxProps extends Omit<ComponentProps<'div'>, 'onChange'>, ContainerProps, FocusWithinGroupOptions {\n  /**\n   * Default selected values.\n   * Used for uncontrolled version.\n   */\n  defaultValues?: string[];\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the switch group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string[]): void;\n  /** Whether the listbox allows multiple selections or single ones. */\n  selectionMode?: 'single' | 'multiple';\n  /**\n   * Currently selected values.\n   * Used for controlled version.\n   */\n  values?: string[];\n  /** Whether the Listbox is used as standalone or is unstyled within another component. */\n  variant?: ListboxVariant;\n}\n\nexport type StyledListboxProps = Omit<ListboxProps, 'onChange'> & {\n  $isDisabled: ListboxProps['isDisabled'];\n  $isInvalid: ListboxProps['isInvalid'];\n  $isReadOnly: ListboxProps['isReadOnly'];\n  $variant: ListboxProps['variant'];\n};\n"],"names":["ListboxSelectionMode","single","multiple","ListboxActionType","ListboxVariant","standalone","unstyled"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,oBAAoB,GAAG;AAClCC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAUYC,IAAAA,iBAAiB,0BAAjBA,iBAAiB,EAAA;EAAjBA,iBAAiB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAjBA,iBAAiB,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAjBA,iBAAiB,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,EAAA,OAAjBA,iBAAiB,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AA8B7B;AACA;AACA;AACO,MAAMC,cAAc,GAAG;AAC5BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/listbox/useListboxItem.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { UseListboxItemProps } from './types.js';
+
+declare function useListboxItem(props: {
+    domElementRef: RefObject<Element>;
+    value: string;
+    id?: string;
+    isDisabled?: boolean;
+    propsIsSelected?: boolean;
+}): UseListboxItemProps;
+
+export { useListboxItem };