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

@gnome-ui/react 1.45.0 → 1.45.1

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

Files changed (610) hide show

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

@@ -1,2 +1,2 @@
-var e={row:`_row_1dije_3`,disabled:`_disabled_1dije_41`,checkboxWrap:`_checkboxWrap_1dije_49`,checkbox:`_checkbox_1dije_49`,checkboxChecked:`_checkboxChecked_1dije_71`,checkmark:`_checkmark_1dije_77`,leading:`_leading_1dije_84`,content:`_content_1dije_93`,title:`_title_1dije_101`,subtitle:`_subtitle_1dije_112`};exports.default=e;
+var e={row:`_row_1ckav_3`,disabled:`_disabled_1ckav_41`,checkboxWrap:`_checkboxWrap_1ckav_49`,checkbox:`_checkbox_1ckav_49`,checkboxChecked:`_checkboxChecked_1ckav_71`,checkmark:`_checkmark_1ckav_77`,leading:`_leading_1ckav_84`,content:`_content_1ckav_93`,title:`_title_1ckav_101`,subtitle:`_subtitle_1ckav_112`};exports.default=e;
 //# sourceMappingURL=CheckRow.module.css.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckRow.module.css.cjs","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n min-height: 52px;\n width: 100%;\n\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n font: inherit;\n outline: none;\n cursor: pointer;\n text-align: start;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\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/ ─── Checkbox visual ───────────────────────────────────────────────────────── /\n\n.checkboxWrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: var(--gnome-radius-sm, 4px);\n border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n background-color: transparent;\n color: transparent;\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 color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n color: #ffffff;\n}\n\n.checkmark {\n display: block;\n flex-shrink: 0;\n}\n\n/ ─── Leading icon/avatar ───────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Text content ──────────────────────────────────────────────────────────── /\n\n.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n gap: 2px;\n}\n\n.title {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.subtitle {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n\n .checkbox {\n border-width: 2px;\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CheckRow.module.css.cjs","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n min-height: 52px;\n width: 100%;\n\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n font: inherit;\n outline: none;\n cursor: pointer;\n text-align: start;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\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/ ─── Checkbox visual ───────────────────────────────────────────────────────── /\n\n.checkboxWrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: var(--gnome-radius-sm, 4px);\n border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n background-color: transparent;\n color: transparent;\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 color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n color: #ffffff;\n}\n\n.checkmark {\n display: block;\n flex-shrink: 0;\n}\n\n/ ─── Leading icon/avatar ───────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Text content ──────────────────────────────────────────────────────────── /\n\n.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n gap: 2px;\n}\n\n.title {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.subtitle {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0\n calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n\n .checkbox {\n border-width: 2px;\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox {\n transition: none;\n }\n}\n"],"mappings":""}

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

@@ -1,14 +1,14 @@
 var e = {
-	row: "_row_1dije_3",
-	disabled: "_disabled_1dije_41",
-	checkboxWrap: "_checkboxWrap_1dije_49",
-	checkbox: "_checkbox_1dije_49",
-	checkboxChecked: "_checkboxChecked_1dije_71",
-	checkmark: "_checkmark_1dije_77",
-	leading: "_leading_1dije_84",
-	content: "_content_1dije_93",
-	title: "_title_1dije_101",
-	subtitle: "_subtitle_1dije_112"
+	row: "_row_1ckav_3",
+	disabled: "_disabled_1ckav_41",
+	checkboxWrap: "_checkboxWrap_1ckav_49",
+	checkbox: "_checkbox_1ckav_49",
+	checkboxChecked: "_checkboxChecked_1ckav_71",
+	checkmark: "_checkmark_1ckav_77",
+	leading: "_leading_1ckav_84",
+	content: "_content_1ckav_93",
+	title: "_title_1ckav_101",
+	subtitle: "_subtitle_1ckav_112"
 };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckRow.module.css.js","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n min-height: 52px;\n width: 100%;\n\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n font: inherit;\n outline: none;\n cursor: pointer;\n text-align: start;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\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/ ─── Checkbox visual ───────────────────────────────────────────────────────── /\n\n.checkboxWrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: var(--gnome-radius-sm, 4px);\n border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n background-color: transparent;\n color: transparent;\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 color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n color: #ffffff;\n}\n\n.checkmark {\n display: block;\n flex-shrink: 0;\n}\n\n/ ─── Leading icon/avatar ───────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Text content ──────────────────────────────────────────────────────────── /\n\n.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n gap: 2px;\n}\n\n.title {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.subtitle {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n\n .checkbox {\n border-width: 2px;\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CheckRow.module.css.js","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n min-height: 52px;\n width: 100%;\n\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: none;\n font: inherit;\n outline: none;\n cursor: pointer;\n text-align: start;\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\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/ ─── Checkbox visual ───────────────────────────────────────────────────────── /\n\n.checkboxWrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: var(--gnome-radius-sm, 4px);\n border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n background-color: transparent;\n color: transparent;\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 color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n color: #ffffff;\n}\n\n.checkmark {\n display: block;\n flex-shrink: 0;\n}\n\n/ ─── Leading icon/avatar ───────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/ ─── Text content ──────────────────────────────────────────────────────────── /\n\n.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n gap: 2px;\n}\n\n.title {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.subtitle {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ ─── High contrast ─────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .row:focus-visible {\n box-shadow:\n inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4),\n inset 0 0 0\n calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n var(--gnome-window-bg-color, #fafafa);\n }\n\n .checkbox {\n border-width: 2px;\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox {\n transition: none;\n }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { CheckRow } from './CheckRow';
 export type { CheckRowProps } from './CheckRow';
+export { CheckRow } from './CheckRow';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useRef, ~~type InputHTMLAttributes~~ } from \"react\~~";\~~nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n /*\n Indeterminate state — shown when only some children in a group are checked.\n * Takes visual precedence over `checked`.\n /\n indeterminate?: boolean;\n /* Accessible label. Required when no visible `<label>` is associated. /\n \"aria-label\"?: string;\n}\n\n/\n Checkbox for multi-selection, following the GNOME HIG and Adwaita style.\n \n Supports three states: unchecked, checked, and indeterminate (mixed).\n * Use `indeterminate` for \"select all\" controls when only some items are selected.\n \n Renders as `<input type=\"checkbox\">` — natively keyboard-accessible and\n * compatible with standard form libraries.\n \n @see https://developer.gnome.org/hig/patterns/controls/checkboxes.html\n */\nexport function Checkbox({ indeterminate = false, className, ...props }: CheckboxProps) {\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <input\n ref={ref}\n type=\"checkbox\"\n className={[styles.checkbox, className].filter(Boolean).join(\" \")}\n {...props}\n />\n );\n}\n"],"mappings":"mGAyBA,SAAgB,EAAS,CAAE,gBAAgB,GAAO,YAAW,GAAG,GAAwB,CACtF,IAAM,GAAA,EAAA,EAAA,QAA+B,KAAK,CAQ1C,OANA,EAAA,EAAA,eAAgB,CACV,EAAI,UACN,EAAI,QAAQ,cAAgB,IAE7B,CAAC,EAAc,CAAC,EAGjB,EAAA,EAAA,KAAC,QAAD,CACO,MACL,KAAK,WACL,UAAW,CAAC,EAAA,QAAO,SAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACjE,GAAI,EACJ,CAAA"}
1	+ {"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useEffect, useRef } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n /*\n Indeterminate state — shown when only some children in a group are checked.\n * Takes visual precedence over `checked`.\n /\n indeterminate?: boolean;\n /* Accessible label. Required when no visible `<label>` is associated. /\n 'aria-label'?: string;\n}\n\n/\n Checkbox for multi-selection, following the GNOME HIG and Adwaita style.\n \n Supports three states: unchecked, checked, and indeterminate (mixed).\n * Use `indeterminate` for \"select all\" controls when only some items are selected.\n \n Renders as `<input type=\"checkbox\">` — natively keyboard-accessible and\n * compatible with standard form libraries.\n \n @see https://developer.gnome.org/hig/patterns/controls/checkboxes.html\n */\nexport function Checkbox({ indeterminate = false, className, ...props }: CheckboxProps) {\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <input\n ref={ref}\n type=\"checkbox\"\n className={[styles.checkbox, className].filter(Boolean).join(' ')}\n {...props}\n />\n );\n}\n"],"mappings":"mGAyBA,SAAgB,EAAS,CAAE,gBAAgB,GAAO,YAAW,GAAG,GAAwB,CACtF,IAAM,GAAA,EAAA,EAAA,QAA+B,KAAK,CAQ1C,OANA,EAAA,EAAA,eAAgB,CACV,EAAI,UACN,EAAI,QAAQ,cAAgB,IAE7B,CAAC,EAAc,CAAC,EAGjB,EAAA,EAAA,KAAC,QAAD,CACO,MACL,KAAK,WACL,UAAW,CAAC,EAAA,QAAO,SAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACjE,GAAI,EACJ,CAAA"}

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

@@ -1,12 +1,12 @@
 import { InputHTMLAttributes } from 'react';
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /**
      * Indeterminate state — shown when only some children in a group are checked.
      * Takes visual precedence over `checked`.
      */
     indeterminate?: boolean;
     /** Accessible label. Required when no visible `<label>` is associated. */
-    "aria-label"?: string;
+    'aria-label'?: string;
 }
 /**
  * Checkbox for multi-selection, following the GNOME HIG and Adwaita style.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useRef, ~~type InputHTMLAttributes~~ } from \"react\~~";\~~nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n /*\n Indeterminate state — shown when only some children in a group are checked.\n * Takes visual precedence over `checked`.\n /\n indeterminate?: boolean;\n /* Accessible label. Required when no visible `<label>` is associated. /\n \"aria-label\"?: string;\n}\n\n/\n Checkbox for multi-selection, following the GNOME HIG and Adwaita style.\n \n Supports three states: unchecked, checked, and indeterminate (mixed).\n * Use `indeterminate` for \"select all\" controls when only some items are selected.\n \n Renders as `<input type=\"checkbox\">` — natively keyboard-accessible and\n * compatible with standard form libraries.\n \n @see https://developer.gnome.org/hig/patterns/controls/checkboxes.html\n */\nexport function Checkbox({ indeterminate = false, className, ...props }: CheckboxProps) {\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <input\n ref={ref}\n type=\"checkbox\"\n className={[styles.checkbox, className].filter(Boolean).join(\" \")}\n {...props}\n />\n );\n}\n"],"mappings":";;;;AAyBA,SAAgB,EAAS,EAAE,mBAAgB,IAAO,cAAW,GAAG,KAAwB;CACtF,IAAM,IAAM,EAAyB,KAAK;AAQ1C,QANA,QAAgB;AACd,EAAI,EAAI,YACN,EAAI,QAAQ,gBAAgB;IAE7B,CAAC,EAAc,CAAC,EAGjB,kBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW,CAAC,EAAO,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACjE,GAAI;EACJ,CAAA"}
1	+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useEffect, useRef } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n /*\n Indeterminate state — shown when only some children in a group are checked.\n * Takes visual precedence over `checked`.\n /\n indeterminate?: boolean;\n /* Accessible label. Required when no visible `<label>` is associated. /\n 'aria-label'?: string;\n}\n\n/\n Checkbox for multi-selection, following the GNOME HIG and Adwaita style.\n \n Supports three states: unchecked, checked, and indeterminate (mixed).\n * Use `indeterminate` for \"select all\" controls when only some items are selected.\n \n Renders as `<input type=\"checkbox\">` — natively keyboard-accessible and\n * compatible with standard form libraries.\n \n @see https://developer.gnome.org/hig/patterns/controls/checkboxes.html\n */\nexport function Checkbox({ indeterminate = false, className, ...props }: CheckboxProps) {\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <input\n ref={ref}\n type=\"checkbox\"\n className={[styles.checkbox, className].filter(Boolean).join(' ')}\n {...props}\n />\n );\n}\n"],"mappings":";;;;AAyBA,SAAgB,EAAS,EAAE,mBAAgB,IAAO,cAAW,GAAG,KAAwB;CACtF,IAAM,IAAM,EAAyB,KAAK;AAQ1C,QANA,QAAgB;AACd,EAAI,EAAI,YACN,EAAI,QAAQ,gBAAgB;IAE7B,CAAC,EAAc,CAAC,EAGjB,kBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW,CAAC,EAAO,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACjE,GAAI;EACJ,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={checkbox:`_checkbox_jnffk_3`};exports.default=e;
+var e={checkbox:`_checkbox_15vcc_3`};exports.default=e;
 //# sourceMappingURL=Checkbox.module.css.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.module.css.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── /\n\n.checkbox {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n\n width: 18px;\n height: 18px;\n border-radius: var(--gnome-radius-sm, 4px);\n\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\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/ ─── Checkmark (checked) ──────────────────────────────────────────────────── /\n\n.checkbox::before {\n content: \"\";\n display: block;\n opacity: 0;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n opacity: 1;\n / SVG checkmark rendered via clip-path /\n width: 10px;\n height: 7px;\n background-color: #ffffff;\n clip-path: polygon(\n 14% 44~~%,\n~~ 0 58~~%,\n~~ 36% 100~~%,\n~~ 100% 12~~%,\n~~ 84% 0~~%,\n~~ 36% 68~~%\n~~ );\n}\n\n/ ─── Indeterminate (mixed) ────────────────────────────────────────────────── /\n\n.checkbox:indeterminate {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n opacity: 1;\n width: 10px;\n height: 2px;\n background-color: #ffffff;\n clip-path: none;\n border-radius: 1px;\n}\n\n/ ─── Focus ────────────────────────────────────────────────────────────────── /\n\n.checkbox:focus-visible {\n outline: none;\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, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Hover ────────────────────────────────────────────────────────────────── /\n\n.checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-5, #9a9996);\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-card-bg-color, #ffffff) 94~~%,\n~~ black 6~~%\n~~ );\n}\n\n/ ─── Disabled ─────────────────────────────────────────────────────────────── /\n\n.checkbox:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .checkbox {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: var(--gnome-dark-1, #77767b);\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-4, #c0bfbc);\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-card-bg-color, #383838) 85~~%,\n~~ white 15~~%\n~~ );\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .checkbox {\n border-width: 2px;\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n background-color: var(--gnome-hover-overlay);\n }\n}\n\n/ ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox,\n .checkbox::before {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Checkbox.module.css.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── /\n\n.checkbox {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n\n width: 18px;\n height: 18px;\n border-radius: var(--gnome-radius-sm, 4px);\n\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\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/ ─── Checkmark (checked) ──────────────────────────────────────────────────── /\n\n.checkbox::before {\n content: \"\";\n display: block;\n opacity: 0;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n opacity: 1;\n / SVG checkmark rendered via clip-path /\n width: 10px;\n height: 7px;\n background-color: #ffffff;\n clip-path: polygon(14% 44%, 0 58%, 36% 100%, 100% 12%, 84% 0%, 36% 68%);\n}\n\n/ ─── Indeterminate (mixed) ────────────────────────────────────────────────── /\n\n.checkbox:indeterminate {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n opacity: 1;\n width: 10px;\n height: 2px;\n background-color: #ffffff;\n clip-path: none;\n border-radius: 1px;\n}\n\n/ ─── Focus ────────────────────────────────────────────────────────────────── /\n\n.checkbox:focus-visible {\n outline: none;\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, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Hover ────────────────────────────────────────────────────────────────── /\n\n.checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-5, #9a9996);\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n/ ─── Disabled ─────────────────────────────────────────────────────────────── /\n\n.checkbox:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .checkbox {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: var(--gnome-dark-1, #77767b);\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-4, #c0bfbc);\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white 15%);\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .checkbox {\n border-width: 2px;\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n background-color: var(--gnome-hover-overlay);\n }\n}\n\n/ ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox,\n .checkbox::before {\n transition: none;\n }\n}\n"],"mappings":""}

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

@@ -1,4 +1,4 @@
-var e = { checkbox: "_checkbox_jnffk_3" };
+var e = { checkbox: "_checkbox_15vcc_3" };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.module.css.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── /\n\n.checkbox {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n\n width: 18px;\n height: 18px;\n border-radius: var(--gnome-radius-sm, 4px);\n\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\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/ ─── Checkmark (checked) ──────────────────────────────────────────────────── /\n\n.checkbox::before {\n content: \"\";\n display: block;\n opacity: 0;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n opacity: 1;\n / SVG checkmark rendered via clip-path /\n width: 10px;\n height: 7px;\n background-color: #ffffff;\n clip-path: polygon(\n 14% 44~~%,\n~~ 0 58~~%,\n~~ 36% 100~~%,\n~~ 100% 12~~%,\n~~ 84% 0~~%,\n~~ 36% 68~~%\n~~ );\n}\n\n/ ─── Indeterminate (mixed) ────────────────────────────────────────────────── /\n\n.checkbox:indeterminate {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n opacity: 1;\n width: 10px;\n height: 2px;\n background-color: #ffffff;\n clip-path: none;\n border-radius: 1px;\n}\n\n/ ─── Focus ────────────────────────────────────────────────────────────────── /\n\n.checkbox:focus-visible {\n outline: none;\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, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Hover ────────────────────────────────────────────────────────────────── /\n\n.checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-5, #9a9996);\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-card-bg-color, #ffffff) 94~~%,\n~~ black 6~~%\n~~ );\n}\n\n/ ─── Disabled ─────────────────────────────────────────────────────────────── /\n\n.checkbox:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .checkbox {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: var(--gnome-dark-1, #77767b);\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-4, #c0bfbc);\n background-color: color-mix(\n in srgb~~,\n~~ var(--gnome-card-bg-color, #383838) 85~~%,\n~~ white 15~~%\n~~ );\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .checkbox {\n border-width: 2px;\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n background-color: var(--gnome-hover-overlay);\n }\n}\n\n/ ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox,\n .checkbox::before {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Checkbox.module.css.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── /\n\n.checkbox {\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n\n width: 18px;\n height: 18px;\n border-radius: var(--gnome-radius-sm, 4px);\n\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\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/ ─── Checkmark (checked) ──────────────────────────────────────────────────── /\n\n.checkbox::before {\n content: \"\";\n display: block;\n opacity: 0;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n opacity: 1;\n / SVG checkmark rendered via clip-path /\n width: 10px;\n height: 7px;\n background-color: #ffffff;\n clip-path: polygon(14% 44%, 0 58%, 36% 100%, 100% 12%, 84% 0%, 36% 68%);\n}\n\n/ ─── Indeterminate (mixed) ────────────────────────────────────────────────── /\n\n.checkbox:indeterminate {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n opacity: 1;\n width: 10px;\n height: 2px;\n background-color: #ffffff;\n clip-path: none;\n border-radius: 1px;\n}\n\n/ ─── Focus ────────────────────────────────────────────────────────────────── /\n\n.checkbox:focus-visible {\n outline: none;\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, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/ ─── Hover ────────────────────────────────────────────────────────────────── /\n\n.checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-5, #9a9996);\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n/ ─── Disabled ─────────────────────────────────────────────────────────────── /\n\n.checkbox:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/ ─── Dark mode ────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .checkbox {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: var(--gnome-dark-1, #77767b);\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-light-4, #c0bfbc);\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white 15%);\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── /\n\n@media (prefers-contrast: more) {\n .checkbox {\n border-width: 2px;\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n }\n\n .checkbox:not(:checked):not(:indeterminate):hover {\n border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n background-color: var(--gnome-hover-overlay);\n }\n}\n\n/ ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox,\n .checkbox::before {\n transition: none;\n }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.cjs","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":"~~uIA0CA~~,SAAgB,EAAK,CACnB,QACA,OACA,WACA,aAAa,GACb,WAAW,GACX,WACA,WAAW,GACX,YACA,GAAG,GACS,CACZ,IAAM,EAAgB,GAAc,CAAC,EAE/B,EAAc,CAClB,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAgB,EAAA,QAAO,WAAa,KACpC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEN,GACJ,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAY,UAAU,IACZ,WACV,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAU,EAEZ,SAAU,EAAW,GAAK,YAE1B,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAK,cAAA,GAAc,CAAA,CACpC,CAAA,CAEV,CAAA,CAAA,CAoBL,OAjBI,GAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,WACL,eAAc,EACd,aAAY,EACF,WACV,QAAS,EACT,UAAW,EACX,GAAK,WAEJ,EACM,CAAA,EAKX,EAAA,EAAA,KAAC,OAAD,~~CACE~~,UAAW,~~EACX~~,GAAI,~~WAEH~~,EACI,CAAA"}
1	+ {"version":3,"file":"Chip.cjs","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { Close } from '@gnome-ui/icons';\nimport type { HTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\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 className={chipClasses} {...props}>\n {content}\n </span>\n );\n}\n"],"mappings":"uIA4CA,SAAgB,EAAK,CACnB,QACA,OACA,WACA,aAAa,GACb,WAAW,GACX,WACA,WAAW,GACX,YACA,GAAG,GACS,CACZ,IAAM,EAAgB,GAAc,CAAC,EAE/B,EAAc,CAClB,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAgB,EAAA,QAAO,WAAa,KACpC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEN,GACJ,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAY,UAAU,IACZ,WACV,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAU,EAEZ,SAAU,EAAW,GAAK,YAE1B,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAK,cAAA,GAAc,CAAA,CACpC,CAAA,CAEV,CAAA,CAAA,CAoBL,OAjBI,GAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,WACL,eAAc,EACd,aAAY,EACF,WACV,QAAS,EACT,UAAW,EACX,GAAK,WAEJ,EACM,CAAA,EAKX,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAa,GAAI,WAC/B,EACI,CAAA"}

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

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
 import { IconDefinition } from '@gnome-ui/icons';
+import { HTMLAttributes } from 'react';
 export interface ChipProps extends HTMLAttributes<HTMLElement> {
     /** Text label displayed inside the chip. */
     label: string;

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { Close } from '@gnome-ui/icons';\nimport type { HTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\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 className={chipClasses} {...props}>\n {content}\n </span>\n );\n}\n"],"mappings":";;;;;AA4CA,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;EAAM,WAAW;EAAa,GAAI;YAC/B;EACI,CAAA"}

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

@@ -1,2 +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;
+var e={chip:`_chip_7pedl_3`,selectable:`_selectable_7pedl_31`,selected:`_selected_7pedl_55`,disabled:`_disabled_7pedl_68`,icon:`_icon_7pedl_76`,label:`_label_7pedl_85`,remove:`_remove_7pedl_91`};exports.default=e;
 //# sourceMappingURL=Chip.module.css.cjs.map

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

	@@ -1 +1 @@
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":""}
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 CHANGED Viewed

@@ -1,11 +1,11 @@
 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"
+	chip: "_chip_7pedl_3",
+	selectable: "_selectable_7pedl_31",
+	selected: "_selected_7pedl_55",
+	disabled: "_disabled_7pedl_68",
+	icon: "_icon_7pedl_76",
+	label: "_label_7pedl_85",
+	remove: "_remove_7pedl_91"
 };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
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":""}
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/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export { Chip } from './Chip';
 export type { ChipProps } from './Chip';
+export { Chip } from './Chip';

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"Clamp.cjs","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\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({ maximumSize = 600, children, className, style, ...props }: 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":"6EAmCA,SAAgB,EAAM,CAAE,cAAc,IAAK,WAAU,YAAW,QAAO,GAAG,GAAqB,CAC7F,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.map CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"Clamp.js","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\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({ maximumSize = 600, children, className, style, ...props }: 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":";;;AAmCA,SAAgB,EAAM,EAAE,iBAAc,KAAK,aAAU,cAAW,UAAO,GAAG,KAAqB;AAC7F,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/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export { Clamp } from './Clamp';
 export type { ClampProps } from './Clamp';
+export { Clamp } from './Clamp';

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"ColorPicker.cjs","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.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-export type ColorSwatchSize = "sm" | "md" | "lg";
-export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "onSelect"> {
+export type ColorSwatchSize = 'sm' | 'md' | 'lg';
+export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {
     /** CSS color value displayed as the swatch background. */
     color: string;
     /** Whether this swatch is the currently selected color. */
@@ -10,7 +10,7 @@ export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>
     /** Called when the user clicks or activates the swatch. */
     onSelect?: (color: string) => void;
     /** Accessible label. Defaults to the color value. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     disabled?: boolean;
 }
 /**
@@ -19,7 +19,7 @@ export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>
  * Can be used standalone or composed inside `ColorPicker`.
  * Shows a white checkmark when `selected`.
  */
-export declare function ColorSwatch({ color, selected, size, onSelect, disabled, className, style, "aria-label": ariaLabel, ...props }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorSwatch({ color, selected, size, onSelect, disabled, className, style, 'aria-label': ariaLabel, ...props }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
 export interface ColorPickerColor {
     /** CSS color value (hex recommended). */
     value: string;
@@ -28,7 +28,7 @@ export interface ColorPickerColor {
 }
 /** Default Adwaita-named palette (matches Avatar color set). */
 export declare const GNOME_PALETTE: ColorPickerColor[];
-export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Currently selected color value. */
     value?: string;
     /** Called when the user selects a color. */
@@ -67,4 +67,4 @@ export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html
  */
-export declare function ColorPicker({ value, onChange, colors, allowCustom, size, className, style, "aria-label": ariaLabel, ...props }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPicker({ value, onChange, colors, allowCustom, size, className, style, 'aria-label': ariaLabel, ...props }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

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

	@@ -1 +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":";;;;AAiCA,SAAgB,EAAY,EAC1B,UACA,cAAW,IACX,UAAO,MACP,aACA,cAAW,IACX,cACA,UACA,cAAc,GACd,GAAG,KACgB;AACnB,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY,KAAa;EACf;EACV,WAAW;GACT,EAAO;GACP,EAAO,UAAU;GACjB,IAAW,EAAO,iBAAiB;GACnC;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,kBAAkB;GAAO,GAAG;GAAO;EAC5C,eAAe,IAAW,EAAM;EAChC,GAAI;YAEH,KACC,kBAAC,OAAD;GACE,WAAW,EAAO;GAClB,SAAQ;GACR,MAAK;GACL,eAAY;aAEZ,kBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,CAAA;GACE,CAAA;EAED,CAAA;;AAcb,IAAa,IAAoC;CAC/C;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACrC;EAAE,OAAO;EAAW,OAAO;EAAU;CACtC;AA0CD,SAAgB,EAAY,EAC1B,UACA,aACA,YAAS,GACT,iBAAc,IACd,UAAO,MACP,cACA,UACA,cAAc,GACd,GAAG,KACgB;CACnB,IAAM,IAAiB,EAAyB,KAAK,EAG/C,IAAc,EAAO,WAAW,MAAM,EAAE,UAAU,EAAM,EACxD,IAAc,KAAe,IAAI,IAAc;CAGrD,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAM,MAAM,KAChB,EAAE,cAAc,iBACd,mCACD,CACF,EACK,IAAU,SAAS,eACnB,IAAM,EAAI,QAAQ,EAAQ;AAChC,MAAI,MAAQ,GAAI;EAEhB,IAAI,IAAO;AAQX,MAPI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eACtC,EAAE,gBAAgB,EAClB,KAAQ,IAAM,KAAK,EAAI,WACd,EAAE,QAAQ,eAAe,EAAE,QAAQ,eAC5C,EAAE,gBAAgB,EAClB,KAAQ,IAAM,IAAI,EAAI,UAAU,EAAI,SAElC,KAAQ,GAAG;AACb,KAAI,GAAM,OAAO;GACjB,IAAM,IAAQ,EAAI,GAAM,QAAQ;AAChC,GAAI,KAAO,IAAW,EAAM;;;CAKhC,IAAM,IACJ,MAAU,KAAA,KAAa,CAAC,EAAO,MAAM,MAAM,EAAE,UAAU,EAAM;AAE/D,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,KAAa;EACzB,WAAW,CAAC,EAAO,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxD;EACP,WAAW;EACX,GAAI;YANN,CAQG,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAEE,OAAO,EAAM;GACP;GACN,UAAU,EAAM,UAAU;GAC1B,UAAU;GACV,cAAY,EAAM,SAAS,EAAM;GACjC,UAAU,MAAM,KAAe,CAAC,IAAW,IAAI;GAC/C,cAAY,EAAM;GAClB,EARK,EAAM,MAQX,CACF,EAED,KACC,kBAAA,GAAA,EAAA,UAAA;GAEG,KAAY,KACX,kBAAC,GAAD;IACE,OAAO;IACD;IACN,UAAA;IACA,gBAAgB,EAAe,SAAS,OAAO;IAC/C,cAAW;IACX,UAAU;IACV,cAAY;IACZ,CAAA;GAIJ,kBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,WAAW;KAAC,EAAO;KAAQ,EAAO,UAAU;KAAS,EAAO;KAAa,CACtE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,UAAqB;IACrB,eAAe,EAAe,SAAS,OAAO;cAE9C,kBAAC,OAAD;KAAK,SAAQ;KAAY,WAAW,EAAO;KAAU,eAAY;eAC/D,kBAAC,QAAD;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,CAAA;KACE,CAAA;IACC,CAAA;GAET,kBAAC,SAAD;IACE,KAAK;IACL,MAAK;IACL,OAAO,KAAY,IAAQ,IAAQ;IACnC,WAAW,EAAO;IAClB,eAAY;IACZ,UAAU;IACV,WAAW,MAAM,IAAW,EAAE,OAAO,MAAM;IAC3C,CAAA;GACD,EAAA,CAAA,CAED"}
1	+ {"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 CHANGED Viewed

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