@accelint/design-system 0.3.2 → 0.4.0

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

@@ -0,0 +1,52 @@
+import { AsType } from '../../types/generic.js';
+import { PopoverProps, ListBoxProps, ListBoxItemProps, PopoverRenderProps, ListBoxRenderProps, ListBoxItemRenderProps } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+import { IconClassNames } from '../icon/types.js';
+import 'react';
+
+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;
+    };
+}>;
+type OptionsSizes = 'sm' | 'lg';
+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;
+};
+type OptionsProps = Omit<PopoverProps, 'className' | 'style'> & BaseOptionsProps;
+type OptionsListProps<T extends object> = Omit<ListBoxProps<T>, 'className' | 'dragAndDropHooks' | 'orientation' | 'style'> & BaseOptionsProps;
+type OptionsItemProps<T extends object> = Omit<ListBoxItemProps<T>, 'className' | 'style'> & BaseOptionsProps;
+type OptionsRenderProps = AsType<PopoverRenderProps> & Required<Pick<BaseOptionsProps, 'size'>>;
+type OptionsListRenderProps = AsType<ListBoxRenderProps> & Required<Pick<BaseOptionsProps, 'size'>>;
+type OptionsItemRenderProps = AsType<ListBoxItemRenderProps> & Required<Pick<BaseOptionsProps, 'size'>>;
+type OptionsState = Omit<OptionsRenderProps, 'trigger'>;
+type OptionsListState = Omit<OptionsListRenderProps, 'layout' | 'state' | 'isDropTarget'>;
+type OptionsItemState = Omit<OptionsItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'> & {
+    hasDescription: boolean;
+};
+
+export type { OptionsClassNames, OptionsItemProps, OptionsItemRenderProps, OptionsItemState, OptionsListProps, OptionsListRenderProps, OptionsListState, OptionsMapping, OptionsProps, OptionsRenderProps, OptionsSizes, OptionsState };

package/dist/components/options/types.js

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

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

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

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

@@ -0,0 +1,6 @@
+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 'type-fest';

package/dist/components/picker/index.js

@@ -0,0 +1,6 @@
+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';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,37 @@
+import { PickerClassNames } from './types.js';
+import 'react-aria-components';
+import 'type-fest';
+
+declare const pickerContainers: {
+    list: string;
+    item: string;
+};
+declare const pickerSpaceVars: {
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+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})`;
+};
+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})`;
+};
+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})`;
+};
+declare const pickerClassNames: PickerClassNames;
+
+export { pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars };

package/dist/components/picker/picker.css.js

@@ -0,0 +1,13 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/picker/picker.css.ts
+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 };
+//# sourceMappingURL=picker.css.js.map
+//# sourceMappingURL=picker.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/picker/picker.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,gBAAmB,GAAA,EAAC,IAAK,EAAA,EAAC,WAAU,iDAAkD,EAAA,IAAA,EAAK,4CAA4C,EAAA,EAAE,MAAK,EAAC,SAAA,EAAU,iDAAkD,EAAA,IAAA,EAAK,8CAA6C;AACjQ,IAAI,gBAAmB,GAAA,EAAC,IAAK,EAAA,uCAAA,EAAwC,MAAK,uCAAuC;AACjH,IAAI,sBAAsB,EAAC,UAAA,EAAW,8BAA6B,MAAO,EAAA,wBAAA,EAAyB,OAAM,uBAAuB;AAChI,IAAI,sBAAsB,EAAC,aAAA,EAAc,+BAAgC,EAAA,iBAAA,EAAkB,qCAAoC,UAAW,EAAA,4BAAA,EAA6B,SAAU,EAAA,2BAAA,EAA4B,gBAAe,gCAAiC,EAAA,SAAA,EAAU,6BAA4B,SAAU,EAAA,2BAAA,EAA4B,YAAW,4BAA4B;AAC5W,IAAA,eAAA,GAAkB,EAAC,GAAA,EAAI,qBAAqB;AAChD,IAAI,eAAkB,GAAA,EAAC,OAAQ,EAAA,yBAAA,EAA0B,MAAO,EAAA,wBAAA,EAAyB,WAAY,EAAA,6BAAA,EAA8B,OAAQ,EAAA,yBAAA,EAA0B,SAAU,EAAA,2BAAA,EAA4B,gBAAe,gCAAgC","file":"picker.css.js","sourcesContent":["export 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'}};\nexport var pickerContainers = {list:'picker_pickerContainers_list__k0t3890',item:'picker_pickerContainers_item__k0t3891'};\nexport var pickerItemColorVars = {background:'var(--background__k0t3899)',border:'var(--border__k0t389a)',color:'var(--color__k0t389b)'};\nexport 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)'};\nexport var pickerSpaceVars = {gap:'var(--gap__k0t3892)'};\nexport 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)'};"]}

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

@@ -0,0 +1,24 @@
+import { PickerProps, PickerItemProps, PickerClassNames } 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/picker.js

@@ -0,0 +1,113 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { useContextProps, Section, Collection, Provider, ListBox, ListBoxItem } from 'react-aria-components';
+import { useDefaultProps, useTheme } from '../../hooks/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/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=picker.js.map
+//# sourceMappingURL=picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/picker/picker.tsx"],"names":["Picker","PickerItem"],"mappings":"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","file":"picker.js","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"]}

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

@@ -0,0 +1,5 @@
+declare const colorPickerItem: string;
+declare const colorSwatch: string;
+declare const iconPickerItem: string;
+
+export { colorPickerItem, colorSwatch, iconPickerItem };

package/dist/components/picker/picker.stories.css.js

@@ -0,0 +1,10 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/picker/picker.stories.css.ts
+var colorPickerItem = "picker.stories_colorPickerItem__129jwhc0";
+var colorSwatch = "picker.stories_colorSwatch__129jwhc1";
+var iconPickerItem = "picker.stories_iconPickerItem__129jwhc2";
+
+export { colorPickerItem, colorSwatch, iconPickerItem };
+//# sourceMappingURL=picker.stories.css.js.map
+//# sourceMappingURL=picker.stories.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/picker/picker.stories.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,eAAkB,GAAA;AACtB,IAAI,WAAc,GAAA;AAClB,IAAI,cAAiB,GAAA","file":"picker.stories.css.js","sourcesContent":["export var colorPickerItem = 'picker.stories_colorPickerItem__129jwhc0';\nexport var colorSwatch = 'picker.stories_colorSwatch__129jwhc1';\nexport var iconPickerItem = 'picker.stories_iconPickerItem__129jwhc2';"]}

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

@@ -0,0 +1,30 @@
+import { ListBoxRenderProps, ListBoxProps, ListBoxItemRenderProps, ListBoxItemProps } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+
+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;
+};
+type PickerState = Omit<ListBoxRenderProps, 'state' | 'isDropTarget'> & Required<Pick<PickerProps<unknown>, 'columns' | 'layout' | 'orientation'>>;
+type PickerProps<T> = Omit<ListBoxProps<T>, 'className' | 'dragAndDropHooks' | 'style'> & BasePickerProps;
+type BasePickerItemProps = BaseProps;
+type PickerItemRenderProps = Omit<ListBoxItemRenderProps, 'allowsDragging' | 'isDragging' | 'isDropTarget'>;
+type PickerItemState = PickerItemRenderProps;
+type PickerItemProps<T> = Omit<ListBoxItemProps<T>, 'className' | 'style'> & BasePickerItemProps;
+
+export type { BasePickerItemProps, PickerClassNames, PickerItemProps, PickerItemRenderProps, PickerItemState, PickerProps, PickerState };

package/dist/components/picker/types.js

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

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

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

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

@@ -0,0 +1,14 @@
+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 '@react-stately/overlays';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+import '../button/types.js';
+import '../icon/types.js';
+import '../group/types.js';
+import '@react-types/shared';

package/dist/components/popover/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Popover, PopoverContext } from './popover.js';
+export { popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars } from './popover.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,45 @@
+import { PopoverClassNames } from './types.js';
+import '@react-stately/overlays';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+import '../../types/react-aria.js';
+import 'react';
+import '../button/types.js';
+import '../icon/types.js';
+import '../group/types.js';
+import '@react-types/shared';
+
+declare const popoverContainer: string;
+declare const popoverColorVars: {
+    content: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+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})`;
+        };
+    };
+};
+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})`;
+};
+declare const popoverClassNames: PopoverClassNames;
+
+export { popoverClassNames, popoverColorVars, popoverContainer, popoverSpaceVars, popoverStateVars };

package/dist/components/popover/popover.css.js

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/popover/popover.css.ts
+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 popoverContainer = "popover_popoverContainer__1tn75dx0";
+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, popoverContainer, popoverSpaceVars, popoverStateVars };
+//# sourceMappingURL=popover.css.js.map
+//# sourceMappingURL=popover.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/popover/popover.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,iBAAoB,GAAA,EAAC,OAAQ,EAAA,EAAC,WAAU,uDAAwD,EAAA,OAAA,EAAQ,uGAAuG,EAAA,EAAE,MAAO,EAAA,0BAAA,EAA2B,OAAQ,EAAA,2BAAA,EAA4B,QAAO,4CAA4C;AAC9U,IAAI,mBAAmB,EAAC,OAAA,EAAQ,EAAC,KAAA,EAAM,kCAAiC;AACxE,IAAI,gBAAmB,GAAA;AACnB,IAAA,gBAAA,GAAmB,EAAC,KAAA,EAAM,wBAAyB,EAAA,CAAA,EAAE,oBAAqB,EAAA,CAAA,EAAE,oBAAqB,EAAA,GAAA,EAAI,EAAC,SAAA,EAAU,8BAA+B,EAAA,MAAA,EAAO,EAAC,KAAA,EAAM,mCAAmC,EAAA,EAAE,OAAQ,EAAA,EAAC,MAAO,EAAA,qCAAA,EAAuC,EAAA,MAAA,EAAO,EAAC,MAAA,EAAO,oCAAoC,EAAA,EAAE;AAC9S,IAAA,gBAAA,GAAmB,EAAC,SAAU,EAAA,4BAAA,EAA6B,WAAU,4BAA6B,EAAA,UAAA,EAAW,6BAA8B,EAAA,SAAA,EAAU,4BAA4B","file":"popover.css.js","sourcesContent":["export 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'};\nexport var popoverColorVars = {content:{color:'var(--content-color__1tn75dx1)'}};\nexport var popoverContainer = 'popover_popoverContainer__1tn75dx0';\nexport 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)'}}};\nexport var popoverStateVars = {hasHeader:'var(--hasHeader__1tn75dx9)',placement:'var(--placement__1tn75dxa)',isEntering:'var(--isEntering__1tn75dxb)',isExiting:'var(--isExiting__1tn75dxc)'};"]}

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

@@ -0,0 +1,22 @@
+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 { PopoverProps, PopoverRenderProps, PopoverClassNames, PopoverMapping } from './types.js';
+import '@react-stately/overlays';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+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/popover.js

@@ -0,0 +1,139 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { useContextProps, DEFAULT_SLOT, Provider, Dialog, Popover as Popover$1 } from 'react-aria-components';
+import { useDefaultProps, useTheme, useSlot } from '../../hooks/index.js';
+import { headings } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/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=popover.js.map
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/popover/popover.tsx"],"names":["Popover","RACDialog","RACPopover"],"mappings":"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","file":"popover.js","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"]}