@gnome-ui/react 1.36.2 → 1.36.3

package/dist/components/Chip/Chip.js

@@ -0,0 +1,61 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { e as t } from "../../icons/dist/icons/Close.js";
+import n from "./Chip.module.css.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Chip/Chip.tsx
+function o({ label: o, icon: s, onRemove: c, selectable: l = !1, selected: u = !1, onToggle: d, disabled: f = !1, className: p, ...m }) {
+	let h = l && !c, g = [
+		n.chip,
+		u ? n.selected : null,
+		f ? n.disabled : null,
+		h ? n.selectable : null,
+		p
+	].filter(Boolean).join(" "), _ = /* @__PURE__ */ a(r, { children: [
+		s && /* @__PURE__ */ i("span", {
+			className: n.icon,
+			children: /* @__PURE__ */ i(e, {
+				icon: s,
+				size: "sm",
+				"aria-hidden": !0
+			})
+		}),
+		/* @__PURE__ */ i("span", {
+			className: n.label,
+			children: o
+		}),
+		c && /* @__PURE__ */ i("button", {
+			type: "button",
+			className: n.remove,
+			"aria-label": `Remove ${o}`,
+			disabled: f,
+			onClick: (e) => {
+				e.stopPropagation(), c();
+			},
+			tabIndex: f ? -1 : 0,
+			children: /* @__PURE__ */ i(e, {
+				icon: t,
+				size: "sm",
+				"aria-hidden": !0
+			})
+		})
+	] });
+	return h ? /* @__PURE__ */ i("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": u,
+		"aria-label": o,
+		disabled: f,
+		onClick: d,
+		className: g,
+		...m,
+		children: _
+	}) : /* @__PURE__ */ i("span", {
+		className: g,
+		...m,
+		children: _
+	});
+}
+//#endregion
+export { o as Chip };
+
+//# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Close } from \"@gnome-ui/icons\";\nimport styles from \"./Chip.module.css\";\n\nexport interface ChipProps extends HTMLAttributes<HTMLElement> {\n  /** Text label displayed inside the chip. */\n  label: string;\n  /** Leading icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * When provided, renders a remove (×) button and calls this handler.\n   * The chip root becomes a `<span>`; only the remove button is interactive.\n   */\n  onRemove?: () => void;\n  /**\n   * When true the chip renders as a toggle button.\n   * Use `selected` + `onToggle` to control its state.\n   */\n  selectable?: boolean;\n  /** Active/selected state. Only relevant when `selectable` is true. */\n  selected?: boolean;\n  /**\n   * Called when a selectable chip is clicked.\n   * Only relevant when `selectable` is true.\n   */\n  onToggle?: () => void;\n  /** Disabled state — applies to both selectable chips and the remove button. */\n  disabled?: boolean;\n}\n\n/**\n * Compact pill-shaped label for tags, filters, and selection states.\n *\n * Three usage modes:\n * - **Static** — just a visual label (no `onRemove`, no `selectable`).\n * - **Removable** — add `onRemove` to show a × button.\n * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle behaviour.\n *\n * Pair with `WrapBox` for multi-chip layouts.\n */\nexport function Chip({\n  label,\n  icon,\n  onRemove,\n  selectable = false,\n  selected = false,\n  onToggle,\n  disabled = false,\n  className,\n  ...props\n}: ChipProps) {\n  const isInteractive = selectable && !onRemove;\n\n  const chipClasses = [\n    styles.chip,\n    selected ? styles.selected : null,\n    disabled ? styles.disabled : null,\n    isInteractive ? styles.selectable : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const content = (\n    <>\n      {icon && (\n        <span className={styles.icon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          className={styles.remove}\n          aria-label={`Remove ${label}`}\n          disabled={disabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <Icon icon={Close} size=\"sm\" aria-hidden />\n        </button>\n      )}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={selected}\n        aria-label={label}\n        disabled={disabled}\n        onClick={onToggle}\n        className={chipClasses}\n        {...(props as HTMLAttributes<HTMLButtonElement>)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      className={chipClasses}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":";;;;;AA0CA,SAAgB,EAAK,EACnB,UACA,SACA,aACA,gBAAa,IACb,cAAW,IACX,aACA,cAAW,IACX,cACA,GAAG,KACS;CACZ,IAAM,IAAgB,KAAc,CAAC,GAE/B,IAAc;EAClB,EAAO;EACP,IAAW,EAAO,WAAW;EAC7B,IAAW,EAAO,WAAW;EAC7B,IAAgB,EAAO,aAAa;EACpC;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,EAEN,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA;EAET,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;GAAa,CAAA;EAC5C,KACC,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,cAAY,UAAU;GACZ;GACV,UAAU,MAAM;AAEd,IADA,EAAE,iBAAiB,EACnB,GAAU;;GAEZ,UAAU,IAAW,KAAK;aAE1B,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAK;IAAK,eAAA;IAAc,CAAA;GACpC,CAAA;EAEV,EAAA,CAAA;AAoBL,QAjBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY;EACF;EACV,SAAS;EACT,WAAW;EACX,GAAK;YAEJ;EACM,CAAA,GAKX,kBAAC,QAAD;EACE,WAAW;EACX,GAAI;YAEH;EACI,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={chip:`_chip_e26qc_3`,selectable:`_selectable_e26qc_31`,selected:`_selected_e26qc_55`,disabled:`_disabled_e26qc_68`,icon:`_icon_e26qc_76`,label:`_label_e26qc_85`,remove:`_remove_e26qc_91`};exports.default=e;
+//# sourceMappingURL=Chip.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.module.css.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color     var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\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 state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+var e = {
+	chip: "_chip_e26qc_3",
+	selectable: "_selectable_e26qc_31",
+	selected: "_selected_e26qc_55",
+	disabled: "_disabled_e26qc_68",
+	icon: "_icon_e26qc_76",
+	label: "_label_e26qc_85",
+	remove: "_remove_e26qc_91"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Chip.module.css.js.map

package/dist/components/Chip/Chip.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.module.css.js","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color     var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\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 state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Chip.cjs

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

package/dist/components/Chip.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip/index'
+export {}

package/dist/components/Chip.js

@@ -0,0 +1,2 @@
+import { Chip as e } from "./Chip/Chip.js";
+export { e as Chip };

package/dist/components/Clamp/Clamp.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Clamp.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({maximumSize:n=600,children:r,className:i,style:a,...o}){return(0,t.jsx)(`div`,{className:[e.default.clamp,i].filter(Boolean).join(` `),style:{maxWidth:n,...a},...o,children:r})}exports.Clamp=n;
+//# sourceMappingURL=Clamp.cjs.map

package/dist/components/Clamp/Clamp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clamp.cjs","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Clamp.module.css\";\n\nexport interface ClampProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum content width in pixels.\n   * The element shrinks freely below this value.\n   * Defaults to `600` — the Adwaita recommended narrow-content width.\n   */\n  maximumSize?: number;\n  /**\n   * Fractional width (0–1) of the viewport to use when the viewport is\n   * narrower than `maximumSize`. Useful for keeping a comfortable margin\n   * on medium-width screens. Set to `1` (default) to always fill the width.\n   */\n  tighteningThreshold?: number;\n  children?: ReactNode;\n}\n\n/**\n * Constrains its child to a maximum width while allowing it to shrink freely,\n * mirroring the Adwaita `AdwClamp` widget.\n *\n * Use this to keep readable line lengths and comfortable reading widths on\n * large screens while still filling the available space on narrow screens.\n *\n * @example\n * // Settings page — content never wider than 600 px\n * <Clamp maximumSize={600}>\n *   <BoxedList>…</BoxedList>\n * </Clamp>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html\n */\nexport function Clamp({\n  maximumSize = 600,\n  children,\n  className,\n  style,\n  ...props\n}: ClampProps) {\n  return (\n    <div\n      className={[styles.clamp, className].filter(Boolean).join(\" \")}\n      style={{ maxWidth: maximumSize, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"6EAkCA,SAAgB,EAAM,CACpB,cAAc,IACd,WACA,YACA,QACA,GAAG,GACU,CACb,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,MAAO,CAAE,SAAU,EAAa,GAAG,EAAO,CAC1C,GAAI,EAEH,WACG,CAAA"}

package/dist/components/Clamp/Clamp.js

@@ -0,0 +1,18 @@
+import e from "./Clamp.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Clamp/Clamp.tsx
+function n({ maximumSize: n = 600, children: r, className: i, style: a, ...o }) {
+	return /* @__PURE__ */ t("div", {
+		className: [e.clamp, i].filter(Boolean).join(" "),
+		style: {
+			maxWidth: n,
+			...a
+		},
+		...o,
+		children: r
+	});
+}
+//#endregion
+export { n as Clamp };
+
+//# sourceMappingURL=Clamp.js.map

package/dist/components/Clamp/Clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clamp.js","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Clamp.module.css\";\n\nexport interface ClampProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum content width in pixels.\n   * The element shrinks freely below this value.\n   * Defaults to `600` — the Adwaita recommended narrow-content width.\n   */\n  maximumSize?: number;\n  /**\n   * Fractional width (0–1) of the viewport to use when the viewport is\n   * narrower than `maximumSize`. Useful for keeping a comfortable margin\n   * on medium-width screens. Set to `1` (default) to always fill the width.\n   */\n  tighteningThreshold?: number;\n  children?: ReactNode;\n}\n\n/**\n * Constrains its child to a maximum width while allowing it to shrink freely,\n * mirroring the Adwaita `AdwClamp` widget.\n *\n * Use this to keep readable line lengths and comfortable reading widths on\n * large screens while still filling the available space on narrow screens.\n *\n * @example\n * // Settings page — content never wider than 600 px\n * <Clamp maximumSize={600}>\n *   <BoxedList>…</BoxedList>\n * </Clamp>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html\n */\nexport function Clamp({\n  maximumSize = 600,\n  children,\n  className,\n  style,\n  ...props\n}: ClampProps) {\n  return (\n    <div\n      className={[styles.clamp, className].filter(Boolean).join(\" \")}\n      style={{ maxWidth: maximumSize, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAkCA,SAAgB,EAAM,EACpB,iBAAc,KACd,aACA,cACA,UACA,GAAG,KACU;AACb,QACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,OAAO;GAAE,UAAU;GAAa,GAAG;GAAO;EAC1C,GAAI;EAEH;EACG,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={clamp:`_clamp_1j51b_6`};exports.default=e;
+//# sourceMappingURL=Clamp.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clamp.module.css.cjs","names":[],"sources":["../../../src/components/Clamp/Clamp.module.css"],"sourcesContent":["/* ─── Clamp ───────────────────────────────────────────────────────────────────\n   Constrains content to maximumSize px while allowing it to shrink.\n   Mirrors AdwClamp: width is 100% up to the max, then stays fixed.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n.clamp {\n  width: 100%;\n  margin-inline: auto; /* center horizontally */\n  box-sizing: border-box;\n}\n"],"mappings":""}

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

@@ -0,0 +1,5 @@
+var e = { clamp: "_clamp_1j51b_6" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Clamp.module.css.js.map

package/dist/components/Clamp/Clamp.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clamp.module.css.js","names":[],"sources":["../../../src/components/Clamp/Clamp.module.css"],"sourcesContent":["/* ─── Clamp ───────────────────────────────────────────────────────────────────\n   Constrains content to maximumSize px while allowing it to shrink.\n   Mirrors AdwClamp: width is 100% up to the max, then stays fixed.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n.clamp {\n  width: 100%;\n  margin-inline: auto; /* center horizontally */\n  box-sizing: border-box;\n}\n"],"mappings":""}

package/dist/components/Clamp.cjs

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

package/dist/components/Clamp.d.ts

@@ -0,0 +1,2 @@
+export * from './Clamp/index'
+export {}

package/dist/components/Clamp.js

@@ -0,0 +1,2 @@
+import { Clamp as e } from "./Clamp/Clamp.js";
+export { e as Clamp };

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ColorPicker.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({color:t,selected:r=!1,size:i=`md`,onSelect:a,disabled:o=!1,className:s,style:c,"aria-label":l,...u}){return(0,n.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":r,"aria-label":l??t,disabled:o,className:[e.default.swatch,e.default[`swatch-${i}`],r?e.default.swatchSelected:null,s].filter(Boolean).join(` `),style:{"--swatch-color":t,...c},onClick:()=>a?.(t),...u,children:r&&(0,n.jsx)(`svg`,{className:e.default.checkmark,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 8l3.5 3.5L13 5`,stroke:`white`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})})}var i=[{value:`#3584e4`,label:`Blue`},{value:`#2ec27e`,label:`Green`},{value:`#f6d32d`,label:`Yellow`},{value:`#ff7800`,label:`Orange`},{value:`#e01b24`,label:`Red`},{value:`#9141ac`,label:`Purple`},{value:`#986a44`,label:`Brown`},{value:`#2190a4`,label:`Teal`},{value:`#5e5c64`,label:`Slate`}];function a({value:a,onChange:o,colors:s=i,allowCustom:c=!1,size:l=`md`,className:u,style:d,"aria-label":f,...p}){let m=(0,t.useRef)(null),h=s.findIndex(e=>e.value===a),g=h>=0?h:0;function _(e){let t=Array.from(e.currentTarget.querySelectorAll(`[role="radio"]:not([disabled])`)),n=document.activeElement,r=t.indexOf(n);if(r===-1)return;let i=-1;if(e.key===`ArrowRight`||e.key===`ArrowDown`?(e.preventDefault(),i=(r+1)%t.length):(e.key===`ArrowLeft`||e.key===`ArrowUp`)&&(e.preventDefault(),i=(r-1+t.length)%t.length),i>=0){t[i].focus();let e=t[i].dataset.color;e&&o?.(e)}}let v=a!==void 0&&!s.some(e=>e.value===a);return(0,n.jsxs)(`div`,{role:`radiogroup`,"aria-label":f??`Color`,className:[e.default.picker,u].filter(Boolean).join(` `),style:d,onKeyDown:_,...p,children:[s.map((e,t)=>(0,n.jsx)(r,{color:e.value,size:l,selected:e.value===a,onSelect:o,"aria-label":e.label??e.value,tabIndex:t===g&&!v?0:-1,"data-color":e.value},e.value)),c&&(0,n.jsxs)(n.Fragment,{children:[v&&a&&(0,n.jsx)(r,{color:a,size:l,selected:!0,onSelect:()=>m.current?.click(),"aria-label":`Custom color`,tabIndex:0,"data-color":a}),(0,n.jsx)(`button`,{type:`button`,"aria-label":`Choose custom color`,className:[e.default.swatch,e.default[`swatch-${l}`],e.default.customButton].filter(Boolean).join(` `),tabIndex:-1,onClick:()=>m.current?.click(),children:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,className:e.default.plusIcon,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3v10M3 8h10`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),(0,n.jsx)(`input`,{ref:m,type:`color`,value:v&&a?a:`#000000`,className:e.default.nativeInput,"aria-hidden":`true`,tabIndex:-1,onChange:e=>o?.(e.target.value)})]})]})}exports.ColorPicker=a,exports.ColorSwatch=r,exports.GNOME_PALETTE=i;
+//# sourceMappingURL=ColorPicker.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.cjs","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":"sGAiCA,SAAgB,EAAY,CAC1B,QACA,WAAW,GACX,OAAO,KACP,WACA,WAAW,GACX,YACA,QACA,aAAc,EACd,GAAG,GACgB,CACnB,OACE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,aAAY,GAAa,EACf,WACV,UAAW,CACT,EAAA,QAAO,OACP,EAAA,QAAO,UAAU,KACjB,EAAW,EAAA,QAAO,eAAiB,KACnC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,iBAAkB,EAAO,GAAG,EAAO,CAC5C,YAAe,IAAW,EAAM,CAChC,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,UAClB,QAAQ,YACR,KAAK,OACL,cAAY,iBAEZ,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,oBACF,OAAO,QACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CAED,CAAA,CAcb,IAAa,EAAoC,CAC/C,CAAE,MAAO,UAAW,MAAO,OAAU,CACrC,CAAE,MAAO,UAAW,MAAO,QAAU,CACrC,CAAE,MAAO,UAAW,MAAO,SAAU,CACrC,CAAE,MAAO,UAAW,MAAO,SAAU,CACrC,CAAE,MAAO,UAAW,MAAO,MAAU,CACrC,CAAE,MAAO,UAAW,MAAO,SAAU,CACrC,CAAE,MAAO,UAAW,MAAO,QAAU,CACrC,CAAE,MAAO,UAAW,MAAO,OAAU,CACrC,CAAE,MAAO,UAAW,MAAO,QAAU,CACtC,CA0CD,SAAgB,EAAY,CAC1B,QACA,WACA,SAAS,EACT,cAAc,GACd,OAAO,KACP,YACA,QACA,aAAc,EACd,GAAG,GACgB,CACnB,IAAM,GAAA,EAAA,EAAA,QAA0C,KAAK,CAG/C,EAAc,EAAO,UAAW,GAAM,EAAE,QAAU,EAAM,CACxD,EAAc,GAAe,EAAI,EAAc,EAGrD,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAM,MAAM,KAChB,EAAE,cAAc,iBACd,iCACD,CACF,CACK,EAAU,SAAS,cACnB,EAAM,EAAI,QAAQ,EAAQ,CAChC,GAAI,IAAQ,GAAI,OAEhB,IAAI,EAAO,GAQX,GAPI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,aACtC,EAAE,gBAAgB,CAClB,GAAQ,EAAM,GAAK,EAAI,SACd,EAAE,MAAQ,aAAe,EAAE,MAAQ,aAC5C,EAAE,gBAAgB,CAClB,GAAQ,EAAM,EAAI,EAAI,QAAU,EAAI,QAElC,GAAQ,EAAG,CACb,EAAI,GAAM,OAAO,CACjB,IAAM,EAAQ,EAAI,GAAM,QAAQ,MAC5B,GAAO,IAAW,EAAM,EAKhC,IAAM,EACJ,IAAU,IAAA,IAAa,CAAC,EAAO,KAAM,GAAM,EAAE,QAAU,EAAM,CAE/D,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,aACL,aAAY,GAAa,QACzB,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACxD,QACP,UAAW,EACX,GAAI,WANN,CAQG,EAAO,KAAK,EAAO,KAClB,EAAA,EAAA,KAAC,EAAD,CAEE,MAAO,EAAM,MACP,OACN,SAAU,EAAM,QAAU,EAC1B,SAAU,EACV,aAAY,EAAM,OAAS,EAAM,MACjC,SAAU,IAAM,GAAe,CAAC,EAAW,EAAI,GAC/C,aAAY,EAAM,MAClB,CARK,EAAM,MAQX,CACF,CAED,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CAEG,GAAY,IACX,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,EACD,OACN,SAAA,GACA,aAAgB,EAAe,SAAS,OAAO,CAC/C,aAAW,eACX,SAAU,EACV,aAAY,EACZ,CAAA,EAIJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAW,sBACX,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAA,QAAO,UAAU,KAAS,EAAA,QAAO,aAAa,CACtE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,SAAqB,GACrB,YAAe,EAAe,SAAS,OAAO,WAE9C,EAAA,EAAA,KAAC,MAAD,CAAK,QAAQ,YAAY,UAAW,EAAA,QAAO,SAAU,cAAY,iBAC/D,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,iBACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,CAAA,CACE,CAAA,CACC,CAAA,EAET,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,KAAK,QACL,MAAO,GAAY,EAAQ,EAAQ,UACnC,UAAW,EAAA,QAAO,YAClB,cAAY,OACZ,SAAU,GACV,SAAW,GAAM,IAAW,EAAE,OAAO,MAAM,CAC3C,CAAA,CACD,CAAA,CAAA,CAED"}

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,152 @@
+import e from "./ColorPicker.module.css.js";
+import { useRef as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ColorPicker/ColorPicker.tsx
+function a({ color: t, selected: n = !1, size: i = "md", onSelect: a, disabled: o = !1, className: s, style: c, "aria-label": l, ...u }) {
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": n,
+		"aria-label": l ?? t,
+		disabled: o,
+		className: [
+			e.swatch,
+			e[`swatch-${i}`],
+			n ? e.swatchSelected : null,
+			s
+		].filter(Boolean).join(" "),
+		style: {
+			"--swatch-color": t,
+			...c
+		},
+		onClick: () => a?.(t),
+		...u,
+		children: n && /* @__PURE__ */ r("svg", {
+			className: e.checkmark,
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ r("path", {
+				d: "M3 8l3.5 3.5L13 5",
+				stroke: "white",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
+var o = [
+	{
+		value: "#3584e4",
+		label: "Blue"
+	},
+	{
+		value: "#2ec27e",
+		label: "Green"
+	},
+	{
+		value: "#f6d32d",
+		label: "Yellow"
+	},
+	{
+		value: "#ff7800",
+		label: "Orange"
+	},
+	{
+		value: "#e01b24",
+		label: "Red"
+	},
+	{
+		value: "#9141ac",
+		label: "Purple"
+	},
+	{
+		value: "#986a44",
+		label: "Brown"
+	},
+	{
+		value: "#2190a4",
+		label: "Teal"
+	},
+	{
+		value: "#5e5c64",
+		label: "Slate"
+	}
+];
+function s({ value: s, onChange: c, colors: l = o, allowCustom: u = !1, size: d = "md", className: f, style: p, "aria-label": m, ...h }) {
+	let g = t(null), _ = l.findIndex((e) => e.value === s), v = _ >= 0 ? _ : 0;
+	function y(e) {
+		let t = Array.from(e.currentTarget.querySelectorAll("[role=\"radio\"]:not([disabled])")), n = document.activeElement, r = t.indexOf(n);
+		if (r === -1) return;
+		let i = -1;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), i = (r + 1) % t.length) : (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), i = (r - 1 + t.length) % t.length), i >= 0) {
+			t[i].focus();
+			let e = t[i].dataset.color;
+			e && c?.(e);
+		}
+	}
+	let b = s !== void 0 && !l.some((e) => e.value === s);
+	return /* @__PURE__ */ i("div", {
+		role: "radiogroup",
+		"aria-label": m ?? "Color",
+		className: [e.picker, f].filter(Boolean).join(" "),
+		style: p,
+		onKeyDown: y,
+		...h,
+		children: [l.map((e, t) => /* @__PURE__ */ r(a, {
+			color: e.value,
+			size: d,
+			selected: e.value === s,
+			onSelect: c,
+			"aria-label": e.label ?? e.value,
+			tabIndex: t === v && !b ? 0 : -1,
+			"data-color": e.value
+		}, e.value)), u && /* @__PURE__ */ i(n, { children: [
+			b && s && /* @__PURE__ */ r(a, {
+				color: s,
+				size: d,
+				selected: !0,
+				onSelect: () => g.current?.click(),
+				"aria-label": "Custom color",
+				tabIndex: 0,
+				"data-color": s
+			}),
+			/* @__PURE__ */ r("button", {
+				type: "button",
+				"aria-label": "Choose custom color",
+				className: [
+					e.swatch,
+					e[`swatch-${d}`],
+					e.customButton
+				].filter(Boolean).join(" "),
+				tabIndex: -1,
+				onClick: () => g.current?.click(),
+				children: /* @__PURE__ */ r("svg", {
+					viewBox: "0 0 16 16",
+					className: e.plusIcon,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ r("path", {
+						d: "M8 3v10M3 8h10",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round"
+					})
+				})
+			}),
+			/* @__PURE__ */ r("input", {
+				ref: g,
+				type: "color",
+				value: b && s ? s : "#000000",
+				className: e.nativeInput,
+				"aria-hidden": "true",
+				tabIndex: -1,
+				onChange: (e) => c?.(e.target.value)
+			})
+		] })]
+	});
+}
+//#endregion
+export { s as ColorPicker, a as ColorSwatch, o as GNOME_PALETTE };
+
+//# sourceMappingURL=ColorPicker.js.map

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

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

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

@@ -0,0 +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;
+//# sourceMappingURL=ColorPicker.module.css.cjs.map

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

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

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

@@ -0,0 +1,17 @@
+//#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 = {
+	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
+};
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=ColorPicker.module.css.js.map

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

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

package/dist/components/ColorPicker.cjs

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

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,2 @@
+export * from './ColorPicker/index'
+export {}

package/dist/components/ColorPicker.js

@@ -0,0 +1,2 @@
+import { ColorPicker as e, ColorSwatch as t, GNOME_PALETTE as n } from "./ColorPicker/ColorPicker.js";
+export { e as ColorPicker, t as ColorSwatch, n as GNOME_PALETTE };

package/dist/components/ColumnView/ColumnView.cjs

@@ -0,0 +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;
+//# sourceMappingURL=ColumnView.cjs.map

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

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