@gnome-ui/react 1.45.1 → 1.46.0

package/dist/components/ColorPicker/ColorPicker.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_picker_50hw4_3`,t=`_swatch_50hw4_12`,n=`_swatchSelected_50hw4_69`,r=`_checkmark_50hw4_95`,i=`_customButton_50hw4_105`,a=`_plusIcon_50hw4_117`,o=`_nativeInput_50hw4_124`,s={picker:e,swatch:t,"swatch-sm":`_swatch-sm_50hw4_37`,"swatch-md":`_swatch-md_50hw4_41`,"swatch-lg":`_swatch-lg_50hw4_45`,swatchSelected:n,checkmark:r,customButton:i,plusIcon:a,nativeInput:o};exports.default=s;
+var e={picker:`_picker_50hw4_3`,swatch:`_swatch_50hw4_12`,"swatch-sm":`_swatch-sm_50hw4_37`,"swatch-md":`_swatch-md_50hw4_41`,"swatch-lg":`_swatch-lg_50hw4_45`,swatchSelected:`_swatchSelected_50hw4_69`,checkmark:`_checkmark_50hw4_95`,customButton:`_customButton_50hw4_105`,plusIcon:`_plusIcon_50hw4_117`,nativeInput:`_nativeInput_50hw4_124`};exports.default=e;
 //# sourceMappingURL=ColorPicker.module.css.cjs.map

package/dist/components/ColorPicker/ColorPicker.module.css.js

@@ -1,17 +1,16 @@
-//#region src/components/ColorPicker/ColorPicker.module.css
-var e = "_picker_50hw4_3", t = "_swatch_50hw4_12", n = "_swatchSelected_50hw4_69", r = "_checkmark_50hw4_95", i = "_customButton_50hw4_105", a = "_plusIcon_50hw4_117", o = "_nativeInput_50hw4_124", s = {
-	picker: e,
-	swatch: t,
+var e = {
+	picker: "_picker_50hw4_3",
+	swatch: "_swatch_50hw4_12",
 	"swatch-sm": "_swatch-sm_50hw4_37",
 	"swatch-md": "_swatch-md_50hw4_41",
 	"swatch-lg": "_swatch-lg_50hw4_45",
-	swatchSelected: n,
-	checkmark: r,
-	customButton: i,
-	plusIcon: a,
-	nativeInput: o
+	swatchSelected: "_swatchSelected_50hw4_69",
+	checkmark: "_checkmark_50hw4_95",
+	customButton: "_customButton_50hw4_105",
+	plusIcon: "_plusIcon_50hw4_117",
+	nativeInput: "_nativeInput_50hw4_124"
 };
 //#endregion
-export { s as default };
+export { e as default };
 
 //# sourceMappingURL=ColorPicker.module.css.js.map

package/dist/components/ColorPicker.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ColorPicker/ColorPicker.cjs`);exports.ColorPicker=e.ColorPicker,exports.ColorSwatch=e.ColorSwatch,exports.GNOME_PALETTE=e.GNOME_PALETTE;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ColorPicker/ColorPicker.cjs");exports.ColorPicker=e.ColorPicker,exports.ColorSwatch=e.ColorSwatch,exports.GNOME_PALETTE=e.GNOME_PALETTE;

package/dist/components/ColumnView/ColumnView.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ColumnView.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r={start:e.default.alignStart,center:e.default.alignCenter,end:e.default.alignEnd};function i({direction:t}){return(0,n.jsx)(`svg`,{width:`10`,height:`10`,viewBox:`0 0 10 10`,"aria-hidden":`true`,className:t?e.default.sortActive:e.default.sortNeutral,children:t===`asc`?(0,n.jsx)(`path`,{d:`M5 2 L9 8 L1 8 Z`,fill:`currentColor`}):t===`desc`?(0,n.jsx)(`path`,{d:`M5 8 L1 2 L9 2 Z`,fill:`currentColor`}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`path`,{d:`M5 1 L8 5 L2 5 Z`,fill:`currentColor`,opacity:`0.4`}),(0,n.jsx)(`path`,{d:`M5 9 L2 5 L8 5 Z`,fill:`currentColor`,opacity:`0.4`})]})})}function a({columns:a,rows:o,rowKey:s,selectionMode:c=`none`,selectedRows:l=[],onSelectionChange:u,sortState:d,onSort:f,height:p,emptyState:m,className:h,ariaLabel:g}){let _=(0,t.useRef)(null),[v,y]=(0,t.useState)(0),b=new Set(l),x=c===`multiple`,S=a.length+(x?1:0);function C(e){f&&f(e,d?.columnId===e&&d.direction===`asc`?`desc`:`asc`)}function w(e){if(!(c===`none`||!u))if(c===`single`)u(b.has(e)?[]:[e]);else{let t=new Set(b);t.has(e)?t.delete(e):t.add(e),u([...t])}}function T(e,t,n){let r=_.current?.querySelectorAll(`tr`)??[];if(e.key===`ArrowDown`){e.preventDefault();let n=Math.min(o.length-1,t+1);y(n),r[n]?.focus()}else if(e.key===`ArrowUp`){e.preventDefault();let n=Math.max(0,t-1);y(n),r[n]?.focus()}else (e.key===` `||e.key===`Enter`)&&(e.preventDefault(),w(n))}function E(e){u&&u(e?o.map(s):[])}let D=p?{height:typeof p==`number`?`${p}px`:p}:{};return(0,n.jsx)(`div`,{className:[e.default.outer,h].filter(Boolean).join(` `),children:(0,n.jsx)(`div`,{className:e.default.scroll,style:D,children:(0,n.jsxs)(`table`,{className:e.default.table,"aria-label":g,"aria-multiselectable":c===`multiple`||void 0,children:[(0,n.jsx)(`thead`,{className:e.default.thead,children:(0,n.jsxs)(`tr`,{children:[x&&(0,n.jsx)(`th`,{className:[e.default.th,e.default.checkboxCol].join(` `),children:(0,n.jsx)(`input`,{type:`checkbox`,className:e.default.checkbox,checked:o.length>0&&l.length===o.length,ref:e=>{e&&(e.indeterminate=l.length>0&&l.length<o.length)},onChange:e=>E(e.target.checked),"aria-label":`Select all rows`})}),a.map(t=>{let a=d?.columnId===t.id;return(0,n.jsx)(`th`,{className:[e.default.th,t.align?r[t.align]:null].filter(Boolean).join(` `),style:t.width?{width:t.width}:void 0,"aria-sort":a?d?.direction===`asc`?`ascending`:`descending`:t.sortable?`none`:void 0,children:t.sortable&&f?(0,n.jsxs)(`button`,{type:`button`,className:[e.default.sortBtn,a?e.default.sortBtnActive:null].filter(Boolean).join(` `),onClick:()=>C(t.id),children:[(0,n.jsx)(`span`,{children:t.header}),(0,n.jsx)(i,{direction:a?d?.direction:null})]}):(0,n.jsx)(`span`,{className:e.default.headerLabel,children:t.header})},t.id)})]})}),(0,n.jsx)(`tbody`,{ref:_,className:e.default.tbody,children:o.length===0?(0,n.jsx)(`tr`,{children:(0,n.jsx)(`td`,{colSpan:S,className:e.default.emptyCell,children:m??(0,n.jsx)(`span`,{className:e.default.emptyLabel,children:`No items`})})}):o.map((t,i)=>{let o=s(t),l=b.has(o);return(0,n.jsxs)(`tr`,{className:[e.default.row,l?e.default.rowSelected:null,c===`none`?null:e.default.rowSelectable].filter(Boolean).join(` `),"aria-selected":c===`none`?void 0:l,tabIndex:v===i?0:-1,onClick:()=>w(o),onKeyDown:e=>T(e,i,o),onFocus:()=>y(i),children:[x&&(0,n.jsx)(`td`,{className:[e.default.td,e.default.checkboxCol].join(` `),children:(0,n.jsx)(`input`,{type:`checkbox`,className:e.default.checkbox,checked:l,onChange:()=>w(o),onClick:e=>e.stopPropagation(),tabIndex:-1,"aria-label":`Select row ${i+1}`})}),a.map(a=>(0,n.jsx)(`td`,{className:[e.default.td,a.align?r[a.align]:null].filter(Boolean).join(` `),children:a.cell(t,i)},a.id))]},o)})})]})})})}exports.ColumnView=a;
+const e=require("./ColumnView.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={start:e.default.alignStart,center:e.default.alignCenter,end:e.default.alignEnd},i=({direction:t})=>(0,n.jsx)(`svg`,{width:`10`,height:`10`,viewBox:`0 0 10 10`,"aria-hidden":`true`,className:t?e.default.sortActive:e.default.sortNeutral,children:t===`asc`?(0,n.jsx)(`path`,{d:`M5 2 L9 8 L1 8 Z`,fill:`currentColor`}):t===`desc`?(0,n.jsx)(`path`,{d:`M5 8 L1 2 L9 2 Z`,fill:`currentColor`}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`path`,{d:`M5 1 L8 5 L2 5 Z`,fill:`currentColor`,opacity:`0.4`}),(0,n.jsx)(`path`,{d:`M5 9 L2 5 L8 5 Z`,fill:`currentColor`,opacity:`0.4`})]})}),a=({columns:a,rows:o,rowKey:s,selectionMode:c=`none`,selectedRows:l=[],onSelectionChange:u,sortState:d,onSort:f,height:p,emptyState:m,className:h,ariaLabel:g})=>{let _=(0,t.useRef)(null),[v,y]=(0,t.useState)(0),b=new Set(l),x=c===`multiple`,S=a.length+ +!!x;function C(e){f&&f(e,d?.columnId===e&&d.direction===`asc`?`desc`:`asc`)}function w(e){if(!(c===`none`||!u))if(c===`single`)u(b.has(e)?[]:[e]);else{let t=new Set(b);t.has(e)?t.delete(e):t.add(e),u([...t])}}function T(e,t,n){let r=_.current?.querySelectorAll(`tr`)??[];if(e.key===`ArrowDown`){e.preventDefault();let n=Math.min(o.length-1,t+1);y(n),r[n]?.focus()}else if(e.key===`ArrowUp`){e.preventDefault();let n=Math.max(0,t-1);y(n),r[n]?.focus()}else (e.key===` `||e.key===`Enter`)&&(e.preventDefault(),w(n))}function E(e){u&&u(e?o.map(s):[])}let D=p?{height:typeof p==`number`?`${p}px`:p}:{};return(0,n.jsx)(`div`,{className:[e.default.outer,h].filter(Boolean).join(` `),children:(0,n.jsx)(`div`,{className:e.default.scroll,style:D,children:(0,n.jsxs)(`table`,{className:e.default.table,"aria-label":g,"aria-multiselectable":c===`multiple`||void 0,children:[(0,n.jsx)(`thead`,{className:e.default.thead,children:(0,n.jsxs)(`tr`,{children:[x&&(0,n.jsx)(`th`,{className:[e.default.th,e.default.checkboxCol].join(` `),children:(0,n.jsx)(`input`,{type:`checkbox`,className:e.default.checkbox,checked:o.length>0&&l.length===o.length,ref:e=>{e&&(e.indeterminate=l.length>0&&l.length<o.length)},onChange:e=>E(e.target.checked),"aria-label":`Select all rows`})}),a.map(t=>{let a=d?.columnId===t.id;return(0,n.jsx)(`th`,{className:[e.default.th,t.align?r[t.align]:null].filter(Boolean).join(` `),style:t.width?{width:t.width}:void 0,"aria-sort":a?d?.direction===`asc`?`ascending`:`descending`:t.sortable?`none`:void 0,children:t.sortable&&f?(0,n.jsxs)(`button`,{type:`button`,className:[e.default.sortBtn,a?e.default.sortBtnActive:null].filter(Boolean).join(` `),onClick:()=>C(t.id),children:[(0,n.jsx)(`span`,{children:t.header}),(0,n.jsx)(i,{direction:a?d?.direction:null})]}):(0,n.jsx)(`span`,{className:e.default.headerLabel,children:t.header})},t.id)})]})}),(0,n.jsx)(`tbody`,{ref:_,className:e.default.tbody,children:o.length===0?(0,n.jsx)(`tr`,{children:(0,n.jsx)(`td`,{colSpan:S,className:e.default.emptyCell,children:m??(0,n.jsx)(`span`,{className:e.default.emptyLabel,children:`No items`})})}):o.map((t,i)=>{let o=s(t),l=b.has(o);return(0,n.jsxs)(`tr`,{className:[e.default.row,l?e.default.rowSelected:null,c===`none`?null:e.default.rowSelectable].filter(Boolean).join(` `),"aria-selected":c===`none`?void 0:l,tabIndex:v===i?0:-1,onClick:()=>w(o),onKeyDown:e=>T(e,i,o),onFocus:()=>y(i),children:[x&&(0,n.jsx)(`td`,{className:[e.default.td,e.default.checkboxCol].join(` `),children:(0,n.jsx)(`input`,{type:`checkbox`,className:e.default.checkbox,checked:l,onChange:()=>w(o),onClick:e=>e.stopPropagation(),tabIndex:-1,"aria-label":`Select row ${i+1}`})}),a.map(a=>(0,n.jsx)(`td`,{className:[e.default.td,a.align?r[a.align]:null].filter(Boolean).join(` `),children:a.cell(t,i)},a.id))]},o)})})]})})})};exports.ColumnView=a;
 //# sourceMappingURL=ColumnView.cjs.map

package/dist/components/ColumnView/ColumnView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnView.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type ReactNode, useRef, useState } from 'react';\n\nimport styles from './ColumnView.module.css';\n\nexport interface ColumnDef<TRow> {\n  id: string;\n  header: ReactNode;\n  cell: (row: TRow, index: number) => ReactNode;\n  sortable?: boolean;\n  /** CSS width value — e.g. \"200px\", \"30%\". */\n  width?: string;\n  align?: 'start' | 'center' | 'end';\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface ColumnViewSortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type ColumnViewSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ColumnViewProps<TRow extends object = Record<string, unknown>> {\n  columns: ColumnDef<TRow>[];\n  rows: TRow[];\n  /** Extract a stable unique key per row. */\n  rowKey: (row: TRow) => string | number;\n  /** @default \"none\" */\n  selectionMode?: ColumnViewSelectionMode;\n  /** Controlled set of selected row keys. */\n  selectedRows?: (string | number)[];\n  onSelectionChange?: (keys: (string | number)[]) => void;\n  /** Controlled sort state. */\n  sortState?: ColumnViewSortState;\n  onSort?: (columnId: string, direction: SortDirection) => void;\n  /** Constrains height and enables vertical scroll. */\n  height?: string | number;\n  /** Rendered when `rows` is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n  ariaLabel?: string;\n}\n\nconst ALIGN: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n};\n\nfunction SortChevron({ direction }: { direction: SortDirection | null }) {\n  return (\n    <svg\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      aria-hidden=\"true\"\n      className={direction ? styles.sortActive : styles.sortNeutral}\n    >\n      {direction === 'asc' ? (\n        <path d=\"M5 2 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      ) : direction === 'desc' ? (\n        <path d=\"M5 8 L1 2 L9 2 Z\" fill=\"currentColor\" />\n      ) : (\n        <>\n          <path d=\"M5 1 L8 5 L2 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n          <path d=\"M5 9 L2 5 L8 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n        </>\n      )}\n    </svg>\n  );\n}\n\nexport function ColumnView<TRow extends object = Record<string, unknown>>({\n  columns,\n  rows,\n  rowKey,\n  selectionMode = 'none',\n  selectedRows = [],\n  onSelectionChange,\n  sortState,\n  onSort,\n  height,\n  emptyState,\n  className,\n  ariaLabel,\n}: ColumnViewProps<TRow>) {\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const selectedSet = new Set(selectedRows);\n  const hasCheckbox = selectionMode === 'multiple';\n  const colSpan = columns.length + (hasCheckbox ? 1 : 0);\n\n  function handleSort(colId: string) {\n    if (!onSort) {\n      return;\n    }\n\n    const next: SortDirection =\n      sortState?.columnId === colId && sortState.direction === 'asc' ? 'desc' : 'asc';\n\n    onSort(colId, next);\n  }\n\n  function toggleRow(key: string | number) {\n    if (selectionMode === 'none' || !onSelectionChange) {\n      return;\n    }\n\n    if (selectionMode === 'single') {\n      onSelectionChange(selectedSet.has(key) ? [] : [key]);\n    } else {\n      const next = new Set(selectedSet);\n\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n\n      onSelectionChange([...next]);\n    }\n  }\n\n  function handleRowKey(e: KeyboardEvent, index: number, key: string | number) {\n    const rows_els = tbodyRef.current?.querySelectorAll<HTMLTableRowElement>('tr') ?? [];\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const next = Math.min(rows.length - 1, index + 1);\n\n      setFocusedIndex(next);\n      rows_els[next]?.focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      const prev = Math.max(0, index - 1);\n\n      setFocusedIndex(prev);\n      rows_els[prev]?.focus();\n    } else if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      toggleRow(key);\n    }\n  }\n\n  function handleSelectAll(checked: boolean) {\n    if (!onSelectionChange) {\n      return;\n    }\n\n    onSelectionChange(checked ? rows.map(rowKey) : []);\n  }\n\n  const containerStyle: CSSProperties = height\n    ? { height: typeof height === 'number' ? `${height}px` : height }\n    : {};\n\n  return (\n    <div className={[styles.outer, className].filter(Boolean).join(' ')}>\n      <div className={styles.scroll} style={containerStyle}>\n        <table\n          className={styles.table}\n          aria-label={ariaLabel}\n          aria-multiselectable={selectionMode === 'multiple' || undefined}\n        >\n          <thead className={styles.thead}>\n            <tr>\n              {hasCheckbox && (\n                <th className={[styles.th, styles.checkboxCol].join(' ')}>\n                  <input\n                    type=\"checkbox\"\n                    className={styles.checkbox}\n                    checked={rows.length > 0 && selectedRows.length === rows.length}\n                    ref={(el) => {\n                      if (el) {\n                        el.indeterminate =\n                          selectedRows.length > 0 && selectedRows.length < rows.length;\n                      }\n                    }}\n                    onChange={(e) => handleSelectAll(e.target.checked)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              )}\n              {columns.map((col) => {\n                const isSorted = sortState?.columnId === col.id;\n\n                return (\n                  <th\n                    key={col.id}\n                    className={[styles.th, col.align ? ALIGN[col.align] : null]\n                      .filter(Boolean)\n                      .join(' ')}\n                    style={col.width ? { width: col.width } : undefined}\n                    aria-sort={\n                      isSorted\n                        ? sortState?.direction === 'asc'\n                          ? 'ascending'\n                          : 'descending'\n                        : col.sortable\n                          ? 'none'\n                          : undefined\n                    }\n                  >\n                    {col.sortable && onSort ? (\n                      <button\n                        type=\"button\"\n                        className={[styles.sortBtn, isSorted ? styles.sortBtnActive : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                        onClick={() => handleSort(col.id)}\n                      >\n                        <span>{col.header}</span>\n                        <SortChevron direction={isSorted ? sortState?.direction : null} />\n                      </button>\n                    ) : (\n                      <span className={styles.headerLabel}>{col.header}</span>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody ref={tbodyRef} className={styles.tbody}>\n            {rows.length === 0 ? (\n              <tr>\n                <td colSpan={colSpan} className={styles.emptyCell}>\n                  {emptyState ?? <span className={styles.emptyLabel}>No items</span>}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, index) => {\n                const key = rowKey(row);\n                const isSelected = selectedSet.has(key);\n\n                return (\n                  <tr\n                    key={key}\n                    className={[\n                      styles.row,\n                      isSelected ? styles.rowSelected : null,\n                      selectionMode !== 'none' ? styles.rowSelectable : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n                    tabIndex={focusedIndex === index ? 0 : -1}\n                    onClick={() => toggleRow(key)}\n                    onKeyDown={(e) => handleRowKey(e, index, key)}\n                    onFocus={() => setFocusedIndex(index)}\n                  >\n                    {hasCheckbox && (\n                      <td className={[styles.td, styles.checkboxCol].join(' ')}>\n                        <input\n                          type=\"checkbox\"\n                          className={styles.checkbox}\n                          checked={isSelected}\n                          onChange={() => toggleRow(key)}\n                          onClick={(e) => e.stopPropagation()}\n                          tabIndex={-1}\n                          aria-label={`Select row ${index + 1}`}\n                        />\n                      </td>\n                    )}\n                    {columns.map((col) => (\n                      <td\n                        key={col.id}\n                        className={[styles.td, col.align ? ALIGN[col.align] : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                      >\n                        {col.cell(row, index)}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColumnView.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type ReactNode, useRef, useState } from 'react';\n\nimport styles from './ColumnView.module.css';\n\nexport interface ColumnDef<TRow> {\n  id: string;\n  header: ReactNode;\n  cell: (row: TRow, index: number) => ReactNode;\n  sortable?: boolean;\n  /** CSS width value — e.g. \"200px\", \"30%\". */\n  width?: string;\n  align?: 'start' | 'center' | 'end';\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface ColumnViewSortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type ColumnViewSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ColumnViewProps<TRow extends object = Record<string, unknown>> {\n  columns: ColumnDef<TRow>[];\n  rows: TRow[];\n  /** Extract a stable unique key per row. */\n  rowKey: (row: TRow) => string | number;\n  /** @default \"none\" */\n  selectionMode?: ColumnViewSelectionMode;\n  /** Controlled set of selected row keys. */\n  selectedRows?: (string | number)[];\n  onSelectionChange?: (keys: (string | number)[]) => void;\n  /** Controlled sort state. */\n  sortState?: ColumnViewSortState;\n  onSort?: (columnId: string, direction: SortDirection) => void;\n  /** Constrains height and enables vertical scroll. */\n  height?: string | number;\n  /** Rendered when `rows` is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n  ariaLabel?: string;\n}\n\nconst ALIGN: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n};\n\nconst SortChevron = ({ direction }: { direction: SortDirection | null }) => {\n  return (\n    <svg\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      aria-hidden=\"true\"\n      className={direction ? styles.sortActive : styles.sortNeutral}\n    >\n      {direction === 'asc' ? (\n        <path d=\"M5 2 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      ) : direction === 'desc' ? (\n        <path d=\"M5 8 L1 2 L9 2 Z\" fill=\"currentColor\" />\n      ) : (\n        <>\n          <path d=\"M5 1 L8 5 L2 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n          <path d=\"M5 9 L2 5 L8 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n        </>\n      )}\n    </svg>\n  );\n};\n\nexport const ColumnView = <TRow extends object = Record<string, unknown>>({\n  columns,\n  rows,\n  rowKey,\n  selectionMode = 'none',\n  selectedRows = [],\n  onSelectionChange,\n  sortState,\n  onSort,\n  height,\n  emptyState,\n  className,\n  ariaLabel,\n}: ColumnViewProps<TRow>) => {\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const selectedSet = new Set(selectedRows);\n  const hasCheckbox = selectionMode === 'multiple';\n  const colSpan = columns.length + (hasCheckbox ? 1 : 0);\n\n  function handleSort(colId: string) {\n    if (!onSort) {\n      return;\n    }\n\n    const next: SortDirection =\n      sortState?.columnId === colId && sortState.direction === 'asc' ? 'desc' : 'asc';\n\n    onSort(colId, next);\n  }\n\n  function toggleRow(key: string | number) {\n    if (selectionMode === 'none' || !onSelectionChange) {\n      return;\n    }\n\n    if (selectionMode === 'single') {\n      onSelectionChange(selectedSet.has(key) ? [] : [key]);\n    } else {\n      const next = new Set(selectedSet);\n\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n\n      onSelectionChange([...next]);\n    }\n  }\n\n  function handleRowKey(e: KeyboardEvent, index: number, key: string | number) {\n    const rows_els = tbodyRef.current?.querySelectorAll<HTMLTableRowElement>('tr') ?? [];\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const next = Math.min(rows.length - 1, index + 1);\n\n      setFocusedIndex(next);\n      rows_els[next]?.focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      const prev = Math.max(0, index - 1);\n\n      setFocusedIndex(prev);\n      rows_els[prev]?.focus();\n    } else if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      toggleRow(key);\n    }\n  }\n\n  function handleSelectAll(checked: boolean) {\n    if (!onSelectionChange) {\n      return;\n    }\n\n    onSelectionChange(checked ? rows.map(rowKey) : []);\n  }\n\n  const containerStyle: CSSProperties = height\n    ? { height: typeof height === 'number' ? `${height}px` : height }\n    : {};\n\n  return (\n    <div className={[styles.outer, className].filter(Boolean).join(' ')}>\n      <div className={styles.scroll} style={containerStyle}>\n        <table\n          className={styles.table}\n          aria-label={ariaLabel}\n          aria-multiselectable={selectionMode === 'multiple' || undefined}\n        >\n          <thead className={styles.thead}>\n            <tr>\n              {hasCheckbox && (\n                <th className={[styles.th, styles.checkboxCol].join(' ')}>\n                  <input\n                    type=\"checkbox\"\n                    className={styles.checkbox}\n                    checked={rows.length > 0 && selectedRows.length === rows.length}\n                    ref={(el) => {\n                      if (el) {\n                        el.indeterminate =\n                          selectedRows.length > 0 && selectedRows.length < rows.length;\n                      }\n                    }}\n                    onChange={(e) => handleSelectAll(e.target.checked)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              )}\n              {columns.map((col) => {\n                const isSorted = sortState?.columnId === col.id;\n\n                return (\n                  <th\n                    key={col.id}\n                    className={[styles.th, col.align ? ALIGN[col.align] : null]\n                      .filter(Boolean)\n                      .join(' ')}\n                    style={col.width ? { width: col.width } : undefined}\n                    aria-sort={\n                      isSorted\n                        ? sortState?.direction === 'asc'\n                          ? 'ascending'\n                          : 'descending'\n                        : col.sortable\n                          ? 'none'\n                          : undefined\n                    }\n                  >\n                    {col.sortable && onSort ? (\n                      <button\n                        type=\"button\"\n                        className={[styles.sortBtn, isSorted ? styles.sortBtnActive : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                        onClick={() => handleSort(col.id)}\n                      >\n                        <span>{col.header}</span>\n                        <SortChevron direction={isSorted ? sortState?.direction : null} />\n                      </button>\n                    ) : (\n                      <span className={styles.headerLabel}>{col.header}</span>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody ref={tbodyRef} className={styles.tbody}>\n            {rows.length === 0 ? (\n              <tr>\n                <td colSpan={colSpan} className={styles.emptyCell}>\n                  {emptyState ?? <span className={styles.emptyLabel}>No items</span>}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, index) => {\n                const key = rowKey(row);\n                const isSelected = selectedSet.has(key);\n\n                return (\n                  <tr\n                    key={key}\n                    className={[\n                      styles.row,\n                      isSelected ? styles.rowSelected : null,\n                      selectionMode !== 'none' ? styles.rowSelectable : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n                    tabIndex={focusedIndex === index ? 0 : -1}\n                    onClick={() => toggleRow(key)}\n                    onKeyDown={(e) => handleRowKey(e, index, key)}\n                    onFocus={() => setFocusedIndex(index)}\n                  >\n                    {hasCheckbox && (\n                      <td className={[styles.td, styles.checkboxCol].join(' ')}>\n                        <input\n                          type=\"checkbox\"\n                          className={styles.checkbox}\n                          checked={isSelected}\n                          onChange={() => toggleRow(key)}\n                          onClick={(e) => e.stopPropagation()}\n                          tabIndex={-1}\n                          aria-label={`Select row ${index + 1}`}\n                        />\n                      </td>\n                    )}\n                    {columns.map((col) => (\n                      <td\n                        key={col.id}\n                        className={[styles.td, col.align ? ALIGN[col.align] : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                      >\n                        {col.cell(row, index)}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ColumnView/ColumnView.d.ts

@@ -34,4 +34,4 @@ export interface ColumnViewProps<TRow extends object = Record<string, unknown>>
     className?: string;
     ariaLabel?: string;
 }
-export declare function ColumnView<TRow extends object = Record<string, unknown>>({ columns, rows, rowKey, selectionMode, selectedRows, onSelectionChange, sortState, onSort, height, emptyState, className, ariaLabel, }: ColumnViewProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export declare const ColumnView: <TRow extends object = Record<string, unknown>>({ columns, rows, rowKey, selectionMode, selectedRows, onSelectionChange, sortState, onSort, height, emptyState, className, ariaLabel, }: ColumnViewProps<TRow>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ColumnView/ColumnView.js

@@ -6,33 +6,29 @@ var o = {
 	start: e.alignStart,
 	center: e.alignCenter,
 	end: e.alignEnd
-};
-function s({ direction: t }) {
-	return /* @__PURE__ */ i("svg", {
-		width: "10",
-		height: "10",
-		viewBox: "0 0 10 10",
-		"aria-hidden": "true",
-		className: t ? e.sortActive : e.sortNeutral,
-		children: t === "asc" ? /* @__PURE__ */ i("path", {
-			d: "M5 2 L9 8 L1 8 Z",
-			fill: "currentColor"
-		}) : t === "desc" ? /* @__PURE__ */ i("path", {
-			d: "M5 8 L1 2 L9 2 Z",
-			fill: "currentColor"
-		}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("path", {
-			d: "M5 1 L8 5 L2 5 Z",
-			fill: "currentColor",
-			opacity: "0.4"
-		}), /* @__PURE__ */ i("path", {
-			d: "M5 9 L2 5 L8 5 Z",
-			fill: "currentColor",
-			opacity: "0.4"
-		})] })
-	});
-}
-function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selectedRows: d = [], onSelectionChange: f, sortState: p, onSort: m, height: h, emptyState: g, className: _, ariaLabel: v }) {
-	let y = t(null), [b, x] = n(0), S = new Set(d), C = u === "multiple", w = r.length + (C ? 1 : 0);
+}, s = ({ direction: t }) => /* @__PURE__ */ i("svg", {
+	width: "10",
+	height: "10",
+	viewBox: "0 0 10 10",
+	"aria-hidden": "true",
+	className: t ? e.sortActive : e.sortNeutral,
+	children: t === "asc" ? /* @__PURE__ */ i("path", {
+		d: "M5 2 L9 8 L1 8 Z",
+		fill: "currentColor"
+	}) : t === "desc" ? /* @__PURE__ */ i("path", {
+		d: "M5 8 L1 2 L9 2 Z",
+		fill: "currentColor"
+	}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("path", {
+		d: "M5 1 L8 5 L2 5 Z",
+		fill: "currentColor",
+		opacity: "0.4"
+	}), /* @__PURE__ */ i("path", {
+		d: "M5 9 L2 5 L8 5 Z",
+		fill: "currentColor",
+		opacity: "0.4"
+	})] })
+}), c = ({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selectedRows: d = [], onSelectionChange: f, sortState: p, onSort: m, height: h, emptyState: g, className: _, ariaLabel: v }) => {
+	let y = t(null), [b, x] = n(0), S = new Set(d), C = u === "multiple", w = r.length + +!!C;
 	function T(e) {
 		m && m(e, p?.columnId === e && p.direction === "asc" ? "desc" : "asc");
 	}
@@ -143,7 +139,7 @@ function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selected
 			})
 		})
 	});
-}
+};
 //#endregion
 export { c as ColumnView };
 

package/dist/components/ColumnView/ColumnView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnView.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type ReactNode, useRef, useState } from 'react';\n\nimport styles from './ColumnView.module.css';\n\nexport interface ColumnDef<TRow> {\n  id: string;\n  header: ReactNode;\n  cell: (row: TRow, index: number) => ReactNode;\n  sortable?: boolean;\n  /** CSS width value — e.g. \"200px\", \"30%\". */\n  width?: string;\n  align?: 'start' | 'center' | 'end';\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface ColumnViewSortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type ColumnViewSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ColumnViewProps<TRow extends object = Record<string, unknown>> {\n  columns: ColumnDef<TRow>[];\n  rows: TRow[];\n  /** Extract a stable unique key per row. */\n  rowKey: (row: TRow) => string | number;\n  /** @default \"none\" */\n  selectionMode?: ColumnViewSelectionMode;\n  /** Controlled set of selected row keys. */\n  selectedRows?: (string | number)[];\n  onSelectionChange?: (keys: (string | number)[]) => void;\n  /** Controlled sort state. */\n  sortState?: ColumnViewSortState;\n  onSort?: (columnId: string, direction: SortDirection) => void;\n  /** Constrains height and enables vertical scroll. */\n  height?: string | number;\n  /** Rendered when `rows` is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n  ariaLabel?: string;\n}\n\nconst ALIGN: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n};\n\nfunction SortChevron({ direction }: { direction: SortDirection | null }) {\n  return (\n    <svg\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      aria-hidden=\"true\"\n      className={direction ? styles.sortActive : styles.sortNeutral}\n    >\n      {direction === 'asc' ? (\n        <path d=\"M5 2 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      ) : direction === 'desc' ? (\n        <path d=\"M5 8 L1 2 L9 2 Z\" fill=\"currentColor\" />\n      ) : (\n        <>\n          <path d=\"M5 1 L8 5 L2 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n          <path d=\"M5 9 L2 5 L8 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n        </>\n      )}\n    </svg>\n  );\n}\n\nexport function ColumnView<TRow extends object = Record<string, unknown>>({\n  columns,\n  rows,\n  rowKey,\n  selectionMode = 'none',\n  selectedRows = [],\n  onSelectionChange,\n  sortState,\n  onSort,\n  height,\n  emptyState,\n  className,\n  ariaLabel,\n}: ColumnViewProps<TRow>) {\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const selectedSet = new Set(selectedRows);\n  const hasCheckbox = selectionMode === 'multiple';\n  const colSpan = columns.length + (hasCheckbox ? 1 : 0);\n\n  function handleSort(colId: string) {\n    if (!onSort) {\n      return;\n    }\n\n    const next: SortDirection =\n      sortState?.columnId === colId && sortState.direction === 'asc' ? 'desc' : 'asc';\n\n    onSort(colId, next);\n  }\n\n  function toggleRow(key: string | number) {\n    if (selectionMode === 'none' || !onSelectionChange) {\n      return;\n    }\n\n    if (selectionMode === 'single') {\n      onSelectionChange(selectedSet.has(key) ? [] : [key]);\n    } else {\n      const next = new Set(selectedSet);\n\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n\n      onSelectionChange([...next]);\n    }\n  }\n\n  function handleRowKey(e: KeyboardEvent, index: number, key: string | number) {\n    const rows_els = tbodyRef.current?.querySelectorAll<HTMLTableRowElement>('tr') ?? [];\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const next = Math.min(rows.length - 1, index + 1);\n\n      setFocusedIndex(next);\n      rows_els[next]?.focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      const prev = Math.max(0, index - 1);\n\n      setFocusedIndex(prev);\n      rows_els[prev]?.focus();\n    } else if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      toggleRow(key);\n    }\n  }\n\n  function handleSelectAll(checked: boolean) {\n    if (!onSelectionChange) {\n      return;\n    }\n\n    onSelectionChange(checked ? rows.map(rowKey) : []);\n  }\n\n  const containerStyle: CSSProperties = height\n    ? { height: typeof height === 'number' ? `${height}px` : height }\n    : {};\n\n  return (\n    <div className={[styles.outer, className].filter(Boolean).join(' ')}>\n      <div className={styles.scroll} style={containerStyle}>\n        <table\n          className={styles.table}\n          aria-label={ariaLabel}\n          aria-multiselectable={selectionMode === 'multiple' || undefined}\n        >\n          <thead className={styles.thead}>\n            <tr>\n              {hasCheckbox && (\n                <th className={[styles.th, styles.checkboxCol].join(' ')}>\n                  <input\n                    type=\"checkbox\"\n                    className={styles.checkbox}\n                    checked={rows.length > 0 && selectedRows.length === rows.length}\n                    ref={(el) => {\n                      if (el) {\n                        el.indeterminate =\n                          selectedRows.length > 0 && selectedRows.length < rows.length;\n                      }\n                    }}\n                    onChange={(e) => handleSelectAll(e.target.checked)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              )}\n              {columns.map((col) => {\n                const isSorted = sortState?.columnId === col.id;\n\n                return (\n                  <th\n                    key={col.id}\n                    className={[styles.th, col.align ? ALIGN[col.align] : null]\n                      .filter(Boolean)\n                      .join(' ')}\n                    style={col.width ? { width: col.width } : undefined}\n                    aria-sort={\n                      isSorted\n                        ? sortState?.direction === 'asc'\n                          ? 'ascending'\n                          : 'descending'\n                        : col.sortable\n                          ? 'none'\n                          : undefined\n                    }\n                  >\n                    {col.sortable && onSort ? (\n                      <button\n                        type=\"button\"\n                        className={[styles.sortBtn, isSorted ? styles.sortBtnActive : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                        onClick={() => handleSort(col.id)}\n                      >\n                        <span>{col.header}</span>\n                        <SortChevron direction={isSorted ? sortState?.direction : null} />\n                      </button>\n                    ) : (\n                      <span className={styles.headerLabel}>{col.header}</span>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody ref={tbodyRef} className={styles.tbody}>\n            {rows.length === 0 ? (\n              <tr>\n                <td colSpan={colSpan} className={styles.emptyCell}>\n                  {emptyState ?? <span className={styles.emptyLabel}>No items</span>}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, index) => {\n                const key = rowKey(row);\n                const isSelected = selectedSet.has(key);\n\n                return (\n                  <tr\n                    key={key}\n                    className={[\n                      styles.row,\n                      isSelected ? styles.rowSelected : null,\n                      selectionMode !== 'none' ? styles.rowSelectable : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n                    tabIndex={focusedIndex === index ? 0 : -1}\n                    onClick={() => toggleRow(key)}\n                    onKeyDown={(e) => handleRowKey(e, index, key)}\n                    onFocus={() => setFocusedIndex(index)}\n                  >\n                    {hasCheckbox && (\n                      <td className={[styles.td, styles.checkboxCol].join(' ')}>\n                        <input\n                          type=\"checkbox\"\n                          className={styles.checkbox}\n                          checked={isSelected}\n                          onChange={() => toggleRow(key)}\n                          onClick={(e) => e.stopPropagation()}\n                          tabIndex={-1}\n                          aria-label={`Select row ${index + 1}`}\n                        />\n                      </td>\n                    )}\n                    {columns.map((col) => (\n                      <td\n                        key={col.id}\n                        className={[styles.td, col.align ? ALIGN[col.align] : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                      >\n                        {col.cell(row, index)}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA4CA,IAAM,IAAgC;CACpC,OAAO,EAAO;CACd,QAAQ,EAAO;CACf,KAAK,EAAO;CACb;AAED,SAAS,EAAY,EAAE,gBAAkD;AACvE,QACE,kBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,eAAY;EACZ,WAAW,IAAY,EAAO,aAAa,EAAO;YAEjD,MAAc,QACb,kBAAC,QAAD;GAAM,GAAE;GAAmB,MAAK;GAAiB,CAAA,GAC/C,MAAc,SAChB,kBAAC,QAAD;GAAM,GAAE;GAAmB,MAAK;GAAiB,CAAA,GAEjD,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,GAAE;GAAmB,MAAK;GAAe,SAAQ;GAAQ,CAAA,EAC/D,kBAAC,QAAD;GAAM,GAAE;GAAmB,MAAK;GAAe,SAAQ;GAAQ,CAAA,CAC9D,EAAA,CAAA;EAED,CAAA;;AAIV,SAAgB,EAA0D,EACxE,YACA,SACA,WACA,mBAAgB,QAChB,kBAAe,EAAE,EACjB,sBACA,cACA,WACA,WACA,eACA,cACA,gBACwB;CACxB,IAAM,IAAW,EAAgC,KAAK,EAChD,CAAC,GAAc,KAAmB,EAAS,EAAE,EAC7C,IAAc,IAAI,IAAI,EAAa,EACnC,IAAc,MAAkB,YAChC,IAAU,EAAQ,UAAU,IAAc,IAAI;CAEpD,SAAS,EAAW,GAAe;AAC5B,OAOL,EAAO,GAFL,GAAW,aAAa,KAAS,EAAU,cAAc,QAAQ,SAAS,MAEzD;;CAGrB,SAAS,EAAU,GAAsB;AACnC,cAAkB,UAAU,CAAC,GAIjC,KAAI,MAAkB,SACpB,GAAkB,EAAY,IAAI,EAAI,GAAG,EAAE,GAAG,CAAC,EAAI,CAAC;OAC/C;GACL,IAAM,IAAO,IAAI,IAAI,EAAY;AAQjC,GANI,EAAK,IAAI,EAAI,GACf,EAAK,OAAO,EAAI,GAEhB,EAAK,IAAI,EAAI,EAGf,EAAkB,CAAC,GAAG,EAAK,CAAC;;;CAIhC,SAAS,EAAa,GAAkB,GAAe,GAAsB;EAC3E,IAAM,IAAW,EAAS,SAAS,iBAAsC,KAAK,IAAI,EAAE;AAEpF,MAAI,EAAE,QAAQ,aAAa;AACzB,KAAE,gBAAgB;GAClB,IAAM,IAAO,KAAK,IAAI,EAAK,SAAS,GAAG,IAAQ,EAAE;AAGjD,GADA,EAAgB,EAAK,EACrB,EAAS,IAAO,OAAO;aACd,EAAE,QAAQ,WAAW;AAC9B,KAAE,gBAAgB;GAClB,IAAM,IAAO,KAAK,IAAI,GAAG,IAAQ,EAAE;AAGnC,GADA,EAAgB,EAAK,EACrB,EAAS,IAAO,OAAO;UACd,EAAE,QAAQ,OAAO,EAAE,QAAQ,aACpC,EAAE,gBAAgB,EAClB,EAAU,EAAI;;CAIlB,SAAS,EAAgB,GAAkB;AACpC,OAIL,EAAkB,IAAU,EAAK,IAAI,EAAO,GAAG,EAAE,CAAC;;CAGpD,IAAM,IAAgC,IAClC,EAAE,QAAQ,OAAO,KAAW,WAAW,GAAG,EAAO,MAAM,GAAQ,GAC/D,EAAE;AAEN,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YACjE,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ,OAAO;aACpC,kBAAC,SAAD;IACE,WAAW,EAAO;IAClB,cAAY;IACZ,wBAAsB,MAAkB,cAAc,KAAA;cAHxD,CAKE,kBAAC,SAAD;KAAO,WAAW,EAAO;eACvB,kBAAC,MAAD,EAAA,UAAA,CACG,KACC,kBAAC,MAAD;MAAI,WAAW,CAAC,EAAO,IAAI,EAAO,YAAY,CAAC,KAAK,IAAI;gBACtD,kBAAC,SAAD;OACE,MAAK;OACL,WAAW,EAAO;OAClB,SAAS,EAAK,SAAS,KAAK,EAAa,WAAW,EAAK;OACzD,MAAM,MAAO;AACX,QAAI,MACF,EAAG,gBACD,EAAa,SAAS,KAAK,EAAa,SAAS,EAAK;;OAG5D,WAAW,MAAM,EAAgB,EAAE,OAAO,QAAQ;OAClD,cAAW;OACX,CAAA;MACC,CAAA,EAEN,EAAQ,KAAK,MAAQ;MACpB,IAAM,IAAW,GAAW,aAAa,EAAI;AAE7C,aACE,kBAAC,MAAD;OAEE,WAAW,CAAC,EAAO,IAAI,EAAI,QAAQ,EAAM,EAAI,SAAS,KAAK,CACxD,OAAO,QAAQ,CACf,KAAK,IAAI;OACZ,OAAO,EAAI,QAAQ,EAAE,OAAO,EAAI,OAAO,GAAG,KAAA;OAC1C,aACE,IACI,GAAW,cAAc,QACvB,cACA,eACF,EAAI,WACF,SACA,KAAA;iBAGP,EAAI,YAAY,IACf,kBAAC,UAAD;QACE,MAAK;QACL,WAAW,CAAC,EAAO,SAAS,IAAW,EAAO,gBAAgB,KAAK,CAChE,OAAO,QAAQ,CACf,KAAK,IAAI;QACZ,eAAe,EAAW,EAAI,GAAG;kBALnC,CAOE,kBAAC,QAAD,EAAA,UAAO,EAAI,QAAc,CAAA,EACzB,kBAAC,GAAD,EAAa,WAAW,IAAW,GAAW,YAAY,MAAQ,CAAA,CAC3D;YAET,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAc,EAAI;QAAc,CAAA;OAEvD,EA7BE,EAAI,GA6BN;OAEP,CACC,EAAA,CAAA;KACC,CAAA,EAER,kBAAC,SAAD;KAAO,KAAK;KAAU,WAAW,EAAO;eACrC,EAAK,WAAW,IACf,kBAAC,MAAD,EAAA,UACE,kBAAC,MAAD;MAAa;MAAS,WAAW,EAAO;gBACrC,KAAc,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAY;OAAe,CAAA;MAC/D,CAAA,EACF,CAAA,GAEL,EAAK,KAAK,GAAK,MAAU;MACvB,IAAM,IAAM,EAAO,EAAI,EACjB,IAAa,EAAY,IAAI,EAAI;AAEvC,aACE,kBAAC,MAAD;OAEE,WAAW;QACT,EAAO;QACP,IAAa,EAAO,cAAc;QAClC,MAAkB,SAAgC,OAAvB,EAAO;QACnC,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;OACZ,iBAAe,MAAkB,SAAsB,KAAA,IAAb;OAC1C,UAAU,MAAiB,IAAQ,IAAI;OACvC,eAAe,EAAU,EAAI;OAC7B,YAAY,MAAM,EAAa,GAAG,GAAO,EAAI;OAC7C,eAAe,EAAgB,EAAM;iBAbvC,CAeG,KACC,kBAAC,MAAD;QAAI,WAAW,CAAC,EAAO,IAAI,EAAO,YAAY,CAAC,KAAK,IAAI;kBACtD,kBAAC,SAAD;SACE,MAAK;SACL,WAAW,EAAO;SAClB,SAAS;SACT,gBAAgB,EAAU,EAAI;SAC9B,UAAU,MAAM,EAAE,iBAAiB;SACnC,UAAU;SACV,cAAY,cAAc,IAAQ;SAClC,CAAA;QACC,CAAA,EAEN,EAAQ,KAAK,MACZ,kBAAC,MAAD;QAEE,WAAW,CAAC,EAAO,IAAI,EAAI,QAAQ,EAAM,EAAI,SAAS,KAAK,CACxD,OAAO,QAAQ,CACf,KAAK,IAAI;kBAEX,EAAI,KAAK,GAAK,EAAM;QAClB,EANE,EAAI,GAMN,CACL,CACC;SArCE,EAqCF;OAEP;KAEE,CAAA,CACF;;GACJ,CAAA;EACF,CAAA"}
+{"version":3,"file":"ColumnView.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type ReactNode, useRef, useState } from 'react';\n\nimport styles from './ColumnView.module.css';\n\nexport interface ColumnDef<TRow> {\n  id: string;\n  header: ReactNode;\n  cell: (row: TRow, index: number) => ReactNode;\n  sortable?: boolean;\n  /** CSS width value — e.g. \"200px\", \"30%\". */\n  width?: string;\n  align?: 'start' | 'center' | 'end';\n}\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface ColumnViewSortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type ColumnViewSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ColumnViewProps<TRow extends object = Record<string, unknown>> {\n  columns: ColumnDef<TRow>[];\n  rows: TRow[];\n  /** Extract a stable unique key per row. */\n  rowKey: (row: TRow) => string | number;\n  /** @default \"none\" */\n  selectionMode?: ColumnViewSelectionMode;\n  /** Controlled set of selected row keys. */\n  selectedRows?: (string | number)[];\n  onSelectionChange?: (keys: (string | number)[]) => void;\n  /** Controlled sort state. */\n  sortState?: ColumnViewSortState;\n  onSort?: (columnId: string, direction: SortDirection) => void;\n  /** Constrains height and enables vertical scroll. */\n  height?: string | number;\n  /** Rendered when `rows` is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n  ariaLabel?: string;\n}\n\nconst ALIGN: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n};\n\nconst SortChevron = ({ direction }: { direction: SortDirection | null }) => {\n  return (\n    <svg\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      aria-hidden=\"true\"\n      className={direction ? styles.sortActive : styles.sortNeutral}\n    >\n      {direction === 'asc' ? (\n        <path d=\"M5 2 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      ) : direction === 'desc' ? (\n        <path d=\"M5 8 L1 2 L9 2 Z\" fill=\"currentColor\" />\n      ) : (\n        <>\n          <path d=\"M5 1 L8 5 L2 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n          <path d=\"M5 9 L2 5 L8 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n        </>\n      )}\n    </svg>\n  );\n};\n\nexport const ColumnView = <TRow extends object = Record<string, unknown>>({\n  columns,\n  rows,\n  rowKey,\n  selectionMode = 'none',\n  selectedRows = [],\n  onSelectionChange,\n  sortState,\n  onSort,\n  height,\n  emptyState,\n  className,\n  ariaLabel,\n}: ColumnViewProps<TRow>) => {\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const selectedSet = new Set(selectedRows);\n  const hasCheckbox = selectionMode === 'multiple';\n  const colSpan = columns.length + (hasCheckbox ? 1 : 0);\n\n  function handleSort(colId: string) {\n    if (!onSort) {\n      return;\n    }\n\n    const next: SortDirection =\n      sortState?.columnId === colId && sortState.direction === 'asc' ? 'desc' : 'asc';\n\n    onSort(colId, next);\n  }\n\n  function toggleRow(key: string | number) {\n    if (selectionMode === 'none' || !onSelectionChange) {\n      return;\n    }\n\n    if (selectionMode === 'single') {\n      onSelectionChange(selectedSet.has(key) ? [] : [key]);\n    } else {\n      const next = new Set(selectedSet);\n\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n\n      onSelectionChange([...next]);\n    }\n  }\n\n  function handleRowKey(e: KeyboardEvent, index: number, key: string | number) {\n    const rows_els = tbodyRef.current?.querySelectorAll<HTMLTableRowElement>('tr') ?? [];\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const next = Math.min(rows.length - 1, index + 1);\n\n      setFocusedIndex(next);\n      rows_els[next]?.focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      const prev = Math.max(0, index - 1);\n\n      setFocusedIndex(prev);\n      rows_els[prev]?.focus();\n    } else if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      toggleRow(key);\n    }\n  }\n\n  function handleSelectAll(checked: boolean) {\n    if (!onSelectionChange) {\n      return;\n    }\n\n    onSelectionChange(checked ? rows.map(rowKey) : []);\n  }\n\n  const containerStyle: CSSProperties = height\n    ? { height: typeof height === 'number' ? `${height}px` : height }\n    : {};\n\n  return (\n    <div className={[styles.outer, className].filter(Boolean).join(' ')}>\n      <div className={styles.scroll} style={containerStyle}>\n        <table\n          className={styles.table}\n          aria-label={ariaLabel}\n          aria-multiselectable={selectionMode === 'multiple' || undefined}\n        >\n          <thead className={styles.thead}>\n            <tr>\n              {hasCheckbox && (\n                <th className={[styles.th, styles.checkboxCol].join(' ')}>\n                  <input\n                    type=\"checkbox\"\n                    className={styles.checkbox}\n                    checked={rows.length > 0 && selectedRows.length === rows.length}\n                    ref={(el) => {\n                      if (el) {\n                        el.indeterminate =\n                          selectedRows.length > 0 && selectedRows.length < rows.length;\n                      }\n                    }}\n                    onChange={(e) => handleSelectAll(e.target.checked)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              )}\n              {columns.map((col) => {\n                const isSorted = sortState?.columnId === col.id;\n\n                return (\n                  <th\n                    key={col.id}\n                    className={[styles.th, col.align ? ALIGN[col.align] : null]\n                      .filter(Boolean)\n                      .join(' ')}\n                    style={col.width ? { width: col.width } : undefined}\n                    aria-sort={\n                      isSorted\n                        ? sortState?.direction === 'asc'\n                          ? 'ascending'\n                          : 'descending'\n                        : col.sortable\n                          ? 'none'\n                          : undefined\n                    }\n                  >\n                    {col.sortable && onSort ? (\n                      <button\n                        type=\"button\"\n                        className={[styles.sortBtn, isSorted ? styles.sortBtnActive : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                        onClick={() => handleSort(col.id)}\n                      >\n                        <span>{col.header}</span>\n                        <SortChevron direction={isSorted ? sortState?.direction : null} />\n                      </button>\n                    ) : (\n                      <span className={styles.headerLabel}>{col.header}</span>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody ref={tbodyRef} className={styles.tbody}>\n            {rows.length === 0 ? (\n              <tr>\n                <td colSpan={colSpan} className={styles.emptyCell}>\n                  {emptyState ?? <span className={styles.emptyLabel}>No items</span>}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, index) => {\n                const key = rowKey(row);\n                const isSelected = selectedSet.has(key);\n\n                return (\n                  <tr\n                    key={key}\n                    className={[\n                      styles.row,\n                      isSelected ? styles.rowSelected : null,\n                      selectionMode !== 'none' ? styles.rowSelectable : null,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n                    tabIndex={focusedIndex === index ? 0 : -1}\n                    onClick={() => toggleRow(key)}\n                    onKeyDown={(e) => handleRowKey(e, index, key)}\n                    onFocus={() => setFocusedIndex(index)}\n                  >\n                    {hasCheckbox && (\n                      <td className={[styles.td, styles.checkboxCol].join(' ')}>\n                        <input\n                          type=\"checkbox\"\n                          className={styles.checkbox}\n                          checked={isSelected}\n                          onChange={() => toggleRow(key)}\n                          onClick={(e) => e.stopPropagation()}\n                          tabIndex={-1}\n                          aria-label={`Select row ${index + 1}`}\n                        />\n                      </td>\n                    )}\n                    {columns.map((col) => (\n                      <td\n                        key={col.id}\n                        className={[styles.td, col.align ? ALIGN[col.align] : null]\n                          .filter(Boolean)\n                          .join(' ')}\n                      >\n                        {col.cell(row, index)}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ColumnView.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ColumnView/ColumnView.cjs`);exports.ColumnView=e.ColumnView;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ColumnView/ColumnView.cjs");exports.ColumnView=e.ColumnView;

package/dist/components/ComboRow/ComboRow.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ComboRow.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({title:r,subtitle:i,leading:a,options:o,value:s,defaultValue:c,onValueChange:l,disabled:u=!1,className:d,...f}){let p=s!==void 0,[m,h]=(0,t.useState)(c),g=p?s:m,[_,v]=(0,t.useState)(!1),[y,b]=(0,t.useState)(-1),[x,S]=(0,t.useState)(!1),C=(0,t.useId)(),w=(0,t.useId)(),T=(0,t.useRef)(null),E=(0,t.useRef)(null),D=o.find(e=>e.value===g),O=(0,t.useCallback)(()=>{if(!T.current)return;let e=T.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(o.length*44+8,260);S(t<n&&e.top>n)},[o.length]),k=(0,t.useCallback)(()=>{if(u)return;O(),v(!0);let e=o.findIndex(e=>e.value===g&&!e.disabled);b(e>=0?e:o.findIndex(e=>!e.disabled))},[u,O,o,g]),A=(0,t.useCallback)(()=>{v(!1),b(-1),T.current?.focus()},[]),j=(0,t.useCallback)(e=>{e.disabled||(p||h(e.value),l?.(e.value),A())},[p,l,A]);(0,t.useEffect)(()=>{!_||y<0||!E.current||E.current.children[y]?.scrollIntoView({block:`nearest`})},[y,_]),(0,t.useEffect)(()=>{if(!_)return;let e=e=>{!T.current?.contains(e.target)&&!E.current?.contains(e.target)&&A()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_,A]);let M=(0,t.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),k();break;case`ArrowUp`:e.preventDefault(),O(),v(!0),b(o.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[k,O,o]),N=(0,t.useCallback)(e=>{let t=o.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(y);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];b(r??y);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];b(r??y);break}case`Home`:e.preventDefault(),b(t[0]??-1);break;case`End`:e.preventDefault(),b(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),y>=0&&j(o[y]);break;case`Escape`:case`Tab`:A();break}},[o,y,j,A]);return(0,n.jsxs)(`div`,{className:[e.default.row,u?e.default.disabled:null,d].filter(Boolean).join(` `),...f,children:[a&&(0,n.jsx)(`span`,{className:e.default.leading,children:a}),(0,n.jsxs)(`span`,{className:e.default.content,children:[(0,n.jsx)(`span`,{className:e.default.title,children:r}),i&&(0,n.jsx)(`span`,{className:e.default.subtitle,children:i})]}),(0,n.jsxs)(`div`,{className:e.default.comboWrap,children:[(0,n.jsxs)(`button`,{ref:T,id:C,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":_,"aria-controls":w,"aria-activedescendant":_&&y>=0?`${w}-opt-${y}`:void 0,disabled:u,className:[e.default.trigger,_?e.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>_?A():k(),onKeyDown:M,children:[(0,n.jsx)(`span`,{className:[e.default.triggerLabel,D?null:e.default.placeholder].filter(Boolean).join(` `),children:D?.label??`—`}),(0,n.jsx)(`svg`,{className:[e.default.chevron,_?e.default.chevronOpen:null].filter(Boolean).join(` `),width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,focusable:`false`,children:(0,n.jsx)(`path`,{d:`M4 6l4 4 4-4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})]}),_&&(0,n.jsx)(`ul`,{ref:E,id:w,"aria-labelledby":C,tabIndex:-1,className:[e.default.list,x?e.default.listUp:e.default.listDown].filter(Boolean).join(` `),onKeyDown:N,children:o.map((t,r)=>(0,n.jsxs)(`li`,{id:`${w}-opt-${r}`,"aria-selected":t.value===g,"aria-disabled":t.disabled,className:[e.default.option,t.value===g?e.default.optionSelected:null,r===y?e.default.optionActive:null,t.disabled?e.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!t.disabled&&b(r),onClick:()=>j(t),children:[(0,n.jsx)(`span`,{className:e.default.optionLabel,children:t.label}),t.value===g&&(0,n.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,focusable:`false`,className:e.default.checkIcon,children:(0,n.jsx)(`path`,{d:`M3 8l4 4 6-6`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.75`,strokeLinecap:`round`,strokeLinejoin:`round`})})]},t.value))})]})]})}exports.ComboRow=r;
+const e=require("./ComboRow.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({title:r,subtitle:i,leading:a,options:o,value:s,defaultValue:c,onValueChange:l,disabled:u=!1,className:d,...f})=>{let p=s!==void 0,[m,h]=(0,t.useState)(c),g=p?s:m,[_,v]=(0,t.useState)(!1),[y,b]=(0,t.useState)(-1),[x,S]=(0,t.useState)(!1),C=(0,t.useId)(),w=(0,t.useId)(),T=(0,t.useRef)(null),E=(0,t.useRef)(null),D=o.find(e=>e.value===g),O=(0,t.useCallback)(()=>{if(!T.current)return;let e=T.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(o.length*44+8,260);S(t<n&&e.top>n)},[o.length]),k=(0,t.useCallback)(()=>{if(u)return;O(),v(!0);let e=o.findIndex(e=>e.value===g&&!e.disabled);b(e>=0?e:o.findIndex(e=>!e.disabled))},[u,O,o,g]),A=(0,t.useCallback)(()=>{v(!1),b(-1),T.current?.focus()},[]),j=(0,t.useCallback)(e=>{e.disabled||(p||h(e.value),l?.(e.value),A())},[p,l,A]);(0,t.useEffect)(()=>{!_||y<0||!E.current||E.current.children[y]?.scrollIntoView({block:`nearest`})},[y,_]),(0,t.useEffect)(()=>{if(!_)return;let e=e=>{!T.current?.contains(e.target)&&!E.current?.contains(e.target)&&A()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_,A]);let M=(0,t.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),k();break;case`ArrowUp`:e.preventDefault(),O(),v(!0),b(o.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[k,O,o]),N=(0,t.useCallback)(e=>{let t=o.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(y);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];b(r??y);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];b(r??y);break}case`Home`:e.preventDefault(),b(t[0]??-1);break;case`End`:e.preventDefault(),b(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),y>=0&&j(o[y]);break;case`Escape`:case`Tab`:A();break}},[o,y,j,A]);return(0,n.jsxs)(`div`,{className:[e.default.row,u?e.default.disabled:null,d].filter(Boolean).join(` `),...f,children:[a&&(0,n.jsx)(`span`,{className:e.default.leading,children:a}),(0,n.jsxs)(`span`,{className:e.default.content,children:[(0,n.jsx)(`span`,{className:e.default.title,children:r}),i&&(0,n.jsx)(`span`,{className:e.default.subtitle,children:i})]}),(0,n.jsxs)(`div`,{className:e.default.comboWrap,children:[(0,n.jsxs)(`button`,{ref:T,id:C,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":_,"aria-controls":w,"aria-activedescendant":_&&y>=0?`${w}-opt-${y}`:void 0,disabled:u,className:[e.default.trigger,_?e.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>_?A():k(),onKeyDown:M,children:[(0,n.jsx)(`span`,{className:[e.default.triggerLabel,D?null:e.default.placeholder].filter(Boolean).join(` `),children:D?.label??`—`}),(0,n.jsx)(`svg`,{className:[e.default.chevron,_?e.default.chevronOpen:null].filter(Boolean).join(` `),width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,focusable:`false`,children:(0,n.jsx)(`path`,{d:`M4 6l4 4 4-4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})]}),_&&(0,n.jsx)(`ul`,{ref:E,id:w,"aria-labelledby":C,tabIndex:-1,className:[e.default.list,x?e.default.listUp:e.default.listDown].filter(Boolean).join(` `),onKeyDown:N,children:o.map((t,r)=>(0,n.jsxs)(`li`,{id:`${w}-opt-${r}`,"aria-selected":t.value===g,"aria-disabled":t.disabled,className:[e.default.option,t.value===g?e.default.optionSelected:null,r===y?e.default.optionActive:null,t.disabled?e.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!t.disabled&&b(r),onClick:()=>j(t),children:[(0,n.jsx)(`span`,{className:e.default.optionLabel,children:t.label}),t.value===g&&(0,n.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,focusable:`false`,className:e.default.checkIcon,children:(0,n.jsx)(`path`,{d:`M3 8l4 4 6-6`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.75`,strokeLinecap:`round`,strokeLinejoin:`round`})})]},t.value))})]})]})};exports.ComboRow=r;
 //# sourceMappingURL=ComboRow.cjs.map

package/dist/components/ComboRow/ComboRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ComboRow.module.css';\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(opt.value);\n      }\n\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span\n            className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {selected?.label ?? '—'}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    className={styles.checkIcon}\n                  >\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ComboRow.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ComboRow.module.css';\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport const ComboRow = <V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) => {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(opt.value);\n      }\n\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span\n            className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {selected?.label ?? '—'}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    className={styles.checkIcon}\n                  >\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ComboRow/ComboRow.d.ts

@@ -31,4 +31,4 @@ export interface ComboRowProps<V extends string = string> extends Omit<HTMLAttri
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html
  */
-export declare function ComboRow<V extends string = string>({ title, subtitle, leading, options, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }: ComboRowProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare const ComboRow: <V extends string = string>({ title, subtitle, leading, options, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }: ComboRowProps<V>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ComboRow/ComboRow.js

@@ -2,7 +2,7 @@ import e from "./ComboRow.module.css.js";
 import { useCallback as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/ComboRow/ComboRow.tsx
-function c({ title: c, subtitle: l, leading: u, options: d, value: f, defaultValue: p, onValueChange: m, disabled: h = !1, className: g, ..._ }) {
+var c = ({ title: c, subtitle: l, leading: u, options: d, value: f, defaultValue: p, onValueChange: m, disabled: h = !1, className: g, ..._ }) => {
 	let v = f !== void 0, [y, b] = a(p), x = v ? f : y, [S, C] = a(!1), [w, T] = a(-1), [E, D] = a(!1), O = r(), k = r(), A = i(null), j = i(null), M = d.find((e) => e.value === x), N = t(() => {
 		if (!A.current) return;
 		let e = A.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(d.length * 44 + 8, 260);
@@ -188,7 +188,7 @@ function c({ title: c, subtitle: l, leading: u, options: d, value: f, defaultVal
 			})
 		]
 	});
-}
+};
 //#endregion
 export { c as ComboRow };
 

package/dist/components/ComboRow/ComboRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ComboRow.module.css';\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(opt.value);\n      }\n\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span\n            className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {selected?.label ?? '—'}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    className={styles.checkIcon}\n                  >\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ComboRow.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ComboRow.module.css';\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport const ComboRow = <V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) => {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(opt.value);\n      }\n\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span\n            className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {selected?.label ?? '—'}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    className={styles.checkIcon}\n                  >\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ComboRow/ComboRow.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_row_1rib3_3`,t=`_disabled_1rib3_16`,n=`_leading_1rib3_23`,r=`_content_1rib3_32`,i=`_title_1rib3_40`,a=`_subtitle_1rib3_51`,o=`_comboWrap_1rib3_65`,s=`_trigger_1rib3_73`,c=`_triggerOpen_1rib3_126`,l=`_triggerLabel_1rib3_136`,u=`_placeholder_1rib3_144`,d=`_chevron_1rib3_150`,f=`_chevronOpen_1rib3_157`,p=`_list_1rib3_163`,m=`_listDown_1rib3_200`,h=`_listUp_1rib3_204`,g=`_option_1rib3_224`,_=`_optionActive_1rib3_241`,v=`_optionSelected_1rib3_245`,y=`_optionDisabled_1rib3_249`,b=`_optionLabel_1rib3_255`,x=`_checkIcon_1rib3_263`,S={row:e,disabled:t,leading:n,content:r,title:i,subtitle:a,comboWrap:o,trigger:s,triggerOpen:c,triggerLabel:l,placeholder:u,chevron:d,chevronOpen:f,list:p,"list-in":`_list-in_1rib3_1`,listDown:m,listUp:h,"list-in-up":`_list-in-up_1rib3_1`,option:g,optionActive:_,optionSelected:v,optionDisabled:y,optionLabel:b,checkIcon:x};exports.default=S;
+var e={row:`_row_1rib3_3`,disabled:`_disabled_1rib3_16`,leading:`_leading_1rib3_23`,content:`_content_1rib3_32`,title:`_title_1rib3_40`,subtitle:`_subtitle_1rib3_51`,comboWrap:`_comboWrap_1rib3_65`,trigger:`_trigger_1rib3_73`,triggerOpen:`_triggerOpen_1rib3_126`,triggerLabel:`_triggerLabel_1rib3_136`,placeholder:`_placeholder_1rib3_144`,chevron:`_chevron_1rib3_150`,chevronOpen:`_chevronOpen_1rib3_157`,list:`_list_1rib3_163`,"list-in":`_list-in_1rib3_1`,listDown:`_listDown_1rib3_200`,listUp:`_listUp_1rib3_204`,"list-in-up":`_list-in-up_1rib3_1`,option:`_option_1rib3_224`,optionActive:`_optionActive_1rib3_241`,optionSelected:`_optionSelected_1rib3_245`,optionDisabled:`_optionDisabled_1rib3_249`,optionLabel:`_optionLabel_1rib3_255`,checkIcon:`_checkIcon_1rib3_263`};exports.default=e;
 //# sourceMappingURL=ComboRow.module.css.cjs.map

package/dist/components/ComboRow/ComboRow.module.css.js

@@ -1,31 +1,30 @@
-//#region src/components/ComboRow/ComboRow.module.css
-var e = "_row_1rib3_3", t = "_disabled_1rib3_16", n = "_leading_1rib3_23", r = "_content_1rib3_32", i = "_title_1rib3_40", a = "_subtitle_1rib3_51", o = "_comboWrap_1rib3_65", s = "_trigger_1rib3_73", c = "_triggerOpen_1rib3_126", l = "_triggerLabel_1rib3_136", u = "_placeholder_1rib3_144", d = "_chevron_1rib3_150", f = "_chevronOpen_1rib3_157", p = "_list_1rib3_163", m = "_listDown_1rib3_200", h = "_listUp_1rib3_204", g = "_option_1rib3_224", _ = "_optionActive_1rib3_241", v = "_optionSelected_1rib3_245", y = "_optionDisabled_1rib3_249", b = "_optionLabel_1rib3_255", x = "_checkIcon_1rib3_263", S = {
-	row: e,
-	disabled: t,
-	leading: n,
-	content: r,
-	title: i,
-	subtitle: a,
-	comboWrap: o,
-	trigger: s,
-	triggerOpen: c,
-	triggerLabel: l,
-	placeholder: u,
-	chevron: d,
-	chevronOpen: f,
-	list: p,
+var e = {
+	row: "_row_1rib3_3",
+	disabled: "_disabled_1rib3_16",
+	leading: "_leading_1rib3_23",
+	content: "_content_1rib3_32",
+	title: "_title_1rib3_40",
+	subtitle: "_subtitle_1rib3_51",
+	comboWrap: "_comboWrap_1rib3_65",
+	trigger: "_trigger_1rib3_73",
+	triggerOpen: "_triggerOpen_1rib3_126",
+	triggerLabel: "_triggerLabel_1rib3_136",
+	placeholder: "_placeholder_1rib3_144",
+	chevron: "_chevron_1rib3_150",
+	chevronOpen: "_chevronOpen_1rib3_157",
+	list: "_list_1rib3_163",
 	"list-in": "_list-in_1rib3_1",
-	listDown: m,
-	listUp: h,
+	listDown: "_listDown_1rib3_200",
+	listUp: "_listUp_1rib3_204",
 	"list-in-up": "_list-in-up_1rib3_1",
-	option: g,
-	optionActive: _,
-	optionSelected: v,
-	optionDisabled: y,
-	optionLabel: b,
-	checkIcon: x
+	option: "_option_1rib3_224",
+	optionActive: "_optionActive_1rib3_241",
+	optionSelected: "_optionSelected_1rib3_245",
+	optionDisabled: "_optionDisabled_1rib3_249",
+	optionLabel: "_optionLabel_1rib3_255",
+	checkIcon: "_checkIcon_1rib3_263"
 };
 //#endregion
-export { S as default };
+export { e as default };
 
 //# sourceMappingURL=ComboRow.module.css.js.map

package/dist/components/ComboRow.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ComboRow/ComboRow.cjs`);exports.ComboRow=e.ComboRow;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ComboRow/ComboRow.cjs");exports.ComboRow=e.ComboRow;

package/dist/components/ContributionGraph/ContributionGraph.cjs

@@ -1,2 +1,2 @@
-const e=require(`../GnomeProvider/GnomeContext.cjs`),t=require(`./ContributionGraph.module.css.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);var a=new Date(2e3,0,2);function o(e,t){return t.format(new Date(2e3,e))}function s(e,t){let n=new Date(a);return n.setDate(a.getDate()+e),t.format(n)}var c=28,l=20,u=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function ee(e){return[`var(--gnome-card-shade-color)`,`var(--gnome-${e}-1)`,`var(--gnome-${e}-2)`,`var(--gnome-${e}-4)`,`var(--gnome-${e}-5)`]}function d(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(e,t){return t.format(f(e))}function m({data:a,maxLevel:f=4,cellSize:m=12,cellGap:h=3,responsive:g=!0,minCellSize:te=8,maxCellSize:ne=24,weekStartDay:_=1,showMonthLabels:v=!0,showDayLabels:y=!0,showLegend:re=!0,weeks:b=52,ariaLabel:x=`Contribution graph`,onDayClick:S,tooltipContent:ie,className:ae}){let C=e.useDateTimeFormatter({month:`short`}),w=e.useDateTimeFormatter({weekday:`short`}),T=e.useDateTimeFormatter({weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}),{accentColor:E}=(0,n.useContext)(e.GnomeContext),D=u.has(E)?E:`green`,O=(0,n.useRef)(null),k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>ee(D),[D]),[M,N]=(0,n.useState)(null),[P,F]=(0,n.useState)({col:0,row:0}),[I,L]=(0,n.useState)(null),[R,z]=(0,n.useState)(null);(0,n.useEffect)(()=>{if(!g)return;let e=k.current;if(!e)return;let t=()=>{let t=e.clientWidth||e.getBoundingClientRect().width;t>0&&N(t)};if(t(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,t),()=>window.removeEventListener(`resize`,t);let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[g]),(0,n.useEffect)(()=>{if(!I)return;let e=()=>{let e=A.current;if(!e)return;let t=I.target.getBoundingClientRect(),n=e.getBoundingClientRect(),r=document.documentElement.clientWidth||window.innerWidth,i=document.documentElement.clientHeight||window.innerHeight,a=Math.max(8,r-n.width-8),o=Math.max(8,i-n.height-8),s=t.left+t.width/2-n.width/2,c=t.top-n.height-6,l=c>=8?c:t.bottom+6;z({left:Math.max(8,Math.min(s,a)),top:Math.max(8,Math.min(l,o))})};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,{capture:!0})}},[I]);let B=(0,n.useMemo)(()=>{let e=new Map;for(let t of a)e.set(t.date,t.count);return e},[a]),V=(0,n.useMemo)(()=>Math.max(1,...a.map(e=>e.count)),[a]),H=y?c:0,U=v?l:0,W=Math.max(1,Math.floor(b)),G=Math.max(1,te),K=Math.max(G,ne),q=(0,n.useMemo)(()=>{if(!g||M===null)return{cellSize:m,weeks:W};let e=Math.max(0,M-H),t=(e+h)/W-h;if(t>=G)return{cellSize:Math.min(K,t),weeks:W};let n=Math.floor((e+h)/(G+h));return{cellSize:G,weeks:Math.max(1,Math.min(W,n))}},[M,h,m,W,H,K,G,g]),J=q.weeks,Y=q.cellSize,X=Y+h,{grid:Z,monthLabels:oe}=(0,n.useMemo)(()=>{let e=new Date;e.setHours(0,0,0,0);let t=(e.getDay()-_+7)%7,n=new Date(e);n.setDate(e.getDate()-t);let r=new Date(n);r.setDate(n.getDate()-(J-1)*7);let i=[],a=[],s=-1;for(let t=0;t<J;t++){let n=new Date(r);n.setDate(r.getDate()+t*7),n.getMonth()!==s&&(a.push({col:t,month:o(n.getMonth(),C)}),s=n.getMonth());let c=[];for(let n=0;n<7;n++){let i=new Date(r);i.setDate(r.getDate()+t*7+n);let a=i>e,o=d(i),s=a?0:B.get(o)??0,l=s===0?0:Math.min(f,Math.ceil(s/V*f));c.push({iso:o,count:s,level:l,future:a})}i.push(c)}return{grid:i,monthLabels:a}},[B,V,f,J,_,C]),se=(0,n.useMemo)(()=>[1,3,5].map(e=>({row:(e-_+7)%7,label:s(e,w)})),[_,w]),ce=H+J*X-h,le=U+7*X-h,Q=Math.min(4,Math.floor(Y/3));(0,n.useEffect)(()=>{F(e=>({col:Math.min(J-1,e.col),row:e.row}))},[J]);function ue(e,t){let n=Math.max(0,Math.min(J-1,e)),r=Math.max(0,Math.min(6,t));F({col:n,row:r}),O.current?.querySelector(`[data-col="${n}"][data-row="${r}"]`)?.focus()}function $(e,t,n){let r={ArrowRight:[t+1,n],ArrowLeft:[t-1,n],ArrowDown:[t,n+1],ArrowUp:[t,n-1]};if(r[e.key])e.preventDefault(),ue(...r[e.key]);else if(e.key===`Enter`||e.key===` `){e.preventDefault();let r=Z[t]?.[n];r&&!r.future&&S?.({date:r.iso,count:r.count})}}function de(e,t){z(null),L({target:e.currentTarget,text:t})}function fe(){L(null),z(null)}function pe(e){return e.future?j[0]:j[Math.min(e.level,j.length-1)]??j[j.length-1]}function me(e){if(e.future)return p(e.iso,T);let t=p(e.iso,T);return ie?.({date:e.iso,count:e.count})??`${e.count} contribution${e.count===1?``:`s`} on ${t}`}return(0,i.jsxs)(`div`,{className:[t.default.wrapper,ae].filter(Boolean).join(` `),children:[(0,i.jsx)(`div`,{ref:k,className:t.default.graphViewport,children:(0,i.jsxs)(`svg`,{ref:O,width:ce,height:le,className:t.default.svg,"aria-label":x,role:`img`,"data-cell-size":Y,"data-visible-weeks":J,children:[v&&oe.map(({col:e,month:n})=>(0,i.jsx)(`text`,{x:H+e*X,y:12,className:t.default.label,children:n},`m-${e}`)),y&&se.map(({row:e,label:n})=>(0,i.jsx)(`text`,{x:0,y:U+e*X+Y-1,className:t.default.label,children:n},`d-${e}`)),(0,i.jsx)(`g`,{role:`grid`,"aria-label":x,children:Z.map((e,n)=>(0,i.jsx)(`g`,{role:`row`,children:e.map((e,r)=>{let a=me(e),o=P.col===n&&P.row===r;return(0,i.jsx)(`rect`,{"data-col":n,"data-row":r,x:H+n*X,y:U+r*X,width:Y,height:Y,rx:Q,fill:pe(e),opacity:e.future?.35:1,className:t.default.cell,role:`gridcell`,"aria-label":a,"aria-disabled":e.future||void 0,tabIndex:o?0:-1,onClick:()=>!e.future&&S?.({date:e.iso,count:e.count}),onKeyDown:e=>$(e,n,r),onFocus:()=>F({col:n,row:r}),onMouseEnter:e=>de(e,a),onMouseLeave:fe},`${n}-${r}`)})},n))})]})}),I&&typeof document<`u`&&(0,r.createPortal)((0,i.jsx)(`div`,{ref:A,className:t.default.tooltip,style:R?{left:R.left,top:R.top}:{visibility:`hidden`,left:0,top:0},role:`tooltip`,children:I.text}),document.body),re&&(0,i.jsxs)(`div`,{className:t.default.legend,children:[(0,i.jsx)(`span`,{className:t.default.legendLabel,children:`Less`}),Array.from({length:f+1},(e,n)=>(0,i.jsx)(`svg`,{width:Y,height:Y,"aria-hidden":`true`,className:t.default.legendCell,children:(0,i.jsx)(`rect`,{width:Y,height:Y,rx:Q,fill:j[Math.min(n,j.length-1)]})},n)),(0,i.jsx)(`span`,{className:t.default.legendLabel,children:`More`})]})]})}exports.ContributionGraph=m;
+const e=require("../GnomeProvider/GnomeContext.cjs"),t=require("./ContributionGraph.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=new Date(2e3,0,2);function o(e,t){return t.format(new Date(2e3,e))}function s(e,t){let n=new Date(a);return n.setDate(a.getDate()+e),t.format(n)}var c=28,l=20,u=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function ee(e){return[`var(--gnome-card-shade-color)`,`var(--gnome-${e}-1)`,`var(--gnome-${e}-2)`,`var(--gnome-${e}-4)`,`var(--gnome-${e}-5)`]}function d(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(e,t){return t.format(f(e))}var m=({data:a,maxLevel:f=4,cellSize:m=12,cellGap:h=3,responsive:g=!0,minCellSize:te=8,maxCellSize:ne=24,weekStartDay:_=1,showMonthLabels:v=!0,showDayLabels:y=!0,showLegend:re=!0,weeks:b=52,ariaLabel:x=`Contribution graph`,onDayClick:S,tooltipContent:ie,className:ae})=>{let C=e.useDateTimeFormatter({month:`short`}),w=e.useDateTimeFormatter({weekday:`short`}),T=e.useDateTimeFormatter({weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}),{accentColor:E}=(0,n.useContext)(e.GnomeContext),D=u.has(E)?E:`green`,O=(0,n.useRef)(null),k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>ee(D),[D]),[M,N]=(0,n.useState)(null),[P,F]=(0,n.useState)({col:0,row:0}),[I,L]=(0,n.useState)(null),[R,z]=(0,n.useState)(null);(0,n.useEffect)(()=>{if(!g)return;let e=k.current;if(!e)return;let t=()=>{let t=e.clientWidth||e.getBoundingClientRect().width;t>0&&N(t)};if(t(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,t),()=>window.removeEventListener(`resize`,t);let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[g]),(0,n.useEffect)(()=>{if(!I)return;let e=()=>{let e=A.current;if(!e)return;let t=I.target.getBoundingClientRect(),n=e.getBoundingClientRect(),r=document.documentElement.clientWidth||window.innerWidth,i=document.documentElement.clientHeight||window.innerHeight,a=Math.max(8,r-n.width-8),o=Math.max(8,i-n.height-8),s=t.left+t.width/2-n.width/2,c=t.top-n.height-6,l=c>=8?c:t.bottom+6;z({left:Math.max(8,Math.min(s,a)),top:Math.max(8,Math.min(l,o))})};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,{capture:!0})}},[I]);let B=(0,n.useMemo)(()=>{let e=new Map;for(let t of a)e.set(t.date,t.count);return e},[a]),V=(0,n.useMemo)(()=>Math.max(1,...a.map(e=>e.count)),[a]),H=y?c:0,U=v?l:0,W=Math.max(1,Math.floor(b)),G=Math.max(1,te),K=Math.max(G,ne),q=(0,n.useMemo)(()=>{if(!g||M===null)return{cellSize:m,weeks:W};let e=Math.max(0,M-H),t=(e+h)/W-h;if(t>=G)return{cellSize:Math.min(K,t),weeks:W};let n=Math.floor((e+h)/(G+h));return{cellSize:G,weeks:Math.max(1,Math.min(W,n))}},[M,h,m,W,H,K,G,g]),J=q.weeks,Y=q.cellSize,X=Y+h,{grid:Z,monthLabels:oe}=(0,n.useMemo)(()=>{let e=new Date;e.setHours(0,0,0,0);let t=(e.getDay()-_+7)%7,n=new Date(e);n.setDate(e.getDate()-t);let r=new Date(n);r.setDate(n.getDate()-(J-1)*7);let i=[],a=[],s=-1;for(let t=0;t<J;t++){let n=new Date(r);n.setDate(r.getDate()+t*7),n.getMonth()!==s&&(a.push({col:t,month:o(n.getMonth(),C)}),s=n.getMonth());let c=[];for(let n=0;n<7;n++){let i=new Date(r);i.setDate(r.getDate()+t*7+n);let a=i>e,o=d(i),s=a?0:B.get(o)??0,l=s===0?0:Math.min(f,Math.ceil(s/V*f));c.push({iso:o,count:s,level:l,future:a})}i.push(c)}return{grid:i,monthLabels:a}},[B,V,f,J,_,C]),se=(0,n.useMemo)(()=>[1,3,5].map(e=>({row:(e-_+7)%7,label:s(e,w)})),[_,w]),ce=H+J*X-h,le=U+7*X-h,Q=Math.min(4,Math.floor(Y/3));(0,n.useEffect)(()=>{F(e=>({col:Math.min(J-1,e.col),row:e.row}))},[J]);function ue(e,t){let n=Math.max(0,Math.min(J-1,e)),r=Math.max(0,Math.min(6,t));F({col:n,row:r}),O.current?.querySelector(`[data-col="${n}"][data-row="${r}"]`)?.focus()}function $(e,t,n){let r={ArrowRight:[t+1,n],ArrowLeft:[t-1,n],ArrowDown:[t,n+1],ArrowUp:[t,n-1]};if(r[e.key])e.preventDefault(),ue(...r[e.key]);else if(e.key===`Enter`||e.key===` `){e.preventDefault();let r=Z[t]?.[n];r&&!r.future&&S?.({date:r.iso,count:r.count})}}function de(e,t){z(null),L({target:e.currentTarget,text:t})}function fe(){L(null),z(null)}function pe(e){return e.future?j[0]:j[Math.min(e.level,j.length-1)]??j[j.length-1]}function me(e){if(e.future)return p(e.iso,T);let t=p(e.iso,T);return ie?.({date:e.iso,count:e.count})??`${e.count} contribution${e.count===1?``:`s`} on ${t}`}return(0,i.jsxs)(`div`,{className:[t.default.wrapper,ae].filter(Boolean).join(` `),children:[(0,i.jsx)(`div`,{ref:k,className:t.default.graphViewport,children:(0,i.jsxs)(`svg`,{ref:O,width:ce,height:le,className:t.default.svg,"aria-label":x,role:`img`,"data-cell-size":Y,"data-visible-weeks":J,children:[v&&oe.map(({col:e,month:n})=>(0,i.jsx)(`text`,{x:H+e*X,y:12,className:t.default.label,children:n},`m-${e}`)),y&&se.map(({row:e,label:n})=>(0,i.jsx)(`text`,{x:0,y:U+e*X+Y-1,className:t.default.label,children:n},`d-${e}`)),(0,i.jsx)(`g`,{role:`grid`,"aria-label":x,children:Z.map((e,n)=>(0,i.jsx)(`g`,{role:`row`,children:e.map((e,r)=>{let a=me(e),o=P.col===n&&P.row===r;return(0,i.jsx)(`rect`,{"data-col":n,"data-row":r,x:H+n*X,y:U+r*X,width:Y,height:Y,rx:Q,fill:pe(e),opacity:e.future?.35:1,className:t.default.cell,role:`gridcell`,"aria-label":a,"aria-disabled":e.future||void 0,tabIndex:o?0:-1,onClick:()=>!e.future&&S?.({date:e.iso,count:e.count}),onKeyDown:e=>$(e,n,r),onFocus:()=>F({col:n,row:r}),onMouseEnter:e=>de(e,a),onMouseLeave:fe},`${n}-${r}`)})},n))})]})}),I&&typeof document<`u`&&(0,r.createPortal)((0,i.jsx)(`div`,{ref:A,className:t.default.tooltip,style:R?{left:R.left,top:R.top}:{visibility:`hidden`,left:0,top:0},role:`tooltip`,children:I.text}),document.body),re&&(0,i.jsxs)(`div`,{className:t.default.legend,children:[(0,i.jsx)(`span`,{className:t.default.legendLabel,children:`Less`}),Array.from({length:f+1},(e,n)=>(0,i.jsx)(`svg`,{width:Y,height:Y,"aria-hidden":`true`,className:t.default.legendCell,children:(0,i.jsx)(`rect`,{width:Y,height:Y,rx:Q,fill:j[Math.min(n,j.length-1)]})},n)),(0,i.jsx)(`span`,{className:t.default.legendLabel,children:`More`})]})]})};exports.ContributionGraph=m;
 //# sourceMappingURL=ContributionGraph.cjs.map