npm - @gnome-ui/react - Versions diffs - 1.45.0 → 1.45.1 - Mend

@gnome-ui/react 1.45.0 → 1.45.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (610) hide show

package/dist/components/ColorPicker/ColorPicker.module.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.module.css.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── /\n\n.picker {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n}\n\n/ ─── Swatch ──────────────────────────────────────────────────────────────── /\n\n.swatch {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--gnome-radius-pill);\n border: none;\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n\n background-color: var(--swatch-color, #3584e4);\n\n / Unselected: subtle inner shadow for depth /\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n\n transition:\n transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n outline: none;\n}\n\n/ ── Sizes ── /\n\n.swatch-sm { width: 22px; height: 22px; }\n.swatch-md { width: 30px; height: 30px; }\n.swatch-lg { width: 38px; height: 38px; }\n\n/ ── Hover ── /\n\n.swatch:hover:not(:disabled) {\n transform: scale(1.12);\n}\n\n/ ── Focus ring ── /\n\n.swatch:focus-visible {\n box-shadow:\n inset 0 0 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Selected ──\n White inner ring + outer ring in the swatch color → \"halo\" effect. /\n\n.swatchSelected {\n transform: scale(1.05);\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Disabled ── /\n\n.swatch:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n transform: none;\n}\n\n/ ─── Checkmark icon ─────────────────────────────────────────────────────── /\n\n.checkmark {\n width: 55%;\n height: 55%;\n flex-shrink: 0;\n / Drop shadow so the check reads on light-colored swatches (yellow, etc.) /\n filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));\n}\n\n/ ─── Custom \"+\" button ──────────────────────────────────────────────────── /\n\n.customButton {\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px dashed var(--gnome-card-shade-color, rgba(0, 0, 0, 0.2));\n box-shadow: none;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-card-bg-color, #ffffff) 88~~%,\n~~ black 12~~%\n~~ );\n transform: scale(1.08);\n}\n\n.plusIcon {\n width: 50%;\n height: 50%;\n}\n\n/ ─── Hidden native input ────────────────────────────────────────────────── /\n\n.nativeInput {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/ ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .swatch {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n }\n\n .swatchSelected {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.85),\n 0 0 0 2px var(--swatch-color);\n }\n\n .customButton {\n border-color: rgba(255, 255, 255, 0.25);\n color: rgba(255, 255, 255, 0.7);\n }\n\n .customButton:hover:not(:disabled) {\n background-color: color-mix(\n in srgb,\n var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 80%,\n white 20%\n );\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ColorPicker.module.css.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── /\n\n.picker {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n}\n\n/ ─── Swatch ──────────────────────────────────────────────────────────────── /\n\n.swatch {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--gnome-radius-pill);\n border: none;\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n\n background-color: var(--swatch-color, #3584e4);\n\n / Unselected: subtle inner shadow for depth /\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n\n transition:\n transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n outline: none;\n}\n\n/ ── Sizes ── /\n\n.swatch-sm {\n width: 22px;\n height: 22px;\n}\n.swatch-md {\n width: 30px;\n height: 30px;\n}\n.swatch-lg {\n width: 38px;\n height: 38px;\n}\n\n/ ── Hover ── /\n\n.swatch:hover:not(:disabled) {\n transform: scale(1.12);\n}\n\n/ ── Focus ring ── /\n\n.swatch:focus-visible {\n box-shadow:\n inset 0 0 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Selected ──\n White inner ring + outer ring in the swatch color → \"halo\" effect. /\n\n.swatchSelected {\n transform: scale(1.05);\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Disabled ── /\n\n.swatch:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n transform: none;\n}\n\n/ ─── Checkmark icon ─────────────────────────────────────────────────────── /\n\n.checkmark {\n width: 55%;\n height: 55%;\n flex-shrink: 0;\n / Drop shadow so the check reads on light-colored swatches (yellow, etc.) /\n filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));\n}\n\n/ ─── Custom \"+\" button ──────────────────────────────────────────────────── /\n\n.customButton {\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px dashed var(--gnome-card-shade-color, rgba(0, 0, 0, 0.2));\n box-shadow: none;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n transform: scale(1.08);\n}\n\n.plusIcon {\n width: 50%;\n height: 50%;\n}\n\n/ ─── Hidden native input ────────────────────────────────────────────────── /\n\n.nativeInput {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/ ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .swatch {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n }\n\n .swatchSelected {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.85),\n 0 0 0 2px var(--swatch-color);\n }\n\n .customButton {\n border-color: rgba(255, 255, 255, 0.25);\n color: rgba(255, 255, 255, 0.7);\n }\n\n .customButton:hover:not(:disabled) {\n background-color: color-mix(\n in srgb,\n var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 80%,\n white 20%\n );\n }\n}\n"],"mappings":""}

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

@@ -1,10 +1,10 @@
 //#region src/components/ColorPicker/ColorPicker.module.css
-var e = "_picker_qgzmq_3", t = "_swatch_qgzmq_12", n = "_swatchSelected_qgzmq_60", r = "_checkmark_qgzmq_86", i = "_customButton_qgzmq_96", a = "_plusIcon_qgzmq_112", o = "_nativeInput_qgzmq_119", s = {
+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_qgzmq_37",
-	"swatch-md": "_swatch-md_qgzmq_38",
-	"swatch-lg": "_swatch-lg_qgzmq_39",
+	"swatch-sm": "_swatch-sm_50hw4_37",
+	"swatch-md": "_swatch-md_50hw4_41",
+	"swatch-lg": "_swatch-lg_50hw4_45",
 	swatchSelected: n,
 	checkmark: r,
 	customButton: i,

package/dist/components/ColorPicker/ColorPicker.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.module.css.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── /\n\n.picker {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n}\n\n/ ─── Swatch ──────────────────────────────────────────────────────────────── /\n\n.swatch {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--gnome-radius-pill);\n border: none;\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n\n background-color: var(--swatch-color, #3584e4);\n\n / Unselected: subtle inner shadow for depth /\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n\n transition:\n transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n outline: none;\n}\n\n/ ── Sizes ── /\n\n.swatch-sm { width: 22px; height: 22px; }\n.swatch-md { width: 30px; height: 30px; }\n.swatch-lg { width: 38px; height: 38px; }\n\n/ ── Hover ── /\n\n.swatch:hover:not(:disabled) {\n transform: scale(1.12);\n}\n\n/ ── Focus ring ── /\n\n.swatch:focus-visible {\n box-shadow:\n inset 0 0 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Selected ──\n White inner ring + outer ring in the swatch color → \"halo\" effect. /\n\n.swatchSelected {\n transform: scale(1.05);\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Disabled ── /\n\n.swatch:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n transform: none;\n}\n\n/ ─── Checkmark icon ─────────────────────────────────────────────────────── /\n\n.checkmark {\n width: 55%;\n height: 55%;\n flex-shrink: 0;\n / Drop shadow so the check reads on light-colored swatches (yellow, etc.) /\n filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));\n}\n\n/ ─── Custom \"+\" button ──────────────────────────────────────────────────── /\n\n.customButton {\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px dashed var(--gnome-card-shade-color, rgba(0, 0, 0, 0.2));\n box-shadow: none;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-card-bg-color, #ffffff) 88~~%,\n~~ black 12~~%\n~~ );\n transform: scale(1.08);\n}\n\n.plusIcon {\n width: 50%;\n height: 50%;\n}\n\n/ ─── Hidden native input ────────────────────────────────────────────────── /\n\n.nativeInput {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/ ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .swatch {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n }\n\n .swatchSelected {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.85),\n 0 0 0 2px var(--swatch-color);\n }\n\n .customButton {\n border-color: rgba(255, 255, 255, 0.25);\n color: rgba(255, 255, 255, 0.7);\n }\n\n .customButton:hover:not(:disabled) {\n background-color: color-mix(\n in srgb,\n var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 80%,\n white 20%\n );\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ColorPicker.module.css.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── /\n\n.picker {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n}\n\n/ ─── Swatch ──────────────────────────────────────────────────────────────── /\n\n.swatch {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--gnome-radius-pill);\n border: none;\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n\n background-color: var(--swatch-color, #3584e4);\n\n / Unselected: subtle inner shadow for depth /\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n\n transition:\n transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n outline: none;\n}\n\n/ ── Sizes ── /\n\n.swatch-sm {\n width: 22px;\n height: 22px;\n}\n.swatch-md {\n width: 30px;\n height: 30px;\n}\n.swatch-lg {\n width: 38px;\n height: 38px;\n}\n\n/ ── Hover ── /\n\n.swatch:hover:not(:disabled) {\n transform: scale(1.12);\n}\n\n/ ── Focus ring ── /\n\n.swatch:focus-visible {\n box-shadow:\n inset 0 0 0 1px rgba(0, 0, 0, 0.15),\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Selected ──\n White inner ring + outer ring in the swatch color → \"halo\" effect. /\n\n.swatchSelected {\n transform: scale(1.05);\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n 0 0 0 2px var(--swatch-color),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ── Disabled ── /\n\n.swatch:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n transform: none;\n}\n\n/ ─── Checkmark icon ─────────────────────────────────────────────────────── /\n\n.checkmark {\n width: 55%;\n height: 55%;\n flex-shrink: 0;\n / Drop shadow so the check reads on light-colored swatches (yellow, etc.) /\n filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));\n}\n\n/ ─── Custom \"+\" button ──────────────────────────────────────────────────── /\n\n.customButton {\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px dashed var(--gnome-card-shade-color, rgba(0, 0, 0, 0.2));\n box-shadow: none;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n transform: scale(1.08);\n}\n\n.plusIcon {\n width: 50%;\n height: 50%;\n}\n\n/ ─── Hidden native input ────────────────────────────────────────────────── /\n\n.nativeInput {\n position: absolute;\n width: 0;\n height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/ ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .swatch {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n }\n\n .swatchSelected {\n box-shadow:\n inset 0 0 0 2px rgba(255, 255, 255, 0.85),\n 0 0 0 2px var(--swatch-color);\n }\n\n .customButton {\n border-color: rgba(255, 255, 255, 0.25);\n color: rgba(255, 255, 255, 0.7);\n }\n\n .customButton:hover:not(:disabled) {\n background-color: color-mix(\n in srgb,\n var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 80%,\n white 20%\n );\n }\n}\n"],"mappings":""}

package/dist/components/ColorPicker/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
+export type { ColorPickerColor, ColorPickerProps, ColorSwatchProps, ColorSwatchSize, } from './ColorPicker';
 export { ColorPicker, ColorSwatch, GNOME_PALETTE } from './ColorPicker';
-export type { ColorPickerProps, ColorPickerColor, ColorSwatchProps, ColorSwatchSize } from './ColorPicker';

package/dist/components/ColumnView/ColumnView.cjs CHANGED Viewed

@@ -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,role:`grid`,"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(` `),role:`row`,"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(` `),role:`gridcell`,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};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;
 //# sourceMappingURL=ColumnView.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnView.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type ReactNode, useRef, useState } from \"react\";\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) return;\n const next: SortDirection =\n sortState?.columnId === colId && sortState.direction === \"asc\"\n ? \"desc\"\n : \"asc\";\n onSort(colId, next);\n }\n\n function toggleRow(key: string \| number) {\n if (selectionMode === \"none\" \|\| !onSelectionChange) return;\n if (selectionMode === \"single\") {\n onSelectionChange(selectedSet.has(key) ? [] : [key]);\n } else {\n const next = new Set(selectedSet);\n next.has(key) ? next.delete(key) : next.add(key);\n onSelectionChange([...next]);\n }\n }\n\n function handleRowKey(\n e: React.KeyboardEvent,\n index: number,\n key: string \| number,\n ) {\n const rows_els =\n tbodyRef.current?.querySelectorAll<HTMLTableRowElement>(\"tr\") ?? [];\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = Math.min(rows.length - 1, index + 1);\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 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) return;\n onSelectionChange(checked ? rows.map(rowKey) : []);\n }\n\n const containerStyle: React.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 role=\"grid\"\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={\n rows.length > 0 && selectedRows.length === rows.length\n }\n ref={(el) => {\n if (el)\n el.indeterminate =\n selectedRows.length > 0 &&\n selectedRows.length < rows.length;\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 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={[\n styles.sortBtn,\n isSorted ? styles.sortBtnActive : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n onClick={() => handleSort(col.id)}\n >\n <span>{col.header}</span>\n <SortChevron\n direction={isSorted ? sortState!.direction : null}\n />\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 ?? (\n <span className={styles.emptyLabel}>No items</span>\n )}\n </td>\n </tr>\n ) : (\n rows.map((row, index) => {\n const key = rowKey(row);\n const isSelected = selectedSet.has(key);\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 role=\"row\"\n aria-selected={\n selectionMode !== \"none\" ? isSelected : undefined\n }\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={[\n styles.td,\n col.align ? ALIGN[col.align] : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n role=\"gridcell\"\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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"}
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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"}

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

@@ -6,14 +6,14 @@ export interface ColumnDef<TRow> {
     sortable?: boolean;
     /** CSS width value — e.g. "200px", "30%". */
     width?: string;
-    align?: "start" | "center" | "end";
+    align?: 'start' | 'center' | 'end';
 }
-export type SortDirection = "asc" | "desc";
+export type SortDirection = 'asc' | 'desc';
 export interface ColumnViewSortState {
     columnId: string;
     direction: SortDirection;
 }
-export type ColumnViewSelectionMode = "none" | "single" | "multiple";
+export type ColumnViewSelectionMode = 'none' | 'single' | 'multiple';
 export interface ColumnViewProps<TRow extends object = Record<string, unknown>> {
     columns: ColumnDef<TRow>[];
     rows: TRow[];

package/dist/components/ColumnView/ColumnView.js CHANGED Viewed

@@ -66,7 +66,6 @@ function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selected
 			style: k,
 			children: /* @__PURE__ */ a("table", {
 				className: e.table,
-				role: "grid",
 				"aria-label": v,
 				"aria-multiselectable": u === "multiple" || void 0,
 				children: [/* @__PURE__ */ i("thead", {
@@ -88,12 +87,12 @@ function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selected
 						return /* @__PURE__ */ i("th", {
 							className: [e.th, t.align ? o[t.align] : null].filter(Boolean).join(" "),
 							style: t.width ? { width: t.width } : void 0,
-							"aria-sort": n ? p.direction === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0,
+							"aria-sort": n ? p?.direction === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0,
 							children: t.sortable && m ? /* @__PURE__ */ a("button", {
 								type: "button",
 								className: [e.sortBtn, n ? e.sortBtnActive : null].filter(Boolean).join(" "),
 								onClick: () => T(t.id),
-								children: [/* @__PURE__ */ i("span", { children: t.header }), /* @__PURE__ */ i(s, { direction: n ? p.direction : null })]
+								children: [/* @__PURE__ */ i("span", { children: t.header }), /* @__PURE__ */ i(s, { direction: n ? p?.direction : null })]
 							}) : /* @__PURE__ */ i("span", {
 								className: e.headerLabel,
 								children: t.header
@@ -118,7 +117,6 @@ function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selected
 								c ? e.rowSelected : null,
 								u === "none" ? null : e.rowSelectable
 							].filter(Boolean).join(" "),
-							role: "row",
 							"aria-selected": u === "none" ? void 0 : c,
 							tabIndex: b === n ? 0 : -1,
 							onClick: () => E(s),
@@ -137,7 +135,6 @@ function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selected
 								})
 							}), r.map((r) => /* @__PURE__ */ i("td", {
 								className: [e.td, r.align ? o[r.align] : null].filter(Boolean).join(" "),
-								role: "gridcell",
 								children: r.cell(t, n)
 							}, r.id))]
 						}, s);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnView.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type ReactNode, useRef, useState } from \"react\";\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) return;\n const next: SortDirection =\n sortState?.columnId === colId && sortState.direction === \"asc\"\n ? \"desc\"\n : \"asc\";\n onSort(colId, next);\n }\n\n function toggleRow(key: string \| number) {\n if (selectionMode === \"none\" \|\| !onSelectionChange) return;\n if (selectionMode === \"single\") {\n onSelectionChange(selectedSet.has(key) ? [] : [key]);\n } else {\n const next = new Set(selectedSet);\n next.has(key) ? next.delete(key) : next.add(key);\n onSelectionChange([...next]);\n }\n }\n\n function handleRowKey(\n e: React.KeyboardEvent,\n index: number,\n key: string \| number,\n ) {\n const rows_els =\n tbodyRef.current?.querySelectorAll<HTMLTableRowElement>(\"tr\") ?? [];\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = Math.min(rows.length - 1, index + 1);\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 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) return;\n onSelectionChange(checked ? rows.map(rowKey) : []);\n }\n\n const containerStyle: React.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 role=\"grid\"\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={\n rows.length > 0 && selectedRows.length === rows.length\n }\n ref={(el) => {\n if (el)\n el.indeterminate =\n selectedRows.length > 0 &&\n selectedRows.length < rows.length;\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 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={[\n styles.sortBtn,\n isSorted ? styles.sortBtnActive : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n onClick={() => handleSort(col.id)}\n >\n <span>{col.header}</span>\n <SortChevron\n direction={isSorted ? sortState!.direction : null}\n />\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 ?? (\n <span className={styles.emptyLabel}>No items</span>\n )}\n </td>\n </tr>\n ) : (\n rows.map((row, index) => {\n const key = rowKey(row);\n const isSelected = selectedSet.has(key);\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 role=\"row\"\n aria-selected={\n selectionMode !== \"none\" ? isSelected : undefined\n }\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={[\n styles.td,\n col.align ? ALIGN[col.align] : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n role=\"gridcell\"\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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"}
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":"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"}

package/dist/components/ColumnView/ColumnView.module.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={outer:`_outer_1pg3h_3`,scroll:`_scroll_1pg3h_13`,table:`_table_1pg3h_20`,thead:`_thead_1pg3h_28`,th:`_th_1pg3h_28`,headerLabel:`_headerLabel_1pg3h_48`,sortBtn:`_sortBtn_1pg3h_55`,sortBtnActive:`_sortBtnActive_1pg3h_84`,sortActive:`_sortActive_1pg3h_89`,sortNeutral:`_sortNeutral_1pg3h_93`,tbody:`_tbody_1pg3h_99`,row:`_row_1pg3h_105`,rowSelectable:`_rowSelectable_1pg3h_114`,rowSelected:`_rowSelected_1pg3h_126`,td:`_td_1pg3h_144`,alignStart:`_alignStart_1pg3h_156`,alignCenter:`_alignCenter_1pg3h_160`,alignEnd:`_alignEnd_1pg3h_164`,checkboxCol:`_checkboxCol_1pg3h_170`,checkbox:`_checkbox_1pg3h_170`,emptyCell:`_emptyCell_1pg3h_186`,emptyLabel:`_emptyLabel_1pg3h_191`};exports.default=e;
+var e={outer:`_outer_1kote_3`,scroll:`_scroll_1kote_13`,table:`_table_1kote_20`,thead:`_thead_1kote_28`,th:`_th_1kote_28`,headerLabel:`_headerLabel_1kote_48`,sortBtn:`_sortBtn_1kote_55`,sortBtnActive:`_sortBtnActive_1kote_84`,sortActive:`_sortActive_1kote_89`,sortNeutral:`_sortNeutral_1kote_93`,tbody:`_tbody_1kote_99`,row:`_row_1kote_105`,rowSelectable:`_rowSelectable_1kote_114`,rowSelected:`_rowSelected_1kote_126`,td:`_td_1kote_136`,alignStart:`_alignStart_1kote_148`,alignCenter:`_alignCenter_1kote_152`,alignEnd:`_alignEnd_1kote_156`,checkboxCol:`_checkboxCol_1kote_162`,checkbox:`_checkbox_1kote_162`,emptyCell:`_emptyCell_1kote_178`,emptyLabel:`_emptyLabel_1kote_183`};exports.default=e;
 //# sourceMappingURL=ColumnView.module.css.cjs.map

package/dist/components/ColumnView/ColumnView.module.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnView.module.css.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── /\n\n.outer {\n border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n border-radius: var(--gnome-radius-lg, 12px);\n background: var(--gnome-card-bg-color, #ffffff);\n / overflow:clip clips to border-radius without creating a scroll ctx /\n overflow: clip;\n}\n\n/ ─── Scroll container ──────────────────────────────────────────────────────── /\n\n.scroll {\n overflow-y: auto;\n width: 100%;\n}\n\n/ ─── Table ─────────────────────────────────────────────────────────────────── /\n\n.table {\n width: 100%;\n border-collapse: collapse;\n table-layout: auto;\n}\n\n/ ─── Header ────────────────────────────────────────────────────────────────── /\n\n.thead {\n position: sticky;\n top: 0;\n z-index: 2;\n background: var(--gnome-card-bg-color, #ffffff);\n / Separator below sticky header /\n box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n padding: 0 var(--gnome-space-4, 24px);\n height: 40px;\n text-align: start;\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.headerLabel {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── Sort button ───────────────────────────────────────────────────────────── /\n\n.sortBtn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n appearance: none;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font: inherit;\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n outline: none;\n border-radius: var(--gnome-radius-sm, 4px);\n transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n outline: 2px solid var(--gnome-accent-color, #3584e4);\n outline-offset: 2px;\n opacity: 0.8;\n}\n\n.sortBtnActive {\n opacity: 1;\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Body ──────────────────────────────────────────────────────────────────── /\n\n.tbody {\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Row ───────────────────────────────────────────────────────────────────── /\n\n.row {\n outline: none;\n transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n cursor: pointer;\n}\n\n.rowSelectable:hover {\n background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-accent-color, #3584e4) 15~~%,\n~~ transparent\n );\n}\n\n.rowSelected:hover {\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-accent-color, #3584e4) 22~~%,\n~~ transparent\n );\n}\n\n/ ─── Cell ──────────────────────────────────────────────────────────────────── /\n\n.td {\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n vertical-align: middle;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── Alignment ─────────────────────────────────────────────────────────────── /\n\n.alignStart {\n text-align: start;\n}\n\n.alignCenter {\n text-align: center;\n}\n\n.alignEnd {\n text-align: end;\n}\n\n/ ─── Checkbox column ───────────────────────────────────────────────────────── /\n\n.checkboxCol {\n width: 48px;\n padding-inline: var(--gnome-space-3, 18px);\n text-align: center;\n}\n\n.checkbox {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--gnome-accent-color, #3584e4);\n vertical-align: middle;\n}\n\n/ ─── Empty state ───────────────────────────────────────────────────────────── /\n\n.emptyCell {\n padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n text-align: center;\n}\n\n.emptyLabel {\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .outer {\n border-width: 2px;\n }\n\n .row + .row .td {\n border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n }\n\n .sortBtn {\n text-decoration: underline;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ColumnView.module.css.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── /\n\n.outer {\n border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n border-radius: var(--gnome-radius-lg, 12px);\n background: var(--gnome-card-bg-color, #ffffff);\n / overflow:clip clips to border-radius without creating a scroll ctx /\n overflow: clip;\n}\n\n/ ─── Scroll container ──────────────────────────────────────────────────────── /\n\n.scroll {\n overflow-y: auto;\n width: 100%;\n}\n\n/ ─── Table ─────────────────────────────────────────────────────────────────── /\n\n.table {\n width: 100%;\n border-collapse: collapse;\n table-layout: auto;\n}\n\n/ ─── Header ────────────────────────────────────────────────────────────────── /\n\n.thead {\n position: sticky;\n top: 0;\n z-index: 2;\n background: var(--gnome-card-bg-color, #ffffff);\n / Separator below sticky header /\n box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n padding: 0 var(--gnome-space-4, 24px);\n height: 40px;\n text-align: start;\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.headerLabel {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── Sort button ───────────────────────────────────────────────────────────── /\n\n.sortBtn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n appearance: none;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font: inherit;\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n outline: none;\n border-radius: var(--gnome-radius-sm, 4px);\n transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n outline: 2px solid var(--gnome-accent-color, #3584e4);\n outline-offset: 2px;\n opacity: 0.8;\n}\n\n.sortBtnActive {\n opacity: 1;\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Body ──────────────────────────────────────────────────────────────────── /\n\n.tbody {\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Row ───────────────────────────────────────────────────────────────────── /\n\n.row {\n outline: none;\n transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n cursor: pointer;\n}\n\n.rowSelectable:hover {\n background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 15%, transparent);\n}\n\n.rowSelected:hover {\n background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 22%, transparent);\n}\n\n/ ─── Cell ──────────────────────────────────────────────────────────────────── /\n\n.td {\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n vertical-align: middle;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── Alignment ─────────────────────────────────────────────────────────────── /\n\n.alignStart {\n text-align: start;\n}\n\n.alignCenter {\n text-align: center;\n}\n\n.alignEnd {\n text-align: end;\n}\n\n/ ─── Checkbox column ───────────────────────────────────────────────────────── /\n\n.checkboxCol {\n width: 48px;\n padding-inline: var(--gnome-space-3, 18px);\n text-align: center;\n}\n\n.checkbox {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--gnome-accent-color, #3584e4);\n vertical-align: middle;\n}\n\n/ ─── Empty state ───────────────────────────────────────────────────────────── /\n\n.emptyCell {\n padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n text-align: center;\n}\n\n.emptyLabel {\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .outer {\n border-width: 2px;\n }\n\n .row + .row .td {\n border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n }\n\n .sortBtn {\n text-decoration: underline;\n }\n}\n"],"mappings":""}

package/dist/components/ColumnView/ColumnView.module.css.js CHANGED Viewed

@@ -1,26 +1,26 @@
 var e = {
-	outer: "_outer_1pg3h_3",
-	scroll: "_scroll_1pg3h_13",
-	table: "_table_1pg3h_20",
-	thead: "_thead_1pg3h_28",
-	th: "_th_1pg3h_28",
-	headerLabel: "_headerLabel_1pg3h_48",
-	sortBtn: "_sortBtn_1pg3h_55",
-	sortBtnActive: "_sortBtnActive_1pg3h_84",
-	sortActive: "_sortActive_1pg3h_89",
-	sortNeutral: "_sortNeutral_1pg3h_93",
-	tbody: "_tbody_1pg3h_99",
-	row: "_row_1pg3h_105",
-	rowSelectable: "_rowSelectable_1pg3h_114",
-	rowSelected: "_rowSelected_1pg3h_126",
-	td: "_td_1pg3h_144",
-	alignStart: "_alignStart_1pg3h_156",
-	alignCenter: "_alignCenter_1pg3h_160",
-	alignEnd: "_alignEnd_1pg3h_164",
-	checkboxCol: "_checkboxCol_1pg3h_170",
-	checkbox: "_checkbox_1pg3h_170",
-	emptyCell: "_emptyCell_1pg3h_186",
-	emptyLabel: "_emptyLabel_1pg3h_191"
+	outer: "_outer_1kote_3",
+	scroll: "_scroll_1kote_13",
+	table: "_table_1kote_20",
+	thead: "_thead_1kote_28",
+	th: "_th_1kote_28",
+	headerLabel: "_headerLabel_1kote_48",
+	sortBtn: "_sortBtn_1kote_55",
+	sortBtnActive: "_sortBtnActive_1kote_84",
+	sortActive: "_sortActive_1kote_89",
+	sortNeutral: "_sortNeutral_1kote_93",
+	tbody: "_tbody_1kote_99",
+	row: "_row_1kote_105",
+	rowSelectable: "_rowSelectable_1kote_114",
+	rowSelected: "_rowSelected_1kote_126",
+	td: "_td_1kote_136",
+	alignStart: "_alignStart_1kote_148",
+	alignCenter: "_alignCenter_1kote_152",
+	alignEnd: "_alignEnd_1kote_156",
+	checkboxCol: "_checkboxCol_1kote_162",
+	checkbox: "_checkbox_1kote_162",
+	emptyCell: "_emptyCell_1kote_178",
+	emptyLabel: "_emptyLabel_1kote_183"
 };
 //#endregion
 export { e as default };

package/dist/components/ColumnView/ColumnView.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnView.module.css.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── /\n\n.outer {\n border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n border-radius: var(--gnome-radius-lg, 12px);\n background: var(--gnome-card-bg-color, #ffffff);\n / overflow:clip clips to border-radius without creating a scroll ctx /\n overflow: clip;\n}\n\n/ ─── Scroll container ──────────────────────────────────────────────────────── /\n\n.scroll {\n overflow-y: auto;\n width: 100%;\n}\n\n/ ─── Table ─────────────────────────────────────────────────────────────────── /\n\n.table {\n width: 100%;\n border-collapse: collapse;\n table-layout: auto;\n}\n\n/ ─── Header ────────────────────────────────────────────────────────────────── /\n\n.thead {\n position: sticky;\n top: 0;\n z-index: 2;\n background: var(--gnome-card-bg-color, #ffffff);\n / Separator below sticky header /\n box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n padding: 0 var(--gnome-space-4, 24px);\n height: 40px;\n text-align: start;\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.headerLabel {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── Sort button ───────────────────────────────────────────────────────────── /\n\n.sortBtn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n appearance: none;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font: inherit;\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n outline: none;\n border-radius: var(--gnome-radius-sm, 4px);\n transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n outline: 2px solid var(--gnome-accent-color, #3584e4);\n outline-offset: 2px;\n opacity: 0.8;\n}\n\n.sortBtnActive {\n opacity: 1;\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Body ──────────────────────────────────────────────────────────────────── /\n\n.tbody {\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Row ───────────────────────────────────────────────────────────────────── /\n\n.row {\n outline: none;\n transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n cursor: pointer;\n}\n\n.rowSelectable:hover {\n background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-accent-color, #3584e4) 15~~%,\n~~ transparent\n );\n}\n\n.rowSelected:hover {\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-accent-color, #3584e4) 22~~%,\n~~ transparent\n );\n}\n\n/ ─── Cell ──────────────────────────────────────────────────────────────────── /\n\n.td {\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n vertical-align: middle;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── Alignment ─────────────────────────────────────────────────────────────── /\n\n.alignStart {\n text-align: start;\n}\n\n.alignCenter {\n text-align: center;\n}\n\n.alignEnd {\n text-align: end;\n}\n\n/ ─── Checkbox column ───────────────────────────────────────────────────────── /\n\n.checkboxCol {\n width: 48px;\n padding-inline: var(--gnome-space-3, 18px);\n text-align: center;\n}\n\n.checkbox {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--gnome-accent-color, #3584e4);\n vertical-align: middle;\n}\n\n/ ─── Empty state ───────────────────────────────────────────────────────────── /\n\n.emptyCell {\n padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n text-align: center;\n}\n\n.emptyLabel {\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .outer {\n border-width: 2px;\n }\n\n .row + .row .td {\n border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n }\n\n .sortBtn {\n text-decoration: underline;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ColumnView.module.css.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── /\n\n.outer {\n border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n border-radius: var(--gnome-radius-lg, 12px);\n background: var(--gnome-card-bg-color, #ffffff);\n / overflow:clip clips to border-radius without creating a scroll ctx /\n overflow: clip;\n}\n\n/ ─── Scroll container ──────────────────────────────────────────────────────── /\n\n.scroll {\n overflow-y: auto;\n width: 100%;\n}\n\n/ ─── Table ─────────────────────────────────────────────────────────────────── /\n\n.table {\n width: 100%;\n border-collapse: collapse;\n table-layout: auto;\n}\n\n/ ─── Header ────────────────────────────────────────────────────────────────── /\n\n.thead {\n position: sticky;\n top: 0;\n z-index: 2;\n background: var(--gnome-card-bg-color, #ffffff);\n / Separator below sticky header /\n box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n padding: 0 var(--gnome-space-4, 24px);\n height: 40px;\n text-align: start;\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.headerLabel {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── Sort button ───────────────────────────────────────────────────────────── /\n\n.sortBtn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n appearance: none;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font: inherit;\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: 700;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n outline: none;\n border-radius: var(--gnome-radius-sm, 4px);\n transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n outline: 2px solid var(--gnome-accent-color, #3584e4);\n outline-offset: 2px;\n opacity: 0.8;\n}\n\n.sortBtnActive {\n opacity: 1;\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Body ──────────────────────────────────────────────────────────────────── /\n\n.tbody {\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Row ───────────────────────────────────────────────────────────────────── /\n\n.row {\n outline: none;\n transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n cursor: pointer;\n}\n\n.rowSelectable:hover {\n background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 15%, transparent);\n}\n\n.rowSelected:hover {\n background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 22%, transparent);\n}\n\n/ ─── Cell ──────────────────────────────────────────────────────────────────── /\n\n.td {\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n vertical-align: middle;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── Alignment ─────────────────────────────────────────────────────────────── /\n\n.alignStart {\n text-align: start;\n}\n\n.alignCenter {\n text-align: center;\n}\n\n.alignEnd {\n text-align: end;\n}\n\n/ ─── Checkbox column ───────────────────────────────────────────────────────── /\n\n.checkboxCol {\n width: 48px;\n padding-inline: var(--gnome-space-3, 18px);\n text-align: center;\n}\n\n.checkbox {\n width: 16px;\n height: 16px;\n cursor: pointer;\n accent-color: var(--gnome-accent-color, #3584e4);\n vertical-align: middle;\n}\n\n/ ─── Empty state ───────────────────────────────────────────────────────────── /\n\n.emptyCell {\n padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n text-align: center;\n}\n\n.emptyLabel {\n font-family: var(--gnome-font-family, system-ui);\n font-size: var(--gnome-font-size-body, 1rem);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: 0.55;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .outer {\n border-width: 2px;\n }\n\n .row + .row .td {\n border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n }\n\n .sortBtn {\n text-decoration: underline;\n }\n}\n"],"mappings":""}

package/dist/components/ColumnView/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
+export type { ColumnDef, ColumnViewProps, ColumnViewSelectionMode, ColumnViewSortState, SortDirection, } from './ColumnView';
 export { ColumnView } from './ColumnView';
-export type { ColumnViewProps, ColumnDef, ColumnViewSortState, ColumnViewSelectionMode, SortDirection, } from './ColumnView';

package/dist/components/ComboRow/ComboRow.cjs CHANGED Viewed

@@ -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,role:`listbox`,"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}`,role:`option`,"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`);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;
 //# sourceMappingURL=ComboRow.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboRow.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import { useState, useRef, useId, useEffect, useCallback, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\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) return;\n const rect = triggerRef.current.getBoundingClientRect();\n const spaceBelow = window.innerHeight - rect.bottom;\n const listH = Math.min(options.length 44 + 8, 260);\n setFlipUp(spaceBelow < listH && rect.top > listH);\n }, [options.length]);\n\n const openList = useCallback(() => {\n if (disabled) return;\n computeFlip();\n setOpen(true);\n const idx = options.findIndex((o) => o.value === value && !o.disabled);\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) return;\n if (!isControlled) setUncontrolledValue(opt.value);\n onValueChange?.(opt.value);\n closeList();\n },\n [isControlled, onValueChange, closeList],\n );\n\n useEffect(() => {\n if (!open \|\| activeIndex < 0 \|\| !listRef.current) return;\n const item = listRef.current.children[activeIndex] as HTMLElement \| undefined;\n item?.scrollIntoView({ block: \"nearest\" });\n }, [activeIndex, open]);\n\n useEffect(() => {\n if (!open) return;\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 document.addEventListener(\"mousedown\", handler);\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(\n options.reduce((last, o, i) => (!o.disabled ? i : last), -1),\n );\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 setActiveIndex(next ?? activeIndex);\n break;\n }\n case \"ArrowUp\": {\n e.preventDefault();\n const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\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) selectOption(options[activeIndex]);\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 className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n .filter(Boolean).join(\" \")}>\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 role=\"listbox\"\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 role=\"option\"\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 width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\" className={styles.checkIcon}>\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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"}
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":"mGAgDA,SAAgB,EAAoC,CAClD,QACA,WACA,UACA,UACA,MAAO,EACP,eACA,gBACA,WAAW,GACX,YACA,GAAG,GACgB,CACnB,IAAM,EAAe,IAAoB,IAAA,GACnC,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAgD,EAAa,CACjF,EAAQ,EAAe,EAAkB,EAEzC,CAAC,EAAM,IAAA,EAAA,EAAA,UAAoB,GAAM,CACjC,CAAC,EAAa,IAAA,EAAA,EAAA,UAA2B,GAAG,CAC5C,CAAC,EAAQ,IAAA,EAAA,EAAA,UAAsB,GAAM,CAErC,GAAA,EAAA,EAAA,QAAmB,CACnB,GAAA,EAAA,EAAA,QAAmB,CACnB,GAAA,EAAA,EAAA,QAAuC,KAAK,CAC5C,GAAA,EAAA,EAAA,QAAmC,KAAK,CAExC,EAAW,EAAQ,KAAM,GAAM,EAAE,QAAU,EAAM,CAEjD,GAAA,EAAA,EAAA,iBAAgC,CACpC,GAAI,CAAC,EAAW,QACd,OAGF,IAAM,EAAO,EAAW,QAAQ,uBAAuB,CACjD,EAAa,OAAO,YAAc,EAAK,OACvC,EAAQ,KAAK,IAAI,EAAQ,OAAS,GAAK,EAAG,IAAI,CAEpD,EAAU,EAAa,GAAS,EAAK,IAAM,EAAM,EAChD,CAAC,EAAQ,OAAO,CAAC,CAEd,GAAA,EAAA,EAAA,iBAA6B,CACjC,GAAI,EACF,OAGF,GAAa,CACb,EAAQ,GAAK,CACb,IAAM,EAAM,EAAQ,UAAW,GAAM,EAAE,QAAU,GAAS,CAAC,EAAE,SAAS,CAEtE,EAAe,GAAO,EAAI,EAAM,EAAQ,UAAW,GAAM,CAAC,EAAE,SAAS,CAAC,EACrE,CAAC,EAAU,EAAa,EAAS,EAAM,CAAC,CAErC,GAAA,EAAA,EAAA,iBAA8B,CAClC,EAAQ,GAAM,CACd,EAAe,GAAG,CAClB,EAAW,SAAS,OAAO,EAC1B,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,aACH,GAA2B,CACtB,EAAI,WAIH,GACH,EAAqB,EAAI,MAAM,CAGjC,IAAgB,EAAI,MAAM,CAC1B,GAAW,GAEb,CAAC,EAAc,EAAe,EAAU,CACzC,EAED,EAAA,EAAA,eAAgB,CACV,CAAC,GAAQ,EAAc,GAAK,CAAC,EAAQ,SAI5B,EAAQ,QAAQ,SAAS,IAEhC,eAAe,CAAE,MAAO,UAAW,CAAC,EACzC,CAAC,EAAa,EAAK,CAAC,EAEvB,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EACH,OAGF,IAAM,EAAW,GAAkB,CAE/B,CAAC,EAAW,SAAS,SAAS,EAAE,OAAe,EAC/C,CAAC,EAAQ,SAAS,SAAS,EAAE,OAAe,EAE5C,GAAW,EAMf,OAFA,SAAS,iBAAiB,YAAa,EAAQ,KAElC,SAAS,oBAAoB,YAAa,EAAQ,EAC9D,CAAC,EAAM,EAAU,CAAC,CAErB,IAAM,GAAA,EAAA,EAAA,aACH,GAAwC,CACvC,OAAQ,EAAE,IAAV,CACE,IAAK,QACL,IAAK,IACL,IAAK,YACH,EAAE,gBAAgB,CAClB,GAAU,CACV,MACF,IAAK,UACH,EAAE,gBAAgB,CAClB,GAAa,CACb,EAAQ,GAAK,CACb,EAAe,EAAQ,QAAQ,EAAM,EAAG,IAAQ,EAAE,SAAe,EAAJ,EAAW,GAAG,CAAC,CAC5E,QAGN,CAAC,EAAU,EAAa,EAAQ,CACjC,CAEK,GAAA,EAAA,EAAA,aACH,GAAuC,CACtC,IAAM,EAAiB,EACpB,KAAK,EAAG,KAAO,CAAE,IAAG,IAAG,EAAE,CACzB,QAAQ,CAAE,OAAQ,CAAC,EAAE,SAAS,CAC9B,KAAK,CAAE,OAAQ,EAAE,CACd,EAAa,EAAe,QAAQ,EAAY,CAEtD,OAAQ,EAAE,IAAV,CACE,IAAK,YAAa,CAChB,EAAE,gBAAgB,CAClB,IAAM,EAAO,EAAe,KAAK,IAAI,EAAa,EAAG,EAAe,OAAS,EAAE,EAE/E,EAAe,GAAQ,EAAY,CACnC,MAEF,IAAK,UAAW,CACd,EAAE,gBAAgB,CAClB,IAAM,EAAO,EAAe,KAAK,IAAI,EAAa,EAAG,EAAE,EAEvD,EAAe,GAAQ,EAAY,CACnC,MAEF,IAAK,OACH,EAAE,gBAAgB,CAClB,EAAe,EAAe,IAAM,GAAG,CACvC,MACF,IAAK,MACH,EAAE,gBAAgB,CAClB,EAAe,EAAe,EAAe,OAAS,IAAM,GAAG,CAC/D,MACF,IAAK,QACL,IAAK,IACH,EAAE,gBAAgB,CACd,GAAe,GACjB,EAAa,EAAQ,GAAa,CAGpC,MAEF,IAAK,SACL,IAAK,MACH,GAAW,CACX,QAGN,CAAC,EAAS,EAAa,EAAc,EAAU,CAChD,CAED,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,IAAK,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAClE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,CAMG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC3D,IAGP,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,mBAAvB,EACE,EAAA,EAAA,MAAC,SAAD,CACE,IAAK,EACL,GAAI,EACJ,KAAK,SACL,KAAK,WACL,gBAAc,UACd,gBAAe,EACf,gBAAe,EACf,wBACE,GAAQ,GAAe,EAAI,GAAG,EAAU,OAAO,IAAgB,IAAA,GAEvD,WACV,UAAW,CAAC,EAAA,QAAO,QAAS,EAAO,EAAA,QAAO,YAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACvF,YAAgB,EAAO,GAAW,CAAG,GAAU,CAC/C,UAAW,WAdb,EAgBE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,aAAe,EAAgC,KAArB,EAAA,QAAO,YAAmB,CACpE,OAAO,QAAQ,CACf,KAAK,IAAI,UAEX,GAAU,OAAS,IACf,CAAA,EACP,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,QAAS,EAAO,EAAA,QAAO,YAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACvF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,cAAY,OACZ,UAAU,kBAEV,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACC,GAER,IACC,EAAA,EAAA,KAAC,KAAD,CACE,IAAK,EACL,GAAI,EACJ,kBAAiB,EACjB,SAAU,GACV,UAAW,CAAC,EAAA,QAAO,KAAM,EAAS,EAAA,QAAO,OAAS,EAAA,QAAO,SAAS,CAC/D,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,UAAW,WAEV,EAAQ,KAAK,EAAK,KACjB,EAAA,EAAA,MAAC,KAAD,CAEE,GAAI,GAAG,EAAU,OAAO,IACxB,gBAAe,EAAI,QAAU,EAC7B,gBAAe,EAAI,SACnB,UAAW,CACT,EAAA,QAAO,OACP,EAAI,QAAU,EAAQ,EAAA,QAAO,eAAiB,KAC9C,IAAM,EAAc,EAAA,QAAO,aAAe,KAC1C,EAAI,SAAW,EAAA,QAAO,eAAiB,KACxC,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,iBAAoB,CAAC,EAAI,UAAY,EAAe,EAAE,CACtD,YAAe,EAAa,EAAI,UAdlC,EAgBE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBAAc,EAAI,MAAa,CAAA,CACtD,EAAI,QAAU,IACb,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,KACN,OAAO,KACP,QAAQ,YACR,cAAY,OACZ,UAAU,QACV,UAAW,EAAA,QAAO,oBAElB,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CAEL,EAnCE,EAAI,MAmCN,CACL,CACC,CAAA,CAEH,GACF"}

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

@@ -4,7 +4,7 @@ export interface ComboRowOption<V extends string = string> {
     label: string;
     disabled?: boolean;
 }
-export interface ComboRowProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface ComboRowProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Primary label. */
     title: string;
     /** Secondary line below the title. */

package/dist/components/ComboRow/ComboRow.js CHANGED Viewed

@@ -148,14 +148,12 @@ function c({ title: c, subtitle: l, leading: u, options: d, value: f, defaultVal
 				}), S && /* @__PURE__ */ o("ul", {
 					ref: j,
 					id: k,
-					role: "listbox",
 					"aria-labelledby": O,
 					tabIndex: -1,
 					className: [e.list, E ? e.listUp : e.listDown].filter(Boolean).join(" "),
 					onKeyDown: R,
 					children: d.map((t, n) => /* @__PURE__ */ s("li", {
 						id: `${k}-opt-${n}`,
-						role: "option",
 						"aria-selected": t.value === x,
 						"aria-disabled": t.disabled,
 						className: [