@pearpages/pulp-react 0.0.0

package/dist/chunk-F3OFZGGE.js

@@ -0,0 +1,116 @@
+import { VisuallyHidden } from './chunk-Z4PN6B2C.js';
+import { selectionToIds } from './chunk-CZBCGLEM.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { createContext, useRef, useCallback, useState, useContext, useEffect } from 'react';
+import { Table as Table$1, useTableOptions, TableHeader as TableHeader$1, Column, TableBody as TableBody$1, Row, Cell, Checkbox } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/table/Table.module.css
+var Table_default = {
+  container: "Table_container",
+  table: "Table_table",
+  header: "Table_header",
+  column: "Table_column",
+  row: "Table_row",
+  cell: "Table_cell",
+  body: "Table_body",
+  selectColumn: "Table_selectColumn",
+  selectCell: "Table_selectCell",
+  selectBox: "Table_selectBox",
+  select: "Table_select",
+  empty: "Table_empty"
+};
+var RowIdsContext = createContext(null);
+function Table({
+  selectionMode = "none",
+  selected,
+  defaultSelected = [],
+  onSelectedChange,
+  disabledIds,
+  sort,
+  defaultSort,
+  onSortChange,
+  density = "default",
+  stickyHeader = false,
+  onRowAction,
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  const ids = useRef(/* @__PURE__ */ new Set());
+  const add = useCallback((id) => {
+    ids.current.add(id);
+    return () => {
+      ids.current.delete(id);
+    };
+  }, []);
+  const all = useCallback(() => Array.from(ids.current), []);
+  const [uncontrolledSort, setUncontrolledSort] = useState(defaultSort);
+  const currentSort = sort === void 0 ? uncontrolledSort : sort ?? void 0;
+  return /* @__PURE__ */ jsx(RowIdsContext.Provider, { value: { add, all }, children: /* @__PURE__ */ jsx("div", { className: classes(Table_default.container, className), "data-sticky-header": stickyHeader ? "" : void 0, children: /* @__PURE__ */ jsx(
+    Table$1,
+    {
+      ...rest,
+      ref,
+      className: Table_default.table,
+      "data-density": density,
+      selectionMode,
+      selectedKeys: selected,
+      defaultSelectedKeys: defaultSelected,
+      onSelectionChange: (selection) => onSelectedChange?.(selectionToIds(selection, all)),
+      disabledKeys: disabledIds,
+      sortDescriptor: currentSort,
+      onSortChange: (descriptor) => {
+        const next = { column: String(descriptor.column), direction: descriptor.direction };
+        if (sort === void 0) setUncontrolledSort(next);
+        onSortChange?.(next);
+      },
+      onRowAction: onRowAction && ((key) => onRowAction(String(key))),
+      children
+    }
+  ) }) });
+}
+function TableHeader({ className, children }) {
+  const { selectionMode, selectionBehavior } = useTableOptions();
+  return /* @__PURE__ */ jsxs(TableHeader$1, { className: classes(Table_default.header, className), children: [
+    selectionMode !== "none" && selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Column, { className: classes(Table_default.column, Table_default.selectColumn), children: selectionMode === "multiple" ? /* @__PURE__ */ jsx(SelectionCheckbox, {}) : /* @__PURE__ */ jsx(VisuallyHidden, { children: "Selection" }) }),
+    children
+  ] });
+}
+function TableColumn({ id, allowsSorting = false, isRowHeader = false, align = "start", className, children }) {
+  return /* @__PURE__ */ jsx(Column, { id, allowsSorting, isRowHeader, className: classes(Table_default.column, className), "data-align": align, children });
+}
+function TableBody({ items, emptyMessage = "No rows", className, children }) {
+  return /* @__PURE__ */ jsx(TableBody$1, { items, className: classes(Table_default.body, className), renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: Table_default.empty, children: emptyMessage }), children });
+}
+function TableRow({ id, className, children }) {
+  const { selectionBehavior } = useTableOptions();
+  const registry = useContext(RowIdsContext);
+  useEffect(() => id !== void 0 && registry ? registry.add(id) : void 0, [id, registry]);
+  return /* @__PURE__ */ jsxs(Row, { id, className: classes(Table_default.row, className), children: [
+    selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Cell, { className: classes(Table_default.cell, Table_default.selectCell), children: /* @__PURE__ */ jsx(SelectionCheckbox, {}) }),
+    children
+  ] });
+}
+function TableCell({ align = "start", className, children }) {
+  return /* @__PURE__ */ jsx(Cell, { className: classes(Table_default.cell, className), "data-align": align, children });
+}
+function SelectionCheckbox() {
+  return /* @__PURE__ */ jsx(Checkbox, { slot: "selection", className: Table_default.select, children: /* @__PURE__ */ jsx("span", { className: Table_default.selectBox, "aria-hidden": "true" }) });
+}
+Table.displayName = "Table";
+TableHeader.displayName = "Table.Header";
+TableColumn.displayName = "Table.Column";
+TableBody.displayName = "Table.Body";
+TableRow.displayName = "Table.Row";
+TableCell.displayName = "Table.Cell";
+Table.Header = TableHeader;
+Table.Column = TableColumn;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+
+export { Table };
+//# sourceMappingURL=chunk-F3OFZGGE.js.map
+//# sourceMappingURL=chunk-F3OFZGGE.js.map

package/dist/chunk-F3OFZGGE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/table/Table.module.css","../src/table/Table.tsx"],"names":["container","table","header","column","row","cell","body","selectColumn","selectCell","selectBox","select","empty","AriaTable","AriaTableHeader","AriaColumn","AriaTableBody","AriaRow","AriaCell","AriaCheckbox"],"mappings":"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","file":"chunk-F3OFZGGE.js","sourcesContent":["/*\n * Every value is a token (--table-*). Density resolves the row padding into a\n * private custom property on the table. React Aria writes the state:\n * data-hovered, data-selected, data-disabled, data-focus-visible on rows and\n * cells; data-allows-sorting and data-sort-direction on columns;\n * data-selected and data-indeterminate on the selection checkbox.\n * Rules are ordered from general to specific so no later selector has a lower\n * specificity than an earlier one for the same element.\n */\n\n@layer components {\n  .container {\n    overflow: auto;\n    border: var(--size-hairline) solid var(--table-border);\n    border-radius: var(--table-radius);\n    background-color: var(--table-bg);\n    color: var(--table-fg);\n    font-family: var(--table-font-family);\n    font-size: var(--table-font-size);\n  }\n\n  .table {\n    --_padding-block: var(--table-cell-padding-block-default);\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    outline: none;\n\n    &[data-density=\"compact\"] {\n      --_padding-block: var(--table-cell-padding-block-compact);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .header {\n    background-color: var(--table-header-bg);\n  }\n\n  .container[data-sticky-header] .header {\n    position: sticky;\n    inset-block-start: 0;\n  }\n\n  .column {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    border-block-end: var(--size-hairline) solid var(--table-border);\n    color: var(--table-header-fg);\n    font-size: var(--table-header-font-size);\n    font-weight: var(--table-header-font-weight);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n    }\n\n    &[data-allows-sorting] {\n      cursor: pointer;\n    }\n\n    &[data-allows-sorting]::after {\n      content: \"\";\n      display: inline-block;\n      inline-size: var(--table-header-sort-indicator-size);\n      block-size: var(--table-header-sort-indicator-size);\n      margin-inline-start: var(--table-header-sort-indicator-size);\n      border-inline-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      border-block-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      rotate: -135deg;\n      translate: 0 25%;\n      opacity: 0;\n      transition: opacity var(--table-motion-duration) var(--motion-easing-standard);\n    }\n\n    &[data-hovered]::after {\n      opacity: 0.5;\n    }\n\n    &[data-sort-direction] {\n      color: var(--table-header-fg-active);\n    }\n\n    &[data-sort-direction]::after {\n      color: var(--table-header-sort-indicator);\n      opacity: 1;\n    }\n\n    &[data-sort-direction=\"descending\"]::after {\n      rotate: 45deg;\n      translate: 0 -25%;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .row {\n    outline: none;\n    transition: background-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--table-row-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--table-row-bg-selected);\n    }\n\n    &[data-disabled] {\n      color: var(--table-row-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .cell {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n      font-variant-numeric: tabular-nums;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .body .row:not(:last-child) .cell {\n    border-block-end: var(--size-hairline) solid var(--table-border);\n  }\n\n  .selectColumn,\n  .selectCell {\n    inline-size: var(--table-select-size);\n    padding-inline-end: 0;\n  }\n\n  .selectBox {\n    display: grid;\n    place-content: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    border: var(--size-hairline) solid var(--table-select-border);\n    border-radius: var(--table-select-radius);\n    background-color: var(--table-select-bg);\n    transition:\n      background-color var(--table-motion-duration) var(--motion-easing-standard),\n      border-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--table-select-size) * 0.3);\n      block-size: calc(var(--table-select-size) * 0.55);\n      border-style: solid;\n      border-color: var(--table-select-check);\n      border-width: 0 var(--table-select-check-width) var(--table-select-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n  }\n\n  .select {\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    cursor: pointer;\n\n    &[data-focus-visible] .selectBox {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: var(--table-focus-ring-offset);\n    }\n\n    &[data-selected] .selectBox,\n    &[data-indeterminate] .selectBox {\n      border-color: var(--table-select-bg-checked);\n      background-color: var(--table-select-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &[data-indeterminate] .selectBox::after {\n      inline-size: calc(var(--table-select-size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--table-select-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n  }\n\n  .empty {\n    padding: var(--table-empty-padding);\n    color: var(--table-empty-fg);\n    text-align: center;\n  }\n}\n","import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactElement, type ReactNode, type Ref } from 'react';\nimport {\n  Cell as AriaCell,\n  Checkbox as AriaCheckbox,\n  Column as AriaColumn,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableBody as AriaTableBody,\n  TableHeader as AriaTableHeader,\n  useTableOptions,\n  type Key,\n  type SortDescriptor,\n} from 'react-aria-components';\nimport { classes } from '../internal/classes';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { selectionToIds } from '../internal/selection';\nimport styles from './Table.module.css';\n\nexport type TableSelectionMode = 'none' | 'single' | 'multiple';\nexport type TableDensity = 'default' | 'compact';\nexport type TableSortDirection = 'ascending' | 'descending';\nexport interface TableSort {\n  column: string;\n  direction: TableSortDirection;\n}\n\n/** Rows register their ids so `'all'` (Ctrl/Cmd+A) resolves to an array without a second source of truth. */\nconst RowIdsContext = createContext<{ add: (id: Key) => () => void; all: () => Key[] } | null>(null);\n\nexport interface TableProps {\n  /** The table's accessible name. Pass `aria-labelledby` instead when a visible heading names it. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  /** @default 'none' */\n  selectionMode?: TableSelectionMode;\n  /** Selected row ids (controlled). */\n  selected?: readonly string[];\n  /** @default [] */\n  defaultSelected?: readonly string[];\n  onSelectedChange?: (ids: string[]) => void;\n  /** Rows that cannot be selected or activated. */\n  disabledIds?: readonly string[];\n  /** Current sort (controlled). Sorting the data is the caller's job: this is the header state. */\n  sort?: TableSort | null;\n  defaultSort?: TableSort;\n  onSortChange?: (sort: TableSort) => void;\n  /** Row padding steps down one token. The brand's `space.unit` sets the base. @default 'default' */\n  density?: TableDensity;\n  /** The header stays visible while the container scrolls. Give the container a height through `className`. @default false */\n  stickyHeader?: boolean;\n  /**\n   * Called with the row id on Enter, on click, and on double click. Once\n   * rows are selectable and a selection exists, Enter and click toggle the\n   * selection instead (the vendor's rule, so touch users select without a\n   * modifier key); double click still runs the action.\n   */\n  onRowAction?: (id: string) => void;\n  /** Applied to the scroll container around the table. */\n  className?: string;\n  /** The `<table>` element. */\n  ref?: Ref<HTMLTableElement>;\n  /** `Table.Header` then `Table.Body`. */\n  children: ReactNode;\n}\n\n/**\n * A data table on React Aria's grid (decision record 001): one Tab stop,\n * arrows move between rows and cells, Space toggles selection, Enter runs\n * the row action (see `onRowAction` for the selection rule), sortable\n * headers carry `aria-sort` and are pressed to change direction. Selection and sort are the caller's state; the table\n * reports changes and renders them. Compose with `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row` and `Table.Cell`; the selection\n * column appears by itself when rows are selectable.\n *\n * @status experimental\n * @category Data\n * @accessibility `role=\"grid\"` named by `aria-label` or `aria-labelledby`; one column is the row header (`isRowHeader`), sortable columns carry `aria-sort`, selectable rows `aria-selected`, and the selection column holds real checkboxes (\"Select All\" in the header). One tab stop: arrows move between rows and cells, Space toggles selection, Enter runs the row action, the header cells are pressed to sort.\n * @do Mark exactly one column `isRowHeader`.\n * Give the table a name that says what the rows are.\n * @dont Sort the data inside the table; sort your data from `onSortChange` and pass it back.\n * Use it for layout.\n */\nexport function Table({\n  selectionMode = 'none',\n  selected,\n  defaultSelected = [],\n  onSelectedChange,\n  disabledIds,\n  sort,\n  defaultSort,\n  onSortChange,\n  density = 'default',\n  stickyHeader = false,\n  onRowAction,\n  className,\n  ref,\n  children,\n  ...rest\n}: TableProps) {\n  const ids = useRef(new Set<Key>());\n  const add = useCallback((id: Key) => {\n    ids.current.add(id);\n    return () => {\n      ids.current.delete(id);\n    };\n  }, []);\n  const all = useCallback(() => Array.from(ids.current), []);\n  // The vendor has no default for the sort descriptor; hold it here when uncontrolled.\n  const [uncontrolledSort, setUncontrolledSort] = useState<TableSort | undefined>(defaultSort);\n  const currentSort = sort === undefined ? uncontrolledSort : (sort ?? undefined);\n\n  return (\n    <RowIdsContext.Provider value={{ add, all }}>\n      <div className={classes(styles.container, className)} data-sticky-header={stickyHeader ? '' : undefined}>\n        <AriaTable\n          {...rest}\n          ref={ref as Ref<HTMLDivElement | HTMLTableElement>}\n          className={styles.table}\n          data-density={density}\n          selectionMode={selectionMode}\n          selectedKeys={selected}\n          defaultSelectedKeys={defaultSelected}\n          onSelectionChange={(selection) => onSelectedChange?.(selectionToIds(selection, all))}\n          disabledKeys={disabledIds}\n          sortDescriptor={currentSort as SortDescriptor | undefined}\n          onSortChange={(descriptor) => {\n            const next = { column: String(descriptor.column), direction: descriptor.direction };\n            if (sort === undefined) setUncontrolledSort(next);\n            onSortChange?.(next);\n          }}\n          onRowAction={onRowAction && ((key) => onRowAction(String(key)))}\n        >\n          {children}\n        </AriaTable>\n      </div>\n    </RowIdsContext.Provider>\n  );\n}\n\ninterface TableHeaderProps {\n  className?: string;\n  /** `Table.Column` elements. */\n  children: ReactNode;\n}\n\nfunction TableHeader({ className, children }: TableHeaderProps) {\n  const { selectionMode, selectionBehavior } = useTableOptions();\n  return (\n    <AriaTableHeader className={classes(styles.header, className)}>\n      {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n        <AriaColumn className={classes(styles.column, styles.selectColumn)}>\n          {selectionMode === 'multiple' ? <SelectionCheckbox /> : <VisuallyHidden>Selection</VisuallyHidden>}\n        </AriaColumn>\n      )}\n      {children}\n    </AriaTableHeader>\n  );\n}\n\nexport type TableAlign = 'start' | 'end';\n\ninterface TableColumnProps {\n  /** The column id `sort.column` refers to. Defaults to the column's text. */\n  id?: string;\n  /** Pressing the header sorts by it; the table reports the change through `onSortChange`. @default false */\n  allowsSorting?: boolean;\n  /** This column names the row for assistive technology. Exactly one column per table. @default false */\n  isRowHeader?: boolean;\n  /** @default 'start' */\n  align?: TableAlign;\n  className?: string;\n  children: ReactNode;\n}\n\nfunction TableColumn({ id, allowsSorting = false, isRowHeader = false, align = 'start', className, children }: TableColumnProps) {\n  return (\n    <AriaColumn id={id} allowsSorting={allowsSorting} isRowHeader={isRowHeader} className={classes(styles.column, className)} data-align={align}>\n      {children}\n    </AriaColumn>\n  );\n}\n\ninterface TableBodyProps<T extends { id: string }> {\n  /** Rows from data: each item renders through the `children` function, keyed by `item.id`. */\n  items?: Iterable<T>;\n  /** Shown when there are no rows. @default 'No rows' */\n  emptyMessage?: ReactNode;\n  className?: string;\n  /** `Table.Row` elements, or a function from an item to one when `items` is given. */\n  children: ReactNode | ((item: T) => ReactElement);\n}\n\nfunction TableBody<T extends { id: string }>({ items, emptyMessage = 'No rows', className, children }: TableBodyProps<T>) {\n  return (\n    <AriaTableBody items={items} className={classes(styles.body, className)} renderEmptyState={() => <div className={styles.empty}>{emptyMessage}</div>}>\n      {children}\n    </AriaTableBody>\n  );\n}\n\ninterface TableRowProps {\n  /** The row id used for selection, sorting callbacks and `onRowAction`. Required unless the row comes from `items`. */\n  id?: string;\n  className?: string;\n  /** `Table.Cell` elements. */\n  children: ReactNode;\n}\n\nfunction TableRow({ id, className, children }: TableRowProps) {\n  const { selectionBehavior } = useTableOptions();\n  const registry = useContext(RowIdsContext);\n  useEffect(() => (id !== undefined && registry ? registry.add(id) : undefined), [id, registry]);\n  return (\n    <AriaRow id={id} className={classes(styles.row, className)}>\n      {selectionBehavior === 'toggle' && (\n        <AriaCell className={classes(styles.cell, styles.selectCell)}>\n          <SelectionCheckbox />\n        </AriaCell>\n      )}\n      {children}\n    </AriaRow>\n  );\n}\n\ninterface TableCellProps {\n  /** @default 'start' */\n  align?: TableAlign;\n  className?: string;\n  children: ReactNode;\n}\n\nfunction TableCell({ align = 'start', className, children }: TableCellProps) {\n  return (\n    <AriaCell className={classes(styles.cell, className)} data-align={align}>\n      {children}\n    </AriaCell>\n  );\n}\n\n/** React Aria's checkbox wired to the row (or all rows) through `slot=\"selection\"`; drawn from the table's tokens. */\nfunction SelectionCheckbox() {\n  return (\n    <AriaCheckbox slot=\"selection\" className={styles.select}>\n      <span className={styles.selectBox} aria-hidden=\"true\" />\n    </AriaCheckbox>\n  );\n}\n\nTable.displayName = 'Table';\nTableHeader.displayName = 'Table.Header';\nTableColumn.displayName = 'Table.Column';\nTableBody.displayName = 'Table.Body';\nTableRow.displayName = 'Table.Row';\nTableCell.displayName = 'Table.Cell';\n\nTable.Header = TableHeader;\nTable.Column = TableColumn;\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n"]}

package/dist/chunk-FH54XQ35.js

@@ -0,0 +1,125 @@
+import { useRovingFocus } from './chunk-I5OZ63W7.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { createContext, useState, useCallback, useId, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/tabs/Tabs.module.css
+var Tabs_default = {
+  root: "Tabs_root",
+  list: "Tabs_list",
+  tab: "Tabs_tab",
+  panel: "Tabs_panel"
+};
+var TabsContext = createContext(null);
+function useTabs(component) {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error(`${component} must be rendered inside <Tabs>`);
+  return context;
+}
+function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  activation = "automatic",
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
+  const controlled = value !== void 0;
+  const current = controlled ? value : uncontrolled;
+  const setValue = useCallback(
+    (next) => {
+      if (!controlled) setUncontrolled(next);
+      onValueChange?.(next);
+    },
+    [controlled, onValueChange]
+  );
+  const baseId = useId();
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, setValue, orientation, activation, baseId }, children: /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes(Tabs_default.root, className), "data-orientation": orientation, children }) });
+}
+function TabsList({ className, ref, onKeyDown, children, ...rest }) {
+  const { orientation, activation, setValue } = useTabs("Tabs.List");
+  const rove = useRovingFocus({
+    orientation,
+    selector: '[role="tab"]',
+    onFocusItem: (item) => {
+      if (activation === "automatic" && item.dataset.value !== void 0) setValue(item.dataset.value);
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "tablist",
+      "aria-orientation": orientation,
+      className: classes(Tabs_default.list, className),
+      "data-orientation": orientation,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) rove(event);
+      },
+      children
+    }
+  );
+}
+function TabsTab({ value, disabled, className, onClick, ref, children, ...rest }) {
+  const tabs = useTabs("Tabs.Tab");
+  const selected = tabs.value === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      ref,
+      type: "button",
+      role: "tab",
+      id: `${tabs.baseId}-tab-${value}`,
+      "aria-selected": selected,
+      "aria-controls": `${tabs.baseId}-panel-${value}`,
+      tabIndex: selected ? 0 : -1,
+      disabled,
+      className: classes(Tabs_default.tab, className),
+      "data-value": value,
+      "data-state": selected ? "active" : "inactive",
+      "data-disabled": disabled ? "" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) tabs.setValue(value);
+      },
+      children
+    }
+  );
+}
+function TabsPanel({ value, className, ref, children, ...rest }) {
+  const tabs = useTabs("Tabs.Panel");
+  const selected = tabs.value === value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      role: "tabpanel",
+      id: `${tabs.baseId}-panel-${value}`,
+      "aria-labelledby": `${tabs.baseId}-tab-${value}`,
+      hidden: !selected,
+      tabIndex: 0,
+      className: classes(Tabs_default.panel, className),
+      "data-state": selected ? "active" : "inactive",
+      children
+    }
+  );
+}
+Tabs.displayName = "Tabs";
+TabsList.displayName = "Tabs.List";
+TabsTab.displayName = "Tabs.Tab";
+TabsPanel.displayName = "Tabs.Panel";
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Panel = TabsPanel;
+
+export { Tabs };
+//# sourceMappingURL=chunk-FH54XQ35.js.map
+//# sourceMappingURL=chunk-FH54XQ35.js.map

package/dist/chunk-FH54XQ35.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/Tabs.module.css","../src/tabs/Tabs.tsx"],"names":["root","list","tab","panel"],"mappings":"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","file":"chunk-FH54XQ35.js","sourcesContent":["/* Every value is a token (--tabs-*). The indicator is a logical border on the active tab, so vertical orientation just flips the side. */\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: row;\n    }\n  }\n\n  .list {\n    display: flex;\n    gap: var(--tabs-gap);\n    border-block-end: 1px solid var(--tabs-list-border);\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: column;\n      border-block-end: none;\n      border-inline-end: 1px solid var(--tabs-list-border);\n    }\n  }\n\n  .tab {\n    position: relative;\n    padding-block: var(--tabs-tab-padding-block);\n    padding-inline: var(--tabs-tab-padding-inline);\n    border: none;\n    border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;\n    background-color: transparent;\n    color: var(--tabs-tab-fg);\n    font-size: var(--tabs-tab-font-size);\n    font-weight: var(--tabs-tab-font-weight);\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    transition:\n      color var(--tabs-motion-duration) var(--motion-easing-standard),\n      background-color var(--tabs-motion-duration) var(--motion-easing-standard);\n\n    /* Indicator: a transparent border always present, coloured when active, so nothing shifts. */\n    border-block-end: 2px solid transparent;\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: calc(-1 * var(--tabs-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-state=\"active\"] {\n      color: var(--tabs-tab-fg-active);\n      border-block-end-color: var(--tabs-tab-indicator);\n    }\n\n    &:hover:not(:disabled, [data-state=\"active\"]) {\n      color: var(--tabs-tab-fg-hover);\n      background-color: var(--tabs-tab-bg-hover);\n    }\n  }\n\n  .list[data-orientation=\"vertical\"] .tab {\n    border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);\n    border-block-end: none;\n    border-inline-end: 2px solid transparent;\n    text-align: start;\n\n    &[data-state=\"active\"] {\n      border-inline-end-color: var(--tabs-tab-indicator);\n    }\n  }\n\n  .panel {\n    padding-block: var(--tabs-panel-padding-block);\n    color: var(--tabs-panel-fg);\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: var(--tabs-focus-ring-offset);\n    }\n  }\n\n  .root[data-orientation=\"vertical\"] .panel {\n    padding-block: 0;\n    padding-inline-start: var(--tabs-tab-padding-inline);\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { classes } from '../internal/classes';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Tabs.module.css';\n\nexport type TabsOrientation = 'horizontal' | 'vertical';\nexport type TabsActivation = 'automatic' | 'manual';\n\ninterface TabsContextValue {\n  value: string;\n  setValue: (value: string) => void;\n  orientation: TabsOrientation;\n  activation: TabsActivation;\n  baseId: string;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabs(component: string): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) throw new Error(`${component} must be rendered inside <Tabs>`);\n  return context;\n}\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {\n  /** Controlled selected tab. */\n  value?: string;\n  /** Initially selected tab when uncontrolled. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Layout and arrow-key axis. @default 'horizontal' */\n  orientation?: TabsOrientation;\n  /**\n   * `automatic` selects a tab when it receives focus (arrow keys); `manual`\n   * moves focus only and selects on Enter, Space or click.\n   * @default 'automatic'\n   */\n  activation?: TabsActivation;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * Tabbed sections following the WAI-ARIA Tabs pattern. Compose with\n * `Tabs.List`, `Tabs.Tab` and `Tabs.Panel`; ids and ARIA relationships are\n * wired automatically. One tab stop: arrows move between tabs, Home and End\n * jump to the ends, disabled tabs are skipped. State on the DOM:\n * `data-orientation`, `data-state=\"active|inactive\"`.\n *\n * @status stable\n * @category Navigation\n * @accessibility The WAI-ARIA Tabs pattern: `tablist` with `aria-orientation`, `tab`s carrying `aria-selected` and `aria-controls`, `tabpanel`s labelled by their tab. One tab stop: arrows move (and select with automatic activation), Home/End jump, disabled tabs are skipped.\n * @do Use `activation=\"manual\"` when switching a tab is expensive.\n * Name the `Tabs.List` with `aria-label`.\n * @dont Use tabs for sequential steps; use a stepper pattern.\n * Put a link inside a tab.\n */\nexport function Tabs({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'horizontal',\n  activation = 'automatic',\n  className,\n  ref,\n  children,\n  ...rest\n}: TabsProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? '');\n  const controlled = value !== undefined;\n  const current = controlled ? value : uncontrolled;\n  const setValue = useCallback(\n    (next: string) => {\n      if (!controlled) setUncontrolled(next);\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n  const baseId = useId();\n\n  return (\n    <TabsContext.Provider value={{ value: current, setValue, orientation, activation, baseId }}>\n      <div {...rest} ref={ref} className={classes(styles.root, className)} data-orientation={orientation}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\ninterface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction TabsList({ className, ref, onKeyDown, children, ...rest }: TabsListProps) {\n  const { orientation, activation, setValue } = useTabs('Tabs.List');\n  const rove = useRovingFocus({\n    orientation,\n    selector: '[role=\"tab\"]',\n    onFocusItem: (item) => {\n      if (activation === 'automatic' && item.dataset.value !== undefined) setValue(item.dataset.value);\n    },\n  });\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={classes(styles.list, className)}\n      data-orientation={orientation}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (!event.defaultPrevented) rove(event);\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface TabsTabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  /** Identifies the tab; the panel with the same value belongs to it. */\n  value: string;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction TabsTab({ value, disabled, className, onClick, ref, children, ...rest }: TabsTabProps) {\n  const tabs = useTabs('Tabs.Tab');\n  const selected = tabs.value === value;\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={`${tabs.baseId}-tab-${value}`}\n      aria-selected={selected}\n      aria-controls={`${tabs.baseId}-panel-${value}`}\n      tabIndex={selected ? 0 : -1}\n      disabled={disabled}\n      className={classes(styles.tab, className)}\n      data-value={value}\n      data-state={selected ? 'active' : 'inactive'}\n      data-disabled={disabled ? '' : undefined}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) tabs.setValue(value);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\ninterface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  ref?: Ref<HTMLDivElement>;\n  children?: ReactNode;\n}\n\nfunction TabsPanel({ value, className, ref, children, ...rest }: TabsPanelProps) {\n  const tabs = useTabs('Tabs.Panel');\n  const selected = tabs.value === value;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"tabpanel\"\n      id={`${tabs.baseId}-panel-${value}`}\n      aria-labelledby={`${tabs.baseId}-tab-${value}`}\n      hidden={!selected}\n      tabIndex={0}\n      className={classes(styles.panel, className)}\n      data-state={selected ? 'active' : 'inactive'}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabs.displayName = 'Tabs';\nTabsList.displayName = 'Tabs.List';\nTabsTab.displayName = 'Tabs.Tab';\nTabsPanel.displayName = 'Tabs.Panel';\n\nTabs.List = TabsList;\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\n"]}

package/dist/chunk-FXRSZUDH.js

@@ -0,0 +1,38 @@
+import { Button } from './chunk-KPQGS4PG.js';
+import { Icon } from './chunk-ASNTNTJW.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { isValidElement, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/icon-button/IconButton.module.css
+var IconButton_default = {
+  iconButton: "IconButton_iconButton"
+};
+function IconButton({
+  label,
+  icon,
+  title,
+  className,
+  asChild = false,
+  children,
+  ...rest
+}) {
+  const glyph = /* @__PURE__ */ jsx(Icon, { size: "inherit", children: icon });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...rest,
+      asChild,
+      "aria-label": label,
+      title: title ?? label,
+      "data-icon-only": "",
+      className: classes(IconButton_default.iconButton, className),
+      children: asChild && isValidElement(children) ? cloneElement(children, void 0, glyph) : glyph
+    }
+  );
+}
+IconButton.displayName = "IconButton";
+
+export { IconButton };
+//# sourceMappingURL=chunk-FXRSZUDH.js.map
+//# sourceMappingURL=chunk-FXRSZUDH.js.map

package/dist/chunk-FXRSZUDH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-button/IconButton.module.css","../src/icon-button/IconButton.tsx"],"names":["iconButton"],"mappings":";;;;;;;AAAA,IAAA,kBAAA,GAAA;AAAA,EAGG,UAAA,EAAAA;AAAA,CAAA;ACwBI,SAAS,UAAA,CAAsD;AAAA,EACpE,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,mBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,WAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA;AAAA,MACA,YAAA,EAAY,KAAA;AAAA,MACZ,OAAO,KAAA,IAAS,KAAA;AAAA,MAChB,gBAAA,EAAe,EAAA;AAAA,MACf,SAAA,EAAW,OAAA,CAAQ,kBAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA,OAAA,IAAW,eAAe,QAAQ,CAAA,GAAI,aAAa,QAAA,EAAU,MAAA,EAAW,KAAK,CAAA,GAAI;AAAA;AAAA,GACpF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-FXRSZUDH.js","sourcesContent":["/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps<E extends HTMLElement = HTMLButtonElement>\n  extends Omit<ButtonProps<E>, 'children' | 'iconStart' | 'iconEnd'> {\n  /** The accessible name. Required: an icon alone is not a name. Also used as the tooltip unless `title` is given. */\n  label: string;\n  /** The glyph, for instance from `@pearpages/pulp-icons`. */\n  icon: ReactNode;\n  /** With `asChild`: the element to render (a link, for instance). Its own children are replaced by the icon. */\n  children?: ReactElement;\n}\n\n/**\n * A square Button that shows only an icon and therefore *requires* a name.\n * Everything else (variants, sizes, loading, asChild) is Button's; the\n * `--icon-button-size-*` tokens make it square.\n *\n * @status stable\n * @category Actions\n * @accessibility A Button with `aria-label` from the required `label`; `title` shows it as a tooltip. Everything else is Button's.\n * @do Write the label as the action (\"Close\", \"Add item\").\n * @dont Use the icon's name as the label.\n */\nexport function IconButton<E extends HTMLElement = HTMLButtonElement>({\n  label,\n  icon,\n  title,\n  className,\n  asChild = false,\n  children,\n  ...rest\n}: IconButtonProps<E>) {\n  const glyph = <Icon size=\"inherit\">{icon}</Icon>;\n  return (\n    <Button\n      {...rest}\n      asChild={asChild}\n      aria-label={label}\n      title={title ?? label}\n      data-icon-only=\"\"\n      className={classes(styles.iconButton, className)}\n    >\n      {asChild && isValidElement(children) ? cloneElement(children, undefined, glyph) : glyph}\n    </Button>\n  );\n}\n\nIconButton.displayName = 'IconButton';\n"]}

package/dist/chunk-GTTXRDXV.js

@@ -0,0 +1,181 @@
+import { useRovingFocus } from './chunk-I5OZ63W7.js';
+import { useDismiss } from './chunk-NAYFLTK6.js';
+import { useFloatingPosition } from './chunk-U6QRAD73.js';
+import { renderAsChild } from './chunk-ZVDN3GRI.js';
+import { Icon } from './chunk-ASNTNTJW.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { createContext, useState, useCallback, useId, useRef, useEffect, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/menu/Menu.module.css
+var Menu_default = {
+  content: "Menu_content",
+  item: "Menu_item",
+  label: "Menu_label",
+  separator: "Menu_separator"
+};
+var MenuContext = createContext(null);
+function useMenu(part) {
+  const context = useContext(MenuContext);
+  if (!context) throw new Error(`${part} must be rendered inside <Menu>`);
+  return context;
+}
+function Menu({ open, defaultOpen = false, onOpenChange, placement = "bottom-start", children }) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const [focusTarget, setFocusTarget] = useState(null);
+  const controlled = open !== void 0;
+  const isOpen = controlled ? open : uncontrolled;
+  const setOpen = useCallback(
+    (next, focus = null) => {
+      setFocusTarget(next ? focus : null);
+      if (!controlled) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange]
+  );
+  const id = useId();
+  const floating = useFloatingPosition({ open: isOpen, placement });
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { open: isOpen, setOpen, focusTarget, triggerId: `${id}-trigger`, contentId: `${id}-menu`, floating }, children });
+}
+function mergeRefs(a, b) {
+  return (node) => {
+    b(node);
+    if (typeof a === "function") a(node);
+    else if (a) a.current = node;
+  };
+}
+function MenuTrigger({ asChild = false, onClick, onKeyDown, ref, children, ...rest }) {
+  const menu = useMenu("Menu.Trigger");
+  const props = {
+    ...rest,
+    id: menu.triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": menu.open,
+    "aria-controls": menu.open ? menu.contentId : void 0,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) menu.setOpen(!menu.open, "first");
+    },
+    onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        menu.setOpen(true, event.key === "ArrowDown" ? "first" : "last");
+      }
+    }
+  };
+  const setRef = mergeRefs(ref, menu.floating.refs.setReference);
+  if (asChild) return renderAsChild("Menu.Trigger", children, { ...props, ref: setRef });
+  return /* @__PURE__ */ jsx("button", { type: "button", ...props, ref: setRef, children });
+}
+function MenuContent({ className, onKeyDown, ref, children, ...rest }) {
+  const menu = useMenu("Menu.Content");
+  const { refs, positionStyle, placement } = menu.floating;
+  const contentRef = useRef(null);
+  const rove = useRovingFocus({ orientation: "vertical", selector: '[role="menuitem"]' });
+  useDismiss({
+    open: menu.open,
+    onDismiss: () => menu.setOpen(false),
+    inside: () => [refs.reference.current, refs.floating.current]
+  });
+  useEffect(() => {
+    if (!menu.open) return;
+    const content = contentRef.current;
+    if (!content) return;
+    const items = Array.from(content.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+    const target = menu.focusTarget === "last" ? items.at(-1) : items[0];
+    (target ?? content).focus();
+    return () => {
+      const reference = refs.reference.current;
+      if (content.contains(document.activeElement) || document.activeElement === document.body) reference?.focus();
+    };
+  }, [menu.open, menu.focusTarget, refs.reference]);
+  const typeahead = (event) => {
+    if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return false;
+    const items = Array.from(event.currentTarget.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+    const current = items.indexOf(document.activeElement);
+    const ordered = [...items.slice(current + 1), ...items.slice(0, current + 1)];
+    const match = ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(event.key.toLowerCase()));
+    if (!match) return false;
+    event.preventDefault();
+    match.focus();
+    return true;
+  };
+  if (!menu.open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref: mergeRefs(ref, (node) => {
+          contentRef.current = node;
+          refs.setFloating(node);
+        }),
+        id: menu.contentId,
+        role: "menu",
+        "aria-labelledby": menu.triggerId,
+        tabIndex: -1,
+        className: classes(Menu_default.content, className),
+        "data-placement": placement,
+        style: positionStyle,
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          if (event.key === "Tab") {
+            menu.setOpen(false);
+            return;
+          }
+          if (typeahead(event)) return;
+          rove(event);
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
+function MenuItem({ onSelect, tone = "default", icon, disabled, className, onClick, ref, children, ...rest }) {
+  const menu = useMenu("Menu.Item");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ref,
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled || void 0,
+      className: classes(Menu_default.item, className),
+      "data-tone": tone,
+      "data-disabled": disabled ? "" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) return;
+        onSelect?.();
+        menu.setOpen(false);
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { size: "inherit", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: Menu_default.label, children })
+      ]
+    }
+  );
+}
+function MenuSeparator({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "separator", className: classes(Menu_default.separator, className) });
+}
+Menu.displayName = "Menu";
+MenuTrigger.displayName = "Menu.Trigger";
+MenuContent.displayName = "Menu.Content";
+MenuItem.displayName = "Menu.Item";
+MenuSeparator.displayName = "Menu.Separator";
+Menu.Trigger = MenuTrigger;
+Menu.Content = MenuContent;
+Menu.Item = MenuItem;
+Menu.Separator = MenuSeparator;
+
+export { Menu };
+//# sourceMappingURL=chunk-GTTXRDXV.js.map
+//# sourceMappingURL=chunk-GTTXRDXV.js.map

package/dist/chunk-GTTXRDXV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu/Menu.module.css","../src/menu/Menu.tsx"],"names":["content","item","label","separator"],"mappings":"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","file":"chunk-GTTXRDXV.js","sourcesContent":["/* Every value is a token (--menu-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .content {\n    --_gap: var(--menu-gap);\n\n    position: fixed;\n    z-index: var(--menu-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    display: flex;\n    flex-direction: column;\n    min-inline-size: var(--menu-min-width);\n    max-inline-size: calc(100vw - 2 * var(--space-4));\n    padding: var(--menu-padding);\n    border: var(--size-hairline) solid var(--menu-border);\n    border-radius: var(--menu-radius);\n    background-color: var(--menu-bg);\n    color: var(--menu-fg);\n    font-family: var(--font-family-body);\n    box-shadow: var(--menu-shadow);\n    animation: fade var(--menu-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--menu-focus-ring-width) solid var(--menu-focus-ring);\n      outline-offset: var(--menu-focus-ring-offset);\n    }\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    inline-size: 100%;\n    padding-block: var(--menu-item-padding-block);\n    padding-inline: var(--menu-item-padding-inline);\n    border: none;\n    border-radius: var(--menu-item-radius);\n    background-color: transparent;\n    color: var(--menu-item-fg);\n    font-size: var(--menu-item-font-size);\n    text-align: start;\n    cursor: pointer;\n\n    &[data-tone=\"danger\"] {\n      color: var(--menu-item-fg-danger);\n    }\n\n    &[data-disabled] {\n      color: var(--menu-item-fg-muted);\n      cursor: not-allowed;\n    }\n\n    &:focus-visible {\n      outline: none;\n      background-color: var(--menu-item-bg-active);\n    }\n\n    &:hover:not([data-disabled]) {\n      background-color: var(--menu-item-bg-active);\n    }\n  }\n\n  .label {\n    flex: 1;\n  }\n\n  .separator {\n    block-size: var(--size-hairline);\n    margin-block: var(--menu-padding);\n    background-color: var(--menu-separator);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .content {\n      animation: none;\n    }\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { Icon } from '../icon';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport { useFloatingPosition, type FloatingPlacement } from '../internal/floating';\nimport { useDismiss } from '../internal/useDismiss';\nimport { useRovingFocus } from '../internal/useRovingFocus';\nimport styles from './Menu.module.css';\n\nexport type MenuPlacement = FloatingPlacement;\ntype FocusTarget = 'first' | 'last' | null;\n\ninterface MenuContextValue {\n  open: boolean;\n  setOpen: (open: boolean, focus?: FocusTarget) => void;\n  focusTarget: FocusTarget;\n  triggerId: string;\n  contentId: string;\n  floating: ReturnType<typeof useFloatingPosition>;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nfunction useMenu(part: string): MenuContextValue {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error(`${part} must be rendered inside <Menu>`);\n  return context;\n}\n\nexport interface MenuProps {\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** @default 'bottom-start' */\n  placement?: MenuPlacement;\n  children: ReactNode;\n}\n\n/**\n * A list of actions opened from a button, following the WAI-ARIA menu\n * button pattern: Down/Up arrow on the trigger opens and focuses the first\n * or last item, arrows move with wraparound, Home and End jump, typing\n * jumps to the next item starting with that letter, Enter, Space or click\n * selects and closes, Escape and Tab close and return focus. Compose with\n * `Menu.Trigger`, `Menu.Content`, `Menu.Item` and `Menu.Separator`.\n *\n * @status stable\n * @category Overlays\n * @accessibility The WAI-ARIA menu button pattern: the trigger has `aria-haspopup=\"menu\"` and `aria-expanded`; the popup is `role=\"menu\"` named by the trigger with `menuitem` children. Down/Up opens to the first/last item, arrows wrap, Home/End jump, typing jumps, Enter/Space/click select and close, Escape and Tab close and return focus.\n * @do Use `tone=\"danger\"` for destructive items and put them after a separator.\n * @dont Put form controls or links that navigate inside a menu; those want Popover or a navigation list.\n * Use it for navigation between pages.\n */\nexport function Menu({ open, defaultOpen = false, onOpenChange, placement = 'bottom-start', children }: MenuProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const [focusTarget, setFocusTarget] = useState<FocusTarget>(null);\n  const controlled = open !== undefined;\n  const isOpen = controlled ? open : uncontrolled;\n  const setOpen = useCallback(\n    (next: boolean, focus: FocusTarget = null) => {\n      setFocusTarget(next ? focus : null);\n      if (!controlled) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [controlled, onOpenChange],\n  );\n  const id = useId();\n  const floating = useFloatingPosition({ open: isOpen, placement });\n\n  return (\n    <MenuContext.Provider value={{ open: isOpen, setOpen, focusTarget, triggerId: `${id}-trigger`, contentId: `${id}-menu`, floating }}>\n      {children}\n    </MenuContext.Provider>\n  );\n}\n\nfunction mergeRefs<T>(a: Ref<T> | undefined, b: (node: T | null) => void) {\n  return (node: T | null) => {\n    b(node);\n    if (typeof a === 'function') a(node);\n    else if (a) a.current = node;\n  };\n}\n\ninterface MenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction MenuTrigger({ asChild = false, onClick, onKeyDown, ref, children, ...rest }: MenuTriggerProps) {\n  const menu = useMenu('Menu.Trigger');\n  const props = {\n    ...rest,\n    id: menu.triggerId,\n    'aria-haspopup': 'menu' as const,\n    'aria-expanded': menu.open,\n    'aria-controls': menu.open ? menu.contentId : undefined,\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (!event.defaultPrevented) menu.setOpen(!menu.open, 'first');\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n        menu.setOpen(true, event.key === 'ArrowDown' ? 'first' : 'last');\n      }\n    },\n  };\n  const setRef = mergeRefs(ref, menu.floating.refs.setReference);\n  // eslint-disable-next-line react-hooks/refs -- forwarded to the reference element, not read\n  if (asChild) return renderAsChild('Menu.Trigger', children, { ...props, ref: setRef });\n  return (\n    <button type=\"button\" {...props} ref={setRef}>\n      {children}\n    </button>\n  );\n}\n\ninterface MenuContentProps extends HTMLAttributes<HTMLDivElement> {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\nfunction MenuContent({ className, onKeyDown, ref, children, ...rest }: MenuContentProps) {\n  const menu = useMenu('Menu.Content');\n  const { refs, positionStyle, placement } = menu.floating;\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const rove = useRovingFocus({ orientation: 'vertical', selector: '[role=\"menuitem\"]' });\n\n  useDismiss({\n    open: menu.open,\n    onDismiss: () => menu.setOpen(false),\n    inside: () => [refs.reference.current as Element | null, refs.floating.current],\n  });\n\n  useEffect(() => {\n    if (!menu.open) return;\n    const content = contentRef.current;\n    if (!content) return;\n    const items = Array.from(content.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])'));\n    const target = menu.focusTarget === 'last' ? items.at(-1) : items[0];\n    (target ?? content).focus();\n    return () => {\n      const reference = refs.reference.current as HTMLElement | null;\n      if (content.contains(document.activeElement) || document.activeElement === document.body) reference?.focus();\n    };\n  }, [menu.open, menu.focusTarget, refs.reference]);\n\n  const typeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) return false;\n    const items = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])'));\n    const current = items.indexOf(document.activeElement as HTMLElement);\n    const ordered = [...items.slice(current + 1), ...items.slice(0, current + 1)];\n    const match = ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(event.key.toLowerCase()));\n    if (!match) return false;\n    event.preventDefault();\n    match.focus();\n    return true;\n  };\n\n  if (!menu.open) return null;\n  return createPortal(\n    <div\n      {...rest}\n      ref={mergeRefs(ref, (node) => {\n        contentRef.current = node;\n        refs.setFloating(node);\n      })}\n      id={menu.contentId}\n      role=\"menu\"\n      aria-labelledby={menu.triggerId}\n      tabIndex={-1}\n      className={classes(styles.content, className)}\n      data-placement={placement}\n      // eslint-disable-next-line react/forbid-dom-props -- per-instance position (--_x/--_y), see internal/floating.ts\n      style={positionStyle}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        if (event.key === 'Tab') {\n          menu.setOpen(false);\n          return;\n        }\n        if (typeahead(event)) return;\n        rove(event);\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n}\n\nexport type MenuItemTone = 'default' | 'danger';\n\ninterface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {\n  /** Called when the item is chosen; the menu closes afterwards. */\n  onSelect?: () => void;\n  /** @default 'default' */\n  tone?: MenuItemTone;\n  /** Leading glyph, decorative. */\n  icon?: ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n}\n\nfunction MenuItem({ onSelect, tone = 'default', icon, disabled, className, onClick, ref, children, ...rest }: MenuItemProps) {\n  const menu = useMenu('Menu.Item');\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type=\"button\"\n      role=\"menuitem\"\n      tabIndex={-1}\n      aria-disabled={disabled || undefined}\n      className={classes(styles.item, className)}\n      data-tone={tone}\n      data-disabled={disabled ? '' : undefined}\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented || disabled) return;\n        onSelect?.();\n        menu.setOpen(false);\n      }}\n    >\n      {icon && <Icon size=\"inherit\">{icon}</Icon>}\n      <span className={styles.label}>{children}</span>\n    </button>\n  );\n}\n\nfunction MenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {\n  return <div {...rest} role=\"separator\" className={classes(styles.separator, className)} />;\n}\n\nMenu.displayName = 'Menu';\nMenuTrigger.displayName = 'Menu.Trigger';\nMenuContent.displayName = 'Menu.Content';\nMenuItem.displayName = 'Menu.Item';\nMenuSeparator.displayName = 'Menu.Separator';\n\nMenu.Trigger = MenuTrigger;\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.Separator = MenuSeparator;\n"]}

package/dist/chunk-I4KC4V6A.js

@@ -0,0 +1,31 @@
+import { VisuallyHidden } from './chunk-Z4PN6B2C.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/spinner/Spinner.module.css
+var Spinner_default = {
+  spinner: "Spinner_spinner",
+  ring: "Spinner_ring"};
+function Spinner({ size = "md", tone = "default", label = "Loading", decorative = false, className, ref, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: classes(Spinner_default.spinner, className),
+      "data-size": size,
+      "data-tone": tone,
+      role: decorative ? void 0 : "status",
+      "aria-hidden": decorative || void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: Spinner_default.ring, "aria-hidden": "true" }),
+        !decorative && /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+      ]
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+
+export { Spinner };
+//# sourceMappingURL=chunk-I4KC4V6A.js.map
+//# sourceMappingURL=chunk-I4KC4V6A.js.map

package/dist/chunk-I4KC4V6A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/Spinner.module.css","../src/spinner/Spinner.tsx"],"names":["spinner","ring"],"mappings":";;;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAGG,OAAA,EAAAA,iBAAAA;AAAA,EAqBA,IAAA,EAAAC,cAMY,CAAA;ACER,SAAS,OAAA,CAAQ,EAAE,IAAA,GAAO,IAAA,EAAM,OAAO,SAAA,EAAW,KAAA,GAAQ,SAAA,EAAW,UAAA,GAAa,KAAA,EAAO,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,EAAiB;AACvI,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,eAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,aAAa,MAAA,GAAY,QAAA;AAAA,MAC/B,eAAa,UAAA,IAAc,MAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,eAAA,CAAO,IAAA,EAAM,eAAY,MAAA,EAAO,CAAA;AAAA,QAChD,CAAC,UAAA,oBAAc,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACzC;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-I4KC4V6A.js","sourcesContent":["/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","import type { HTMLAttributes, Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport { VisuallyHidden } from '../visually-hidden';\nimport styles from './Spinner.module.css';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg' | 'inherit';\nexport type SpinnerTone = 'default' | 'inherit';\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** `inherit` follows the surrounding font size, for spinners inside controls. @default 'md' */\n  size?: SpinnerSize;\n  /** `inherit` draws with the surrounding text colour, for coloured controls. @default 'default' */\n  tone?: SpinnerTone;\n  /** Announced to assistive technology (`role=\"status\"`). @default 'Loading' */\n  label?: string;\n  /** Hide from assistive technology: the parent already announces busy. @default false */\n  decorative?: boolean;\n  ref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * An indeterminate progress indicator. Announces its label as a status\n * unless `decorative`, in which case the parent is responsible (Button sets\n * `aria-busy`). Under reduced motion the ring stops but keeps its coloured\n * quarter, so it still reads as \"in progress\".\n *\n * @status stable\n * @category Feedback\n * @accessibility `role=\"status\"` with a visually hidden label (\"Loading\" by default) unless `decorative`, in which case the parent announces busy. Under reduced motion the ring stops but keeps its coloured quarter.\n * @do Use `decorative` inside a control that already sets `aria-busy`.\n * @dont Show several spinners for one operation.\n */\nexport function Spinner({ size = 'md', tone = 'default', label = 'Loading', decorative = false, className, ref, ...rest }: SpinnerProps) {\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={classes(styles.spinner, className)}\n      data-size={size}\n      data-tone={tone}\n      role={decorative ? undefined : 'status'}\n      aria-hidden={decorative || undefined}\n    >\n      <span className={styles.ring} aria-hidden=\"true\" />\n      {!decorative && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n"]}