@gnome-ui/react 1.36.1 → 1.36.3

package/dist/components/EntryRow/EntryRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntryRow.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import { useState, useId, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./EntryRow.module.css\";\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = \"\",\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolledValue(e.target.value);\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(\" \")}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(\" \")}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;AA0BA,SAAgB,EAAS,EACvB,UACA,OAAO,GACP,kBAAe,IACf,kBACA,YACA,aACA,aACA,cACA,IAAI,GACJ,aACA,GAAG,KACa;CAChB,IAAM,IAAc,GAAO,EACrB,IAAU,KAAc,GAExB,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,OAAO,EAAa,CAAC,EAC1E,IAAa,IAAe,OAAO,EAAgB,GAAG,GAEtD,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAW,EAAyB,KAAK,EAEzC,IAAU,KAAW,EAAW,SAAS;AAQ/C,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAU,EAAO,UAAU;GAC3B,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,eAAe,EAAS,SAAS,OAAO;YAT1C;GAWG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,SAAD;KACE,SAAS;KACT,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;eAExF;KACK,CAAA,EACR,kBAAC,SAAD;KACE,KAAK;KACL,IAAI;KACJ,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACzF,OAAO;KACG;KACV,eAAe,EAAW,GAAK;KAC/B,cAAc,EAAW,GAAM;KAC/B,WAnCc,MAA2C;AAG/D,MAFK,KAAc,EAAqB,EAAE,OAAO,MAAM,EACvD,IAAgB,EAAE,OAAO,MAAM,EAC/B,IAAW,EAAE;;KAiCP,GAAI;KACJ,CAAA,CACG;;GAEN,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GAC5D"}

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

@@ -0,0 +1,2 @@
+var e={row:`_row_1kogj_3`,focused:`_focused_1kogj_16`,disabled:`_disabled_1kogj_25`,leading:`_leading_1kogj_33`,trailing:`_trailing_1kogj_40`,fieldWrap:`_fieldWrap_1kogj_49`,label:`_label_1kogj_61`,labelFloated:`_labelFloated_1kogj_82`,input:`_input_1kogj_91`,inputFloated:`_inputFloated_1kogj_114`};exports.default=e;
+//# sourceMappingURL=EntryRow.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntryRow.module.css.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 0 var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  cursor: text;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\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/* ─── Leading / trailing ────────────────────────────────────────────────────── */\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.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Field wrap ────────────────────────────────────────────────────────────── */\n\n.fieldWrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-width: 0;\n  min-height: 52px;\n}\n\n/* ─── Floating label ────────────────────────────────────────────────────────── */\n\n.label {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\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\n  transition:\n    top var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default),\n    font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* When floated (focused or has value) the label moves up */\n.labelFloated {\n  top: 10px;\n  transform: translateY(0);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  opacity: 0.7;\n}\n\n/* ─── Input field ───────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n\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\n  /* Hide until floated — the label is the placeholder */\n  opacity: 0;\n  padding-top: 18px;\n  padding-bottom: 4px;\n\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .focused {\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\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .row,\n  .label,\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+var e = {
+	row: "_row_1kogj_3",
+	focused: "_focused_1kogj_16",
+	disabled: "_disabled_1kogj_25",
+	leading: "_leading_1kogj_33",
+	trailing: "_trailing_1kogj_40",
+	fieldWrap: "_fieldWrap_1kogj_49",
+	label: "_label_1kogj_61",
+	labelFloated: "_labelFloated_1kogj_82",
+	input: "_input_1kogj_91",
+	inputFloated: "_inputFloated_1kogj_114"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=EntryRow.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntryRow.module.css.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 0 var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  cursor: text;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\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/* ─── Leading / trailing ────────────────────────────────────────────────────── */\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.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Field wrap ────────────────────────────────────────────────────────────── */\n\n.fieldWrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-width: 0;\n  min-height: 52px;\n}\n\n/* ─── Floating label ────────────────────────────────────────────────────────── */\n\n.label {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\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\n  transition:\n    top var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default),\n    font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* When floated (focused or has value) the label moves up */\n.labelFloated {\n  top: 10px;\n  transform: translateY(0);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  opacity: 0.7;\n}\n\n/* ─── Input field ───────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n\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\n  /* Hide until floated — the label is the placeholder */\n  opacity: 0;\n  padding-top: 18px;\n  padding-bottom: 4px;\n\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .focused {\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\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .row,\n  .label,\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/EntryRow.cjs

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

package/dist/components/EntryRow.d.ts

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

package/dist/components/EntryRow.js

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

package/dist/components/ExpanderRow/ExpanderRow.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Separator/Separator.cjs`),t=require(`./ExpanderRow.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({title:i,subtitle:a,leading:o,trailing:s,children:c,expanded:l,defaultExpanded:u=!1,onExpandedChange:d,className:f,...p}){let m=l!==void 0,[h,g]=(0,n.useState)(u),_=m?l:h,v=(0,n.useId)(),y=(0,n.useId)(),b=()=>{let e=!_;m||g(e),d?.(e)},x=n.Children.toArray(c).filter(Boolean);return(0,r.jsxs)(`div`,{className:[t.default.expanderRow,_?t.default.expanded:null,f].filter(Boolean).join(` `),...p,children:[(0,r.jsxs)(`button`,{id:y,className:t.default.header,"aria-expanded":_,"aria-controls":v,onClick:b,children:[o&&(0,r.jsx)(`span`,{className:t.default.leading,children:o}),(0,r.jsxs)(`span`,{className:t.default.content,children:[(0,r.jsx)(`span`,{className:t.default.title,children:i}),a&&(0,r.jsx)(`span`,{className:t.default.subtitle,children:a})]}),s&&(0,r.jsx)(`span`,{className:t.default.trailing,children:s}),(0,r.jsx)(`span`,{className:[t.default.chevronWrap,_?t.default.chevronOpen:null].filter(Boolean).join(` `),"aria-hidden":`true`,children:(0,r.jsx)(`svg`,{className:t.default.chevron,width:`16`,height:`16`,viewBox:`0 0 16 16`,focusable:`false`,children:(0,r.jsx)(`path`,{d:`M4 6l4 4 4-4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]}),(0,r.jsx)(`div`,{id:v,role:`region`,"aria-labelledby":y,className:t.default.panel,children:(0,r.jsx)(`div`,{className:t.default.panelInner,children:x.map((n,i)=>(0,r.jsxs)(`div`,{className:t.default.childItem,children:[(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})})]})}exports.ExpanderRow=i;
+//# sourceMappingURL=ExpanderRow.cjs.map

package/dist/components/ExpanderRow/ExpanderRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderRow.cjs","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { useState, Children, useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./ExpanderRow.module.css\";\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport function ExpanderRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n    if (!isControlled) setUncontrolledExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span className={[styles.chevronWrap, expanded ? styles.chevronOpen : null].filter(Boolean).join(\" \")} aria-hidden=\"true\">\n          <svg className={styles.chevron} width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" focusable=\"false\">\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div\n        id={panelId}\n        role=\"region\"\n        aria-labelledby={headerId}\n        className={styles.panel}\n      >\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"8IAsCA,SAAgB,EAAY,CAC1B,QACA,WACA,UACA,WACA,WACA,SAAU,EACV,kBAAkB,GAClB,mBACA,YACA,GAAG,GACgB,CACnB,IAAM,EAAe,IAAuB,IAAA,GACtC,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,EAAgB,CAC3E,EAAW,EAAe,EAAqB,EAE/C,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAAkB,CAElB,MAAe,CACnB,IAAM,EAAO,CAAC,EACT,GAAc,EAAwB,EAAK,CAChD,IAAmB,EAAK,EAGpB,EAAa,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAE7D,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAOE,EAAA,EAAA,MAAC,SAAD,CACE,GAAI,EACJ,UAAW,EAAA,QAAO,OAClB,gBAAe,EACf,gBAAe,EACf,QAAS,WALX,CAOG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC3D,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,EAEhE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,YAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,cAAY,iBACjH,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,UAAU,kBACnF,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CACA,IAGT,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,KAAK,SACL,kBAAiB,EACjB,UAAW,EAAA,QAAO,gBAElB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBACpB,EAAW,KAAK,EAAO,KACtB,EAAA,EAAA,MAAC,MAAD,CAAa,UAAW,EAAA,QAAO,mBAA/B,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CAC/B,EACG,EAHI,EAGJ,CACN,CACE,CAAA,CACF,CAAA,CACF"}

package/dist/components/ExpanderRow/ExpanderRow.js

@@ -0,0 +1,81 @@
+import { Separator as e } from "../Separator/Separator.js";
+import t from "./ExpanderRow.module.css.js";
+import { Children as n, useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/ExpanderRow/ExpanderRow.tsx
+function s({ title: s, subtitle: c, leading: l, trailing: u, children: d, expanded: f, defaultExpanded: p = !1, onExpandedChange: m, className: h, ...g }) {
+	let _ = f !== void 0, [v, y] = i(p), b = _ ? f : v, x = r(), S = r(), C = () => {
+		let e = !b;
+		_ || y(e), m?.(e);
+	}, w = n.toArray(d).filter(Boolean);
+	return /* @__PURE__ */ o("div", {
+		className: [
+			t.expanderRow,
+			b ? t.expanded : null,
+			h
+		].filter(Boolean).join(" "),
+		...g,
+		children: [/* @__PURE__ */ o("button", {
+			id: S,
+			className: t.header,
+			"aria-expanded": b,
+			"aria-controls": x,
+			onClick: C,
+			children: [
+				l && /* @__PURE__ */ a("span", {
+					className: t.leading,
+					children: l
+				}),
+				/* @__PURE__ */ o("span", {
+					className: t.content,
+					children: [/* @__PURE__ */ a("span", {
+						className: t.title,
+						children: s
+					}), c && /* @__PURE__ */ a("span", {
+						className: t.subtitle,
+						children: c
+					})]
+				}),
+				u && /* @__PURE__ */ a("span", {
+					className: t.trailing,
+					children: u
+				}),
+				/* @__PURE__ */ a("span", {
+					className: [t.chevronWrap, b ? t.chevronOpen : null].filter(Boolean).join(" "),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ a("svg", {
+						className: t.chevron,
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						focusable: "false",
+						children: /* @__PURE__ */ a("path", {
+							d: "M4 6l4 4 4-4",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				})
+			]
+		}), /* @__PURE__ */ a("div", {
+			id: x,
+			role: "region",
+			"aria-labelledby": S,
+			className: t.panel,
+			children: /* @__PURE__ */ a("div", {
+				className: t.panelInner,
+				children: w.map((n, r) => /* @__PURE__ */ o("div", {
+					className: t.childItem,
+					children: [/* @__PURE__ */ a(e, { "aria-hidden": "true" }), n]
+				}, r))
+			})
+		})]
+	});
+}
+//#endregion
+export { s as ExpanderRow };
+
+//# sourceMappingURL=ExpanderRow.js.map

package/dist/components/ExpanderRow/ExpanderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderRow.js","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { useState, Children, useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./ExpanderRow.module.css\";\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport function ExpanderRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n    if (!isControlled) setUncontrolledExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span className={[styles.chevronWrap, expanded ? styles.chevronOpen : null].filter(Boolean).join(\" \")} aria-hidden=\"true\">\n          <svg className={styles.chevron} width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" focusable=\"false\">\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div\n        id={panelId}\n        role=\"region\"\n        aria-labelledby={headerId}\n        className={styles.panel}\n      >\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsCA,SAAgB,EAAY,EAC1B,UACA,aACA,YACA,aACA,aACA,UAAU,GACV,qBAAkB,IAClB,qBACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAe,MAAuB,KAAA,GACtC,CAAC,GAAsB,KAA2B,EAAS,EAAgB,EAC3E,IAAW,IAAe,IAAqB,GAE/C,IAAU,GAAO,EACjB,IAAW,GAAO,EAElB,UAAe;EACnB,IAAM,IAAO,CAAC;AAEd,EADK,KAAc,EAAwB,EAAK,EAChD,IAAmB,EAAK;IAGpB,IAAa,EAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ;AAE7D,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAa,IAAW,EAAO,WAAW;GAAM;GAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN,CAOE,kBAAC,UAAD;GACE,IAAI;GACJ,WAAW,EAAO;GAClB,iBAAe;GACf,iBAAe;GACf,SAAS;aALX;IAOG,KAAW,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAU;KAAe,CAAA;IAE7D,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAQ;MAAa,CAAA,EAC5C,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAW;MAAgB,CAAA,CAC3D;;IAEN,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAW;KAAgB,CAAA;IAEhE,kBAAC,QAAD;KAAM,WAAW,CAAC,EAAO,aAAa,IAAW,EAAO,cAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KAAE,eAAY;eACjH,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAS,OAAM;MAAK,QAAO;MAAK,SAAQ;MAAY,WAAU;gBACnF,kBAAC,QAAD;OACE,GAAE;OACF,MAAK;OACL,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;OACf,CAAA;MACE,CAAA;KACD,CAAA;IACA;MAGT,kBAAC,OAAD;GACE,IAAI;GACJ,MAAK;GACL,mBAAiB;GACjB,WAAW,EAAO;aAElB,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAW,KAAK,GAAO,MACtB,kBAAC,OAAD;KAAa,WAAW,EAAO;eAA/B,CACE,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,EAC/B,EACG;OAHI,EAGJ,CACN;IACE,CAAA;GACF,CAAA,CACF"}

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

@@ -0,0 +1,2 @@
+var e={expanderRow:`_expanderRow_1wh8c_3`,header:`_header_1wh8c_11`,leading:`_leading_1wh8c_55`,content:`_content_1wh8c_64`,title:`_title_1wh8c_72`,subtitle:`_subtitle_1wh8c_83`,trailing:`_trailing_1wh8c_97`,chevronWrap:`_chevronWrap_1wh8c_106`,chevronOpen:`_chevronOpen_1wh8c_115`,chevron:`_chevron_1wh8c_106`,panel:`_panel_1wh8c_125`,expanded:`_expanded_1wh8c_131`,panelInner:`_panelInner_1wh8c_135`,childItem:`_childItem_1wh8c_142`};exports.default=e;
+//# sourceMappingURL=ExpanderRow.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderRow.module.css.cjs","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.module.css"],"sourcesContent":["/* ─── Wrapper ───────────────────────────────────────────────────────────────── */\n\n.expanderRow {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* ─── Header button ─────────────────────────────────────────────────────────── */\n\n.header {\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.header:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.header:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.header: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.header:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading ───────────────────────────────────────────────────────────────── */\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/* ─── Trailing ──────────────────────────────────────────────────────────────── */\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevronWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: 0.55;\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n.chevron {\n  display: block;\n}\n\n/* ─── Reveal panel (CSS grid height animation) ──────────────────────────────── */\n\n.panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--gnome-duration-normal, 200ms) var(--gnome-easing-default);\n}\n\n.expanded .panel {\n  grid-template-rows: 1fr;\n}\n\n.panelInner {\n  overflow: hidden;\n  min-height: 0;\n}\n\n/* ─── Child row wrapper + divider ───────────────────────────────────────────── */\n\n.childItem {\n  display: flex;\n  flex-direction: column;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .header: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\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel {\n    transition: none;\n  }\n\n  .chevronWrap {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,20 @@
+var e = {
+	expanderRow: "_expanderRow_1wh8c_3",
+	header: "_header_1wh8c_11",
+	leading: "_leading_1wh8c_55",
+	content: "_content_1wh8c_64",
+	title: "_title_1wh8c_72",
+	subtitle: "_subtitle_1wh8c_83",
+	trailing: "_trailing_1wh8c_97",
+	chevronWrap: "_chevronWrap_1wh8c_106",
+	chevronOpen: "_chevronOpen_1wh8c_115",
+	chevron: "_chevron_1wh8c_106",
+	panel: "_panel_1wh8c_125",
+	expanded: "_expanded_1wh8c_131",
+	panelInner: "_panelInner_1wh8c_135",
+	childItem: "_childItem_1wh8c_142"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ExpanderRow.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderRow.module.css.js","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.module.css"],"sourcesContent":["/* ─── Wrapper ───────────────────────────────────────────────────────────────── */\n\n.expanderRow {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* ─── Header button ─────────────────────────────────────────────────────────── */\n\n.header {\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.header:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.header:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.header: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.header:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading ───────────────────────────────────────────────────────────────── */\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/* ─── Trailing ──────────────────────────────────────────────────────────────── */\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevronWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: 0.55;\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n.chevron {\n  display: block;\n}\n\n/* ─── Reveal panel (CSS grid height animation) ──────────────────────────────── */\n\n.panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--gnome-duration-normal, 200ms) var(--gnome-easing-default);\n}\n\n.expanded .panel {\n  grid-template-rows: 1fr;\n}\n\n.panelInner {\n  overflow: hidden;\n  min-height: 0;\n}\n\n/* ─── Child row wrapper + divider ───────────────────────────────────────────── */\n\n.childItem {\n  display: flex;\n  flex-direction: column;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .header: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\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel {\n    transition: none;\n  }\n\n  .chevronWrap {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ExpanderRow.cjs

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

package/dist/components/ExpanderRow.d.ts

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

package/dist/components/ExpanderRow.js

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

package/dist/components/Footer/Footer.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Footer.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({start:n,end:r,children:i,flat:a=!1,className:o,...s}){return(0,t.jsxs)(`footer`,{className:[e.default.footer,a?e.default.flat:null,o].filter(Boolean).join(` `),...s,children:[(0,t.jsx)(`div`,{className:e.default.slot,children:n}),i!=null&&(0,t.jsx)(`div`,{className:e.default.center,children:i}),(0,t.jsx)(`div`,{className:[e.default.slot,e.default.slotEnd].filter(Boolean).join(` `),children:r})]})}exports.Footer=n;
+//# sourceMappingURL=Footer.cjs.map

package/dist/components/Footer/Footer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.cjs","names":[],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Footer.module.css\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  /** Content placed at the leading (left) edge — links, copyright, etc. */\n  start?: ReactNode;\n  /** Content placed at the trailing (right) edge — actions, links, etc. */\n  end?: ReactNode;\n  /** Center content or arbitrary children. */\n  children?: ReactNode;\n  /**\n   * When true the footer has no top border.\n   * Use when the footer is separated from content by another visual boundary.\n   */\n  flat?: boolean;\n}\n\n/**\n * Bottom bar with leading/trailing slots and optional center content.\n *\n * Mirrors the `HeaderBar` pattern at the bottom of a view or window.\n * Accepts plain text, links, and arbitrary ReactNode in each slot.\n *\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function Footer({\n  start,\n  end,\n  children,\n  flat = false,\n  className,\n  ...props\n}: FooterProps) {\n  return (\n    <footer\n      className={[styles.footer, flat ? styles.flat : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <div className={styles.slot}>{start}</div>\n\n      {children != null && (\n        <div className={styles.center}>{children}</div>\n      )}\n\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(\" \")}>\n        {end}\n      </div>\n    </footer>\n  );\n}\n"],"mappings":"8EAyBA,SAAgB,EAAO,CACrB,QACA,MACA,WACA,OAAO,GACP,YACA,GAAG,GACW,CACd,OACE,EAAA,EAAA,MAAC,SAAD,CACE,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAO,EAAA,QAAO,KAAO,KAAM,EAAU,CAC7D,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAME,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAO,EAAY,CAAA,CAEzC,GAAY,OACX,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,WAAe,CAAA,EAGjD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UACpE,EACG,CAAA,CACC"}

package/dist/components/Footer/Footer.js

@@ -0,0 +1,31 @@
+import e from "./Footer.module.css.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Footer/Footer.tsx
+function r({ start: r, end: i, children: a, flat: o = !1, className: s, ...c }) {
+	return /* @__PURE__ */ n("footer", {
+		className: [
+			e.footer,
+			o ? e.flat : null,
+			s
+		].filter(Boolean).join(" "),
+		...c,
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: e.slot,
+				children: r
+			}),
+			a != null && /* @__PURE__ */ t("div", {
+				className: e.center,
+				children: a
+			}),
+			/* @__PURE__ */ t("div", {
+				className: [e.slot, e.slotEnd].filter(Boolean).join(" "),
+				children: i
+			})
+		]
+	});
+}
+//#endregion
+export { r as Footer };
+
+//# sourceMappingURL=Footer.js.map

package/dist/components/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","names":[],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Footer.module.css\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  /** Content placed at the leading (left) edge — links, copyright, etc. */\n  start?: ReactNode;\n  /** Content placed at the trailing (right) edge — actions, links, etc. */\n  end?: ReactNode;\n  /** Center content or arbitrary children. */\n  children?: ReactNode;\n  /**\n   * When true the footer has no top border.\n   * Use when the footer is separated from content by another visual boundary.\n   */\n  flat?: boolean;\n}\n\n/**\n * Bottom bar with leading/trailing slots and optional center content.\n *\n * Mirrors the `HeaderBar` pattern at the bottom of a view or window.\n * Accepts plain text, links, and arbitrary ReactNode in each slot.\n *\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function Footer({\n  start,\n  end,\n  children,\n  flat = false,\n  className,\n  ...props\n}: FooterProps) {\n  return (\n    <footer\n      className={[styles.footer, flat ? styles.flat : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <div className={styles.slot}>{start}</div>\n\n      {children != null && (\n        <div className={styles.center}>{children}</div>\n      )}\n\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(\" \")}>\n        {end}\n      </div>\n    </footer>\n  );\n}\n"],"mappings":";;;AAyBA,SAAgB,EAAO,EACrB,UACA,QACA,aACA,UAAO,IACP,cACA,GAAG,KACW;AACd,QACE,kBAAC,UAAD;EACE,WAAW;GAAC,EAAO;GAAQ,IAAO,EAAO,OAAO;GAAM;GAAU,CAC7D,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN;GAME,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAO;IAAY,CAAA;GAEzC,KAAY,QACX,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS;IAAe,CAAA;GAGjD,kBAAC,OAAD;IAAK,WAAW,CAAC,EAAO,MAAM,EAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cACpE;IACG,CAAA;GACC"}

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

@@ -0,0 +1,2 @@
+var e={footer:`_footer_10xz9_3`,flat:`_flat_10xz9_23`,slot:`_slot_10xz9_29`,slotEnd:`_slotEnd_10xz9_36`,center:`_center_10xz9_42`};exports.default=e;
+//# sourceMappingURL=Footer.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.module.css.cjs","names":[],"sources":["../../../src/components/Footer/Footer.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.footer {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 40px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-top: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-top-color: transparent;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Center content ───────────────────────────────────────────────────────── */\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Links inside footer ──────────────────────────────────────────────────── */\n\n.footer a {\n  color: inherit;\n  text-decoration: none;\n  opacity: 0.7;\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.footer a:hover {\n  opacity: 1;\n}\n\n.footer a:focus-visible {\n  outline: var(--gnome-focus-ring-width, 2px) solid var(--gnome-focus-ring-color, #1c71d8);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n  border-radius: var(--gnome-radius-sm, 4px);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .footer {\n    border-top-color: var(--gnome-headerbar-border-color, rgba(255, 255, 255, 0.1));\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .footer a {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,11 @@
+var e = {
+	footer: "_footer_10xz9_3",
+	flat: "_flat_10xz9_23",
+	slot: "_slot_10xz9_29",
+	slotEnd: "_slotEnd_10xz9_36",
+	center: "_center_10xz9_42"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Footer.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.module.css.js","names":[],"sources":["../../../src/components/Footer/Footer.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.footer {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 40px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-top: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-top-color: transparent;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Center content ───────────────────────────────────────────────────────── */\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Links inside footer ──────────────────────────────────────────────────── */\n\n.footer a {\n  color: inherit;\n  text-decoration: none;\n  opacity: 0.7;\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.footer a:hover {\n  opacity: 1;\n}\n\n.footer a:focus-visible {\n  outline: var(--gnome-focus-ring-width, 2px) solid var(--gnome-focus-ring-color, #1c71d8);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n  border-radius: var(--gnome-radius-sm, 4px);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .footer {\n    border-top-color: var(--gnome-headerbar-border-color, rgba(255, 255, 255, 0.1));\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .footer a {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Footer.cjs

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

package/dist/components/Footer.d.ts

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

package/dist/components/Footer.js

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

package/dist/components/Frame/Frame.cjs

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

package/dist/components/Frame/Frame.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.cjs","names":[],"sources":["../../../src/components/Frame/Frame.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Frame.module.css\";\n\nexport interface FrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/**\n * Simple bordered surface with border-radius but no background fill.\n *\n * Use to visually delimit a region without adding the elevated appearance\n * of a `Card`. Mirrors `GtkFrame` default styling and the libadwaita\n * `.frame` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#frame-style-class\n */\nexport function Frame({ children, className, ...props }: FrameProps) {\n  return (\n    <div\n      className={[styles.frame, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"6EAgBA,SAAgB,EAAM,CAAE,WAAU,YAAW,GAAG,GAAqB,CACnE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,EAEH,WACG,CAAA"}

package/dist/components/Frame/Frame.js

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

package/dist/components/Frame/Frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.js","names":[],"sources":["../../../src/components/Frame/Frame.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Frame.module.css\";\n\nexport interface FrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/**\n * Simple bordered surface with border-radius but no background fill.\n *\n * Use to visually delimit a region without adding the elevated appearance\n * of a `Card`. Mirrors `GtkFrame` default styling and the libadwaita\n * `.frame` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#frame-style-class\n */\nexport function Frame({ children, className, ...props }: FrameProps) {\n  return (\n    <div\n      className={[styles.frame, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAqB;AACnE,QACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;EAEH;EACG,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.module.css.cjs","names":[],"sources":["../../../src/components/Frame/Frame.module.css"],"sourcesContent":["/* ─── Frame ───────────────────────────────────────────────────────────────────\n   Bordered surface without background fill — mirrors GtkFrame / .frame.\n   ─────────────────────────────────────────────────────────────────────────── */\n\n.frame {\n  border: 1px solid var(--gnome-borders, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md);\n  overflow: hidden;\n}\n\n@media (prefers-color-scheme: dark) {\n  .frame {\n    border-color: var(--gnome-borders, rgba(255, 255, 255, 0.12));\n  }\n}\n\n@media (prefers-contrast: more) {\n  .frame {\n    border-width: 2px;\n  }\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.module.css.js","names":[],"sources":["../../../src/components/Frame/Frame.module.css"],"sourcesContent":["/* ─── Frame ───────────────────────────────────────────────────────────────────\n   Bordered surface without background fill — mirrors GtkFrame / .frame.\n   ─────────────────────────────────────────────────────────────────────────── */\n\n.frame {\n  border: 1px solid var(--gnome-borders, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md);\n  overflow: hidden;\n}\n\n@media (prefers-color-scheme: dark) {\n  .frame {\n    border-color: var(--gnome-borders, rgba(255, 255, 255, 0.12));\n  }\n}\n\n@media (prefers-contrast: more) {\n  .frame {\n    border-width: 2px;\n  }\n}\n"],"mappings":""}

package/dist/components/Frame.cjs

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

package/dist/components/Frame.d.ts

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

package/dist/components/Frame.js

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

package/dist/components/HeaderBar/HeaderBar.cjs

@@ -0,0 +1,2 @@
+const e=require(`./HeaderBar.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,start:r,end:i,flat:a=!1,className:o,...s}){return(0,t.jsxs)(`header`,{className:[e.default.headerBar,a?e.default.flat:null,o].filter(Boolean).join(` `),...s,children:[(0,t.jsx)(`div`,{className:e.default.slot,children:r}),(0,t.jsx)(`div`,{className:e.default.titleSlot,"aria-live":`polite`,children:typeof n==`string`?(0,t.jsx)(`span`,{className:e.default.title,children:n}):n}),(0,t.jsx)(`div`,{className:[e.default.slot,e.default.slotEnd].filter(Boolean).join(` `),children:i})]})}exports.HeaderBar=n;
+//# sourceMappingURL=HeaderBar.cjs.map

package/dist/components/HeaderBar/HeaderBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBar.cjs","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./HeaderBar.module.css\";\n\nexport interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Centered title. Pass a string or a custom element. */\n  title?: ReactNode;\n  /** Controls placed at the leading (left) edge — back button, menu, etc. */\n  start?: ReactNode;\n  /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */\n  end?: ReactNode;\n  /**\n   * When true the header bar blends into the window chrome\n   * (no bottom border, slightly transparent background).\n   * Use for the topmost bar of a full-window layout.\n   */\n  flat?: boolean;\n}\n\n/**\n * Title bar with centered title and leading/trailing action slots.\n *\n * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons\n * (`<Button variant=\"flat\">`) inside the header bar per GNOME HIG.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function HeaderBar({\n  title,\n  start,\n  end,\n  flat = false,\n  className,\n  ...props\n}: HeaderBarProps) {\n  return (\n    <header\n      className={[styles.headerBar, flat ? styles.flat : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Leading slot */}\n      <div className={styles.slot}>\n        {start}\n      </div>\n\n      {/* Centered title */}\n      <div className={styles.titleSlot} aria-live=\"polite\">\n        {typeof title === \"string\" ? (\n          <span className={styles.title}>{title}</span>\n        ) : (\n          title\n        )}\n      </div>\n\n      {/* Trailing slot */}\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(\" \")}>\n        {end}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"iFA2BA,SAAgB,EAAU,CACxB,QACA,QACA,MACA,OAAO,GACP,YACA,GAAG,GACc,CACjB,OACE,EAAA,EAAA,MAAC,SAAD,CACE,UAAW,CAAC,EAAA,QAAO,UAAW,EAAO,EAAA,QAAO,KAAO,KAAM,EAAU,CAChE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAOE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cACpB,EACG,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,UAAW,YAAU,kBACzC,OAAO,GAAU,UAChB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAE7C,EAEE,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UACpE,EACG,CAAA,CACC"}

package/dist/components/HeaderBar/HeaderBar.js

@@ -0,0 +1,35 @@
+import e from "./HeaderBar.module.css.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/HeaderBar/HeaderBar.tsx
+function r({ title: r, start: i, end: a, flat: o = !1, className: s, ...c }) {
+	return /* @__PURE__ */ n("header", {
+		className: [
+			e.headerBar,
+			o ? e.flat : null,
+			s
+		].filter(Boolean).join(" "),
+		...c,
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: e.slot,
+				children: i
+			}),
+			/* @__PURE__ */ t("div", {
+				className: e.titleSlot,
+				"aria-live": "polite",
+				children: typeof r == "string" ? /* @__PURE__ */ t("span", {
+					className: e.title,
+					children: r
+				}) : r
+			}),
+			/* @__PURE__ */ t("div", {
+				className: [e.slot, e.slotEnd].filter(Boolean).join(" "),
+				children: a
+			})
+		]
+	});
+}
+//#endregion
+export { r as HeaderBar };
+
+//# sourceMappingURL=HeaderBar.js.map

package/dist/components/HeaderBar/HeaderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBar.js","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./HeaderBar.module.css\";\n\nexport interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Centered title. Pass a string or a custom element. */\n  title?: ReactNode;\n  /** Controls placed at the leading (left) edge — back button, menu, etc. */\n  start?: ReactNode;\n  /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */\n  end?: ReactNode;\n  /**\n   * When true the header bar blends into the window chrome\n   * (no bottom border, slightly transparent background).\n   * Use for the topmost bar of a full-window layout.\n   */\n  flat?: boolean;\n}\n\n/**\n * Title bar with centered title and leading/trailing action slots.\n *\n * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons\n * (`<Button variant=\"flat\">`) inside the header bar per GNOME HIG.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function HeaderBar({\n  title,\n  start,\n  end,\n  flat = false,\n  className,\n  ...props\n}: HeaderBarProps) {\n  return (\n    <header\n      className={[styles.headerBar, flat ? styles.flat : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Leading slot */}\n      <div className={styles.slot}>\n        {start}\n      </div>\n\n      {/* Centered title */}\n      <div className={styles.titleSlot} aria-live=\"polite\">\n        {typeof title === \"string\" ? (\n          <span className={styles.title}>{title}</span>\n        ) : (\n          title\n        )}\n      </div>\n\n      {/* Trailing slot */}\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(\" \")}>\n        {end}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;AA2BA,SAAgB,EAAU,EACxB,UACA,UACA,QACA,UAAO,IACP,cACA,GAAG,KACc;AACjB,QACE,kBAAC,UAAD;EACE,WAAW;GAAC,EAAO;GAAW,IAAO,EAAO,OAAO;GAAM;GAAU,CAChE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN;GAOE,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB;IACG,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAW,aAAU;cACzC,OAAO,KAAU,WAChB,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;KAAa,CAAA,GAE7C;IAEE,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,CAAC,EAAO,MAAM,EAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cACpE;IACG,CAAA;GACC"}

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

@@ -0,0 +1,2 @@
+var e={headerBar:`_headerBar_1rr5r_3`,flat:`_flat_1rr5r_22`,slot:`_slot_1rr5r_29`,slotEnd:`_slotEnd_1rr5r_36`,titleSlot:`_titleSlot_1rr5r_42`,title:`_title_1rr5r_42`};exports.default=e;
+//# sourceMappingURL=HeaderBar.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBar.module.css.cjs","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.headerBar {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 47px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n\n  font-family: var(--gnome-font-family);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Title slot (center) ──────────────────────────────────────────────────── */\n\n.titleSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Title text ───────────────────────────────────────────────────────────── */\n\n.title {\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-heading, 1.2);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .headerBar {\n    border-bottom-color: var(--gnome-headerbar-border-color, rgba(255, 255, 255, 0.1));\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+var e = {
+	headerBar: "_headerBar_1rr5r_3",
+	flat: "_flat_1rr5r_22",
+	slot: "_slot_1rr5r_29",
+	slotEnd: "_slotEnd_1rr5r_36",
+	titleSlot: "_titleSlot_1rr5r_42",
+	title: "_title_1rr5r_42"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=HeaderBar.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBar.module.css.js","names":[],"sources":["../../../src/components/HeaderBar/HeaderBar.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.headerBar {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 0 var(--gnome-space-2, 12px);\n  min-height: 47px;\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n\n  font-family: var(--gnome-font-family);\n}\n\n/* ─── Flat variant ─────────────────────────────────────────────────────────── */\n\n.flat {\n  border-bottom-color: transparent;\n  box-shadow: none;\n}\n\n/* ─── Leading / trailing slots ─────────────────────────────────────────────── */\n\n.slot {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.slotEnd {\n  justify-content: flex-end;\n}\n\n/* ─── Title slot (center) ──────────────────────────────────────────────────── */\n\n.titleSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  padding: 0 var(--gnome-space-1, 6px);\n}\n\n/* ─── Title text ───────────────────────────────────────────────────────────── */\n\n.title {\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-heading, 1.2);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .headerBar {\n    border-bottom-color: var(--gnome-headerbar-border-color, rgba(255, 255, 255, 0.1));\n  }\n}\n"],"mappings":""}

package/dist/components/HeaderBar.cjs

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

package/dist/components/HeaderBar.d.ts

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

package/dist/components/HeaderBar.js

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

package/dist/components/Icon/Icon.cjs

@@ -0,0 +1,2 @@
+let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n({icon:n,size:r=`md`,label:i,width:a,height:o,...s}){let c=t[r];return(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:n.viewBox,width:a??c,height:o??c,fill:`currentColor`,"aria-label":i,"aria-hidden":i?void 0:!0,role:i?`img`:void 0,focusable:`false`,...s,children:n.paths.map((t,n)=>(0,e.jsx)(`path`,{d:t.d,fillRule:t.fillRule,clipRule:t.clipRule},n))})}exports.Icon=n;
+//# sourceMappingURL=Icon.cjs.map

package/dist/components/Icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\n/**\n * Renders an `@gnome-ui/icons` definition as an inline SVG.\n *\n * Uses `currentColor` so the icon inherits the text color of its parent.\n * Pass `label` only when the icon conveys meaning on its own;\n * omit it when a sibling text label already describes the action.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={icon.viewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {icon.paths.map((p, i) => (\n        <path\n          key={i}\n          d={p.d}\n          fillRule={p.fillRule}\n          clipRule={p.clipRule}\n        />\n      ))}\n    </svg>\n  );\n}\n"],"mappings":"mCAqBA,IAAM,EAAqC,CAAE,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,CAarE,SAAgB,EAAK,CACnB,OACA,OAAO,KACP,QACA,QACA,SACA,GAAG,GACS,CACZ,IAAM,EAAK,EAAS,GAEpB,OACE,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,6BACN,QAAS,EAAK,QACd,MAAO,GAAS,EAChB,OAAQ,GAAU,EAClB,KAAK,eACL,aAAY,EACZ,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,GAAI,WAEH,EAAK,MAAM,KAAK,EAAG,KAClB,EAAA,EAAA,KAAC,OAAD,CAEE,EAAG,EAAE,EACL,SAAU,EAAE,SACZ,SAAU,EAAE,SACZ,CAJK,EAIL,CACF,CACE,CAAA"}

package/dist/components/Icon/Icon.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Icon/Icon.tsx
+var t = {
+	sm: 12,
+	md: 16,
+	lg: 20
+};
+function n({ icon: n, size: r = "md", label: i, width: a, height: o, ...s }) {
+	let c = t[r];
+	return /* @__PURE__ */ e("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: n.viewBox,
+		width: a ?? c,
+		height: o ?? c,
+		fill: "currentColor",
+		"aria-label": i,
+		"aria-hidden": i ? void 0 : !0,
+		role: i ? "img" : void 0,
+		focusable: "false",
+		...s,
+		children: n.paths.map((t, n) => /* @__PURE__ */ e("path", {
+			d: t.d,
+			fillRule: t.fillRule,
+			clipRule: t.clipRule
+		}, n))
+	});
+}
+//#endregion
+export { n as Icon };
+
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\n/**\n * Renders an `@gnome-ui/icons` definition as an inline SVG.\n *\n * Uses `currentColor` so the icon inherits the text color of its parent.\n * Pass `label` only when the icon conveys meaning on its own;\n * omit it when a sibling text label already describes the action.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={icon.viewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {icon.paths.map((p, i) => (\n        <path\n          key={i}\n          d={p.d}\n          fillRule={p.fillRule}\n          clipRule={p.clipRule}\n        />\n      ))}\n    </svg>\n  );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAarE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS;AAEpB,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS,EAAK;EACd,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH,EAAK,MAAM,KAAK,GAAG,MAClB,kBAAC,QAAD;GAEE,GAAG,EAAE;GACL,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,EAJK,EAIL,CACF;EACE,CAAA"}

package/dist/components/Icon.cjs

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