@reforma/components 0.0.0-stage → 0.1.0

package/dist/List/ListBox.d.ts

@@ -0,0 +1,51 @@
+import { type SelectionInput } from '@reforma/lib';
+import { type ListBoxItemProps as AriaListBoxItemProps, type Key, type ListBoxSectionProps, type ListBoxProps as RACListBoxProps } from 'react-aria-components';
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+export type { ListBoxProps, ListBoxSectionProps } from 'react-aria-components';
+export type ListBoxSize = 'sm' | 'md' | 'lg';
+/**
+ * Valid `data-show` values on any descendant of a shared list row (e.g. a control in `endAffix`).
+ * {@link GridListItem} and {@link ListBoxItem} both use `ListBox.module.css` (`.item`); name is historical.
+ */
+export declare const listBoxItemDataShow: {
+    readonly itemHover: 'item-hover';
+    readonly itemSelected: 'item-selected';
+    readonly itemBoth: 'item-both';
+    /** Visible until the row is hovered. */
+    readonly itemRest: 'item-rest';
+};
+export type ListBoxItemDataShow = typeof listBoxItemDataShow[keyof typeof listBoxItemDataShow];
+export interface ListBoxItemSlots {
+    icon?: ReactNode;
+    description?: ReactNode;
+    startAffix?: ReactNode;
+    endAffix?: ReactNode;
+    stacked?: boolean;
+}
+export type ListBoxItemProps<T extends object = object> = AriaListBoxItemProps<T> & ListBoxItemSlots & {
+    text?: string;
+    isDanger?: boolean;
+};
+export interface ListBoxComponentProps<T extends object = object> extends Omit<RACListBoxProps<T>, 'selectedKeys'> {
+    ref?: Ref<HTMLDivElement>;
+    size?: ListBoxSize;
+    /** Selected key(s). Pass a single Key, array, or Iterable (e.g. Set). */
+    selectedKeys?: SelectionInput<Key>;
+    /** When false, items do not show hover background. Use for plain/display-only lists. Default true. */
+    interactive?: boolean;
+}
+/**
+ * **List surface for option-like rows** (arrow-key listbox UX, ComboBox / Select overlays). Rows should not contain nested widgets that require Tab —
+ * use {@link GridList} with `keyboardNavigationBehavior="tab"` instead.
+ *
+ * Styled like {@link GridList} via shared `ListBox.module.css`; choose by interaction model and RAC composition (Select renders `ListBox`, not GridList).
+ */
+export declare function ListBox<T extends object>({ className, size, selectionMode, selectedKeys, escapeKeyBehavior, interactive, ref, ...props }: ListBoxComponentProps<T>): import("react").JSX.Element;
+export declare function ListBoxItem<T extends object>({ startAffix, icon, text, description, endAffix, stacked, children, className, isDanger, ref, ...props }: ListBoxItemProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export declare function ListBoxHeader({ className, sticky, ...props }: HTMLAttributes<HTMLElement> & {
+    sticky?: boolean;
+}): import("react").JSX.Element;
+export declare function ListBoxSection<T extends object>({ className, ...props }: ListBoxSectionProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=ListBox.d.ts.map

package/dist/List/ListBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../src/List/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAKH,KAAK,gBAAgB,IAAI,oBAAoB,EAC7C,KAAK,GAAG,EACR,KAAK,mBAAmB,EACxB,KAAK,YAAY,IAAI,eAAe,EACvC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,mBAAmB;aAC5B,SAAS,EAAE,YAAY;aACvB,YAAY,EAAE,eAAe;aAC7B,QAAQ,EAAE,WAAW;IACrB,wCAAwC;aACxC,QAAQ,EAAE,WAAW;CACf,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAE/F,MAAM,WAAW,gBAAgB;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC7E,gBAAgB,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC;IAC9G,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,EACtC,SAAS,EACT,IAAW,EACX,aAAsB,EACtB,YAAY,EACZ,iBAA0B,EAC1B,WAAkB,EAClB,GAAG,EACH,GAAG,KAAK,EACX,EAAE,qBAAqB,CAAC,CAAC,CAAC,+BA0B1B;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,+BAuBrD;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BAEhH;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAE/F"}

package/dist/List/ListBox.js

@@ -0,0 +1,100 @@
+import { toSet as h, cn as c, mergeRefs as B } from "@reforma/lib";
+import { useRef as S, useMemo as p, useEffect as v } from "react";
+import { ListBox as g, Header as I, ListBoxItem as H, ListBoxSection as R } from "react-aria-components";
+import o from "./ListBox.module.css.js";
+import { renderListRowItemContent as y } from "./listRowItemContent.js";
+import { useListHoverHighlight as N } from "./useListHoverHighlight.js";
+import { useScrollActiveListItem as b } from "./useScrollActiveListItem.js";
+import { jsx as l } from "react/jsx-runtime";
+const z = {
+  itemHover: "item-hover",
+  itemSelected: "item-selected",
+  itemBoth: "item-both",
+  /** Visible until the row is hovered. */
+  itemRest: "item-rest"
+};
+function C({
+  className: t,
+  size: e = "sm",
+  selectionMode: i = "none",
+  selectedKeys: n,
+  escapeKeyBehavior: f = "none",
+  interactive: s = !0,
+  ref: r,
+  ...u
+}) {
+  const m = S(null), a = p(() => h(n), [n]);
+  return N(m, s), v(() => {
+    requestAnimationFrame(() => {
+      m.current?.querySelector("[data-highlighted], [data-selected], [data-focus-visible]")?.scrollIntoView({
+        block: "nearest"
+      });
+    });
+  }, [a]), /* @__PURE__ */ l(g, {
+    ref: B(m, r),
+    className: c(o.list, t),
+    selectionMode: i,
+    selectedKeys: a,
+    escapeKeyBehavior: f,
+    "data-size": e,
+    "data-interactive": s || void 0,
+    ...u
+  });
+}
+function E({
+  startAffix: t,
+  icon: e,
+  text: i,
+  description: n,
+  endAffix: f,
+  stacked: s,
+  children: r,
+  className: u,
+  isDanger: m,
+  ref: a,
+  ...d
+}) {
+  const x = S(null), L = i || d.textValue || (typeof r == "string" ? r : void 0);
+  return b(x), /* @__PURE__ */ l(H, {
+    ref: B(x, a),
+    className: c(o.item, s && o.itemStacked, m && o.itemDanger, u),
+    textValue: L,
+    ...d,
+    children: y(r, {
+      icon: e,
+      description: n,
+      startAffix: t,
+      endAffix: f,
+      stacked: s,
+      textValue: L
+    })
+  });
+}
+function F({
+  className: t,
+  sticky: e,
+  ...i
+}) {
+  return /* @__PURE__ */ l(I, {
+    className: c(o.sectionHeader, t),
+    ...i,
+    "data-sticky": e || void 0
+  });
+}
+function K({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ l(R, {
+    className: c(o.section, t),
+    ...e
+  });
+}
+export {
+  C as ListBox,
+  F as ListBoxHeader,
+  E as ListBoxItem,
+  K as ListBoxSection,
+  z as listBoxItemDataShow
+};
+//# sourceMappingURL=ListBox.js.map

package/dist/List/ListBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.js","sources":["../../src/List/ListBox.tsx"],"sourcesContent":["import { cn, mergeRefs, toSet, type SelectionInput } from '@reforma/lib';\nimport { useEffect, useMemo, useRef } from 'react';\nimport {\n    Header as AriaHeader,\n    ListBox as AriaListBox,\n    ListBoxItem as AriaListBoxItem,\n    ListBoxSection as AriaListBoxSection,\n    type ListBoxItemProps as AriaListBoxItemProps,\n    type Key,\n    type ListBoxSectionProps,\n    type ListBoxProps as RACListBoxProps,\n} from 'react-aria-components';\n\nimport styles from './ListBox.module.css';\nimport { renderListRowItemContent } from './listRowItemContent';\nimport { useListHoverHighlight } from './useListHoverHighlight';\nimport { useScrollActiveListItem } from './useScrollActiveListItem';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\n\nexport type { ListBoxProps, ListBoxSectionProps } from 'react-aria-components';\n\nexport type ListBoxSize = 'sm' | 'md' | 'lg';\n\n/**\n * Valid `data-show` values on any descendant of a shared list row (e.g. a control in `endAffix`).\n * {@link GridListItem} and {@link ListBoxItem} both use `ListBox.module.css` (`.item`); name is historical.\n */\nexport const listBoxItemDataShow = {\n    itemHover: 'item-hover',\n    itemSelected: 'item-selected',\n    itemBoth: 'item-both',\n    /** Visible until the row is hovered. */\n    itemRest: 'item-rest',\n} as const;\n\nexport type ListBoxItemDataShow = typeof listBoxItemDataShow[keyof typeof listBoxItemDataShow];\n\nexport interface ListBoxItemSlots {\n    icon?: ReactNode;\n    description?: ReactNode;\n    startAffix?: ReactNode;\n    endAffix?: ReactNode;\n    stacked?: boolean;\n}\n\nexport type ListBoxItemProps<T extends object = object> = AriaListBoxItemProps<T>\n  & ListBoxItemSlots & {\n      text?: string;\n      isDanger?: boolean;\n  };\n\nexport interface ListBoxComponentProps<T extends object = object> extends Omit<RACListBoxProps<T>, 'selectedKeys'> {\n    ref?: Ref<HTMLDivElement>;\n    size?: ListBoxSize;\n    /** Selected key(s). Pass a single Key, array, or Iterable (e.g. Set). */\n    selectedKeys?: SelectionInput<Key>;\n    /** When false, items do not show hover background. Use for plain/display-only lists. Default true. */\n    interactive?: boolean;\n}\n\n/**\n * **List surface for option-like rows** (arrow-key listbox UX, ComboBox / Select overlays). Rows should not contain nested widgets that require Tab —\n * use {@link GridList} with `keyboardNavigationBehavior=\"tab\"` instead.\n *\n * Styled like {@link GridList} via shared `ListBox.module.css`; choose by interaction model and RAC composition (Select renders `ListBox`, not GridList).\n */\nexport function ListBox<T extends object>({\n    className,\n    size = 'sm',\n    selectionMode = 'none',\n    selectedKeys,\n    escapeKeyBehavior = 'none',\n    interactive = true,\n    ref,\n    ...props\n}: ListBoxComponentProps<T>) {\n    const listRef = useRef<HTMLDivElement>(null);\n    const selectedKeysSet = useMemo(() => toSet(selectedKeys), [selectedKeys]);\n\n    useListHoverHighlight(listRef, interactive);\n\n    useEffect(() => {\n        requestAnimationFrame(() => {\n            listRef.current\n                ?.querySelector('[data-highlighted], [data-selected], [data-focus-visible]')\n                ?.scrollIntoView({ block: 'nearest' });\n        });\n    }, [selectedKeysSet]);\n\n    return (\n        <AriaListBox\n            ref={ mergeRefs(listRef, ref as Ref<HTMLDivElement>) }\n            className={ cn(styles.list, className) }\n            selectionMode={ selectionMode }\n            selectedKeys={ selectedKeysSet }\n            escapeKeyBehavior={ escapeKeyBehavior }\n            data-size={ size }\n            data-interactive={ interactive || undefined }\n            { ...props }\n        />\n    );\n}\n\nexport function ListBoxItem<T extends object>({\n    startAffix,\n    icon,\n    text,\n    description,\n    endAffix,\n    stacked,\n    children,\n    className,\n    isDanger,\n    ref,\n    ...props\n}: ListBoxItemProps<T> & { ref?: Ref<HTMLDivElement> }) {\n    const itemRef = useRef<HTMLDivElement>(null);\n    const textValue = text || props.textValue || (typeof children === 'string' ? children : undefined);\n\n    useScrollActiveListItem(itemRef);\n\n    return (\n        <AriaListBoxItem\n            ref={ mergeRefs(itemRef, ref) }\n            className={ cn(styles.item, stacked && styles.itemStacked, isDanger && styles.itemDanger, className) }\n            textValue={ textValue }\n            { ...props }\n        >\n            { renderListRowItemContent(children, {\n                icon,\n                description,\n                startAffix,\n                endAffix,\n                stacked,\n                textValue,\n            }) }\n        </AriaListBoxItem>\n    );\n}\n\nexport function ListBoxHeader({ className, sticky, ...props }: HTMLAttributes<HTMLElement> & { sticky?: boolean }) {\n    return <AriaHeader className={ cn(styles.sectionHeader, className) } { ...props } data-sticky={ sticky || undefined } />;\n}\n\nexport function ListBoxSection<T extends object>({ className, ...props }: ListBoxSectionProps<T>) {\n    return <AriaListBoxSection className={ cn(styles.section, className) } { ...props } />;\n}\n"],"names":["listBoxItemDataShow","ListBox","className","size","selectionMode","selectedKeys","escapeKeyBehavior","interactive","ref","props","listRef","useRef","selectedKeysSet","useMemo","toSet","useListHoverHighlight","useEffect","AriaListBox","mergeRefs","cn","styles","ListBoxItem","startAffix","icon","text","description","endAffix","stacked","children","isDanger","itemRef","textValue","useScrollActiveListItem","AriaListBoxItem","renderListRowItemContent","ListBoxHeader","sticky","AriaHeader","ListBoxSection","AriaListBoxSection"],"mappings":";;;;;;;;AAYO,MAAMA,IAAsB;AAAA,EACjC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA;AAAA,EAEV,UAAU;AACZ;AAOO,SAASC,EAAQ;AAAA,EACtB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,aAAAC,IAAc;AAAA,EACd,KAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAUC,EAAO,IAAI,GACrBC,IAAkBC,EAAQ,MAAMC,EAAMT,CAAY,GAAG,CAACA,CAAY,CAAC;AACzE,SAAAU,EAAsBL,GAASH,CAAW,GAC1CS,EAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,MAAAN,EAAQ,SAAS,cAAc,2DAA2D,GAAG,eAAe;AAAA,QAC1G,OAAO;AAAA,MAAA,CACR;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAACE,CAAe,CAAC,qBACKK,GAAa;AAAA,IACpC,KAAKC,EAAUR,GAASF,CAAG;AAAA,IAC3B,WAAWW,EAAGC,EAAO,MAAMlB,CAAS;AAAA,IACpC,eAAAE;AAAA,IACA,cAAcQ;AAAA,IACd,mBAAAN;AAAA,IACA,aAAaH;AAAA,IACb,oBAAoBI,KAAe;AAAA,IACnC,GAAGE;AAAA,EAAA,CACJ;AACH;AACO,SAASY,EAAY;AAAA,EAC1B,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAA1B;AAAA,EACA,UAAA2B;AAAA,EACA,KAAArB;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMqB,IAAUnB,EAAO,IAAI,GACrBoB,IAAYP,KAAQf,EAAM,cAAc,OAAOmB,KAAa,WAAWA,IAAW;AACxF,SAAAI,EAAwBF,CAAO,qBACNG,GAAiB;AAAA,IACxC,KAAKf,EAAUY,GAAStB,CAAG;AAAA,IAC3B,WAAWW,EAAGC,EAAO,MAAMO,KAAWP,EAAO,aAAaS,KAAYT,EAAO,YAAYlB,CAAS;AAAA,IAClG,WAAA6B;AAAA,IACA,GAAGtB;AAAA,IACH,UAAUyB,EAAyBN,GAAU;AAAA,MAC3C,MAAAL;AAAA,MACA,aAAAE;AAAA,MACA,YAAAH;AAAA,MACA,UAAAI;AAAA,MACA,SAAAC;AAAA,MACA,WAAAI;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AACO,SAASI,EAAc;AAAA,EAC5B,WAAAjC;AAAA,EACA,QAAAkC;AAAA,EACA,GAAG3B;AACL,GAAG;AACD,2BAAyB4B,GAAY;AAAA,IACnC,WAAWlB,EAAGC,EAAO,eAAelB,CAAS;AAAA,IAC7C,GAAGO;AAAA,IACH,eAAe2B,KAAU;AAAA,EAAA,CAC1B;AACH;AACO,SAASE,EAAe;AAAA,EAC7B,WAAApC;AAAA,EACA,GAAGO;AACL,GAAG;AACD,2BAAyB8B,GAAoB;AAAA,IAC3C,WAAWpB,EAAGC,EAAO,SAASlB,CAAS;AAAA,IACvC,GAAGO;AAAA,EAAA,CACJ;AACH;"}

package/dist/List/ListBox.module.css

@@ -0,0 +1 @@
+@layer components{.ListBox_list_JpvdtZ{--reforma-listbox-gap: var(--spacing-xxs);--reforma-listbox-item-radius: var(--radius-sm);--reforma-listbox-item-height: var(--spacing-30);--reforma-listbox-item-padding: var(--spacing-sm) var(--spacing-lg);--reforma-listbox-item-color: var(--color-text);--reforma-listbox-item-color--hover: var(--color-text);--reforma-listbox-item-bg--hover: var(--color-secondary-muted-light);--reforma-listbox-item-bg--selected: var(--color-secondary-muted);--reforma-listbox-item-color--selected: var(--color-secondary-content);--reforma-listbox-highlight-top: 0px;--reforma-listbox-highlight-left: 0px;--reforma-listbox-highlight-width: 0px;--reforma-listbox-highlight-height: 0px;--reforma-listbox-highlight-opacity: 0;--reforma-listbox-highlight-ease: cubic-bezier(.16, 1, .3, 1);--reforma-menu-separator-space: var(--spacing-xs);display:flex;position:relative;flex-direction:column;gap:var(--reforma-listbox-gap);width:100%}.ListBox_list_JpvdtZ[data-interactive]:before{position:absolute;top:var(--reforma-listbox-highlight-top);left:var(--reforma-listbox-highlight-left);opacity:var(--reforma-listbox-highlight-opacity);border-radius:calc(var(--reforma-listbox-item-radius) * var(--squircle-radius-factor));width:var(--reforma-listbox-highlight-width);height:var(--reforma-listbox-highlight-height);content:"";corner-shape:superellipse(var(--squircle-value));z-index:0;transition:opacity .1s;background-color:var(--reforma-listbox-item-bg--hover);pointer-events:none}.ListBox_list_JpvdtZ[data-interactive][data-highlight-ready]:before{transition:top var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),left var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),width var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),height var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),opacity .1s}.ListBox_list_JpvdtZ[data-interactive][data-highlight-danger]:before{background-color:var(--color-danger-muted-light)}.ListBox_scrollableContainer_geIIr1{width:100%}.ListBox_menuList_sQN3eW{outline:none}.ListBox_list_JpvdtZ[data-empty]{justify-content:center;align-items:center;padding:var(--spacing-md) var(--spacing-lg);min-height:var(--reforma-listbox-item-height);color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-align:center}.ListBox_item_8cmHfh{display:flex;position:relative;align-items:center;gap:var(--spacing-10);border-radius:calc(var(--reforma-listbox-item-radius) * var(--squircle-radius-factor));padding:var(--reforma-listbox-item-padding);width:100%;min-width:0;min-height:var(--reforma-listbox-item-height);corner-shape:superellipse(var(--squircle-value));z-index:1;cursor:pointer;outline:none;color:var(--reforma-listbox-item-color);-webkit-user-select:none;-moz-user-select:none;isolation:isolate;user-select:none;text-decoration:none}.ListBox_item_8cmHfh:has([data-hotkey]){padding-inline-end:var(--spacing-sm)}.ListBox_item_8cmHfh:has([slot=endAffix] button){padding-inline-end:calc((var(--reforma-listbox-item-height) - var(--spacing-24)) / 2)}.ListBox_item_8cmHfh:before{position:absolute;inset:0;border-radius:inherit;content:"";corner-shape:inherit;z-index:-1;transition:background-color var(--transition-duration-fast),border-radius var(--transition-duration-fast)}.ListBox_list_JpvdtZ[data-size=sm]{--reforma-listbox-item-radius: var(--radius-sm);--reforma-listbox-item-height: var(--spacing-30);--reforma-listbox-item-padding: var(--spacing-sm) var(--spacing-lg)}.ListBox_list_JpvdtZ[data-size=sm] .ListBox_itemLabel_ctFOvE{font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_JpvdtZ[data-size=md]{--reforma-listbox-item-radius: var(--radius-md);--reforma-listbox-item-height: var(--spacing-36);--reforma-listbox-item-padding: var(--spacing-sm) var(--spacing-lg)}.ListBox_list_JpvdtZ[data-size=md] .ListBox_itemLabel_ctFOvE{font-weight:400;font-size:var(--text-md);line-height:var(--leading-md);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_JpvdtZ[data-size=lg]{--reforma-listbox-item-radius: var(--radius-lg);--reforma-listbox-item-height: var(--spacing-56);--reforma-listbox-item-padding: var(--spacing-10) var(--spacing-16)}.ListBox_list_JpvdtZ[data-size=lg] .ListBox_item_8cmHfh:has([data-hotkey]){padding-inline-end:var(--spacing-10)}.ListBox_list_JpvdtZ[data-size=lg] .ListBox_itemLabel_ctFOvE{font-weight:400;font-size:var(--text-lg);line-height:var(--leading-lg);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_JpvdtZ[data-interactive] .ListBox_item_8cmHfh:hover:not([data-disabled]):not([data-selected]):not([data-highlighted]),.ListBox_item_8cmHfh:is([data-hovered],[data-focus-visible]):not([data-disabled]):not([data-selected]):not([data-highlighted]),.ListBox_item_8cmHfh[data-open]:not([data-disabled]):not([data-selected]):not([data-highlighted]){color:var(--reforma-listbox-item-color--hover)}.ListBox_item_8cmHfh[data-selected]:before,.ListBox_item_8cmHfh[data-highlighted]:before{background-color:var(--reforma-listbox-item-bg--selected)}.ListBox_item_8cmHfh[data-selected],.ListBox_item_8cmHfh[data-highlighted]{color:var(--reforma-listbox-item-color--selected)}.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]+.ListBox_item_8cmHfh[data-selected]{border-start-start-radius:0;border-start-end-radius:0}:is(.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]+.ListBox_item_8cmHfh[data-selected]):before{top:-1px}.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]:has(+.ListBox_item_8cmHfh[data-selected]){border-end-start-radius:0;border-end-end-radius:0}:is(.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]:has(+.ListBox_item_8cmHfh[data-selected])):before{bottom:-1px}.ListBox_item_8cmHfh[data-disabled]{opacity:var(--opacity-disabled);cursor:default}.ListBox_item_8cmHfh[data-focus-visible]{outline:none}.ListBox_item_8cmHfh[data-dragging]{display:none}.ListBox_list_JpvdtZ .react-aria-DropIndicator{margin-block:calc(var(--reforma-listbox-gap) * -1);padding:0;height:0;min-height:0;overflow:visible;pointer-events:none}.ListBox_itemDanger_ttnXKb{--reforma-listbox-item-color: var(--color-danger-text);--reforma-listbox-item-color--hover: var(--color-danger-text);--reforma-listbox-item-bg--hover: var(--color-danger-muted-light)}.ListBox_itemStart_2AUJbr{display:flex;flex:1 1 0;align-items:center;gap:var(--spacing-md);min-width:0}.ListBox_itemStacked_Quxi99{padding-block:var(--spacing-8);min-height:auto}.ListBox_itemStacked_Quxi99 .ListBox_itemStart_2AUJbr{align-items:flex-start}.ListBox_itemCopy_GCZhjt{display:flex;flex-direction:column;gap:1px;width:100%;min-width:0}.ListBox_itemCopy_GCZhjt .ListBox_itemLabel_ctFOvE{flex:0 1 auto;width:100%}.ListBox_itemEnd_o6zHrW{display:flex;flex:0 1 auto;justify-content:flex-end;align-items:center;gap:var(--spacing-md);min-width:0;max-width:60%}.ListBox_itemEnd_o6zHrW:empty{display:none}.ListBox_itemLabel_ctFOvE{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ListBox_itemDescription_SoJbTP{min-width:0;overflow:hidden;color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.ListBox_itemStartAffix_BjHXOp{display:flex;flex-shrink:0;align-items:center;margin-left:calc(var(--spacing-md) * -1)}.ListBox_itemEnd_o6zHrW>*:not(button):not(:has(button)){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ListBox_item_8cmHfh [data-show=item-hover],.ListBox_item_8cmHfh [data-show=item-selected],.ListBox_item_8cmHfh [data-show=item-both]{opacity:0;transition:opacity var(--transition-duration-fast) ease;pointer-events:none}.ListBox_item_8cmHfh [data-show=item-rest]{transition:opacity var(--transition-duration-fast) ease}.ListBox_item_8cmHfh[data-hovered] [data-show=item-hover],.ListBox_item_8cmHfh:hover [data-show=item-hover]{opacity:1;pointer-events:auto}.ListBox_item_8cmHfh[data-hovered] [data-show=item-rest],.ListBox_item_8cmHfh:hover [data-show=item-rest]{opacity:0;pointer-events:none}.ListBox_item_8cmHfh[data-selected] [data-show=item-selected]{opacity:1;pointer-events:auto}.ListBox_item_8cmHfh[data-hovered] [data-show=item-both],.ListBox_item_8cmHfh:hover [data-show=item-both],.ListBox_item_8cmHfh[data-selected] [data-show=item-both],.ListBox_item_8cmHfh:focus-within [data-show=item-both],.ListBox_item_8cmHfh[data-open] [data-show=item-both]{opacity:1;pointer-events:auto}.ListBox_menuSeparator_6r56jX{flex-shrink:0;margin-block:calc(var(--reforma-menu-separator-space) - var(--reforma-listbox-gap));border:none;background-color:var(--color-secondary-muted);padding:0;width:100%;height:1px}.ListBox_section_fHSjC3{display:flex;flex-direction:column;gap:var(--reforma-listbox-gap)}.ListBox_sectionHeader_iHoMut{cursor:default;padding:var(--spacing-6) var(--spacing-8) var(--spacing-4);color:var(--color-secondary-muted-text);font-weight:400;font-weight:500;font-size:var(--text-xs);line-height:var(--leading-xs);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_sectionHeader_iHoMut[data-sticky]{position:sticky;top:0;z-index:var(--z-raised);border-radius:calc(var(--radius-sm) * var(--squircle-radius-factor));background-color:var(--color-surface);corner-shape:superellipse(var(--squircle-value))}}

package/dist/List/ListBox.module.css.js

@@ -0,0 +1,36 @@
+const t = "ListBox_list_JpvdtZ", e = "ListBox_scrollableContainer_geIIr1", i = "ListBox_menuList_sQN3eW", o = "ListBox_item_8cmHfh", s = "ListBox_itemLabel_ctFOvE", n = "ListBox_itemDanger_ttnXKb", m = "ListBox_itemStart_2AUJbr", c = "ListBox_itemStacked_Quxi99", a = "ListBox_itemCopy_GCZhjt", r = "ListBox_itemEnd_o6zHrW", _ = "ListBox_itemDescription_SoJbTP", L = "ListBox_itemStartAffix_BjHXOp", x = "ListBox_menuSeparator_6r56jX", l = "ListBox_section_fHSjC3", B = "ListBox_sectionHeader_iHoMut", S = {
+  list: t,
+  scrollableContainer: e,
+  menuList: i,
+  item: o,
+  itemLabel: s,
+  itemDanger: n,
+  itemStart: m,
+  itemStacked: c,
+  itemCopy: a,
+  itemEnd: r,
+  itemDescription: _,
+  itemStartAffix: L,
+  menuSeparator: x,
+  section: l,
+  sectionHeader: B
+};
+export {
+  S as default,
+  o as item,
+  a as itemCopy,
+  n as itemDanger,
+  _ as itemDescription,
+  r as itemEnd,
+  s as itemLabel,
+  c as itemStacked,
+  m as itemStart,
+  L as itemStartAffix,
+  t as list,
+  i as menuList,
+  x as menuSeparator,
+  e as scrollableContainer,
+  l as section,
+  B as sectionHeader
+};
+//# sourceMappingURL=ListBox.module.css.js.map

package/dist/List/ListBox.module.css.js.map

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

package/dist/List/Menu.d.ts

@@ -0,0 +1,55 @@
+import { MenuTrigger, SubmenuTrigger, type MenuItemProps as AriaMenuItemProps, type MenuProps as AriaMenuProps, type MenuSectionProps as AriaMenuSectionProps, type SeparatorProps as AriaSeparatorProps } from 'react-aria-components';
+import { type OverlayWidth } from '../utils/resolveOverlayWidth';
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+export type { Key, MenuTriggerProps, SubmenuTriggerProps, } from 'react-aria-components';
+export { MenuTrigger, SubmenuTrigger, };
+export type MenuSize = 'sm' | 'md' | 'lg';
+export interface MenuProps<T extends object = object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {
+    className?: string;
+    size?: MenuSize;
+    interactive?: boolean;
+    style?: CSSProperties;
+    width?: OverlayWidth;
+}
+export interface MenuItemSlots {
+    icon?: ReactNode;
+    description?: ReactNode;
+    startAffix?: ReactNode;
+    endAffix?: ReactNode;
+    stacked?: boolean;
+}
+export type MenuItemProps<T extends object = object> = Omit<AriaMenuItemProps<T>, 'className'> & MenuItemSlots & {
+    className?: string;
+    text?: string;
+    isDanger?: boolean;
+};
+/** Command / action list (RAC **Menu**). For picker content in a popover, wrap **`ListBox`** in **`PopoverScroll`**. */
+export declare function Menu<T extends object>({ className, size, selectionMode, interactive, style: styleProp, width, ...props }: MenuProps<T>): import("react").JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+export declare function MenuItem<T extends object>({ startAffix, icon, text, description, endAffix, stacked, children, className, isDanger, ref, ...props }: MenuItemProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export declare namespace MenuItem {
+    var displayName: string;
+}
+export declare function MenuSeparator({ className, ...props }: Omit<AriaSeparatorProps, 'className'> & {
+    className?: string;
+}): import("react").JSX.Element;
+export declare namespace MenuSeparator {
+    var displayName: string;
+}
+export declare function MenuHeader({ className, sticky, ...props }: HTMLAttributes<HTMLElement> & {
+    sticky?: boolean;
+}): import("react").JSX.Element;
+export declare namespace MenuHeader {
+    var displayName: string;
+}
+export declare function MenuSection<T extends object>({ className, ...props }: Omit<AriaMenuSectionProps<T>, 'className'> & {
+    className?: string;
+}): import("react").JSX.Element;
+export declare namespace MenuSection {
+    var displayName: string;
+}
+//# sourceMappingURL=Menu.d.ts.map

package/dist/List/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/List/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,WAAW,EACX,cAAc,EACd,KAAK,aAAa,IAAI,iBAAiB,EACvC,KAAK,SAAS,IAAI,aAAa,EAC/B,KAAK,gBAAgB,IAAI,oBAAoB,EAC7C,KAAK,cAAc,IAAI,kBAAkB,EAC5C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMtF,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3E,YAAY,EACR,GAAG,EACH,gBAAgB,EAChB,mBAAmB,GACtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,WAAW,EACX,cAAc,GACjB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACvG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,GAC1F,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,wHAAwH;AACxH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACnC,SAAS,EACT,IAAW,EACX,aAAsB,EACtB,WAAkB,EAClB,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,GAAG,KAAK,EACX,EAAE,SAAS,CAAC,CAAC,CAAC,+BAsBd;yBA9Be,IAAI;;;AAgCpB,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACvC,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,+BAiClD;yBA7Ce,QAAQ;;;AA+CxB,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEpH;yBAFe,aAAa;;;AAI7B,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BAE7G;yBAFe,UAAU;;;AAI1B,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEzI;yBAFe,WAAW"}

package/dist/List/Menu.js

@@ -0,0 +1,115 @@
+import { cn as a, mergeRefs as y } from "@reforma/lib";
+import { useRef as g } from "react";
+import { Menu as N, Header as v, MenuItem as h, MenuSection as H, Separator as I } from "react-aria-components";
+import { MenuTrigger as K, SubmenuTrigger as Q } from "react-aria-components";
+import { Tooltip as x } from "../Tooltip/Tooltip.js";
+import { resolveOverlayWidth as R } from "../utils/resolveOverlayWidth.js";
+import n from "./ListBox.module.css.js";
+import { renderListRowItemContent as L } from "./listRowItemContent.js";
+import { useListHoverHighlight as T } from "./useListHoverHighlight.js";
+import { useScrollActiveListItem as $ } from "./useScrollActiveListItem.js";
+import { jsx as o } from "react/jsx-runtime";
+function w({
+  className: e,
+  size: t = "sm",
+  selectionMode: i = "none",
+  interactive: r = !0,
+  style: u,
+  width: s,
+  ...m
+}) {
+  const l = g(null);
+  T(l, r);
+  const c = R(s), f = c != null || u != null ? {
+    ...u,
+    ...c
+  } : void 0;
+  return /* @__PURE__ */ o(N, {
+    className: a(n.list, n.menuList, e),
+    style: f,
+    selectionMode: i,
+    "data-size": t,
+    "data-interactive": r || void 0,
+    ...m,
+    ref: l
+  });
+}
+function V({
+  startAffix: e,
+  icon: t,
+  text: i,
+  description: r,
+  endAffix: u,
+  stacked: s,
+  children: m,
+  className: l,
+  isDanger: c,
+  ref: f,
+  ...p
+}) {
+  const M = g(null), d = i || p.textValue || (typeof m == "string" ? m : void 0);
+  $(M);
+  const S = /* @__PURE__ */ o(h, {
+    ref: y(M, f),
+    className: a(n.item, s && n.itemStacked, c && n.itemDanger, l),
+    textValue: d,
+    ...p,
+    children: L(m, {
+      icon: t,
+      description: r,
+      startAffix: e,
+      endAffix: u,
+      stacked: s,
+      textValue: d
+    })
+  });
+  return typeof r != "string" || r.length <= 30 ? S : /* @__PURE__ */ o(x, {
+    content: r,
+    placement: "right",
+    children: S
+  });
+}
+function b({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o(I, {
+    className: a(n.menuSeparator, e),
+    ...t
+  });
+}
+function j({
+  className: e,
+  sticky: t,
+  ...i
+}) {
+  return /* @__PURE__ */ o(v, {
+    className: a(n.sectionHeader, e),
+    ...i,
+    "data-sticky": t || void 0
+  });
+}
+function k({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o(H, {
+    className: a(n.section, e),
+    ...t
+  });
+}
+w.displayName = "Menu";
+V.displayName = "MenuItem";
+b.displayName = "MenuSeparator";
+j.displayName = "MenuHeader";
+k.displayName = "MenuSection";
+export {
+  w as Menu,
+  j as MenuHeader,
+  V as MenuItem,
+  k as MenuSection,
+  b as MenuSeparator,
+  K as MenuTrigger,
+  Q as SubmenuTrigger
+};
+//# sourceMappingURL=Menu.js.map

package/dist/List/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../src/List/Menu.tsx"],"sourcesContent":["import { cn, mergeRefs } from '@reforma/lib';\nimport { useRef } from 'react';\nimport {\n    Header as AriaHeader,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuSection as AriaMenuSection,\n    Separator as AriaSeparator,\n    MenuTrigger,\n    SubmenuTrigger,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    type MenuSectionProps as AriaMenuSectionProps,\n    type SeparatorProps as AriaSeparatorProps,\n} from 'react-aria-components';\n\nimport { Tooltip } from '../Tooltip';\nimport { resolveOverlayWidth, type OverlayWidth } from '../utils/resolveOverlayWidth';\nimport styles from './ListBox.module.css';\nimport { renderListRowItemContent } from './listRowItemContent';\nimport { useListHoverHighlight } from './useListHoverHighlight';\nimport { useScrollActiveListItem } from './useScrollActiveListItem';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';\n\nexport type {\n    Key,\n    MenuTriggerProps,\n    SubmenuTriggerProps,\n} from 'react-aria-components';\n\nexport {\n    MenuTrigger,\n    SubmenuTrigger,\n};\n\nexport type MenuSize = 'sm' | 'md' | 'lg';\n\nexport interface MenuProps<T extends object = object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    size?: MenuSize;\n    interactive?: boolean;\n    style?: CSSProperties;\n    width?: OverlayWidth;\n}\n\nexport interface MenuItemSlots {\n    icon?: ReactNode;\n    description?: ReactNode;\n    startAffix?: ReactNode;\n    endAffix?: ReactNode;\n    stacked?: boolean;\n}\n\nexport type MenuItemProps<T extends object = object> = Omit<AriaMenuItemProps<T>, 'className'>\n  & MenuItemSlots & {\n      className?: string;\n      text?: string;\n      isDanger?: boolean;\n  };\n\n/** Command / action list (RAC **Menu**). For picker content in a popover, wrap **`ListBox`** in **`PopoverScroll`**. */\nexport function Menu<T extends object>({\n    className,\n    size = 'sm',\n    selectionMode = 'none',\n    interactive = true,\n    style: styleProp,\n    width,\n    ...props\n}: MenuProps<T>) {\n    const listRef = useRef<HTMLDivElement>(null);\n\n    useListHoverHighlight(listRef, interactive);\n\n    const widthStyle = resolveOverlayWidth(width);\n\n    const style = (widthStyle != null || styleProp != null)\n        ? { ...styleProp, ...widthStyle }\n        : undefined;\n\n    return (\n        <AriaMenu\n            className={ cn(styles.list, styles.menuList, className) }\n            style={ style }\n            selectionMode={ selectionMode }\n            data-size={ size }\n            data-interactive={ interactive || undefined }\n            { ...props }\n            ref={ listRef }\n        />\n    );\n}\n\nexport function MenuItem<T extends object>({\n    startAffix,\n    icon,\n    text,\n    description,\n    endAffix,\n    stacked,\n    children,\n    className,\n    isDanger,\n    ref,\n    ...props\n}: MenuItemProps<T> & { ref?: Ref<HTMLDivElement> }) {\n    const itemRef = useRef<HTMLDivElement>(null);\n    const textValue = text || props.textValue || (typeof children === 'string' ? children : undefined);\n\n    useScrollActiveListItem(itemRef);\n\n    const item = (\n        <AriaMenuItem\n            ref={ mergeRefs(itemRef, ref) }\n            className={ cn(styles.item, stacked && styles.itemStacked, isDanger && styles.itemDanger, className) }\n            textValue={ textValue }\n            { ...props }\n        >\n            { renderListRowItemContent(children, {\n                icon,\n                description,\n                startAffix,\n                endAffix,\n                stacked,\n                textValue,\n            }) }\n        </AriaMenuItem>\n    );\n\n    if (typeof description !== 'string' || description.length <= 30) {\n        return item;\n    }\n\n    return (\n        <Tooltip content={ description } placement=\"right\">\n            { item }\n        </Tooltip>\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: Omit<AriaSeparatorProps, 'className'> & { className?: string }) {\n    return <AriaSeparator className={ cn(styles.menuSeparator, className) } { ...props } />;\n}\n\nexport function MenuHeader({ className, sticky, ...props }: HTMLAttributes<HTMLElement> & { sticky?: boolean }) {\n    return <AriaHeader className={ cn(styles.sectionHeader, className) } { ...props } data-sticky={ sticky || undefined } />;\n}\n\nexport function MenuSection<T extends object>({ className, ...props }: Omit<AriaMenuSectionProps<T>, 'className'> & { className?: string }) {\n    return <AriaMenuSection className={ cn(styles.section, className) } { ...props } />;\n}\n\nMenu.displayName = 'Menu';\nMenuItem.displayName = 'MenuItem';\nMenuSeparator.displayName = 'MenuSeparator';\nMenuHeader.displayName = 'MenuHeader';\nMenuSection.displayName = 'MenuSection';\n"],"names":["Menu","className","size","selectionMode","interactive","styleProp","width","props","listRef","useRef","useListHoverHighlight","widthStyle","resolveOverlayWidth","style","AriaMenu","cn","styles","MenuItem","startAffix","icon","text","description","endAffix","stacked","children","isDanger","ref","itemRef","textValue","useScrollActiveListItem","item","AriaMenuItem","mergeRefs","renderListRowItemContent","Tooltip","MenuSeparator","AriaSeparator","MenuHeader","sticky","AriaHeader","MenuSection","AriaMenuSection"],"mappings":";;;;;;;;;;;AAYO,SAASA,EAAK;AAAA,EACnB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,OAAOC;AAAA,EACP,OAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAUC,EAAO,IAAI;AAC3B,EAAAC,EAAsBF,GAASJ,CAAW;AAC1C,QAAMO,IAAaC,EAAoBN,CAAK,GACtCO,IAAQF,KAAc,QAAQN,KAAa,OAAO;AAAA,IACtD,GAAGA;AAAA,IACH,GAAGM;AAAA,EAAA,IACD;AACJ,2BAAyBG,GAAU;AAAA,IACjC,WAAWC,EAAGC,EAAO,MAAMA,EAAO,UAAUf,CAAS;AAAA,IACrD,OAAAY;AAAA,IACA,eAAAV;AAAA,IACA,aAAaD;AAAA,IACb,oBAAoBE,KAAe;AAAA,IACnC,GAAGG;AAAA,IACH,KAAKC;AAAA,EAAA,CACN;AACH;AACO,SAASS,EAAS;AAAA,EACvB,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAvB;AAAA,EACA,UAAAwB;AAAA,EACA,KAAAC;AAAA,EACA,GAAGnB;AACL,GAAG;AACD,QAAMoB,IAAUlB,EAAO,IAAI,GACrBmB,IAAYR,KAAQb,EAAM,cAAc,OAAOiB,KAAa,WAAWA,IAAW;AACxF,EAAAK,EAAwBF,CAAO;AAC/B,QAAMG,sBAAyBC,GAAc;AAAA,IAC3C,KAAKC,EAAUL,GAASD,CAAG;AAAA,IAC3B,WAAWX,EAAGC,EAAO,MAAMO,KAAWP,EAAO,aAAaS,KAAYT,EAAO,YAAYf,CAAS;AAAA,IAClG,WAAA2B;AAAA,IACA,GAAGrB;AAAA,IACH,UAAU0B,EAAyBT,GAAU;AAAA,MAC3C,MAAAL;AAAA,MACA,aAAAE;AAAA,MACA,YAAAH;AAAA,MACA,UAAAI;AAAA,MACA,SAAAC;AAAA,MACA,WAAAK;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACD,SAAI,OAAOP,KAAgB,YAAYA,EAAY,UAAU,KACpDS,sBAEgBI,GAAS;AAAA,IAChC,SAASb;AAAA,IACT,WAAW;AAAA,IACX,UAAUS;AAAA,EAAA,CACX;AACH;AACO,SAASK,EAAc;AAAA,EAC5B,WAAAlC;AAAA,EACA,GAAGM;AACL,GAAG;AACD,2BAAyB6B,GAAe;AAAA,IACtC,WAAWrB,EAAGC,EAAO,eAAef,CAAS;AAAA,IAC7C,GAAGM;AAAA,EAAA,CACJ;AACH;AACO,SAAS8B,EAAW;AAAA,EACzB,WAAApC;AAAA,EACA,QAAAqC;AAAA,EACA,GAAG/B;AACL,GAAG;AACD,2BAAyBgC,GAAY;AAAA,IACnC,WAAWxB,EAAGC,EAAO,eAAef,CAAS;AAAA,IAC7C,GAAGM;AAAA,IACH,eAAe+B,KAAU;AAAA,EAAA,CAC1B;AACH;AACO,SAASE,EAAY;AAAA,EAC1B,WAAAvC;AAAA,EACA,GAAGM;AACL,GAAG;AACD,2BAAyBkC,GAAiB;AAAA,IACxC,WAAW1B,EAAGC,EAAO,SAASf,CAAS;AAAA,IACvC,GAAGM;AAAA,EAAA,CACJ;AACH;AACAP,EAAK,cAAc;AACnBiB,EAAS,cAAc;AACvBkB,EAAc,cAAc;AAC5BE,EAAW,cAAc;AACzBG,EAAY,cAAc;"}

package/dist/List/index.d.ts

@@ -0,0 +1,7 @@
+export * from './AppearanceSubmenu';
+export * from './GridList';
+export * from './ListBox';
+export * from './Menu';
+export * from './useCellEditMode';
+export { useListHoverHighlight } from './useListHoverHighlight';
+//# sourceMappingURL=index.d.ts.map

package/dist/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/List/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/List/index.js

@@ -0,0 +1,29 @@
+import { AppearanceSubmenu as t } from "./AppearanceSubmenu.js";
+import { GridList as i, GridListHeader as m, GridListItem as n, GridListSection as s } from "./GridList.js";
+import { ListBox as x, ListBoxHeader as p, ListBoxItem as a, ListBoxSection as d, listBoxItemDataShow as L } from "./ListBox.js";
+import { Menu as M, MenuHeader as S, MenuItem as g, MenuSection as B, MenuSeparator as H } from "./Menu.js";
+import { useCellEditMode as l } from "./useCellEditMode.js";
+import { useListHoverHighlight as I } from "./useListHoverHighlight.js";
+import { MenuTrigger as b, SubmenuTrigger as T } from "react-aria-components";
+export {
+  t as AppearanceSubmenu,
+  i as GridList,
+  m as GridListHeader,
+  n as GridListItem,
+  s as GridListSection,
+  x as ListBox,
+  p as ListBoxHeader,
+  a as ListBoxItem,
+  d as ListBoxSection,
+  M as Menu,
+  S as MenuHeader,
+  g as MenuItem,
+  B as MenuSection,
+  H as MenuSeparator,
+  b as MenuTrigger,
+  T as SubmenuTrigger,
+  L as listBoxItemDataShow,
+  l as useCellEditMode,
+  I as useListHoverHighlight
+};
+//# sourceMappingURL=index.js.map

package/dist/List/index.js.map

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

package/dist/List/listRowItemContent.d.ts

@@ -0,0 +1,37 @@
+import { composeRenderProps } from 'react-aria-components';
+import { DEFAULT_SLOT } from '../Slot';
+import type { ReactNode } from 'react';
+/** Stable reference for SlotContext.Provider (matches prior `useMemo(..., [])` pattern). */
+export declare const listRowItemSlotContextValue: {
+    slots: {
+        readonly [DEFAULT_SLOT]: {};
+        readonly icon: {};
+        readonly startAffix: {
+            readonly className: string;
+        };
+        readonly label: {
+            readonly className: string;
+        };
+        readonly description: {
+            readonly className: string;
+        };
+    };
+};
+export interface ListRowItemSlotFields {
+    icon?: ReactNode;
+    description?: ReactNode;
+    startAffix?: ReactNode;
+    endAffix?: ReactNode;
+    /** Title + description in a column (slash / plus pickers). Default is inline, description in `itemEnd`. */
+    stacked?: boolean;
+    /** Primary label fallback when using render-prop children without explicit label slot content. */
+    textValue?: string;
+}
+type RenderPropsChildren = Parameters<typeof composeRenderProps>[0];
+/**
+ * Shared list/menu/grid row layout: SlotContext + affix/description slots.
+ * Returns RAC’s `(renderProps) => ReactNode`, not a rendered node — use as JSX child `{ result }`.
+ */
+export declare function renderListRowItemContent(children: RenderPropsChildren, slotFields: ListRowItemSlotFields): (renderProps: unknown) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=listRowItemContent.d.ts.map

package/dist/List/listRowItemContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listRowItemContent.d.ts","sourceRoot":"","sources":["../../src/List/listRowItemContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,kBAAkB,EAErB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,YAAY,EAIf,MAAM,SAAS,CAAC;AAIjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,4FAA4F;AAC5F,eAAO,MAAM,2BAA2B;IAAK,KAAK;;;;qBANhC,SAAS;;;qBACd,SAAS;;;qBACH,SAAS;;;CAIgD,CAAC;AAE7E,MAAM,WAAW,qBAAqB;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpE;;;GAGG;AACH,wBAAgB,wBAAwB,CACpC,QAAQ,EAAE,mBAAmB,EAC7B,UAAU,EAAE,qBAAqB,yDAuEpC"}

package/dist/List/listRowItemContent.js

@@ -0,0 +1,63 @@
+import { composeRenderProps as b, Provider as L, DEFAULT_SLOT as R } from "react-aria-components";
+import { filterSlots as o, Slot as w, SlotContext as y } from "../Slot/Slot.js";
+import { Text as m } from "../Text/Text.js";
+import i from "./ListBox.module.css.js";
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+const D = {
+  [R]: {},
+  icon: {},
+  startAffix: {
+    className: i.itemStartAffix
+  },
+  label: {
+    className: i.itemLabel
+  },
+  description: {
+    className: i.itemDescription
+  }
+}, T = {
+  slots: D
+};
+function V(d, x) {
+  return b(d, (t) => {
+    const {
+      icon: S,
+      description: n,
+      startAffix: r,
+      endAffix: p,
+      stacked: c,
+      textValue: A
+    } = x, u = o(t, "icon", S), a = o(t, "label", /* @__PURE__ */ l(m, {
+      slot: "label",
+      children: t ?? A
+    })), e = o(t, "description", n != null ? /* @__PURE__ */ l(m, {
+      slot: "description",
+      children: n
+    }) : void 0), v = o(t, "startAffix", r ? /* @__PURE__ */ l(w, {
+      as: "div",
+      slot: "startAffix",
+      children: r
+    }) : void 0), f = o(t, "endAffix", p), N = c && e ? /* @__PURE__ */ s("div", {
+      className: i.itemCopy,
+      children: [a, e]
+    }) : a;
+    return /* @__PURE__ */ s(L, {
+      values: [[y, T]],
+      children: [/* @__PURE__ */ s("div", {
+        className: i.itemStart,
+        children: [v, u, N]
+      }), /* @__PURE__ */ s("div", {
+        className: i.itemEnd,
+        ...f ? {
+          slot: "endAffix"
+        } : {},
+        children: [c ? null : e, f]
+      })]
+    });
+  });
+}
+export {
+  T as listRowItemSlotContextValue,
+  V as renderListRowItemContent
+};
+//# sourceMappingURL=listRowItemContent.js.map

package/dist/List/listRowItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listRowItemContent.js","sources":["../../src/List/listRowItemContent.tsx"],"sourcesContent":["import {\n    composeRenderProps,\n    Provider,\n} from 'react-aria-components';\n\nimport {\n    DEFAULT_SLOT,\n    filterSlots,\n    Slot,\n    SlotContext,\n} from '../Slot';\nimport { Text } from '../Text';\nimport styles from './ListBox.module.css';\n\nimport type { ReactNode } from 'react';\n\nconst listRowSlotDefinitions = {\n    [DEFAULT_SLOT]: {},\n    icon: {},\n    startAffix: { className: styles.itemStartAffix },\n    label: { className: styles.itemLabel },\n    description: { className: styles.itemDescription },\n} as const;\n\n/** Stable reference for SlotContext.Provider (matches prior `useMemo(..., [])` pattern). */\nexport const listRowItemSlotContextValue = { slots: listRowSlotDefinitions };\n\nexport interface ListRowItemSlotFields {\n    icon?: ReactNode;\n    description?: ReactNode;\n    startAffix?: ReactNode;\n    endAffix?: ReactNode;\n    /** Title + description in a column (slash / plus pickers). Default is inline, description in `itemEnd`. */\n    stacked?: boolean;\n    /** Primary label fallback when using render-prop children without explicit label slot content. */\n    textValue?: string;\n}\n\ntype RenderPropsChildren = Parameters<typeof composeRenderProps>[0];\n\n/**\n * Shared list/menu/grid row layout: SlotContext + affix/description slots.\n * Returns RAC’s `(renderProps) => ReactNode`, not a rendered node — use as JSX child `{ result }`.\n */\nexport function renderListRowItemContent(\n    children: RenderPropsChildren,\n    slotFields: ListRowItemSlotFields\n) {\n    return composeRenderProps(children as ReactNode, (composedChildren: ReactNode) => {\n        const {\n            icon,\n            description,\n            startAffix,\n            endAffix,\n            stacked,\n            textValue,\n        } = slotFields;\n\n        const iconSlot = filterSlots(composedChildren, 'icon', icon);\n\n        const labelSlot = filterSlots(\n            composedChildren,\n            'label',\n            <Text slot=\"label\">\n                { composedChildren ?? textValue }\n            </Text>\n        );\n\n        const descriptionSlot = filterSlots(\n            composedChildren,\n            'description',\n            description != null\n                ? (\n                    <Text slot=\"description\">\n                        { description }\n                    </Text>\n                )\n                : undefined\n        );\n\n        const startAffixSlot = filterSlots(\n            composedChildren,\n            'startAffix',\n            startAffix\n                ? (<Slot as=\"div\" slot=\"startAffix\">{ startAffix }</Slot>)\n                : undefined\n        );\n\n        const endAffixSlot = filterSlots(composedChildren, 'endAffix', endAffix);\n\n        const copy = stacked && descriptionSlot\n            ? (\n                <div className={ styles.itemCopy }>\n                    { labelSlot }\n                    { descriptionSlot }\n                </div>\n            )\n            : labelSlot;\n\n        return (\n            <Provider values={ [[SlotContext, listRowItemSlotContextValue]] }>\n                <div className={ styles.itemStart }>\n                    { startAffixSlot }\n                    { iconSlot }\n                    { copy }\n                </div>\n\n                <div\n                    className={ styles.itemEnd }\n                    { ...(endAffixSlot ? { slot: 'endAffix' } : {}) }\n                >\n                    { stacked ? null : descriptionSlot }\n                    { endAffixSlot }\n                </div>\n            </Provider>\n        );\n    });\n}\n"],"names":["listRowSlotDefinitions","DEFAULT_SLOT","styles","listRowItemSlotContextValue","renderListRowItemContent","children","slotFields","composeRenderProps","composedChildren","icon","description","startAffix","endAffix","stacked","textValue","iconSlot","filterSlots","labelSlot","Text","descriptionSlot","startAffixSlot","Slot","endAffixSlot","copy","_jsxs","Provider","SlotContext"],"mappings":";;;;;AAKA,MAAMA,IAAyB;AAAA,EAC7B,CAACC,CAAY,GAAG,CAAA;AAAA,EAChB,MAAM,CAAA;AAAA,EACN,YAAY;AAAA,IACV,WAAWC,EAAO;AAAA,EAAA;AAAA,EAEpB,OAAO;AAAA,IACL,WAAWA,EAAO;AAAA,EAAA;AAAA,EAEpB,aAAa;AAAA,IACX,WAAWA,EAAO;AAAA,EAAA;AAEtB,GAGaC,IAA8B;AAAA,EACzC,OAAOH;AACT;AAKO,SAASI,EAAyBC,GAAUC,GAAY;AAC7D,SAAOC,EAAmBF,GAAU,CAAAG,MAAoB;AACtD,UAAM;AAAA,MACJ,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,IACER,GACES,IAAWC,EAAYR,GAAkB,QAAQC,CAAI,GACrDQ,IAAYD,EAAYR,GAAkB,2BAA2BU,GAAM;AAAA,MAC/E,MAAM;AAAA,MACN,UAAUV,KAAoBM;AAAA,IAAA,CAC/B,CAAC,GACIK,IAAkBH,EAAYR,GAAkB,eAAeE,KAAe,yBAAyBQ,GAAM;AAAA,MACjH,MAAM;AAAA,MACN,UAAUR;AAAA,IAAA,CACX,IAAI,MAAS,GACRU,IAAiBJ,EAAYR,GAAkB,cAAcG,sBAA+BU,GAAM;AAAA,MACtG,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,UAAUV;AAAA,IAAA,CACX,IAAI,MAAS,GACRW,IAAeN,EAAYR,GAAkB,YAAYI,CAAQ,GACjEW,IAAOV,KAAWM,IAA+BK,gBAAAA,EAAM,OAAO;AAAA,MAClE,WAAWtB,EAAO;AAAA,MAClB,UAAU,CAACe,GAAWE,CAAe;AAAA,IAAA,CACtC,IAAIF;AACL,6BAA0BQ,GAAU;AAAA,MAClC,QAAQ,CAAC,CAACC,GAAavB,CAA2B,CAAC;AAAA,MACnD,UAAU,CAAcqB,gBAAAA,EAAM,OAAO;AAAA,QACnC,WAAWtB,EAAO;AAAA,QAClB,UAAU,CAACkB,GAAgBL,GAAUQ,CAAI;AAAA,MAAA,CAC1C,GAAgBC,gBAAAA,EAAM,OAAO;AAAA,QAC5B,WAAWtB,EAAO;AAAA,QAClB,GAAIoB,IAAe;AAAA,UACjB,MAAM;AAAA,QAAA,IACJ,CAAA;AAAA,QACJ,UAAU,CAACT,IAAU,OAAOM,GAAiBG,CAAY;AAAA,MAAA,CAC1D,CAAC;AAAA,IAAA,CACH;AAAA,EACH,CAAC;AACH;"}

package/dist/List/useCellEditMode.d.ts

@@ -0,0 +1,12 @@
+import type { DOMAttributes } from 'react';
+export interface CellEditModeProps {
+    onFocus: NonNullable<DOMAttributes<HTMLElement>['onFocus']>;
+    onBlur: NonNullable<DOMAttributes<HTMLElement>['onBlur']>;
+}
+/**
+ * Forward keyboard events into an editable embedded in a RAC {@link GridListItem} rather than consuming them as list navigation (e.g. Space for selection toggling).
+ *
+ * Attach the returned props to {@link HTMLInputElement}, {@link HTMLTextAreaElement}, or contenteditable hosts. Matches the workaround discussed in react-spectrum#4674 via a capture-phase `window` listener.
+ */
+export declare function useCellEditMode(): CellEditModeProps;
+//# sourceMappingURL=useCellEditMode.d.ts.map

package/dist/List/useCellEditMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCellEditMode.d.ts","sourceRoot":"","sources":["../../src/List/useCellEditMode.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,iBAAiB;IAC9B,OAAO,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5D,MAAM,EAAE,WAAW,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;CAC7D;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,iBAAiB,CA6BnD"}

package/dist/List/useCellEditMode.js

@@ -0,0 +1,25 @@
+import { useRef as u, useEffect as c, useCallback as r, useMemo as d } from "react";
+function f() {
+  const e = u(!1);
+  c(() => {
+    const o = (s) => {
+      e.current && s.stopPropagation();
+    };
+    return window.addEventListener("keydown", o, !0), () => {
+      window.removeEventListener("keydown", o, !0);
+    };
+  }, []);
+  const n = r(() => {
+    e.current = !0;
+  }, []), t = r(() => {
+    e.current = !1;
+  }, []);
+  return d(() => ({
+    onFocus: n,
+    onBlur: t
+  }), [t, n]);
+}
+export {
+  f as useCellEditMode
+};
+//# sourceMappingURL=useCellEditMode.js.map