@accelint/design-system 0.8.1 → 0.9.0

package/dist/components/options/index.js

@@ -1,6 +1,257 @@
 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';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Provider, Popover, Collection, ListStateContext, UNSTABLE_CollectionRendererContext, ListBox, ListBoxItem } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/index.js';
+import { useDefaultProps } from '../../hooks/use-defaults/index.js';
+import { useSlot } from '../../hooks/use-slot/index.js';
+import { useTheme } from '../../hooks/use-theme/index.js';
+import { bodies, headings } from '../../styles/typography.css.js';
+import { inlineVars } from '../../utils/css/index.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props/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=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
+{"version":3,"sources":["../../../src/components/options/index.tsx"],"names":["Options"],"mappings":";;;;;;;;;;;;;;;;AAoEA,IAAM,cAAiC,GAAA;AAAA,EACrC,WAAa,EAAA;AAAA,IACX,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,IAAI,MAAO,CAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,IAAI,QAAS,CAAA,EAAA;AAAA,IACb,IAAI,QAAS,CAAA;AAAA,GACf;AAAA,EACA,KAAO,EAAA;AAAA,IACL,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,IAAI,MAAO,CAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,IAAI,MAAO,CAAA;AAAA;AAEf,CAAA;AAEA,IAAM,WAAc,GAAA,IAAA;AAEP,IAAA,cAAA,GACX,cAAuD,IAAI;AAEtD,IAAM,OAAU,GAAA,UAAA,CAAW,SAASA,QAAAA,CACzC,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,cAAc,CAAA;AACzD,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,SAAS,CAAA;AAExC,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,WAAA;AAAA,IACT,IAAO,GAAA,WAAA;AAAA,IACP,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MACE,eAAA,CAAgB,iBAAmB,EAAA,KAAA,CAAM,SAAS,cAAgB,EAAA;AAAA,MAChE,OAAS,EAAA;AAAA,QACP,WAAW,KAAM,CAAA;AAAA;AAAA;AACnB,KACD,CAAA;AAAA,IACH,CAAC,KAAA,CAAM,SAAW,EAAA,KAAA,CAAM,SAAS,cAAc;AAAA,GACjD;AAEA,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,OAAO;AAAA,MACL,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,EAAE,GAAG,WAAA,EAAuC,MAAA;AAAA,MAC3C,GAAG,KAAM,CAAA,KAAA;AAAA;AAAA,MACT,GAAG,WAAW,gBAAkB,EAAA;AAAA,QAC9B,GAAG,WAAA;AAAA,QACH;AAAA,OACD;AAAA,KACH,CAAA;AAAA,IACA,CAAC,KAAM,CAAA,KAAA,EAAO,IAAI;AAAA,GACpB;AAEA,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IAQb,MAAM,CAAC,CAAC,kBAAA,EAAoB,EAAE,UAAY,EAAA,OAAA,EAAS,IAAK,EAAC,CAAC,CAAA;AAAA,IAC1D,CAAC,UAAY,EAAA,OAAA,EAAS,IAAI;AAAA,GAC5B;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,WAAA,qBACE,GAAA,CAAA,QAAA,EAAA,EAAS,MACR,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAY,EAAA,OAAA,EAAS,OAClC,EAAA,QAAA,EAAA,eAAA,CAAgB,YAAc,EAAA;AAAA,MAC7B,GAAG,WAAA;AAAA,MACH,IAAA;AAAA,MACA,eAAiB,EAAA;AAAA,KAClB,GACH,CACF,EAAA,CAAA;AAAA,IAEF,CAAC,YAAc,EAAA,UAAA,EAAY,OAAS,EAAA,OAAA,EAAS,MAAM,MAAM;AAAA,GAC3D;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,YAAY,OAAS,EAAA,SAAA;AAAA,MAChC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC;AAEY,IAAA,kBAAA,GACX,cAAsE,IAAI;AAerE,IAAM,WAAc,GAAA,UAAA,CAAW,SAAS,UAAA,CAC7C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,kBAAkB,CAAA;AAC7D,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,aAAa,CAAA;AAE5C,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,KAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,aAAgB,GAAA,QAAA;AAAA,IAChB,IAAO,GAAA,WAAA;AAAA,IACP,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IACnB,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,OAAO;AAAA,MACL,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MACE,eAAA,CAAgB,iBAAmB,EAAA,KAAA,CAAM,SAAS,cAAgB,EAAA;AAAA,MAChE,MAAM,EAAE,MAAA,EAAQ,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAE;AAAA,KACtC,CAAA;AAAA,IACH,CAAC,KAAA,CAAM,OAAS,EAAA,cAAA,EAAgB,SAAS,IAAI;AAAA,GAC/C;AAEA,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IACb,MAAM;AAAA,MACJ,CAAC,kBAAoB,EAAA,EAAE,UAAY,EAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAClD,CAAC,kBAAoB,EAAA,EAAE,WAAW,UAAY,EAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC7D,CAAC,iBAAmB,EAAA,EAAE,WAAW,UAAY,EAAA,IAAA,EAAM,QAAQ,CAAA;AAAA,MAC3D,CAAC,oBAAsB,EAAA,EAAE,WAAW,UAAY,EAAA,IAAA,EAAM,WAAW;AAAA,KACnE;AAAA,IACA,CAAC,UAAY,EAAA,IAAA,EAAM,OAAO;AAAA,GAC5B;AAEA,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,gBACC,UAAW,CAAA,oBAAA,EAAsB,EAAE,GAAG,WAAA,EAAa,MAAM,CAAA;AAAA,IAC3D,CAAC,IAAI;AAAA,GACP;AAEA,EAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,IAAI,IAAA,EAAE,gBAAgB,KAAQ,CAAA,EAAA;AAC5B,MAAO,OAAA,IAAA;AAAA;AAGT,IAAA,uBACG,GAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,UAAA,EAAY,MAAM,IACvC,EAAA,QAAA,EAAA,OAAO,YAAiB,KAAA,UAAA,mBACtB,GAAA,CAAA,UAAA,EAAA,EAAW,KAAe,EAAA,QAAA,EAAA,YAAA,EAAa,IAExC,YAEJ,EAAA,CAAA;AAAA,KAED,CAAC,UAAA,EAAY,MAAM,IAAM,EAAA,YAAA,EAAc,KAAK,CAAC,CAAA;AAEhD,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MAAM,wBAAyB,CAAA,gBAAA,EAAkB,MAAM,CAAA;AAAA,IACvD,CAAC,MAAM;AAAA,GACT;AAEA,EACE,uBAAA,GAAA,CAAC,mCAAmC,QAAnC,EAAA,EAA4C,OAAO,QAClD,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,MACR,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,YAAY,IAAM,EAAA,SAAA;AAAA,MAC7B,KAAA;AAAA,MACA,aAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,iBAAiB,EAAA,cAAA;AAAA,MAEhB;AAAA;AAAA,KAEL,CACF,EAAA,CAAA;AAEJ,CAAC;AAEY,IAAA,kBAAA,GACX,cAAsE,IAAI;AAErE,IAAM,WAAc,GAAA,UAAA,CAAW,SAAS,UAAA,CAC7C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,kBAAkB,CAAA;AAC7D,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,aAAa,CAAA;AAE5C,EAAM,MAAA;AAAA,IACJ,EAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,WAAA;AAAA,IACT,IAAO,GAAA,WAAA;AAAA,IACP,SAAY,GAAA,OAAO,YAAiB,KAAA,QAAA,GAAW,YAAe,GAAA,MAAA;AAAA,IAC9D,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,OAAO;AAAA,MACL,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MACE,eAAA,CAAgB,iBAAmB,EAAA,cAAA,EAAgB,MAAM,OAAS,EAAA;AAAA,MAChE,IAAM,EAAA;AAAA,QACJ,WAAA,EAAa,OAAQ,CAAA,WAAA,CAAY,IAAI,CAAA;AAAA,QACrC,KAAA,EAAO,OAAQ,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,QACzB,QAAA,EAAU,OAAQ,CAAA,QAAA,CAAS,IAAI;AAAA;AACjC,KACD,CAAA;AAAA,IACH,CAAC,KAAA,CAAM,OAAS,EAAA,cAAA,EAAgB,SAAS,IAAI;AAAA,GAC/C;AAEA,EAAA,MAAM,CAAC,cAAA,EAAgB,cAAc,CAAA,GAAI,OAAQ,EAAA;AAEjD,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,WACC,KAAA,UAAA,CAAW,oBAAsB,EAAA;AAAA,MAC/B,GAAG,WAAA;AAAA,MACH,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,gBAAgB,IAAI;AAAA,GACvB;AAEA,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IAUb,MAAM;AAAA,MACJ;AAAA,QACE,eAAA;AAAA,QACA;AAAA,UACE,KAAO,EAAA;AAAA,YACL,KAAO,EAAA,EAAE,SAAW,EAAA,UAAA,EAAY,MAAM,KAAM,EAAA;AAAA,YAC5C,WAAa,EAAA;AAAA,cACX,GAAK,EAAA,cAAA;AAAA,cACL,SAAA,EAAW,YAAY,IAAM,EAAA;AAAA;AAC/B;AACF;AACF,OACF;AAAA,MACA,CAAC,WAAa,EAAA,EAAE,YAAY,UAAY,EAAA,IAAA,EAAM,MAAM,CAAA;AAAA,MACpD,CAAC,mBAAqB,EAAA,EAAE,WAAW,UAAY,EAAA,IAAA,EAAM,UAAU;AAAA,KACjE;AAAA,IACA;AAAA,MACE,YAAY,IAAM,EAAA,KAAA;AAAA,MAClB,cAAA;AAAA,MACA,YAAY,IAAM,EAAA,WAAA;AAAA,MAClB,YAAY,IAAM,EAAA,IAAA;AAAA,MAClB,YAAY,IAAM,EAAA;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,WAAwC,KAAA;AACvC,MAAM,MAAA,OAAA,GAAU,gBAAgB,YAAc,EAAA;AAAA,QAC5C,GAAG,WAAA;AAAA,QACH,IAAA;AAAA,QACA,eAAiB,EAAA;AAAA,OAClB,CAAA;AAED,MAAA,2BACG,QAAS,EAAA,EAAA,MAAA,EACR,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAY,IAAM,EAAA,IAAA,EAC/B,iBAAO,OAAY,KAAA,QAAA,uBACjB,QAAS,EAAA,EAAA,IAAA,EAAK,SAAS,QAAQ,EAAA,OAAA,EAAA,CAAA,GAEhC,SAEJ,CACF,EAAA,CAAA;AAAA,KAEJ;AAAA,IACA,CAAC,YAAc,EAAA,UAAA,EAAY,IAAM,EAAA,IAAA,EAAM,MAAM,MAAM;AAAA,GACrD;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,IAAI,EAAM,IAAA,SAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,YAAY,IAAM,EAAA,SAAA;AAAA,MAC7B,KAAA;AAAA,MACA,SAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAC","file":"index.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 { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useSlot } from '../../hooks/use-slot';\nimport { useTheme } from '../../hooks/use-theme';\nimport { bodies, headings } from '../../styles/typography.css';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  AriaHeaderContext,\n  AriaKeyboardContext,\n  AriaSection,\n  AriaSectionContext,\n  AriaSeparatorContext,\n  AriaText,\n  AriaTextContext,\n} from '../aria';\nimport { createCollectionRenderer } from '../collection';\nimport { IconContext } from '../icon';\nimport type { IconProps } from '../icon/types';\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"]}

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

@@ -1,6 +1,24 @@
-export { Picker, PickerContext, PickerItem, PickerItemContext } from './picker.js';
-export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars } from './picker.css.js';
-export { PickerClassNames, PickerItemProps, PickerItemRenderProps, PickerItemState, PickerProps, PickerState } from './types.js';
-import 'react-aria-components';
-import 'react';
+import { PickerClassNames, PickerProps, PickerItemProps } 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';
+
+declare const PickerContext: react.Context<ContextValue<PickerProps<unknown>, HTMLDivElement>>;
+declare const PickerItemContext: react.Context<ContextValue<PickerItemProps<unknown>, HTMLDivElement>>;
+/**
+ * Generic stylable picker that supports the functionality (sans drag and drop) of
+ * React Aria's ListBox: https://react-spectrum.adobe.com/react-aria/ListBox.html
+ *
+ * NOTE: The picker items does not support sections or separators
+ */
+declare const Picker: <T extends object>(props: Omit<react_aria_components.ListBoxProps<T>, "className" | "style" | "dragAndDropHooks"> & {
+    classNames?: PickerClassNames;
+} & {
+    columns?: number;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const PickerItem: <T extends object>(props: Omit<react_aria_components.ListBoxItemProps<T>, "className" | "style"> & {
+    classNames?: PickerClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { Picker, PickerContext, PickerItem, PickerItemContext };

package/dist/components/picker/index.js

@@ -1,6 +1,116 @@
 import '../../chunk-PZ5AY32C.js';
-export { Picker, PickerContext, PickerItem, PickerItemContext } from './picker.js';
-export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars } from './picker.css.js';
-import './types.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Section, Collection, Provider, ListBox, ListBoxItem } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/index.js';
+import { useDefaultProps } from '../../hooks/use-defaults/index.js';
+import { useTheme } from '../../hooks/use-theme/index.js';
+import { inlineVars } from '../../utils/css/index.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props/index.js';
+import { pickerClassNames, pickerStateVars, pickerItemStateVars } from './picker.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var PickerContext = createContext(null);
+var PickerItemContext = createContext(null);
+var Picker = forwardRef(function Picker2(props, ref) {
+  [props, ref] = useContextProps(props, ref, PickerContext);
+  props = useDefaultProps(props, "Picker");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    columns,
+    items,
+    layout = "stack",
+    orientation = "horizontal",
+    selectionMode = "single",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(pickerClassNames, theme.Picker, classNamesProp),
+    [theme.Picker, classNamesProp]
+  );
+  const values = useMemo(() => [[PickerItemContext, { classNames }]], [classNames]);
+  const style = useCallback(
+    ({ state, ...renderProps }) => inlineVars(pickerStateVars, {
+      ...renderProps,
+      columns,
+      layout,
+      orientation
+    }),
+    [columns, layout, orientation]
+  );
+  const children = useMemo(() => {
+    if (!(childrenProp || items)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        className: classNames?.list?.list,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: typeof childrenProp === "function" ? /* @__PURE__ */ jsx(Collection, { items, children: childrenProp }) : childrenProp
+      }
+    );
+  }, [childrenProp, items, classNames?.list?.list, ariaLabel, ariaLabelledBy]);
+  return /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ...rest,
+      ref,
+      className: classNames?.list?.container,
+      items,
+      layout,
+      orientation,
+      selectionMode,
+      style,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children
+    }
+  ) });
+});
+var PickerItem = forwardRef(function PickerItem2(props, ref) {
+  [props, ref] = useContextProps(props, ref, PickerItemContext);
+  const {
+    children: childrenProp,
+    id,
+    classNames: classNamesProp,
+    textValue = typeof childrenProp === "string" ? childrenProp : void 0,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(pickerClassNames, theme.Picker, classNamesProp),
+    [theme.Picker, classNamesProp]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(pickerItemStateVars, renderProps),
+    []
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx("div", { className: classNames?.item?.item, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }),
+    [childrenProp, classNames?.item?.item]
+  );
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      ...rest,
+      ref,
+      id: id ?? textValue,
+      className: classNames?.item?.container,
+      style,
+      textValue,
+      children
+    }
+  );
+});
+
+export { Picker, PickerContext, PickerItem, PickerItemContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
+{"version":3,"sources":["../../../src/components/picker/index.tsx"],"names":["Picker","PickerItem"],"mappings":"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","file":"index.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  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  Collection,\n  type ContextValue,\n  ListBox,\n  ListBoxItem,\n  type ListBoxItemRenderProps,\n  type ListBoxRenderProps,\n  Provider,\n  Section,\n} from 'react-aria-components';\nimport { useContextProps } from '../../hooks/use-context-props';\nimport { useDefaultProps } from '../../hooks/use-defaults';\nimport { useTheme } from '../../hooks/use-theme';\nimport { inlineVars } from '../../utils/css';\nimport { callRenderProps, mergeClassNames } from '../../utils/props';\nimport {\n  pickerClassNames,\n  pickerItemStateVars,\n  pickerStateVars,\n} from './picker.css';\nimport type { PickerItemProps, PickerProps } from './types';\n\nexport const PickerContext =\n  createContext<ContextValue<PickerProps<unknown>, HTMLDivElement>>(null);\n\nexport const PickerItemContext =\n  createContext<ContextValue<PickerItemProps<unknown>, HTMLDivElement>>(null);\n\n/**\n * Generic stylable picker that supports the functionality (sans drag and drop) of\n * React Aria's ListBox: https://react-spectrum.adobe.com/react-aria/ListBox.html\n *\n * NOTE: The picker items does not support sections or separators\n */\nexport const Picker = forwardRef(function Picker<T extends object>(\n  props: PickerProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, PickerContext);\n\n  props = useDefaultProps(props, 'Picker');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    columns,\n    items,\n    layout = 'stack',\n    orientation = 'horizontal',\n    selectionMode = 'single',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(pickerClassNames, theme.Picker, classNamesProp),\n    [theme.Picker, classNamesProp],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof PickerItemContext,\n        ContextValue<PickerItemProps<unknown>, HTMLDivElement>,\n      ],\n    ]\n  >(() => [[PickerItemContext, { classNames }]], [classNames]);\n\n  const style = useCallback(\n    ({ state, ...renderProps }: ListBoxRenderProps) =>\n      inlineVars(pickerStateVars, {\n        ...renderProps,\n        columns,\n        layout,\n        orientation,\n      }),\n    [columns, layout, orientation],\n  );\n\n  const children = useMemo(() => {\n    if (!(childrenProp || items)) {\n      return null;\n    }\n\n    return (\n      <Section\n        className={classNames?.list?.list}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {typeof childrenProp === 'function' ? (\n          <Collection items={items}>{childrenProp}</Collection>\n        ) : (\n          childrenProp\n        )}\n      </Section>\n    );\n  }, [childrenProp, items, classNames?.list?.list, ariaLabel, ariaLabelledBy]);\n\n  return (\n    <Provider values={values}>\n      <ListBox<T>\n        {...rest}\n        ref={ref}\n        className={classNames?.list?.container}\n        items={items}\n        layout={layout}\n        orientation={orientation}\n        selectionMode={selectionMode}\n        style={style}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {children}\n      </ListBox>\n    </Provider>\n  );\n});\n\nexport const PickerItem = forwardRef(function PickerItem<T extends object>(\n  props: PickerItemProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, PickerItemContext);\n\n  const {\n    children: childrenProp,\n    id,\n    classNames: classNamesProp,\n    textValue = typeof childrenProp === 'string' ? childrenProp : undefined,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(pickerClassNames, theme.Picker, classNamesProp),\n    [theme.Picker, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: ListBoxItemRenderProps) =>\n      inlineVars(pickerItemStateVars, renderProps),\n    [],\n  );\n\n  const children = useCallback(\n    (renderProps: ListBoxItemRenderProps) => (\n      <div className={classNames?.item?.item}>\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [childrenProp, classNames?.item?.item],\n  );\n\n  return (\n    <ListBoxItem<T>\n      {...rest}\n      ref={ref as ForwardedRef<T>}\n      id={id ?? textValue}\n      className={classNames?.item?.container}\n      style={style}\n      textValue={textValue}\n    >\n      {children}\n    </ListBoxItem>\n  );\n});\n"]}

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

@@ -1,9 +1,8 @@
-export { Popover, PopoverContext } from './popover.js';
-export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars } from './popover.css.js';
-export { PopoverClassNames, PopoverProps, PopoverState } from './types.js';
-import 'react';
-import 'react-aria-components';
-import '../../types/react-aria.js';
+import * as react from 'react';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import { RenderPropsChildren } from '../../types/react-aria.js';
+import { PopoverRenderProps, PopoverClassNames, PopoverMapping, PopoverProps } from './types.js';
 import '@react-stately/overlays';
 import 'type-fest';
 import '../../types/generic.js';
@@ -12,3 +11,12 @@ import '../button/types.js';
 import '../icon/types.js';
 import '../group/types.js';
 import '@react-types/shared';
+
+declare const PopoverContext: react.Context<ContextValue<PopoverProps, HTMLElement>>;
+declare const Popover: (props: Omit<react_aria_components.PopoverProps, "children" | "className" | "style"> & {
+    children?: RenderPropsChildren<PopoverRenderProps>;
+    classNames?: PopoverClassNames;
+    mapping?: Partial<PopoverMapping>;
+} & react.RefAttributes<HTMLElement>) => react.ReactElement | null;
+
+export { Popover, PopoverContext };

package/dist/components/popover/index.js

@@ -1,6 +1,143 @@
 import '../../chunk-PZ5AY32C.js';
-export { Popover, PopoverContext } from './popover.js';
-export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars } from './popover.css.js';
-import './types.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { DEFAULT_SLOT, Provider, Dialog, Popover as Popover$1 } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/index.js';
+import { useDefaultProps } from '../../hooks/use-defaults/index.js';
+import { useSlot } from '../../hooks/use-slot/index.js';
+import { useTheme } from '../../hooks/use-theme/index.js';
+import { headings } from '../../styles/typography.css.js';
+import { inlineVars } from '../../utils/css/index.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props/index.js';
+import { AriaHeadingContext } from '../aria/index.js';
+import { ButtonContext } from '../button/index.js';
+import { ElementContext } from '../element/index.js';
+import { GroupContext } from '../group/index.js';
+import { popoverClassNames, popoverStateVars } from './popover.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  heading: headings.v4,
+  actions: {
+    context: ButtonContext,
+    orientation: "horizontal",
+    reverse: true
+  },
+  primary: {
+    size: "sm"
+  },
+  secondary: { size: "sm", variant: "bare" }
+};
+var PopoverContext = createContext(null);
+var Popover = forwardRef(function Popover2(props, ref) {
+  [props, ref] = useContextProps(props, ref, PopoverContext);
+  props = useDefaultProps(props, "Popover");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    mapping: mappingProp,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({ ...defaultMapping, ...mappingProp }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(popoverClassNames, theme.Popover, classNamesProp, {
+      popover: {
+        container: theme.className
+        // required to consume global theme within Popover
+      }
+    }),
+    [theme.className, theme.Popover, classNamesProp]
+  );
+  const [headerRef, hasHeader] = useSlot();
+  const style = useCallback(
+    (renderProps) => inlineVars(popoverStateVars, {
+      ...theme.style,
+      // required to consume global styles within Popover
+      ...renderProps,
+      hasHeader
+    }),
+    [theme.style, hasHeader]
+  );
+  const values = useMemo(
+    () => [
+      [
+        ElementContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            header: {
+              as: "header",
+              className: classNames?.header,
+              ref: headerRef,
+              values: [
+                [
+                  AriaHeadingContext,
+                  {
+                    className: mapping.heading,
+                    slot: "title"
+                  }
+                ],
+                [GroupContext, null]
+              ]
+            },
+            content: { className: classNames?.content },
+            footer: {
+              as: "footer",
+              className: classNames?.footer,
+              values: [
+                [AriaHeadingContext, null],
+                [
+                  GroupContext,
+                  {
+                    values: {
+                      slots: {
+                        [DEFAULT_SLOT]: mapping.primary ?? {},
+                        secondary: mapping.secondary ?? {}
+                      }
+                    },
+                    ...mapping.actions
+                  }
+                ]
+              ]
+            }
+          }
+        }
+      ]
+    ],
+    [
+      classNames?.header,
+      classNames?.content,
+      classNames?.footer,
+      headerRef,
+      mapping.actions,
+      mapping.heading,
+      mapping.primary,
+      mapping.secondary
+    ]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx(Dialog, { className: classNames?.popover?.popover, children: ({ close }) => callRenderProps(childrenProp, {
+      ...renderProps,
+      close,
+      defaultChildren: null
+    }) }) }),
+    [childrenProp, classNames?.popover?.popover, values]
+  );
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.popover?.container,
+      style,
+      children
+    }
+  );
+});
+
+export { Popover, PopoverContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map