@gnome-ui/react 1.44.0 → 1.45.1

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from \"react\";\nimport styles from \"./ColorPicker.module.css\";\n\n// ─── ColorSwatch ─────────────────────────────────────────────────────────────\n\nexport type ColorSwatchSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\" | \"onSelect\"> {\n  /** CSS color value displayed as the swatch background. */\n  color: string;\n  /** Whether this swatch is the currently selected color. */\n  selected?: boolean;\n  /** Swatch diameter. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n  /** Called when the user clicks or activates the swatch. */\n  onSelect?: (color: string) => void;\n  /** Accessible label. Defaults to the color value. */\n  \"aria-label\"?: string;\n  disabled?: boolean;\n}\n\n/**\n * Single circular color swatch button.\n *\n * Can be used standalone or composed inside `ColorPicker`.\n * Shows a white checkmark when `selected`.\n */\nexport function ColorSwatch({\n  color,\n  selected = false,\n  size = \"md\",\n  onSelect,\n  disabled = false,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ColorSwatchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={ariaLabel ?? color}\n      disabled={disabled}\n      className={[\n        styles.swatch,\n        styles[`swatch-${size}`],\n        selected ? styles.swatchSelected : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--swatch-color\": color, ...style } as CSSProperties}\n      onClick={() => onSelect?.(color)}\n      {...props}\n    >\n      {selected && (\n        <svg\n          className={styles.checkmark}\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3 8l3.5 3.5L13 5\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n}\n\n// ─── ColorPicker ─────────────────────────────────────────────────────────────\n\nexport interface ColorPickerColor {\n  /** CSS color value (hex recommended). */\n  value: string;\n  /** Human-readable name shown as aria-label and tooltip. */\n  label?: string;\n}\n\n/** Default Adwaita-named palette (matches Avatar color set). */\nexport const GNOME_PALETTE: ColorPickerColor[] = [\n  { value: \"#3584e4\", label: \"Blue\"   },\n  { value: \"#2ec27e\", label: \"Green\"  },\n  { value: \"#f6d32d\", label: \"Yellow\" },\n  { value: \"#ff7800\", label: \"Orange\" },\n  { value: \"#e01b24\", label: \"Red\"    },\n  { value: \"#9141ac\", label: \"Purple\" },\n  { value: \"#986a44\", label: \"Brown\"  },\n  { value: \"#2190a4\", label: \"Teal\"   },\n  { value: \"#5e5c64\", label: \"Slate\"  },\n];\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Currently selected color value. */\n  value?: string;\n  /** Called when the user selects a color. */\n  onChange?: (value: string) => void;\n  /**\n   * Palette of colors to display.\n   * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).\n   */\n  colors?: ColorPickerColor[];\n  /**\n   * Show a \"Custom…\" button at the end that opens a native color picker.\n   * When a custom color is chosen it is passed to `onChange` and shown\n   * as a selected swatch until another palette color is picked.\n   * Defaults to `false`.\n   */\n  allowCustom?: boolean;\n  /** Swatch size. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n}\n\n/**\n * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.\n *\n * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses\n * arrow keys (roving tabindex). Optionally adds a \"Custom…\" button backed\n * by a hidden `<input type=\"color\">`.\n *\n * ```tsx\n * <ColorPicker value={color} onChange={setColor} />\n * <ColorPicker value={color} onChange={setColor} allowCustom />\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   colors={[{ value: \"#ff0000\", label: \"Red\" }, …]}\n * />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html\n */\nexport function ColorPicker({\n  value,\n  onChange,\n  colors = GNOME_PALETTE,\n  allowCustom = false,\n  size = \"md\",\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ColorPickerProps) {\n  const customInputRef = useRef<HTMLInputElement>(null);\n\n  // Roving tabindex: only the selected (or first) swatch is in the tab order.\n  const activeIndex = colors.findIndex((c) => c.value === value);\n  const rovingIndex = activeIndex >= 0 ? activeIndex : 0;\n\n  // Arrow-key navigation within the radiogroup.\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const all = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>(\n        `[role=\"radio\"]:not([disabled])`\n      )\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n    if (idx === -1) return;\n\n    let next = -1;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      next = (idx + 1) % all.length;\n    } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      next = (idx - 1 + all.length) % all.length;\n    }\n    if (next >= 0) {\n      all[next].focus();\n      const color = all[next].dataset.color;\n      if (color) onChange?.(color);\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom =\n    value !== undefined && !colors.some((c) => c.value === value);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel ?? \"Color\"}\n      className={[styles.picker, className].filter(Boolean).join(\" \")}\n      style={style}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {colors.map((color, i) => (\n        <ColorSwatch\n          key={color.value}\n          color={color.value}\n          size={size}\n          selected={color.value === value}\n          onSelect={onChange}\n          aria-label={color.label ?? color.value}\n          tabIndex={i === rovingIndex && !isCustom ? 0 : -1}\n          data-color={color.value}\n        />\n      ))}\n\n      {allowCustom && (\n        <>\n          {/* Custom swatch — shows the picked color when active */}\n          {isCustom && value && (\n            <ColorSwatch\n              color={value}\n              size={size}\n              selected\n              onSelect={() => customInputRef.current?.click()}\n              aria-label=\"Custom color\"\n              tabIndex={0}\n              data-color={value}\n            />\n          )}\n\n          {/* + button that opens the native color input */}\n          <button\n            type=\"button\"\n            aria-label=\"Choose custom color\"\n            className={[styles.swatch, styles[`swatch-${size}`], styles.customButton]\n              .filter(Boolean)\n              .join(\" \")}\n            tabIndex={isCustom ? -1 : -1}\n            onClick={() => customInputRef.current?.click()}\n          >\n            <svg viewBox=\"0 0 16 16\" className={styles.plusIcon} aria-hidden=\"true\">\n              <path\n                d=\"M8 3v10M3 8h10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n\n          <input\n            ref={customInputRef}\n            type=\"color\"\n            value={isCustom && value ? value : \"#000000\"}\n            className={styles.nativeInput}\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            onChange={(e) => onChange?.(e.target.value)}\n          />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type KeyboardEvent, useRef } from 'react';\n\nimport styles from './ColorPicker.module.css';\n\n// ─── ColorSwatch ─────────────────────────────────────────────────────────────\n\nexport type ColorSwatchSize = 'sm' | 'md' | 'lg';\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {\n  /** CSS color value displayed as the swatch background. */\n  color: string;\n  /** Whether this swatch is the currently selected color. */\n  selected?: boolean;\n  /** Swatch diameter. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n  /** Called when the user clicks or activates the swatch. */\n  onSelect?: (color: string) => void;\n  /** Accessible label. Defaults to the color value. */\n  'aria-label'?: string;\n  disabled?: boolean;\n}\n\n/**\n * Single circular color swatch button.\n *\n * Can be used standalone or composed inside `ColorPicker`.\n * Shows a white checkmark when `selected`.\n */\nexport function ColorSwatch({\n  color,\n  selected = false,\n  size = 'md',\n  onSelect,\n  disabled = false,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorSwatchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={ariaLabel ?? color}\n      disabled={disabled}\n      className={[\n        styles.swatch,\n        styles[`swatch-${size}`],\n        selected ? styles.swatchSelected : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--swatch-color': color, ...style } as CSSProperties}\n      onClick={() => onSelect?.(color)}\n      {...props}\n    >\n      {selected && (\n        <svg className={styles.checkmark} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M3 8l3.5 3.5L13 5\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n}\n\n// ─── ColorPicker ─────────────────────────────────────────────────────────────\n\nexport interface ColorPickerColor {\n  /** CSS color value (hex recommended). */\n  value: string;\n  /** Human-readable name shown as aria-label and tooltip. */\n  label?: string;\n}\n\n/** Default Adwaita-named palette (matches Avatar color set). */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const GNOME_PALETTE: ColorPickerColor[] = [\n  { value: '#3584e4', label: 'Blue' },\n  { value: '#2ec27e', label: 'Green' },\n  { value: '#f6d32d', label: 'Yellow' },\n  { value: '#ff7800', label: 'Orange' },\n  { value: '#e01b24', label: 'Red' },\n  { value: '#9141ac', label: 'Purple' },\n  { value: '#986a44', label: 'Brown' },\n  { value: '#2190a4', label: 'Teal' },\n  { value: '#5e5c64', label: 'Slate' },\n];\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected color value. */\n  value?: string;\n  /** Called when the user selects a color. */\n  onChange?: (value: string) => void;\n  /**\n   * Palette of colors to display.\n   * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).\n   */\n  colors?: ColorPickerColor[];\n  /**\n   * Show a \"Custom…\" button at the end that opens a native color picker.\n   * When a custom color is chosen it is passed to `onChange` and shown\n   * as a selected swatch until another palette color is picked.\n   * Defaults to `false`.\n   */\n  allowCustom?: boolean;\n  /** Swatch size. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n}\n\n/**\n * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.\n *\n * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses\n * arrow keys (roving tabindex). Optionally adds a \"Custom…\" button backed\n * by a hidden `<input type=\"color\">`.\n *\n * ```tsx\n * <ColorPicker value={color} onChange={setColor} />\n * <ColorPicker value={color} onChange={setColor} allowCustom />\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   colors={[{ value: \"#ff0000\", label: \"Red\" }, …]}\n * />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html\n */\nexport function ColorPicker({\n  value,\n  onChange,\n  colors = GNOME_PALETTE,\n  allowCustom = false,\n  size = 'md',\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorPickerProps) {\n  const customInputRef = useRef<HTMLInputElement>(null);\n\n  // Roving tabindex: only the selected (or first) swatch is in the tab order.\n  const activeIndex = colors.findIndex((c) => c.value === value);\n  const rovingIndex = activeIndex >= 0 ? activeIndex : 0;\n\n  // Arrow-key navigation within the radiogroup.\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const all = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])'),\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = -1;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (idx + 1) % all.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (idx - 1 + all.length) % all.length;\n    }\n\n    if (next >= 0) {\n      all[next].focus();\n      const color = all[next].dataset.color;\n\n      if (color) {\n        onChange?.(color);\n      }\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom = value !== undefined && !colors.some((c) => c.value === value);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel ?? 'Color'}\n      className={[styles.picker, className].filter(Boolean).join(' ')}\n      style={style}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {colors.map((color, i) => (\n        <ColorSwatch\n          key={color.value}\n          color={color.value}\n          size={size}\n          selected={color.value === value}\n          onSelect={onChange}\n          aria-label={color.label ?? color.value}\n          tabIndex={i === rovingIndex && !isCustom ? 0 : -1}\n          data-color={color.value}\n        />\n      ))}\n\n      {allowCustom && (\n        <>\n          {/* Custom swatch — shows the picked color when active */}\n          {isCustom && value && (\n            <ColorSwatch\n              color={value}\n              size={size}\n              selected\n              onSelect={() => customInputRef.current?.click()}\n              aria-label=\"Custom color\"\n              tabIndex={0}\n              data-color={value}\n            />\n          )}\n\n          {/* + button that opens the native color input */}\n          <button\n            type=\"button\"\n            aria-label=\"Choose custom color\"\n            className={[styles.swatch, styles[`swatch-${size}`], styles.customButton]\n              .filter(Boolean)\n              .join(' ')}\n            tabIndex={isCustom ? -1 : -1}\n            onClick={() => customInputRef.current?.click()}\n          >\n            <svg viewBox=\"0 0 16 16\" className={styles.plusIcon} aria-hidden=\"true\">\n              <path\n                d=\"M8 3v10M3 8h10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n\n          <input\n            ref={customInputRef}\n            type=\"color\"\n            value={isCustom && value ? value : '#000000'}\n            className={styles.nativeInput}\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            onChange={(e) => onChange?.(e.target.value)}\n          />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-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={picker:e,swatch:t,"swatch-sm":`_swatch-sm_qgzmq_37`,"swatch-md":`_swatch-md_qgzmq_38`,"swatch-lg":`_swatch-lg_qgzmq_39`,swatchSelected:n,checkmark:r,customButton:i,plusIcon:a,nativeInput:o};exports.default=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_50hw4_37`,"swatch-md":`_swatch-md_50hw4_41`,"swatch-lg":`_swatch-lg_50hw4_45`,swatchSelected:n,checkmark:r,customButton:i,plusIcon:a,nativeInput:o};exports.default=s;
 //# sourceMappingURL=ColorPicker.module.css.cjs.map

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

@@ -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":""}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -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