@accelint/design-system 0.3.3 → 0.5.0

package/dist/components/number-field/number-field.js

@@ -0,0 +1,125 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { LabelContext, Provider, NumberField as NumberField$1 } from 'react-aria-components';
+import { AriaTextContext, AriaFieldErrorContext, AriaGroupContext, ButtonContext, InputContext } from '../../components/index.js';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { bodies } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { numberFieldClassNames, numberFieldStateVars } from './number-field.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  description: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  error: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  increment: {
+    sm: { size: "xs", variant: "bare" },
+    lg: { size: "sm", variant: "bare" }
+  },
+  decrement: {
+    sm: { size: "xs", variant: "bare" },
+    lg: { size: "sm", variant: "bare" }
+  }
+};
+var NumberFieldContext = createContext(null);
+var NumberField = forwardRef(function NumberField2(props, ref) {
+  [props, ref] = useContextProps(props, ref, NumberFieldContext);
+  props = useDefaultProps(props, "NumberField");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    mapping: mappingProp,
+    size = "lg",
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(
+      numberFieldClassNames,
+      theme.NumberField,
+      classNamesProp,
+      {
+        description: mapping.description[size],
+        error: mapping.error[size]
+      }
+    ),
+    [theme.NumberField, classNamesProp, mapping, size]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(numberFieldStateVars, {
+      ...renderProps,
+      size
+    }),
+    [size]
+  );
+  const values = useMemo(
+    () => [
+      [LabelContext, { className: classNames?.label }],
+      [
+        AriaTextContext,
+        {
+          slots: {
+            description: { className: classNames?.description }
+          }
+        }
+      ],
+      [AriaFieldErrorContext, { className: classNames?.error }],
+      [
+        AriaGroupContext,
+        {
+          className: classNames?.group
+        }
+      ],
+      [
+        ButtonContext,
+        {
+          slots: {
+            increment: {
+              ...mapping.increment[size],
+              classNames: classNames?.increment
+            },
+            decrement: {
+              ...mapping.decrement[size],
+              classNames: classNames?.decrement
+            }
+          }
+        }
+      ],
+      [InputContext, { classNames: classNames?.input, size }]
+    ],
+    [classNames, mapping, size]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx("div", { className: classNames?.numberField, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }) }),
+    [childrenProp, classNames?.numberField, values]
+  );
+  return /* @__PURE__ */ jsx(
+    NumberField$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.container,
+      style,
+      children
+    }
+  );
+});
+
+export { NumberField, NumberFieldContext };
+//# sourceMappingURL=number-field.js.map
+//# sourceMappingURL=number-field.js.map

package/dist/components/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/number-field/number-field.tsx"],"names":["NumberField","RACNumberField"],"mappings":"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","file":"number-field.js","sourcesContent":["import {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  type FieldErrorProps,\n  LabelContext,\n  type LabelProps,\n  type NumberFieldRenderProps,\n  Provider,\n  type GroupProps as RACGroupProps,\n  NumberField as RACNumberField,\n  type TextProps,\n} from 'react-aria-components';\nimport {\n  AriaFieldErrorContext,\n  AriaGroupContext,\n  type AriaLabelContext,\n  AriaTextContext,\n  ButtonContext,\n  type ButtonProps,\n  InputContext,\n  type InputProps,\n} from '../../components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  numberFieldClassNames,\n  numberFieldStateVars,\n} from './number-field.css';\nimport type { NumberFieldMapping, NumberFieldProps } from './types';\n\nconst defaultMapping: NumberFieldMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  error: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  increment: {\n    sm: { size: 'xs', variant: 'bare' },\n    lg: { size: 'sm', variant: 'bare' },\n  },\n  decrement: {\n    sm: { size: 'xs', variant: 'bare' },\n    lg: { size: 'sm', variant: 'bare' },\n  },\n};\n\nexport const NumberFieldContext =\n  createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, NumberFieldContext);\n\n  props = useDefaultProps(props, 'NumberField');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = 'lg',\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(\n        numberFieldClassNames,\n        theme.NumberField,\n        classNamesProp,\n        {\n          description: mapping.description[size],\n          error: mapping.error[size],\n        },\n      ),\n    [theme.NumberField, classNamesProp, mapping, size],\n  );\n\n  const style = useCallback(\n    (renderProps: NumberFieldRenderProps) =>\n      inlineVars(numberFieldStateVars, {\n        ...renderProps,\n        size,\n      }),\n    [size],\n  );\n  const values = useMemo<\n    [\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof AriaFieldErrorContext,\n        ContextValue<FieldErrorProps, HTMLElement>,\n      ],\n      [typeof AriaGroupContext, ContextValue<RACGroupProps, HTMLDivElement>],\n      [typeof ButtonContext, ContextValue<ButtonProps, HTMLButtonElement>],\n      [typeof InputContext, ContextValue<InputProps, HTMLInputElement>],\n    ]\n  >(\n    () => [\n      [LabelContext, { className: classNames?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            description: { className: classNames?.description },\n          },\n        },\n      ],\n      [AriaFieldErrorContext, { className: classNames?.error }],\n      [\n        AriaGroupContext,\n        {\n          className: classNames?.group,\n        },\n      ],\n      [\n        ButtonContext,\n        {\n          slots: {\n            increment: {\n              ...mapping.increment[size],\n              classNames: classNames?.increment,\n            },\n            decrement: {\n              ...mapping.decrement[size],\n              classNames: classNames?.decrement,\n            },\n          },\n        },\n      ],\n      [InputContext, { classNames: classNames?.input, size }],\n    ],\n    [classNames, mapping, size],\n  );\n\n  const children = useCallback(\n    (renderProps: NumberFieldRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.numberField}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.numberField, values],\n  );\n  return (\n    <RACNumberField\n      {...rest}\n      ref={ref}\n      className={classNames?.container}\n      style={style}\n    >\n      {children}\n    </RACNumberField>\n  );\n});\n"]}

package/dist/components/number-field/types.d.ts

@@ -0,0 +1,38 @@
+import { NumberFieldProps as NumberFieldProps$1, NumberFieldRenderProps as NumberFieldRenderProps$1 } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+import { ButtonClassNames, ButtonProps } from '../button/types.js';
+import { OmitProtectedProps } from '../../types/props.js';
+import { InputClassNames } from '../input/types.js';
+import '../../types/react-aria.js';
+import 'react';
+import '../icon/types.js';
+import '../../types/generic.js';
+
+type NumberFieldClassNames = PartialDeep<{
+    container: string;
+    decrement: ButtonClassNames;
+    description: string;
+    error: string;
+    group: string;
+    increment: ButtonClassNames;
+    input: InputClassNames;
+    label: string;
+    numberField: string;
+}>;
+type NumberFieldSizes = 'sm' | 'lg';
+type NumberFieldMapping = {
+    description: Partial<Record<NumberFieldSizes, string>>;
+    error: Partial<Record<NumberFieldSizes, string>>;
+    increment: Partial<Record<NumberFieldSizes, OmitProtectedProps<ButtonProps>>>;
+    decrement: Partial<Record<NumberFieldSizes, OmitProtectedProps<ButtonProps>>>;
+};
+type BaseNumberFieldProps = {
+    classNames?: NumberFieldClassNames;
+    mapping?: Partial<NumberFieldMapping>;
+    size?: NumberFieldSizes;
+};
+type NumberFieldRenderProps = Omit<NumberFieldRenderProps$1, 'state'>;
+type NumberFieldProps = Omit<NumberFieldProps$1, 'className' | 'style'> & BaseNumberFieldProps;
+type NumberFieldState = NumberFieldRenderProps & Required<Pick<BaseNumberFieldProps, 'size'>>;
+
+export type { NumberFieldClassNames, NumberFieldMapping, NumberFieldProps, NumberFieldRenderProps, NumberFieldSizes, NumberFieldState };

package/dist/components/number-field/types.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/components/number-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -0,0 +1,8 @@
+export { Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext } from './options.js';
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars } from './options.css.js';
+export { OptionsClassNames, OptionsItemProps, OptionsItemState, OptionsListProps, OptionsListState, OptionsMapping, OptionsProps, OptionsSizes, OptionsState } from './types.js';
+import 'react-aria-components';
+import 'react';
+import 'type-fest';
+import '../../types/generic.js';
+import '../icon/types.js';

package/dist/components/options/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext } from './options.js';
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars } from './options.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/components/options/options.css.d.ts

@@ -0,0 +1,87 @@
+import { OptionsClassNames } from './types.js';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../icon/types.js';
+import 'react';
+
+declare const optionsContainers: {
+    options: string;
+    list: string;
+    item: string;
+};
+declare const optionsStateVars: {
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const optionsListStateVars: {
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const optionsItemStateVars: {
+    selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hasDescription: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const optionsColorVars: {
+    list: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    item: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    label: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    description: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const optionsSpaceVars: {
+    options: {
+        minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    list: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    section: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    item: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const optionsClassNames: OptionsClassNames;
+
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars };

package/dist/components/options/options.css.js

@@ -0,0 +1,14 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/options/options.css.ts
+var optionsClassNames = { options: { container: "options_optionsClassNames_options_container__140gzb51b", options: "options_optionsClassNames_options_options__140gzb51c surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4" }, list: { container: "options_optionsClassNames_list_container__140gzb51d", list: "options_optionsClassNames_list_list__140gzb51e", section: "options_optionsClassNames_list_section__140gzb51f", header: "options_optionsClassNames_list_header__140gzb51g", separator: "options_optionsClassNames_list_separator__140gzb51h" }, item: { container: "options_optionsClassNames_item_container__140gzb51i", item: "options_optionsClassNames_item_item__140gzb51j", icon: { icon: "options_optionsClassNames_item_icon_icon__140gzb51k" }, label: "options_optionsClassNames_item_label__140gzb51l", description: "options_optionsClassNames_item_description__140gzb51m", shortcut: "options_optionsClassNames_item_shortcut__140gzb51n" } };
+var optionsColorVars = { list: { background: "var(--list-background__140gzb5l)", border: "var(--list-border__140gzb5m)", color: "var(--list-color__140gzb5n)" }, header: { background: "var(--header-background__140gzb5o)", border: "var(--header-border__140gzb5p)", color: "var(--header-color__140gzb5q)" }, separator: "var(--separator__140gzb5r)", item: { background: "var(--item-background__140gzb5s)", border: "var(--item-border__140gzb5t)", color: "var(--item-color__140gzb5u)" }, label: "var(--label__140gzb5v)", description: "var(--description__140gzb5w)" };
+var optionsContainers = { options: "options_optionsContainers_options__140gzb50", list: "options_optionsContainers_list__140gzb51", item: "options_optionsContainers_item__140gzb52" };
+var optionsItemStateVars = { selectionBehavior: "var(--selectionBehavior__140gzb5b)", selectionMode: "var(--selectionMode__140gzb5c)", size: "var(--size__140gzb5d)", hasDescription: "var(--hasDescription__140gzb5e)", isDisabled: "var(--isDisabled__140gzb5f)", isHovered: "var(--isHovered__140gzb5g)", isPressed: "var(--isPressed__140gzb5h)", isSelected: "var(--isSelected__140gzb5i)", isFocused: "var(--isFocused__140gzb5j)", isFocusVisible: "var(--isFocusVisible__140gzb5k)" };
+var optionsListStateVars = { size: "var(--size__140gzb57)", isEmpty: "var(--isEmpty__140gzb58)", isFocused: "var(--isFocused__140gzb59)", isFocusVisible: "var(--isFocusVisible__140gzb5a)" };
+var optionsSpaceVars = { options: { minWidth: "var(--options-minWidth__140gzb5x)", x: "var(--options-x__140gzb5y)", y: "var(--options-y__140gzb5z)" }, list: { x: "var(--list-x__140gzb510)", y: "var(--list-y__140gzb511)" }, section: { x: "var(--section-x__140gzb512)", y: "var(--section-y__140gzb513)" }, header: { x: "var(--header-x__140gzb514)", y: "var(--header-y__140gzb515)" }, separator: { x: "var(--separator-x__140gzb516)", y: "var(--separator-y__140gzb517)" }, item: { x: "var(--item-x__140gzb518)", y: "var(--item-y__140gzb519)", gap: "var(--item-gap__140gzb51a)" } };
+var optionsStateVars = { size: "var(--size__140gzb53)", isEntering: "var(--isEntering__140gzb54)", isExiting: "var(--isExiting__140gzb55)", placement: "var(--placement__140gzb56)" };
+
+export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars };
+//# sourceMappingURL=options.css.js.map
+//# sourceMappingURL=options.css.js.map

package/dist/components/options/options.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/options/options.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,oBAAoB,EAAC,OAAA,EAAQ,EAAC,SAAA,EAAU,0DAAyD,OAAQ,EAAA,wGAAA,EAA0G,EAAA,IAAA,EAAK,EAAC,SAAU,EAAA,qDAAA,EAAsD,MAAK,gDAAiD,EAAA,OAAA,EAAQ,qDAAoD,MAAO,EAAA,kDAAA,EAAmD,SAAU,EAAA,qDAAA,IAAuD,IAAK,EAAA,EAAC,WAAU,qDAAsD,EAAA,IAAA,EAAK,kDAAiD,IAAK,EAAA,EAAC,IAAK,EAAA,qDAAA,IAAuD,KAAM,EAAA,iDAAA,EAAkD,aAAY,uDAAwD,EAAA,QAAA,EAAS,sDAAqD;AACl4B,IAAI,gBAAmB,GAAA,EAAC,IAAK,EAAA,EAAC,YAAW,kCAAmC,EAAA,MAAA,EAAO,8BAA+B,EAAA,KAAA,EAAM,+BAA+B,EAAA,MAAA,EAAO,EAAC,UAAA,EAAW,sCAAqC,MAAO,EAAA,gCAAA,EAAiC,KAAM,EAAA,+BAAA,EAAiC,EAAA,SAAA,EAAU,4BAA6B,EAAA,IAAA,EAAK,EAAC,UAAW,EAAA,kCAAA,EAAmC,MAAO,EAAA,8BAAA,EAA+B,OAAM,6BAA6B,EAAA,EAAE,KAAM,EAAA,wBAAA,EAAyB,aAAY,8BAA8B;AAC7gB,IAAI,oBAAoB,EAAC,OAAA,EAAQ,+CAA8C,IAAK,EAAA,0CAAA,EAA2C,MAAK,0CAA0C;AAC1K,IAAA,oBAAA,GAAuB,EAAC,iBAAkB,EAAA,oCAAA,EAAqC,eAAc,gCAAiC,EAAA,IAAA,EAAK,yBAAwB,cAAe,EAAA,iCAAA,EAAkC,YAAW,6BAA8B,EAAA,SAAA,EAAU,8BAA6B,SAAU,EAAA,4BAAA,EAA6B,YAAW,6BAA8B,EAAA,SAAA,EAAU,4BAA6B,EAAA,cAAA,EAAe,iCAAiC;AACnc,IAAA,oBAAA,GAAuB,EAAC,IAAK,EAAA,uBAAA,EAAwB,SAAQ,0BAA2B,EAAA,SAAA,EAAU,4BAA6B,EAAA,cAAA,EAAe,iCAAiC;AAC/K,IAAA,gBAAA,GAAmB,EAAC,OAAQ,EAAA,EAAC,UAAS,mCAAoC,EAAA,CAAA,EAAE,8BAA6B,CAAE,EAAA,4BAAA,IAA8B,IAAK,EAAA,EAAC,GAAE,0BAA2B,EAAA,CAAA,EAAE,4BAA4B,EAAA,OAAA,EAAQ,EAAC,CAAA,EAAE,6BAA8B,EAAA,CAAA,EAAE,+BAA+B,EAAA,MAAA,EAAO,EAAC,CAAE,EAAA,4BAAA,EAA6B,GAAE,4BAA4B,EAAA,EAAE,SAAU,EAAA,EAAC,CAAE,EAAA,+BAAA,EAAgC,GAAE,+BAA+B,EAAA,EAAE,MAAK,EAAC,CAAA,EAAE,4BAA2B,CAAE,EAAA,0BAAA,EAA2B,GAAI,EAAA,4BAAA,EAA6B;AAC5gB,IAAA,gBAAA,GAAmB,EAAC,IAAK,EAAA,uBAAA,EAAwB,YAAW,6BAA8B,EAAA,SAAA,EAAU,4BAA6B,EAAA,SAAA,EAAU,4BAA4B","file":"options.css.js","sourcesContent":["export var optionsClassNames = {options:{container:'options_optionsClassNames_options_container__140gzb51b',options:'options_optionsClassNames_options_options__140gzb51c surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4'},list:{container:'options_optionsClassNames_list_container__140gzb51d',list:'options_optionsClassNames_list_list__140gzb51e',section:'options_optionsClassNames_list_section__140gzb51f',header:'options_optionsClassNames_list_header__140gzb51g',separator:'options_optionsClassNames_list_separator__140gzb51h'},item:{container:'options_optionsClassNames_item_container__140gzb51i',item:'options_optionsClassNames_item_item__140gzb51j',icon:{icon:'options_optionsClassNames_item_icon_icon__140gzb51k'},label:'options_optionsClassNames_item_label__140gzb51l',description:'options_optionsClassNames_item_description__140gzb51m',shortcut:'options_optionsClassNames_item_shortcut__140gzb51n'}};\nexport var optionsColorVars = {list:{background:'var(--list-background__140gzb5l)',border:'var(--list-border__140gzb5m)',color:'var(--list-color__140gzb5n)'},header:{background:'var(--header-background__140gzb5o)',border:'var(--header-border__140gzb5p)',color:'var(--header-color__140gzb5q)'},separator:'var(--separator__140gzb5r)',item:{background:'var(--item-background__140gzb5s)',border:'var(--item-border__140gzb5t)',color:'var(--item-color__140gzb5u)'},label:'var(--label__140gzb5v)',description:'var(--description__140gzb5w)'};\nexport var optionsContainers = {options:'options_optionsContainers_options__140gzb50',list:'options_optionsContainers_list__140gzb51',item:'options_optionsContainers_item__140gzb52'};\nexport var optionsItemStateVars = {selectionBehavior:'var(--selectionBehavior__140gzb5b)',selectionMode:'var(--selectionMode__140gzb5c)',size:'var(--size__140gzb5d)',hasDescription:'var(--hasDescription__140gzb5e)',isDisabled:'var(--isDisabled__140gzb5f)',isHovered:'var(--isHovered__140gzb5g)',isPressed:'var(--isPressed__140gzb5h)',isSelected:'var(--isSelected__140gzb5i)',isFocused:'var(--isFocused__140gzb5j)',isFocusVisible:'var(--isFocusVisible__140gzb5k)'};\nexport var optionsListStateVars = {size:'var(--size__140gzb57)',isEmpty:'var(--isEmpty__140gzb58)',isFocused:'var(--isFocused__140gzb59)',isFocusVisible:'var(--isFocusVisible__140gzb5a)'};\nexport var optionsSpaceVars = {options:{minWidth:'var(--options-minWidth__140gzb5x)',x:'var(--options-x__140gzb5y)',y:'var(--options-y__140gzb5z)'},list:{x:'var(--list-x__140gzb510)',y:'var(--list-y__140gzb511)'},section:{x:'var(--section-x__140gzb512)',y:'var(--section-y__140gzb513)'},header:{x:'var(--header-x__140gzb514)',y:'var(--header-y__140gzb515)'},separator:{x:'var(--separator-x__140gzb516)',y:'var(--separator-y__140gzb517)'},item:{x:'var(--item-x__140gzb518)',y:'var(--item-y__140gzb519)',gap:'var(--item-gap__140gzb51a)'}};\nexport var optionsStateVars = {size:'var(--size__140gzb53)',isEntering:'var(--isEntering__140gzb54)',isExiting:'var(--isExiting__140gzb55)',placement:'var(--placement__140gzb56)'};"]}

package/dist/components/options/options.d.ts

@@ -0,0 +1,28 @@
+import { OptionsClassNames, OptionsMapping, OptionsSizes, OptionsProps, OptionsItemProps, OptionsListProps } from './types.js';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import * as react from 'react';
+import 'type-fest';
+import '../../types/generic.js';
+import '../icon/types.js';
+
+declare const OptionsContext: react.Context<ContextValue<OptionsProps, HTMLElement>>;
+declare const Options: (props: Omit<react_aria_components.PopoverProps, "className" | "style"> & {
+    classNames?: OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: OptionsSizes;
+} & react.RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const OptionsListContext: react.Context<ContextValue<OptionsListProps<object>, HTMLDivElement>>;
+declare const OptionsList: <T extends object>(props: Omit<react_aria_components.ListBoxProps<T>, "className" | "style" | "orientation" | "dragAndDropHooks"> & {
+    classNames?: OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: OptionsSizes;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const OptionsItemContext: react.Context<ContextValue<OptionsItemProps<object>, HTMLDivElement>>;
+declare const OptionsItem: <T extends object>(props: Omit<react_aria_components.ListBoxItemProps<T>, "className" | "style"> & {
+    classNames?: OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: OptionsSizes;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext };

package/dist/components/options/options.js

@@ -0,0 +1,253 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Provider, Popover, Collection, ListStateContext, UNSTABLE_CollectionRendererContext, ListBox, ListBoxItem } from 'react-aria-components';
+import { useContextProps, useDefaultProps, useTheme, useSlot } from '../../hooks/index.js';
+import { bodies, headings } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { AriaSectionContext, AriaHeaderContext, AriaSeparatorContext, AriaSection, AriaTextContext, AriaKeyboardContext, AriaText } from '../aria/index.js';
+import { createCollectionRenderer } from '../collection/index.js';
+import { IconContext } from '../icon/index.js';
+import { optionsClassNames, optionsStateVars, optionsItemStateVars } from './options.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  description: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  },
+  header: {
+    sm: headings.v4,
+    lg: headings.v5
+  },
+  label: {
+    sm: bodies.sm,
+    lg: bodies.sm
+  },
+  shortcut: {
+    sm: bodies.xs,
+    lg: bodies.xs
+  }
+};
+var defaultSize = "lg";
+var OptionsContext = createContext(null);
+var Options = forwardRef(function Options2(props, ref) {
+  [props, ref] = useContextProps(props, ref, OptionsContext);
+  props = useDefaultProps(props, "Options");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    mapping: mappingProp,
+    size = defaultSize,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(optionsClassNames, theme.Options, classNamesProp, {
+      options: {
+        container: theme.className
+        // required to consume global theme within Popover
+      }
+    }),
+    [theme.className, theme.Options, classNamesProp]
+  );
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const style = useCallback(
+    ({ ...renderProps }) => ({
+      ...theme.style,
+      // required to consume global styles within Popover
+      ...inlineVars(optionsStateVars, {
+        ...renderProps,
+        size
+      })
+    }),
+    [theme.style, size]
+  );
+  const values = useMemo(
+    () => [[OptionsListContext, { classNames, mapping, size }]],
+    [classNames, mapping, size]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx("div", { className: classNames?.options?.options, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      size,
+      defaultChildren: null
+    }) }) }),
+    [childrenProp, classNames?.options?.options, size, values]
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ...rest,
+      ref,
+      className: classNames?.options?.container,
+      style,
+      children
+    }
+  );
+});
+var OptionsListContext = createContext(null);
+var OptionsList = forwardRef(function OptionList(props, ref) {
+  [props, ref] = useContextProps(props, ref, OptionsListContext);
+  props = useDefaultProps(props, "OptionsList");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    items,
+    mapping: mappingProp,
+    selectionMode = "single",
+    size = defaultSize,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(optionsClassNames, theme.Options, classNamesProp, {
+      list: { header: mapping.header[size] }
+    }),
+    [theme.Options, classNamesProp, mapping, size]
+  );
+  const values = useMemo(
+    () => [
+      [OptionsItemContext, { classNames, size, mapping }],
+      [AriaSectionContext, { className: classNames?.list?.section }],
+      [AriaHeaderContext, { className: classNames?.list?.header }],
+      [AriaSeparatorContext, { className: classNames?.list?.separator }]
+    ],
+    [classNames, size, mapping]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(optionsItemStateVars, { ...renderProps, size }),
+    [size]
+  );
+  const children = useMemo(() => {
+    if (!(childrenProp || items)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(AriaSection, { className: classNames?.list?.list, children: typeof childrenProp === "function" ? /* @__PURE__ */ jsx(Collection, { items, children: childrenProp }) : childrenProp });
+  }, [classNames?.list?.list, childrenProp, items]);
+  const renderer = useMemo(
+    () => createCollectionRenderer(ListStateContext, values),
+    [values]
+  );
+  return /* @__PURE__ */ jsx(UNSTABLE_CollectionRendererContext.Provider, { value: renderer, children: /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ...rest,
+      ref,
+      className: classNames?.list?.container,
+      items,
+      selectionMode,
+      style,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children
+    }
+  ) }) });
+});
+var OptionsItemContext = createContext(null);
+var OptionsItem = forwardRef(function OptionItem(props, ref) {
+  [props, ref] = useContextProps(props, ref, OptionsItemContext);
+  props = useDefaultProps(props, "OptionsItem");
+  const {
+    id,
+    children: childrenProp,
+    classNames: classNamesProp,
+    mapping: mappingProp,
+    size = defaultSize,
+    textValue = typeof childrenProp === "string" ? childrenProp : void 0,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(optionsClassNames, classNamesProp, theme.Options, {
+      item: {
+        description: mapping.description[size],
+        label: mapping.label[size],
+        shortcut: mapping.shortcut[size]
+      }
+    }),
+    [theme.Options, classNamesProp, mapping, size]
+  );
+  const [descriptionRef, hasDescription] = useSlot();
+  const style = useCallback(
+    (renderProps) => inlineVars(optionsItemStateVars, {
+      ...renderProps,
+      size,
+      hasDescription
+    }),
+    [hasDescription, size]
+  );
+  const values = useMemo(
+    () => [
+      [
+        AriaTextContext,
+        {
+          slots: {
+            label: { className: classNames?.item?.label },
+            description: {
+              ref: descriptionRef,
+              className: classNames?.item?.description
+            }
+          }
+        }
+      ],
+      [IconContext, { classNames: classNames?.item?.icon }],
+      [AriaKeyboardContext, { className: classNames?.item?.shortcut }]
+    ],
+    [
+      classNames?.item?.label,
+      descriptionRef,
+      classNames?.item?.description,
+      classNames?.item?.icon,
+      classNames?.item?.shortcut
+    ]
+  );
+  const children = useCallback(
+    (renderProps) => {
+      const content = callRenderProps(childrenProp, {
+        ...renderProps,
+        size,
+        defaultChildren: null
+      });
+      return /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx("div", { className: classNames?.item?.item, children: typeof content === "string" ? /* @__PURE__ */ jsx(AriaText, { slot: "label", children: content }) : content }) });
+    },
+    [childrenProp, classNames?.item?.item, size, values]
+  );
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      ...rest,
+      id: id ?? textValue,
+      ref,
+      className: classNames?.item?.container,
+      style,
+      textValue,
+      children
+    }
+  );
+});
+
+export { Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext };
+//# sourceMappingURL=options.js.map
+//# sourceMappingURL=options.js.map

package/dist/components/options/options.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/options/options.tsx"],"names":["Options"],"mappings":"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","file":"options.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  type ForwardedRef,\n  type HTMLAttributes,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  Collection,\n  type CollectionRenderer,\n  type ContextValue,\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemRenderProps,\n  type ListBoxRenderProps,\n  ListStateContext,\n  Popover,\n  type PopoverRenderProps,\n  Provider,\n  type SectionProps,\n  type SeparatorProps,\n  type TextProps,\n  UNSTABLE_CollectionRendererContext,\n} from 'react-aria-components';\nimport {\n  useContextProps,\n  useDefaultProps,\n  useSlot,\n  useTheme,\n} from '../../hooks';\nimport { bodies, headings } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  AriaHeaderContext,\n  AriaKeyboardContext,\n  AriaSection,\n  AriaSectionContext,\n  AriaSeparatorContext,\n  AriaText,\n  AriaTextContext,\n} from '../aria';\nimport { createCollectionRenderer } from '../collection';\nimport { IconContext, type IconProps } from '../icon';\nimport {\n  optionsClassNames,\n  optionsItemStateVars,\n  optionsStateVars,\n} from './options.css';\nimport type {\n  OptionsItemProps,\n  OptionsListProps,\n  OptionsMapping,\n  OptionsProps,\n} from './types';\n\nconst defaultMapping: OptionsMapping = {\n  description: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n  header: {\n    sm: headings.v4,\n    lg: headings.v5,\n  },\n  label: {\n    sm: bodies.sm,\n    lg: bodies.sm,\n  },\n  shortcut: {\n    sm: bodies.xs,\n    lg: bodies.xs,\n  },\n};\n\nconst defaultSize = 'lg';\n\nexport const OptionsContext =\n  createContext<ContextValue<OptionsProps, HTMLElement>>(null);\n\nexport const Options = forwardRef(function Options(\n  props: OptionsProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  [props, ref] = useContextProps(props, ref, OptionsContext);\n  props = useDefaultProps(props, 'Options');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(optionsClassNames, theme.Options, classNamesProp, {\n        options: {\n          container: theme.className, // required to consume global theme within Popover\n        },\n      }),\n    [theme.className, theme.Options, classNamesProp],\n  );\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const style = useCallback(\n    ({ ...renderProps }: PopoverRenderProps) => ({\n      ...theme.style, // required to consume global styles within Popover\n      ...inlineVars(optionsStateVars, {\n        ...renderProps,\n        size,\n      }),\n    }),\n    [theme.style, size],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof OptionsListContext,\n        ContextValue<OptionsListProps<object>, HTMLDivElement>,\n      ],\n    ]\n  >(\n    () => [[OptionsListContext, { classNames, mapping, size }]],\n    [classNames, mapping, size],\n  );\n\n  const children = useCallback(\n    (renderProps: PopoverRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.options?.options}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            size,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.options?.options, size, values],\n  );\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={classNames?.options?.container}\n      style={style}\n    >\n      {children}\n    </Popover>\n  );\n});\n\nexport const OptionsListContext =\n  createContext<ContextValue<OptionsListProps<object>, HTMLDivElement>>(null);\n\ntype OptionsListContexts = [\n  [\n    typeof OptionsItemContext,\n    ContextValue<OptionsItemProps<object>, HTMLDivElement>,\n  ],\n  [typeof AriaSectionContext, ContextValue<SectionProps<object>, HTMLElement>],\n  [\n    typeof AriaHeaderContext,\n    ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>,\n  ],\n  [typeof AriaSeparatorContext, ContextValue<SeparatorProps, HTMLElement>],\n];\n\nexport const OptionsList = forwardRef(function OptionList<T extends object>(\n  props: OptionsListProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, OptionsListContext);\n  props = useDefaultProps(props, 'OptionsList');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    items,\n    mapping: mappingProp,\n    selectionMode = 'single',\n    size = defaultSize,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(optionsClassNames, theme.Options, classNamesProp, {\n        list: { header: mapping.header[size] },\n      }),\n    [theme.Options, classNamesProp, mapping, size],\n  );\n\n  const values = useMemo<OptionsListContexts>(\n    () => [\n      [OptionsItemContext, { classNames, size, mapping }],\n      [AriaSectionContext, { className: classNames?.list?.section }],\n      [AriaHeaderContext, { className: classNames?.list?.header }],\n      [AriaSeparatorContext, { className: classNames?.list?.separator }],\n    ],\n    [classNames, size, mapping],\n  );\n\n  const style = useCallback(\n    (renderProps: ListBoxRenderProps) =>\n      inlineVars(optionsItemStateVars, { ...renderProps, size }),\n    [size],\n  );\n\n  const children = useMemo(() => {\n    if (!(childrenProp || items)) {\n      return null;\n    }\n\n    return (\n      <AriaSection className={classNames?.list?.list}>\n        {typeof childrenProp === 'function' ? (\n          <Collection items={items}>{childrenProp}</Collection>\n        ) : (\n          childrenProp\n        )}\n      </AriaSection>\n    );\n  }, [classNames?.list?.list, childrenProp, items]);\n\n  const renderer = useMemo<CollectionRenderer>(\n    () => createCollectionRenderer(ListStateContext, values),\n    [values],\n  );\n\n  return (\n    <UNSTABLE_CollectionRendererContext.Provider value={renderer}>\n      <Provider values={values}>\n        <ListBox<T>\n          {...rest}\n          ref={ref}\n          className={classNames?.list?.container}\n          items={items}\n          selectionMode={selectionMode}\n          style={style}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n        >\n          {children}\n        </ListBox>\n      </Provider>\n    </UNSTABLE_CollectionRendererContext.Provider>\n  );\n});\n\nexport const OptionsItemContext =\n  createContext<ContextValue<OptionsItemProps<object>, HTMLDivElement>>(null);\n\nexport const OptionsItem = forwardRef(function OptionItem<T extends object>(\n  props: OptionsItemProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, OptionsItemContext);\n  props = useDefaultProps(props, 'OptionsItem');\n\n  const {\n    id,\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    size = defaultSize,\n    textValue = typeof childrenProp === 'string' ? childrenProp : undefined,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(optionsClassNames, classNamesProp, theme.Options, {\n        item: {\n          description: mapping.description[size],\n          label: mapping.label[size],\n          shortcut: mapping.shortcut[size],\n        },\n      }),\n    [theme.Options, classNamesProp, mapping, size],\n  );\n\n  const [descriptionRef, hasDescription] = useSlot();\n\n  const style = useCallback(\n    (renderProps: ListBoxItemRenderProps) =>\n      inlineVars(optionsItemStateVars, {\n        ...renderProps,\n        size,\n        hasDescription,\n      }),\n    [hasDescription, size],\n  );\n\n  const values = useMemo<\n    [\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n      [\n        typeof AriaKeyboardContext,\n        ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>,\n      ],\n    ]\n  >(\n    () => [\n      [\n        AriaTextContext,\n        {\n          slots: {\n            label: { className: classNames?.item?.label },\n            description: {\n              ref: descriptionRef,\n              className: classNames?.item?.description,\n            },\n          },\n        },\n      ],\n      [IconContext, { classNames: classNames?.item?.icon }],\n      [AriaKeyboardContext, { className: classNames?.item?.shortcut }],\n    ],\n    [\n      classNames?.item?.label,\n      descriptionRef,\n      classNames?.item?.description,\n      classNames?.item?.icon,\n      classNames?.item?.shortcut,\n    ],\n  );\n\n  const children = useCallback(\n    (renderProps: ListBoxItemRenderProps) => {\n      const content = callRenderProps(childrenProp, {\n        ...renderProps,\n        size,\n        defaultChildren: null,\n      });\n\n      return (\n        <Provider values={values}>\n          <div className={classNames?.item?.item}>\n            {typeof content === 'string' ? (\n              <AriaText slot='label'>{content}</AriaText>\n            ) : (\n              content\n            )}\n          </div>\n        </Provider>\n      );\n    },\n    [childrenProp, classNames?.item?.item, size, values],\n  );\n\n  return (\n    <ListBoxItem<T>\n      {...rest}\n      id={id ?? textValue}\n      ref={ref as ForwardedRef<T>}\n      className={classNames?.item?.container}\n      style={style}\n      textValue={textValue}\n    >\n      {children}\n    </ListBoxItem>\n  );\n});\n"]}