@eifi1/ui-kit 0.31.0 → 0.32.0

package/dist/components/data-table-filter-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { resolveDataTableLabels, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field in ui.tsx.\n  const inputBase =\n    \"block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n  const buttonBase =\n    \"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-[var(--text-muted)]\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: [] })}\n              className={buttonBase}\n            >\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-[var(--border)]\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-[var(--bg-hover)]\">\n                  <input\n                    type=\"checkbox\"\n                    checked={checked}\n                    onChange={() => toggle(o.value)}\n                    className=\"size-3.5\"\n                  />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && (\n            <li className=\"px-2 py-2 text-sm text-[var(--text-muted)]\">—</li>\n          )}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active\n                      ? \"bg-[var(--brand-bg)] text-[var(--brand-muted)]\"\n                      : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-[var(--text-muted)]\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-[var(--text-muted)]\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-[var(--text-muted)]\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.min}\n            onChange={(e) => onChange({ type: \"number\", min: e.target.value, max: v.max, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-[var(--text-muted)]\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.max}\n            onChange={(e) => onChange({ type: \"number\", min: v.min, max: e.target.value, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}
+{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { resolveDataTableLabels, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field in ui.tsx.\n  const inputBase =\n    \"block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase =\n    \"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-[var(--text-muted)]\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: [] })}\n              className={buttonBase}\n            >\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-[var(--border)]\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-[var(--bg-hover)]\">\n                  <input\n                    type=\"checkbox\"\n                    checked={checked}\n                    onChange={() => toggle(o.value)}\n                    className=\"size-3.5\"\n                  />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && (\n            <li className=\"px-2 py-2 text-sm text-[var(--text-muted)]\">—</li>\n          )}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active\n                      ? \"bg-[var(--brand-bg)] text-[var(--brand-muted)]\"\n                      : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-[var(--text-muted)]\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-[var(--text-muted)]\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-[var(--text-muted)]\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.min}\n            onChange={(e) => onChange({ type: \"number\", min: e.target.value, max: v.max, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-[var(--text-muted)]\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.max}\n            onChange={(e) => onChange({ type: \"number\", min: v.min, max: e.target.value, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}

package/dist/components/data-table-filters.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFilter, j as FilterValue, n as dateFilter, o as decodeFilterValue, p as decodeFilterValueOfType, q as defaultFilterState, r as encodeFilterValue, s as filterHref, t as isFilterActive, v as numberFilter, y as resolveFilter, z as rowMatches, A as selectFilter, B as textFilter } from '../data-table-labels-DUELeXpa.js';
+export { C as ColumnFilter, j as FilterValue, n as dateFilter, o as decodeFilterValue, p as decodeFilterValueOfType, q as defaultFilterState, r as encodeFilterValue, s as filterHref, t as isFilterActive, v as numberFilter, y as resolveFilter, z as rowMatches, A as selectFilter, B as textFilter } from '../data-table-labels-kpAAVi6g.js';
 import 'react';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-labels.d.ts

@@ -1,4 +1,4 @@
-export { D as DEFAULT_DATA_TABLE_LABELS, f as DataTableLabels, u as missingDataTableLabels, x as resolveDataTableLabels } from '../data-table-labels-DUELeXpa.js';
+export { D as DEFAULT_DATA_TABLE_LABELS, f as DataTableLabels, u as missingDataTableLabels, x as resolveDataTableLabels } from '../data-table-labels-kpAAVi6g.js';
 import 'react';
 import './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table-pagination.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { f as DataTableLabels } from '../data-table-labels-DUELeXpa.js';
+import { f as DataTableLabels } from '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 

package/dist/components/data-table.d.ts

@@ -1,4 +1,4 @@
 import 'react';
-export { a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, G as DataTableCellProps, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, H as DataTableHeadProps, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-labels-DUELeXpa.js';
+export { a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, G as DataTableCellProps, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, H as DataTableHeadProps, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-labels-kpAAVi6g.js';
 export { SortState } from './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment as Fragment2, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowDown,
@@ -16,7 +16,9 @@ import {
   Trash2,
   X
 } from "lucide-react";
-import { Card, IconButton, Select, Spinner } from "./ui.js";
+import { Card, FOCUS_RING, IconButton, Select, Spinner } from "./ui.js";
+import { RowActions } from "./row-actions.js";
+import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
 import {
   defaultFilterState,
@@ -33,7 +35,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
 import { Popover } from "./popover.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
@@ -73,6 +75,16 @@ async function runRowAction(action, row) {
   if (action.confirm && !await action.confirm(row)) return;
   action.onAction(row);
 }
+function toRowAction(a, row) {
+  return {
+    key: a.key,
+    label: a.label,
+    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
+    tone: a.tone,
+    disabledReason: a.action.disabledReason?.(row),
+    onSelect: () => void runRowAction(a.action, row)
+  };
+}
 function physicalSwipe(actions, dir) {
   const rtl = dir === "rtl";
   return {
@@ -102,6 +114,27 @@ function columnLabel(col, labels) {
   if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
+const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
+function StackedFields({ columns, row, compact }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-card-fields": "stacked",
+      className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
+      children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)]", children: col.header }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            ...dataAttrsOf(col.cellProps?.(row)),
+            className: "mt-0.5 min-w-0 break-words text-[var(--text-secondary)]",
+            children: col.cell(row)
+          }
+        )
+      ] }, col.key))
+    }
+  );
+}
 const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortBy: DEFAULT_DATA_TABLE_LABELS.sortBy,
   sortDefault: DEFAULT_DATA_TABLE_LABELS.sortDefault,
@@ -129,7 +162,9 @@ function MobileSort({
     {
       "data-table-mobile-sort": "",
       className: cn(
-        "flex items-center gap-2 border-b border-[var(--border)]",
+        // At Large the direction button shows its words (IconButton's label, §4); the
+        // row wraps so the select keeps a usable width on a 240 px card.
+        "flex flex-wrap items-center gap-2 border-b border-[var(--border)]",
         compact ? "px-3 py-1.5" : "px-4 py-2"
       ),
       children: [
@@ -139,7 +174,7 @@ function MobileSort({
           {
             id: selectId,
             size: compact ? "sm" : "md",
-            className: "min-w-0 flex-1",
+            className: "min-w-0 flex-1 large:basis-40",
             value: primary?.key ?? "",
             onChange: (e) => onPick(e.target.value || null),
             children: [
@@ -245,6 +280,8 @@ function DataTable({
   locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
+  mobileDetailsInRow = false,
+  rowName,
   mobileDialogBackCloses = true,
   mobileGroupBy,
   mobileGroupLabel,
@@ -295,19 +332,21 @@ function DataTable({
       {
         key: ROW_ACTIONS_KEY,
         header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.actions }),
-        cell: (row) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-0.5", children: rowActionsFor(row).map((a) => /* @__PURE__ */ jsx(
-          IconButton,
+        // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
+        // menu at Large once there are two — every label at once does not fit a
+        // row. Each control stops its own click: the row's handler already skips
+        // its controls, and this is for the caller who wraps the table in a
+        // clickable element of their own.
+        cell: (row) => /* @__PURE__ */ jsx(
+          RowActions,
           {
+            actions: rowActionsFor(row).map((a) => toRowAction(a, row)),
+            name: rowName?.(row),
             size: density === "compact" ? "2xs" : "xs",
-            label: a.label,
-            tone: a.tone === "danger" ? "danger" : void 0,
-            disabledReason: a.action.disabledReason?.(row),
-            stopPropagation: true,
-            onClick: () => void runRowAction(a.action, row),
-            children: a.icon
-          },
-          a.key
-        )) }),
+            labels: { actions: labels.actions },
+            className: "justify-end"
+          }
+        ),
         className: "w-px whitespace-nowrap text-end",
         headClassName: "w-px",
         // On a phone the same actions are the card's swipes.
@@ -315,7 +354,7 @@ function DataTable({
         noRowLink: true
       }
     ] : columnsProp,
-    [columnsProp, rowActions, rowActionsFor, labels.actions, density]
+    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density]
   );
   const swipesFromActions = (row) => {
     const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
@@ -598,12 +637,23 @@ function DataTable({
   const footerValue = (col) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
   const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
-  const isMdUp = useMediaQuery("(min-width: 768px)", true);
+  const isMdUp = useBreakpoint("md", true);
   const desktopScroller = useRef(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
   const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
+  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
+  const large = useLargeText();
+  const opensRow = !!expandedRow || mobileDetailColumns.length > 0;
+  const openedRowContent = (row) => {
+    const detail = expandedRow?.(row) ?? null;
+    if (mobileDetailColumns.length === 0) return detail;
+    return /* @__PURE__ */ jsxs("div", { "data-row-details": "", className: cn("flex flex-col", compact ? "gap-2" : "gap-3"), children: [
+      /* @__PURE__ */ jsx(StackedFields, { columns: mobileDetailColumns, row, compact }),
+      detail
+    ] });
+  };
   const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
   const [mobileDir, setMobileDir] = useState("ltr");
   const mobileRootRef = (el) => {
@@ -640,24 +690,25 @@ function DataTable({
     return true;
   };
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
-  const mobileDialogContent = mobileDialogRow ? expandedRow?.(mobileDialogRow) : null;
+  const mobileDialogContent = mobileDialogRow ? openedRowContent(mobileDialogRow) : null;
   const dialogOpen = !!(mobileDialogRow && mobileDialogContent);
   const closeDialog = () => {
     if (mobileDialogRow) onRowClick?.(mobileDialogRow);
   };
   const renderMobileRow = (row) => {
     const expanded = isExpanded?.(row) ?? false;
-    const expansion = expanded ? expandedRow?.(row) : null;
+    const expansion = expanded ? openedRowContent(row) : null;
     const tint = rowClassName?.(row);
     const interactive = !!onRowClick;
-    const opensDetail = interactive && !!expandedRow;
+    const opensDetail = interactive && opensRow;
     const swipeActions = swipeActionsFor?.(row);
     const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     const swipeEnabled = !!swipe && !expanded;
     const href = mobileCardLinkable ? rowHref?.(row) : void 0;
     const cardClass = cn(
       "w-full text-start flex items-center",
-      compact ? "px-3 py-2 gap-2 text-sm" : "px-4 py-3 gap-3",
+      // §4: more room per row at Large — a taller row is a bigger tap target too.
+      compact ? "px-3 py-2 gap-2 text-sm large:py-3" : "px-4 py-3 gap-3 large:py-4",
       // Live #320's other half: the card acknowledges the touch before the sheet
       // arrives. On a cold route the data can take a beat, and an unacknowledged tap
       // reads as "did that register?" — which is most of what "abrupt" means here.
@@ -672,32 +723,49 @@ function DataTable({
       // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
       // keeps the fill and the squeeze above; an outline on every tap of a long list would
       // be louder than the acknowledgement it replaces.
-      interactive && "[-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]"
+      interactive && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING)
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2"), children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "font-medium", children: mobilePrimaryCol.cell(row) }),
-        mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
-          "dl",
-          {
-            className: cn(
-              "grid grid-cols-[auto_1fr] gap-x-3",
-              compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
-            ),
-            children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
-              /* @__PURE__ */ jsx(
-                "dd",
-                {
-                  ...dataAttrsOf(col.cellProps?.(row)),
-                  className: "min-w-0 text-[var(--text-secondary)] self-center",
-                  children: col.cell(row)
-                }
-              )
-            ] }, col.key))
-          }
-        )
-      ] }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-1 flex-col",
+            compact ? "gap-1 large:gap-2" : "gap-2 large:gap-3",
+            // §4 "nothing truncates": at Large a cell's own `truncate` wraps instead —
+            // the reader who chose bigger type is the one an ellipsis fails. A caller's
+            // `mobileCard` is its own layout and keeps what it chose.
+            !mobileCard && CARD_NO_TRUNCATE
+          ),
+          children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
+            mobileSecondaryColumns.length > 0 && large ? (
+              // §4: each label ABOVE its value at Large. Side by side, a label column
+              // sized to the widest label leaves a value a sliver of a 240 px card.
+              /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
+            ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
+              "dl",
+              {
+                className: cn(
+                  "grid grid-cols-[auto_1fr] gap-x-3",
+                  compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
+                ),
+                children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
+                  /* @__PURE__ */ jsx(
+                    "dd",
+                    {
+                      ...dataAttrsOf(col.cellProps?.(row)),
+                      className: "min-w-0 text-[var(--text-secondary)] self-center",
+                      children: col.cell(row)
+                    }
+                  )
+                ] }, col.key))
+              }
+            )
+          ] })
+        }
+      ),
       opensDetail && // `aria-hidden`: the row already announces itself as a button with
       // `aria-expanded`, so the icon would only add a second, wordless stop.
       (mobileExpandAsDialog ? (
@@ -729,7 +797,7 @@ function DataTable({
         {
           href,
           onActivate: () => onRowClick(row),
-          "aria-expanded": expandedRow ? expanded : void 0,
+          "aria-expanded": opensRow ? expanded : void 0,
           className: cardClass,
           onKeyDown: (e) => {
             if (e.key !== " ") return;
@@ -759,7 +827,7 @@ function DataTable({
               onRowClick(row);
             }
           } : void 0,
-          "aria-expanded": expandedRow ? expanded : void 0,
+          "aria-expanded": opensRow ? expanded : void 0,
           className: cardClass,
           children: cardInner
         }
@@ -1049,14 +1117,14 @@ function DataTable({
                                       children: [
                                         /* @__PURE__ */ jsx("span", { children: col.header }),
                                         sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
-                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
+                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-micro font-semibold leading-none text-brand", children: sortIdx + 1 })
                                       ]
                                     }
                                   ) }),
                                   filter && /* @__PURE__ */ jsx(
                                     Popover,
                                     {
-                                      width: filter.type === "date" ? 420 : void 0,
+                                      width: filter.type === "date" ? "26.25rem" : void 0,
                                       labels: { panel: labels.filter },
                                       trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
                                         "button",
@@ -1152,7 +1220,10 @@ function DataTable({
                                     className: cn(
                                       "border-t border-[var(--border)]",
                                       rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
-                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+                                      // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an
+                                      // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`
+                                      // is not painted by every engine, an outline is.
+                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
                                       rowClassName?.(row)
                                     ),
                                     onClick: rowInteractive ? (e) => {
@@ -1471,7 +1542,7 @@ function MobileFilters({
         children: [
           /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { children: labels.filters }),
-          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-[11px] font-semibold text-[var(--info)]", children: activeCount })
+          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-caption font-semibold text-[var(--info)]", children: activeCount })
         ]
       }
     ),