@accelint/design-system 0.1.0 → 0.2.0

package/dist/components/options/options.js

@@ -0,0 +1,152 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { Provider, Popover, Collection, UNSTABLE_CollectionRendererContext, ListBox, ListBoxItem, ListStateContext } from 'react-aria-components';
+import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useSlot } from '../../hooks/use-slot/use-slot.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { bodies, headings } from '../../styles/typography.vanilla.js';
+import { AriaSectionContext, AriaHeaderContext, AriaSeparatorContext, AriaSection, AriaTextContext, AriaKeyboardContext, AriaText } from '../aria/aria.js';
+import { createCollectionRenderer } from '../collection/collection.js';
+import { IconContext } from '../icon/icon.js';
+import { optionsClassNames, optionsStateVars, optionsItemStateVars } from './options.vanilla.js';
+
+const 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
+  }
+};
+const defaultSize = "lg";
+const OptionsContext = createContext(null);
+const 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) => jsx(Provider, { values, children: jsx("div", { className: classNames?.options?.options, children: callRenderProps(childrenProp, {
+    ...renderProps,
+    size,
+    defaultChildren: null
+  }) }) }), [childrenProp, classNames?.options?.options, size, values]);
+  return jsx(Popover, { ...rest, ref, className: classNames?.options?.container, style, children });
+});
+const OptionsListContext = createContext(null);
+const 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 jsx(AriaSection, { className: classNames?.list?.list, children: typeof childrenProp === "function" ? jsx(Collection, { items, children: childrenProp }) : childrenProp });
+  }, [classNames?.list?.list, childrenProp, items]);
+  const renderer = useMemo(() => createCollectionRenderer(ListStateContext, values), [values]);
+  return jsx(UNSTABLE_CollectionRendererContext.Provider, { value: renderer, children: jsx(Provider, { values, children: jsx(ListBox, { ...rest, ref, className: classNames?.list?.container, items, selectionMode, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children }) }) });
+});
+const OptionsItemContext = createContext(null);
+const 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 jsx(Provider, { values, children: jsx("div", { className: classNames?.item?.item, children: typeof content === "string" ? jsx(AriaText, { slot: "label", children: content }) : content }) });
+  }, [childrenProp, classNames?.item?.item, size, values]);
+  return jsx(ListBoxItem, { ...rest, id: id ?? textValue, ref, className: classNames?.item?.container, style, textValue, children });
+});
+
+export { Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext };

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sources":["../../../src/components/options/options.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type ForwardedRef,\n  type HTMLAttributes,\n} from 'react';\nimport {\n  Collection,\n  ListBox,\n  ListBoxItem,\n  ListStateContext,\n  Popover,\n  Provider,\n  UNSTABLE_CollectionRendererContext,\n  type CollectionRenderer,\n  type ContextValue,\n  type ListBoxItemRenderProps,\n  type ListBoxRenderProps,\n  type PopoverRenderProps,\n  type SectionProps,\n  type SeparatorProps,\n  type TextProps,\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"],"names":["Options"],"mappings":"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"}

package/dist/components/options/options.vanilla.js

@@ -0,0 +1,10 @@
+
+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 };

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

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

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

@@ -0,0 +1,49 @@
+import type { AsType } from '../../types';
+import type { ListBoxItemProps, ListBoxItemRenderProps, ListBoxProps, ListBoxRenderProps, PopoverProps, PopoverRenderProps } from 'react-aria-components';
+import type { PartialDeep } from 'type-fest';
+import type { IconClassNames } from '../icon/types';
+export type OptionsClassNames = PartialDeep<{
+    options: {
+        container: string;
+        options: string;
+    };
+    list: {
+        container: string;
+        list: string;
+        section: string;
+        header: string;
+        separator: string;
+    };
+    item: {
+        container: string;
+        item: string;
+        icon: IconClassNames;
+        label: string;
+        description: string;
+        shortcut: string;
+    };
+}>;
+export type OptionsSizes = 'sm' | 'lg';
+export type OptionsMapping = {
+    description: Partial<Record<OptionsSizes, string>>;
+    header: Partial<Record<OptionsSizes, string>>;
+    label: Partial<Record<OptionsSizes, string>>;
+    shortcut: Partial<Record<OptionsSizes, string>>;
+};
+type BaseOptionsProps = {
+    classNames?: OptionsClassNames;
+    mapping?: Partial<OptionsMapping>;
+    size?: OptionsSizes;
+};
+export type OptionsProps = Omit<PopoverProps, 'className' | 'style'> & BaseOptionsProps;
+export type OptionsListProps<T extends object> = Omit<ListBoxProps<T>, 'className' | 'dragAndDropHooks' | 'orientation' | 'style'> & BaseOptionsProps;
+export type OptionsItemProps<T extends object> = Omit<ListBoxItemProps<T>, 'className' | 'style'> & BaseOptionsProps;
+export type OptionsRenderProps = AsType<PopoverRenderProps> & Required<Pick<BaseOptionsProps, 'size'>>;
+export type OptionsListRenderProps = AsType<ListBoxRenderProps> & Required<Pick<BaseOptionsProps, 'size'>>;
+export type OptionsItemRenderProps = AsType<ListBoxItemRenderProps> & Required<Pick<BaseOptionsProps, 'size'>>;
+export type OptionsState = Omit<OptionsRenderProps, 'trigger'>;
+export type OptionsListState = Omit<OptionsListRenderProps, 'layout' | 'state' | 'isDropTarget'>;
+export type OptionsItemState = Omit<OptionsItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> & {
+    hasDescription: boolean;
+};
+export {};

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

@@ -0,0 +1,3 @@
+export { Picker, PickerContext, PickerItem, PickerItemContext } from './picker';
+export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars, } from './picker.css';
+export { type PickerClassNames, type PickerItemProps, type PickerItemRenderProps, type PickerItemState, type PickerProps, type PickerState, } from './types';

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

@@ -0,0 +1,32 @@
+import type { PickerClassNames } from './types';
+export declare const pickerContainers: {
+    list: string;
+    item: string;
+};
+export declare const pickerSpaceVars: {
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const pickerStateVars: {
+    columns: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    orientation: `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})`;
+};
+export declare const pickerItemColorVars: {
+    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})`;
+};
+export declare const pickerItemStateVars: {
+    selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `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})`;
+    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})`;
+};
+export declare const pickerClassNames: PickerClassNames;

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

@@ -0,0 +1,18 @@
+import { type ContextValue } from 'react-aria-components';
+import type { PickerItemProps, PickerProps } from './types';
+export declare const PickerContext: import("react").Context<ContextValue<PickerProps<unknown>, HTMLDivElement>>;
+export declare const PickerItemContext: import("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
+ */
+export declare const Picker: <T extends object>(props: Omit<import("react-aria-components").ListBoxProps<T>, "className" | "style" | "dragAndDropHooks"> & {
+    classNames?: import("./types").PickerClassNames;
+} & {
+    columns?: number;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const PickerItem: <T extends object>(props: Omit<import("react-aria-components").ListBoxItemProps<T>, "className" | "style"> & {
+    classNames?: import("./types").PickerClassNames;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/dist/components/picker/picker.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { useContextProps, Section, Collection, Provider, ListBox, ListBoxItem } from 'react-aria-components';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { pickerClassNames, pickerStateVars, pickerItemStateVars } from './picker.vanilla.js';
+
+const PickerContext = createContext(null);
+const PickerItemContext = createContext(null);
+const 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 jsx(Section, { className: classNames?.list?.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: typeof childrenProp === "function" ? jsx(Collection, { items, children: childrenProp }) : childrenProp });
+  }, [childrenProp, items, classNames?.list?.list, ariaLabel, ariaLabelledBy]);
+  return jsx(Provider, { values, children: jsx(ListBox, { ...rest, ref, className: classNames?.list?.container, items, layout, orientation, selectionMode, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children }) });
+});
+const 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) => jsx("div", { className: classNames?.item?.item, children: callRenderProps(childrenProp, {
+    ...renderProps,
+    defaultChildren: null
+  }) }), [childrenProp, classNames?.item?.item]);
+  return jsx(ListBoxItem, { ...rest, ref, id: id ?? textValue, className: classNames?.item?.container, style, textValue, children });
+});
+
+export { Picker, PickerContext, PickerItem, PickerItemContext };

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker.js","sources":["../../../src/components/picker/picker.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type ForwardedRef,\n} from 'react';\nimport {\n  Collection,\n  ListBox,\n  ListBoxItem,\n  Provider,\n  Section,\n  useContextProps,\n  type ContextValue,\n  type ListBoxItemRenderProps,\n  type ListBoxRenderProps,\n} from 'react-aria-components';\nimport { useDefaultProps, useTheme } from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\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"],"names":["Picker","PickerItem"],"mappings":"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"}

package/dist/components/picker/picker.stories.css.d.ts

@@ -0,0 +1,3 @@
+export declare const colorPickerItem: string;
+export declare const colorSwatch: string;
+export declare const iconPickerItem: string;

package/dist/components/picker/picker.vanilla.js

@@ -0,0 +1,9 @@
+
+var pickerClassNames = { list: { container: "picker_pickerClassNames_list_container__k0t389k", list: "picker_pickerClassNames_list_list__k0t389l" }, item: { container: "picker_pickerClassNames_item_container__k0t389m", item: "picker_pickerClassNames_item_item__k0t389n" } };
+var pickerContainers = { list: "picker_pickerContainers_list__k0t3890", item: "picker_pickerContainers_item__k0t3891" };
+var pickerItemColorVars = { background: "var(--background__k0t3899)", border: "var(--border__k0t389a)", color: "var(--color__k0t389b)" };
+var pickerItemStateVars = { selectionMode: "var(--selectionMode__k0t389c)", selectionBehavior: "var(--selectionBehavior__k0t389d)", isDisabled: "var(--isDisabled__k0t389e)", isFocused: "var(--isFocused__k0t389f)", isFocusVisible: "var(--isFocusVisible__k0t389g)", isHovered: "var(--isHovered__k0t389h)", isPressed: "var(--isPressed__k0t389i)", isSelected: "var(--isSelected__k0t389j)" };
+var pickerSpaceVars = { gap: "var(--gap__k0t3892)" };
+var pickerStateVars = { columns: "var(--columns__k0t3893)", layout: "var(--layout__k0t3894)", orientation: "var(--orientation__k0t3895)", isEmpty: "var(--isEmpty__k0t3896)", isFocused: "var(--isFocused__k0t3897)", isFocusVisible: "var(--isFocusVisible__k0t3898)" };
+
+export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars };

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

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

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

@@ -0,0 +1,28 @@
+import type { ListBoxProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxRenderProps } from 'react-aria-components';
+import type { PartialDeep } from 'type-fest';
+export type PickerClassNames = PartialDeep<{
+    list: {
+        container: string;
+        list: string;
+    };
+    item: {
+        container: string;
+        item: string;
+    };
+}>;
+type BaseProps = {
+    classNames?: PickerClassNames;
+};
+type BasePickerProps = BaseProps & {
+    /**
+     * Only applicable if layout='grid'
+     */
+    columns?: number;
+};
+export type PickerState = Omit<ListBoxRenderProps, 'state' | 'isDropTarget'> & Required<Pick<PickerProps<unknown>, 'columns' | 'layout' | 'orientation'>>;
+export type PickerProps<T> = Omit<ListBoxProps<T>, 'className' | 'dragAndDropHooks' | 'style'> & BasePickerProps;
+export type BasePickerItemProps = BaseProps;
+export type PickerItemRenderProps = Omit<ListBoxItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'>;
+export type PickerItemState = PickerItemRenderProps;
+export type PickerItemProps<T> = Omit<ListBoxItemProps<T>, 'className' | 'style'> & BasePickerItemProps;
+export {};

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

@@ -0,0 +1,3 @@
+export { Popover, PopoverContext } from './popover';
+export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars, } from './popover.css';
+export { type PopoverClassNames, type PopoverProps, type PopoverState, } from './types';

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

@@ -0,0 +1,31 @@
+import type { PopoverClassNames } from './types';
+export declare const popoverContainer: string;
+export declare const popoverColorVars: {
+    content: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const popoverSpaceVars: {
+    width: `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})`;
+    gap: {
+        default: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        header: {
+            after: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        content: {
+            before: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        footer: {
+            before: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+};
+export declare const popoverStateVars: {
+    hasHeader: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    placement: `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})`;
+};
+export declare const popoverClassNames: PopoverClassNames;

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

@@ -0,0 +1,8 @@
+import { type ContextValue } from 'react-aria-components';
+import type { PopoverMapping, PopoverProps } from './types';
+export declare const PopoverContext: import("react").Context<ContextValue<PopoverProps, HTMLElement>>;
+export declare const Popover: (props: Omit<import("react-aria-components").PopoverProps, "children" | "className" | "style"> & {
+    children?: import("../..").RenderPropsChildren<import("./types").PopoverRenderProps>;
+    classNames?: import("./types").PopoverClassNames;
+    mapping?: Partial<PopoverMapping>;
+} & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/popover/popover.js

@@ -0,0 +1,110 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { useContextProps, DEFAULT_SLOT, Provider, Dialog, Popover as Popover$1 } from 'react-aria-components';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { useSlot } from '../../hooks/use-slot/use-slot.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { headings } from '../../styles/typography.vanilla.js';
+import { AriaHeadingContext } from '../aria/aria.js';
+import { ButtonContext } from '../button/button.js';
+import { ElementContext } from '../element/element.js';
+import { GroupContext } from '../group/group.js';
+import { popoverClassNames, popoverStateVars } from './popover.vanilla.js';
+
+const defaultMapping = {
+  heading: headings.v4,
+  actions: {
+    context: ButtonContext,
+    orientation: "horizontal",
+    reverse: true
+  },
+  primary: {
+    size: "sm"
+  },
+  secondary: { size: "sm", variant: "bare" }
+};
+const PopoverContext = createContext(null);
+const 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) => jsx(Provider, { values, children: jsx(Dialog, { className: classNames?.popover?.popover, children: ({ close }) => callRenderProps(childrenProp, {
+    ...renderProps,
+    close,
+    defaultChildren: null
+  }) }) }), [childrenProp, classNames?.popover?.popover, values]);
+  return jsx(Popover$1, { ...rest, ref, className: classNames?.popover?.container, style, children });
+});
+
+export { Popover, PopoverContext };

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n  type ForwardedRef,\n  type HTMLAttributes,\n} from 'react';\nimport {\n  DEFAULT_SLOT,\n  Dialog as RACDialog,\n  Provider,\n  Popover as RACPopover,\n  useContextProps,\n  type ContextValue,\n  type PopoverRenderProps as RACPopoverRenderProps,\n} from 'react-aria-components';\nimport { useDefaultProps, useSlot, useTheme } from '../../hooks';\nimport { headings } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport { AriaHeadingContext } from '../aria';\nimport { ButtonContext, type ButtonProps } from '../button';\nimport { ElementContext, type ElementProps } from '../element';\nimport { GroupContext, type GroupProps } from '../group';\nimport { popoverClassNames, popoverStateVars } from './popover.css';\nimport type { PopoverMapping, PopoverProps } from './types';\n\nconst defaultMapping: PopoverMapping = {\n  heading: headings.v4,\n  actions: {\n    context: ButtonContext,\n    orientation: 'horizontal',\n    reverse: true,\n  },\n  primary: {\n    size: 'sm',\n  },\n  secondary: { size: 'sm', variant: 'bare' },\n};\n\nexport const PopoverContext =\n  createContext<ContextValue<PopoverProps, HTMLElement>>(null);\n\nexport const Popover = forwardRef(function Popover(\n  props: PopoverProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  [props, ref] = useContextProps(props, ref, PopoverContext);\n  props = useDefaultProps(props, 'Popover');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    mapping: mappingProp,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({ ...defaultMapping, ...mappingProp }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(popoverClassNames, theme.Popover, classNamesProp, {\n        popover: {\n          container: theme.className, // required to consume global theme within Popover\n        },\n      }),\n    [theme.className, theme.Popover, classNamesProp],\n  );\n\n  const [headerRef, hasHeader] = useSlot();\n\n  const style = useCallback(\n    (renderProps: RACPopoverRenderProps) =>\n      inlineVars(popoverStateVars, {\n        ...theme.style, // required to consume global styles within Popover\n        ...renderProps,\n        hasHeader,\n      }),\n    [theme.style, hasHeader],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof ElementContext,\n        ContextValue<\n          ElementProps<\n            ContextValue<HTMLAttributes<HTMLElement>, HTMLHeadingElement>,\n            ContextValue<\n              GroupProps<ButtonProps, HTMLButtonElement>,\n              HTMLDivElement\n            >\n          >,\n          HTMLElement\n        >,\n      ],\n    ]\n  >(\n    () => [\n      [\n        ElementContext,\n        {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            header: {\n              as: 'header',\n              className: classNames?.header,\n              ref: headerRef,\n              values: [\n                [\n                  AriaHeadingContext,\n                  {\n                    className: mapping.heading,\n                    slot: 'title',\n                  },\n                ],\n                [GroupContext, null],\n              ],\n            },\n            content: { className: classNames?.content },\n            footer: {\n              as: 'footer',\n              className: classNames?.footer,\n              values: [\n                [AriaHeadingContext, null],\n                [\n                  GroupContext,\n                  {\n                    values: {\n                      slots: {\n                        [DEFAULT_SLOT]: mapping.primary ?? {},\n                        secondary: mapping.secondary ?? {},\n                      },\n                    },\n                    ...mapping.actions,\n                  },\n                ],\n              ],\n            },\n          },\n        },\n      ],\n    ],\n    [\n      classNames?.header,\n      classNames?.content,\n      classNames?.footer,\n      headerRef,\n      mapping.actions,\n      mapping.heading,\n      mapping.primary,\n      mapping.secondary,\n    ],\n  );\n\n  const children = useCallback(\n    (renderProps: RACPopoverRenderProps) => (\n      <Provider values={values}>\n        <RACDialog className={classNames?.popover?.popover}>\n          {({ close }) =>\n            callRenderProps(childrenProp, {\n              ...renderProps,\n              close,\n              defaultChildren: null,\n            })\n          }\n        </RACDialog>\n      </Provider>\n    ),\n    [childrenProp, classNames?.popover?.popover, values],\n  );\n\n  return (\n    <RACPopover\n      {...rest}\n      ref={ref}\n      className={classNames?.popover?.container}\n      style={style}\n    >\n      {children}\n    </RACPopover>\n  );\n});\n"],"names":["Popover","RACDialog","RACPopover"],"mappings":"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"}

package/dist/components/popover/popover.vanilla.js

@@ -0,0 +1,7 @@
+
+var popoverClassNames = { popover: { container: "popover_popoverClassNames_popover_container__1tn75dxf", popover: "popover_popoverClassNames_popover_popover__1tn75dxg surfaces_proud__15mw6jf3 surfaces_flush__15mw6jf2" }, header: "popover_header__1tn75dxd", content: "popover_content__1tn75dxe", footer: "popover_popoverClassNames_footer__1tn75dxh" };
+var popoverColorVars = { content: { color: "var(--content-color__1tn75dx1)" } };
+var popoverSpaceVars = { width: "var(--width__1tn75dx2)", x: "var(--x__1tn75dx3)", y: "var(--y__1tn75dx4)", gap: { "default": "var(--gap-default__1tn75dx5)", header: { after: "var(--gap-header-after__1tn75dx6)" }, content: { before: "var(--gap-content-before__1tn75dx7)" }, footer: { before: "var(--gap-footer-before__1tn75dx8)" } } };
+var popoverStateVars = { hasHeader: "var(--hasHeader__1tn75dx9)", placement: "var(--placement__1tn75dxa)", isEntering: "var(--isEntering__1tn75dxb)", isExiting: "var(--isExiting__1tn75dxc)" };
+
+export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars };

package/dist/components/popover/popover.vanilla.js.map

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