@gnome-ui/react 1.45.1 → 1.45.2

package/dist/components/Box/Box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mCAkFA,SAAgB,EAAI,CAClB,cAAc,WACd,UAAU,EACV,QACA,UAAU,QACV,UACA,YACA,QACA,WACA,GAAG,GACQ,CACX,IAAM,EAAyB,IAAgB,aAAe,SAAW,UAczE,OACE,EAAA,EAAA,KAAC,MAAD,CAAgB,YAAW,MAbQ,CACnC,QAAS,OACT,cAAe,IAAgB,aAAe,MAAQ,SACtD,IAAK,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACpD,WAAY,GAAS,EACrB,eAAgB,EAChB,GAAI,IAAY,IAAA,IAAa,CAC3B,QAAS,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACzD,CACD,GAAG,EACJ,CAGkD,GAAI,EAClD,WACG,CAAA"}
+{"version":3,"file":"Box.cjs","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport const Box = ({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) => {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":"mCAkFA,IAAa,GAAO,CAClB,cAAc,WACd,UAAU,EACV,QACA,UAAU,QACV,UACA,YACA,QACA,WACA,GAAG,KACW,CACd,IAAM,EAAyB,IAAgB,aAAe,SAAW,UAczE,OACE,EAAA,EAAA,KAAC,MAAD,CAAgB,YAAW,MAAO,CAZlC,QAAS,OACT,cAAe,IAAgB,aAAe,MAAQ,SACtD,IAAK,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACpD,WAAY,GAAS,EACrB,eAAgB,EAChB,GAAI,IAAY,IAAA,IAAa,CAC3B,QAAS,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,CAC1D,EACA,GAAG,CAI+B,EAAe,GAAI,EAClD,UACE,CAAA,CAET"}

package/dist/components/Box/Box.d.ts

@@ -69,4 +69,4 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://developer.gnome.org/hig/guidelines/spacing.html
  */
-export declare function Box({ orientation, spacing, align, justify, padding, className, style, children, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ orientation, spacing, align, justify, padding, className, style, children, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Box/Box.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Box/Box.tsx
-function t({ orientation: t = "vertical", spacing: n = 6, align: r, justify: i = "start", padding: a, className: o, style: s, children: c, ...l }) {
+var t = ({ orientation: t = "vertical", spacing: n = 6, align: r, justify: i = "start", padding: a, className: o, style: s, children: c, ...l }) => {
 	let u = t === "horizontal" ? "center" : "stretch";
 	return /* @__PURE__ */ e("div", {
 		className: o,
@@ -16,7 +16,7 @@ function t({ orientation: t = "vertical", spacing: n = 6, align: r, justify: i =
 		...l,
 		children: c
 	});
-}
+};
 //#endregion
 export { t as Box };
 

package/dist/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;AAkFA,SAAgB,EAAI,EAClB,iBAAc,YACd,aAAU,GACV,UACA,aAAU,SACV,YACA,cACA,UACA,aACA,GAAG,KACQ;CACX,IAAM,IAAyB,MAAgB,eAAe,WAAW;AAczE,QACE,kBAAC,OAAD;EAAgB;EAAW,OAbQ;GACnC,SAAS;GACT,eAAe,MAAgB,eAAe,QAAQ;GACtD,KAAK,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM;GACpD,YAAY,KAAS;GACrB,gBAAgB;GAChB,GAAI,MAAY,KAAA,KAAa,EAC3B,SAAS,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM,GACzD;GACD,GAAG;GACJ;EAGkD,GAAI;EAClD;EACG,CAAA"}
+{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport const Box = ({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) => {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;AAkFA,IAAa,KAAO,EAClB,iBAAc,YACd,aAAU,GACV,UACA,aAAU,SACV,YACA,cACA,UACA,aACA,GAAG,QACW;CACd,IAAM,IAAyB,MAAgB,eAAe,WAAW;CAczE,OACE,kBAAC,OAAD;EAAgB;EAAW,OAAO;GAZlC,SAAS;GACT,eAAe,MAAgB,eAAe,QAAQ;GACtD,KAAK,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM;GACpD,YAAY,KAAS;GACrB,gBAAgB;GAChB,GAAI,MAAY,KAAA,KAAa,EAC3B,SAAS,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM,EAC1D;GACA,GAAG;EAI+B;EAAe,GAAI;EAClD;CACE,CAAA;AAET"}

package/dist/components/Box.cjs

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

package/dist/components/BoxedList/BoxedList.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Separator/Separator.cjs`),t=require(`./BoxedList.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({children:i,variant:a=`default`,className:o,...s}){let c=n.Children.toArray(i).filter(Boolean),l=a===`separate`;return(0,r.jsx)(`ul`,{className:[t.default.list,l?t.default.separate:null,o].filter(Boolean).join(` `),...s,children:c.map((n,i)=>(0,r.jsxs)(`li`,{className:l?t.default.separateItem:t.default.item,children:[!l&&i>0&&(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})}exports.BoxedList=i;
+const e=require("../Separator/Separator.cjs"),t=require("./BoxedList.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=({children:i,variant:a=`default`,className:o,...s})=>{let c=n.Children.toArray(i).filter(Boolean),l=a===`separate`;return(0,r.jsx)(`ul`,{className:[t.default.list,l?t.default.separate:null,o].filter(Boolean).join(` `),...s,children:c.map((n,i)=>(0,r.jsxs)(`li`,{className:l?t.default.separateItem:t.default.item,children:[!l&&i>0&&(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})};exports.BoxedList=i;
 //# sourceMappingURL=BoxedList.cjs.map

package/dist/components/BoxedList/BoxedList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = 'default', className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"4IA+BA,SAAgB,EAAU,CAAE,WAAU,UAAU,UAAW,YAAW,GAAG,GAAyB,CAChG,IAAM,EAAQ,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAClD,EAAW,IAAY,WAE7B,OACE,EAAA,EAAA,KAAC,KAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,EAAM,KAAK,EAAO,KACjB,EAAA,EAAA,MAAC,KAAD,CAAY,UAAW,EAAW,EAAA,QAAO,aAAe,EAAA,QAAO,cAA/D,CACG,CAAC,GAAY,EAAI,IAAK,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CACtD,EACE,EAHI,EAGJ,CACL,CACC,CAAA"}
+{"version":3,"file":"BoxedList.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const BoxedList = ({\n  children,\n  variant = 'default',\n  className,\n  ...props\n}: BoxedListProps) => {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":"4IA+BA,IAAa,GAAa,CACxB,WACA,UAAU,UACV,YACA,GAAG,KACiB,CACpB,IAAM,EAAQ,EAAA,SAAS,QAAQ,CAAQ,EAAE,OAAO,OAAO,EACjD,EAAW,IAAY,WAE7B,OACE,EAAA,EAAA,KAAC,KAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAEH,EAAM,KAAK,EAAO,KACjB,EAAA,EAAA,MAAC,KAAD,CAAY,UAAW,EAAW,EAAA,QAAO,aAAe,EAAA,QAAO,cAA/D,CACG,CAAC,GAAY,EAAI,IAAK,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,MAAQ,CAAA,EACrD,CACC,GAHK,CAGL,CACL,CACC,CAAA,CAER"}

package/dist/components/BoxedList/BoxedList.d.ts

@@ -22,4 +22,4 @@ export interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards
  * @see https://developer.gnome.org/hig/patterns/containers.html
  */
-export declare function BoxedList({ children, variant, className, ...props }: BoxedListProps): import("react/jsx-runtime").JSX.Element;
+export declare const BoxedList: ({ children, variant, className, ...props }: BoxedListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BoxedList/BoxedList.js

@@ -3,7 +3,7 @@ import t from "./BoxedList.module.css.js";
 import { Children as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/BoxedList/BoxedList.tsx
-function a({ children: a, variant: o = "default", className: s, ...c }) {
+var a = ({ children: a, variant: o = "default", className: s, ...c }) => {
 	let l = n.toArray(a).filter(Boolean), u = o === "separate";
 	return /* @__PURE__ */ r("ul", {
 		className: [
@@ -17,7 +17,7 @@ function a({ children: a, variant: o = "default", className: s, ...c }) {
 			children: [!u && a > 0 && /* @__PURE__ */ r(e, { "aria-hidden": "true" }), n]
 		}, a))
 	});
-}
+};
 //#endregion
 export { a as BoxedList };
 

package/dist/components/BoxedList/BoxedList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = 'default', className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;AA+BA,SAAgB,EAAU,EAAE,aAAU,aAAU,WAAW,cAAW,GAAG,KAAyB;CAChG,IAAM,IAAQ,EAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,EAClD,IAAW,MAAY;AAE7B,QACE,kBAAC,MAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;GAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,MAAD;GAAY,WAAW,IAAW,EAAO,eAAe,EAAO;aAA/D,CACG,CAAC,KAAY,IAAI,KAAK,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,EACtD,EACE;KAHI,EAGJ,CACL;EACC,CAAA"}
+{"version":3,"file":"BoxedList.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const BoxedList = ({\n  children,\n  variant = 'default',\n  className,\n  ...props\n}: BoxedListProps) => {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAa,EACxB,aACA,aAAU,WACV,cACA,GAAG,QACiB;CACpB,IAAM,IAAQ,EAAS,QAAQ,CAAQ,EAAE,OAAO,OAAO,GACjD,IAAW,MAAY;CAE7B,OACE,kBAAC,MAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;EAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,MAAD;GAAY,WAAW,IAAW,EAAO,eAAe,EAAO;aAA/D,CACG,CAAC,KAAY,IAAI,KAAK,kBAAC,GAAD,EAAW,eAAY,OAAQ,CAAA,GACrD,CACC;KAHK,CAGL,CACL;CACC,CAAA;AAER"}

package/dist/components/BoxedList.cjs

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

package/dist/components/BreakpointBin/BreakpointBin.cjs

@@ -1,2 +1,2 @@
-let e=require(`react`),t=require(`react/jsx-runtime`);function n({breakpoints:n,children:r,className:i,style:a,...o}){let s=(0,e.useRef)(null),[c,l]=(0,e.useState)({activeBreakpoint:null,width:0});return(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let t=[...n].sort((e,t)=>e.maxWidth-t.maxWidth),r=e=>({activeBreakpoint:(t.find(t=>e<=t.maxWidth)??null)?.name??null,width:e});l(r(e.offsetWidth));let i=new ResizeObserver(e=>{let t=e[0];t&&l(r(t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width))});return i.observe(e),()=>i.disconnect()},[n]),(0,t.jsx)(`div`,{ref:s,className:i,style:{minWidth:0,...a},"data-breakpoint":c.activeBreakpoint??void 0,...o,children:r(c)})}exports.BreakpointBin=n;
+let e=require("react"),t=require("react/jsx-runtime");var n=({breakpoints:n,children:r,className:i,style:a,...o})=>{let s=(0,e.useRef)(null),[c,l]=(0,e.useState)({activeBreakpoint:null,width:0});return(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let t=[...n].sort((e,t)=>e.maxWidth-t.maxWidth),r=e=>({activeBreakpoint:(t.find(t=>e<=t.maxWidth)??null)?.name??null,width:e});l(r(e.offsetWidth));let i=new ResizeObserver(e=>{let t=e[0];t&&l(r(t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width))});return i.observe(e),()=>i.disconnect()},[n]),(0,t.jsx)(`div`,{ref:s,className:i,style:{minWidth:0,...a},"data-breakpoint":c.activeBreakpoint??void 0,...o,children:r(c)})};exports.BreakpointBin=n;
 //# sourceMappingURL=BreakpointBin.cjs.map

package/dist/components/BreakpointBin/BreakpointBin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.cjs","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport function BreakpointBin({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n}\n"],"mappings":"sDAgFA,SAAgB,EAAc,CAC5B,cACA,WACA,YACA,QACA,GAAG,GACkB,CACrB,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,EACR,CAAC,CA8CF,OA5CA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QAExB,GAAI,CAAC,EACH,OAIF,IAAM,EAAS,CAAC,GAAG,EAAY,CAAC,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,SAAS,CAEjE,EAAY,IAGT,CAAE,kBAFK,EAAO,KAAM,GAAO,GAAS,EAAG,SAAS,EAAI,OAEzB,MAAQ,KAAM,QAAO,EAIzD,EAAS,EAAS,EAAG,YAAY,CAAC,CAElC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GAEjB,GAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,MAEjD,CAAC,EACzB,CAIF,OAFA,EAAS,QAAQ,EAAG,KAEP,EAAS,YAAY,EACjC,CAAC,EAAY,CAAC,EAUf,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAXkC,CAGpC,SAAU,EACV,GAAG,EACJ,CAOG,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,EAAM,CACZ,CAAA"}
+{"version":3,"file":"BreakpointBin.cjs","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":"sDAgFA,IAAa,GAAiB,CAC5B,cACA,WACA,YACA,QACA,GAAG,KACqB,CACxB,IAAM,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,CACT,CAAC,EA8CD,OA5CA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QAExB,GAAI,CAAC,EACH,OAIF,IAAM,EAAS,CAAC,GAAG,CAAW,EAAE,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,QAAQ,EAEhE,EAAY,IAGT,CAAE,kBAFK,EAAO,KAAM,GAAO,GAAS,EAAG,QAAQ,GAAK,OAEzB,MAAQ,KAAM,OAAM,GAIxD,EAAS,EAAS,EAAG,WAAW,CAAC,EAEjC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GAEjB,GAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,KAElD,CAAC,CAC1B,CAAC,EAID,OAFA,EAAS,QAAQ,CAAE,MAEN,EAAS,WAAW,CACnC,EAAG,CAAC,CAAW,CAAC,GAUd,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAAO,CART,SAAU,EACV,GAAG,CAOM,EACP,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,CAAK,CACZ,CAAA,CAET"}

package/dist/components/BreakpointBin/BreakpointBin.d.ts

@@ -63,4 +63,4 @@ export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html
  */
-export declare function BreakpointBin({ breakpoints, children, className, style, ...props }: BreakpointBinProps): import("react/jsx-runtime").JSX.Element;
+export declare const BreakpointBin: ({ breakpoints, children, className, style, ...props }: BreakpointBinProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BreakpointBin/BreakpointBin.js

@@ -1,7 +1,7 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/BreakpointBin/BreakpointBin.tsx
-function i({ breakpoints: i, children: a, className: o, style: s, ...c }) {
+var i = ({ breakpoints: i, children: a, className: o, style: s, ...c }) => {
 	let l = t(null), [u, d] = n({
 		activeBreakpoint: null,
 		width: 0
@@ -30,7 +30,7 @@ function i({ breakpoints: i, children: a, className: o, style: s, ...c }) {
 		...c,
 		children: a(u)
 	});
-}
+};
 //#endregion
 export { i as BreakpointBin };
 

package/dist/components/BreakpointBin/BreakpointBin.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport function BreakpointBin({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n}\n"],"mappings":";;;AAgFA,SAAgB,EAAc,EAC5B,gBACA,aACA,cACA,UACA,GAAG,KACkB;CACrB,IAAM,IAAe,EAAuB,KAAK,EAC3C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;EACR,CAAC;AA8CF,QA5CA,QAAgB;EACd,IAAM,IAAK,EAAa;AAExB,MAAI,CAAC,EACH;EAIF,IAAM,IAAS,CAAC,GAAG,EAAY,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,EAEjE,KAAY,OAGT;GAAE,mBAFK,EAAO,MAAM,MAAO,KAAS,EAAG,SAAS,IAAI,OAEzB,QAAQ;GAAM;GAAO;AAIzD,IAAS,EAAS,EAAG,YAAY,CAAC;EAElC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;AAEjB,QAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,MAEjD,CAAC;IACzB;AAIF,SAFA,EAAS,QAAQ,EAAG,QAEP,EAAS,YAAY;IACjC,CAAC,EAAY,CAAC,EAUf,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAXkC;GAGpC,UAAU;GACV,GAAG;GACJ;EAOG,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,EAAM;EACZ,CAAA"}
+{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":";;;AAgFA,IAAa,KAAiB,EAC5B,gBACA,aACA,cACA,UACA,GAAG,QACqB;CACxB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;CACT,CAAC;CA8CD,OA5CA,QAAgB;EACd,IAAM,IAAK,EAAa;EAExB,IAAI,CAAC,GACH;EAIF,IAAM,IAAS,CAAC,GAAG,CAAW,EAAE,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,GAEhE,KAAY,OAGT;GAAE,mBAFK,EAAO,MAAM,MAAO,KAAS,EAAG,QAAQ,KAAK,OAEzB,QAAQ;GAAM;EAAM;EAIxD,EAAS,EAAS,EAAG,WAAW,CAAC;EAEjC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;GAEjB,KAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,KAElD,CAAC;EAC1B,CAAC;EAID,OAFA,EAAS,QAAQ,CAAE,SAEN,EAAS,WAAW;CACnC,GAAG,CAAC,CAAW,CAAC,GAUd,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GART,UAAU;GACV,GAAG;EAOM;EACP,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,CAAK;CACZ,CAAA;AAET"}

package/dist/components/BreakpointBin.cjs

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

package/dist/components/Button/Button.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Button.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.forwardRef)(function({variant:t=`default`,size:r=`md`,shape:i=`default`,osd:a=!1,leadingIcon:o,trailingIcon:s,children:c,className:l,...u},d){return(0,n.jsxs)(`button`,{ref:d,className:[e.default.button,e.default[t],r===`md`?null:e.default[r],i===`default`?null:e.default[i],a?e.default.osd:null,l].filter(Boolean).join(` `),...u,children:[o,c,s]})});exports.Button=r;
+const e=require("./Button.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(function({variant:t=`default`,size:r=`md`,shape:i=`default`,osd:a=!1,leadingIcon:o,trailingIcon:s,children:c,className:l,...u},d){return(0,n.jsxs)(`button`,{ref:d,className:[e.default.button,e.default[t],r===`md`?null:e.default[r],i==="default"?null:e.default[i],a?e.default.osd:null,l].filter(Boolean).join(` `),...u,children:[o,c,s]})});exports.Button=r;
 //# sourceMappingURL=Button.cjs.map

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAsCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAC/D,CACE,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GAEL,EACA,CAYA,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAG4B,GAAI,WAA1C,CACG,EACA,EACA,EACM,IAEX"}
+{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAsCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAC/D,CACE,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GAEL,EACA,CAYA,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAGuB,EAAS,GAAI,WAA1C,CACG,EACA,EACA,CACK,GAEZ,CAAC"}

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAsCA,IAAa,IAAS,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KAEL,GACA;AAYA,QACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAG4B,GAAI;YAA1C;GACG;GACA;GACA;GACM;;EAEX"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAsCA,IAAa,IAAS,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KAEL,GACA;CAYA,OACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAGuB;EAAS,GAAI;YAA1C;GACG;GACA;GACA;EACK;;AAEZ,CAAC"}

package/dist/components/Button.cjs

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

package/dist/components/ButtonContent/ButtonContent.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ButtonContent.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({icon:n,label:r,iconPosition:i=`start`,className:a,...o}){return(0,t.jsxs)(`span`,{className:[e.default.content,i===`end`?e.default.iconEnd:null,a].filter(Boolean).join(` `),...o,children:[n&&i===`start`&&(0,t.jsx)(`span`,{className:e.default.icon,"aria-hidden":`true`,children:n}),(0,t.jsx)(`span`,{className:e.default.label,children:r}),n&&i===`end`&&(0,t.jsx)(`span`,{className:e.default.icon,"aria-hidden":`true`,children:n})]})}exports.ButtonContent=n;
+const e=require("./ButtonContent.module.css.cjs");let t=require("react/jsx-runtime");var n=({icon:n,label:r,iconPosition:i=`start`,className:a,...o})=>(0,t.jsxs)(`span`,{className:[e.default.content,i===`end`?e.default.iconEnd:null,a].filter(Boolean).join(` `),...o,children:[n&&i===`start`&&(0,t.jsx)(`span`,{className:e.default.icon,"aria-hidden":`true`,children:n}),(0,t.jsx)(`span`,{className:e.default.label,children:r}),n&&i===`end`&&(0,t.jsx)(`span`,{className:e.default.icon,"aria-hidden":`true`,children:n})]});exports.ButtonContent=n;
 //# sourceMappingURL=ButtonContent.cjs.map

package/dist/components/ButtonContent/ButtonContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.cjs","names":[],"sources":["../../../src/components/ButtonContent/ButtonContent.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonContent.module.css';\n\nexport interface ButtonContentProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Icon element placed before the label. */\n  icon?: ReactNode;\n  /** Text label. */\n  label: string;\n  /**\n   * Position of the icon relative to the label.\n   * Defaults to `\"start\"`.\n   */\n  iconPosition?: 'start' | 'end';\n}\n\n/**\n * Icon + label layout helper for buttons that contain both an icon and text.\n *\n * Pass as the `children` of a `Button` to get the correct Adwaita spacing\n * between the icon and label (4 px gap, icon centred vertically with the text).\n *\n * Mirrors `AdwButtonContent`.\n *\n * @example\n * ```tsx\n * <Button>\n *   <ButtonContent icon={<Icon name=\"document-save-symbolic\" />} label=\"Save\" />\n * </Button>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html\n */\nexport function ButtonContent({\n  icon,\n  label,\n  iconPosition = 'start',\n  className,\n  ...props\n}: ButtonContentProps) {\n  return (\n    <span\n      className={[styles.content, iconPosition === 'end' ? styles.iconEnd : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && iconPosition === 'start' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {icon && iconPosition === 'end' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":"qFAiCA,SAAgB,EAAc,CAC5B,OACA,QACA,eAAe,QACf,YACA,GAAG,GACkB,CACrB,OACE,EAAA,EAAA,MAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,QAAS,IAAiB,MAAQ,EAAA,QAAO,QAAU,KAAM,EAAU,CACnF,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,CAMG,GAAQ,IAAiB,UACxB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBACvC,EACI,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,GAAQ,IAAiB,QACxB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBACvC,EACI,CAAA,CAEJ"}
+{"version":3,"file":"ButtonContent.cjs","names":[],"sources":["../../../src/components/ButtonContent/ButtonContent.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonContent.module.css';\n\nexport interface ButtonContentProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Icon element placed before the label. */\n  icon?: ReactNode;\n  /** Text label. */\n  label: string;\n  /**\n   * Position of the icon relative to the label.\n   * Defaults to `\"start\"`.\n   */\n  iconPosition?: 'start' | 'end';\n}\n\n/**\n * Icon + label layout helper for buttons that contain both an icon and text.\n *\n * Pass as the `children` of a `Button` to get the correct Adwaita spacing\n * between the icon and label (4 px gap, icon centred vertically with the text).\n *\n * Mirrors `AdwButtonContent`.\n *\n * @example\n * ```tsx\n * <Button>\n *   <ButtonContent icon={<Icon name=\"document-save-symbolic\" />} label=\"Save\" />\n * </Button>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html\n */\nexport const ButtonContent = ({\n  icon,\n  label,\n  iconPosition = 'start',\n  className,\n  ...props\n}: ButtonContentProps) => {\n  return (\n    <span\n      className={[styles.content, iconPosition === 'end' ? styles.iconEnd : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && iconPosition === 'start' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {icon && iconPosition === 'end' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n    </span>\n  );\n};\n"],"mappings":"qFAiCA,IAAa,GAAiB,CAC5B,OACA,QACA,eAAe,QACf,YACA,GAAG,MAGD,EAAA,EAAA,MAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,QAAS,IAAiB,MAAQ,EAAA,QAAO,QAAU,KAAM,CAAS,EAClF,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAJN,CAMG,GAAQ,IAAiB,UACxB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBACvC,CACG,CAAA,GAER,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,EAC3C,GAAQ,IAAiB,QACxB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBACvC,CACG,CAAA,CAEJ"}

package/dist/components/ButtonContent/ButtonContent.d.ts

@@ -27,4 +27,4 @@ export interface ButtonContentProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html
  */
-export declare function ButtonContent({ icon, label, iconPosition, className, ...props }: ButtonContentProps): import("react/jsx-runtime").JSX.Element;
+export declare const ButtonContent: ({ icon, label, iconPosition, className, ...props }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ButtonContent/ButtonContent.js

@@ -1,32 +1,30 @@
 import e from "./ButtonContent.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/ButtonContent/ButtonContent.tsx
-function r({ icon: r, label: i, iconPosition: a = "start", className: o, ...s }) {
-	return /* @__PURE__ */ n("span", {
-		className: [
-			e.content,
-			a === "end" ? e.iconEnd : null,
-			o
-		].filter(Boolean).join(" "),
-		...s,
-		children: [
-			r && a === "start" && /* @__PURE__ */ t("span", {
-				className: e.icon,
-				"aria-hidden": "true",
-				children: r
-			}),
-			/* @__PURE__ */ t("span", {
-				className: e.label,
-				children: i
-			}),
-			r && a === "end" && /* @__PURE__ */ t("span", {
-				className: e.icon,
-				"aria-hidden": "true",
-				children: r
-			})
-		]
-	});
-}
+var r = ({ icon: r, label: i, iconPosition: a = "start", className: o, ...s }) => /* @__PURE__ */ n("span", {
+	className: [
+		e.content,
+		a === "end" ? e.iconEnd : null,
+		o
+	].filter(Boolean).join(" "),
+	...s,
+	children: [
+		r && a === "start" && /* @__PURE__ */ t("span", {
+			className: e.icon,
+			"aria-hidden": "true",
+			children: r
+		}),
+		/* @__PURE__ */ t("span", {
+			className: e.label,
+			children: i
+		}),
+		r && a === "end" && /* @__PURE__ */ t("span", {
+			className: e.icon,
+			"aria-hidden": "true",
+			children: r
+		})
+	]
+});
 //#endregion
 export { r as ButtonContent };
 

package/dist/components/ButtonContent/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.js","names":[],"sources":["../../../src/components/ButtonContent/ButtonContent.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonContent.module.css';\n\nexport interface ButtonContentProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Icon element placed before the label. */\n  icon?: ReactNode;\n  /** Text label. */\n  label: string;\n  /**\n   * Position of the icon relative to the label.\n   * Defaults to `\"start\"`.\n   */\n  iconPosition?: 'start' | 'end';\n}\n\n/**\n * Icon + label layout helper for buttons that contain both an icon and text.\n *\n * Pass as the `children` of a `Button` to get the correct Adwaita spacing\n * between the icon and label (4 px gap, icon centred vertically with the text).\n *\n * Mirrors `AdwButtonContent`.\n *\n * @example\n * ```tsx\n * <Button>\n *   <ButtonContent icon={<Icon name=\"document-save-symbolic\" />} label=\"Save\" />\n * </Button>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html\n */\nexport function ButtonContent({\n  icon,\n  label,\n  iconPosition = 'start',\n  className,\n  ...props\n}: ButtonContentProps) {\n  return (\n    <span\n      className={[styles.content, iconPosition === 'end' ? styles.iconEnd : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && iconPosition === 'start' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {icon && iconPosition === 'end' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,EAAc,EAC5B,SACA,UACA,kBAAe,SACf,cACA,GAAG,KACkB;AACrB,QACE,kBAAC,QAAD;EACE,WAAW;GAAC,EAAO;GAAS,MAAiB,QAAQ,EAAO,UAAU;GAAM;GAAU,CACnF,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN;GAMG,KAAQ,MAAiB,WACxB,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAM,eAAY;cACvC;IACI,CAAA;GAET,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;IAAa,CAAA;GAC5C,KAAQ,MAAiB,SACxB,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAM,eAAY;cACvC;IACI,CAAA;GAEJ"}
+{"version":3,"file":"ButtonContent.js","names":[],"sources":["../../../src/components/ButtonContent/ButtonContent.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonContent.module.css';\n\nexport interface ButtonContentProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Icon element placed before the label. */\n  icon?: ReactNode;\n  /** Text label. */\n  label: string;\n  /**\n   * Position of the icon relative to the label.\n   * Defaults to `\"start\"`.\n   */\n  iconPosition?: 'start' | 'end';\n}\n\n/**\n * Icon + label layout helper for buttons that contain both an icon and text.\n *\n * Pass as the `children` of a `Button` to get the correct Adwaita spacing\n * between the icon and label (4 px gap, icon centred vertically with the text).\n *\n * Mirrors `AdwButtonContent`.\n *\n * @example\n * ```tsx\n * <Button>\n *   <ButtonContent icon={<Icon name=\"document-save-symbolic\" />} label=\"Save\" />\n * </Button>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html\n */\nexport const ButtonContent = ({\n  icon,\n  label,\n  iconPosition = 'start',\n  className,\n  ...props\n}: ButtonContentProps) => {\n  return (\n    <span\n      className={[styles.content, iconPosition === 'end' ? styles.iconEnd : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && iconPosition === 'start' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {icon && iconPosition === 'end' && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n    </span>\n  );\n};\n"],"mappings":";;;AAiCA,IAAa,KAAiB,EAC5B,SACA,UACA,kBAAe,SACf,cACA,GAAG,QAGD,kBAAC,QAAD;CACE,WAAW;EAAC,EAAO;EAAS,MAAiB,QAAQ,EAAO,UAAU;EAAM;CAAS,EAClF,OAAO,OAAO,EACd,KAAK,GAAG;CACX,GAAI;WAJN;EAMG,KAAQ,MAAiB,WACxB,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAM,eAAY;aACvC;EACG,CAAA;EAER,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;EAAY,CAAA;EAC3C,KAAQ,MAAiB,SACxB,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAM,eAAY;aACvC;EACG,CAAA;CAEJ"}

package/dist/components/ButtonContent.cjs

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

package/dist/components/ButtonRow/ButtonRow.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ButtonRow.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,variant:r=`default`,leading:i,trailing:a,className:o,...s}){return(0,t.jsxs)(`button`,{className:[e.default.row,e.default[r],o].filter(Boolean).join(` `),...s,children:[i&&(0,t.jsx)(`span`,{className:e.default.leading,children:i}),(0,t.jsx)(`span`,{className:e.default.title,children:n}),a&&(0,t.jsx)(`span`,{className:e.default.trailing,children:a})]})}exports.ButtonRow=n;
+const e=require("./ButtonRow.module.css.cjs");let t=require("react/jsx-runtime");var n=({title:n,variant:r=`default`,leading:i,trailing:a,className:o,...s})=>(0,t.jsxs)(`button`,{className:[e.default.row,e.default[r],o].filter(Boolean).join(` `),...s,children:[i&&(0,t.jsx)(`span`,{className:e.default.leading,children:i}),(0,t.jsx)(`span`,{className:e.default.title,children:n}),a&&(0,t.jsx)(`span`,{className:e.default.trailing,children:a})]});exports.ButtonRow=n;
 //# sourceMappingURL=ButtonRow.cjs.map

package/dist/components/ButtonRow/ButtonRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.cjs","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonRow.module.css';\n\nexport type ButtonRowVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface ButtonRowProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Label displayed centered in the row. */\n  title: string;\n  /** Visual style that colours the title text. */\n  variant?: ButtonRowVariant;\n  /** Icon placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon placed at the trailing edge. */\n  trailing?: ReactNode;\n}\n\n/**\n * Full-width activatable row styled as a button inside a `BoxedList`.\n *\n * Mirrors `AdwButtonRow` — use when an entire list row should trigger a single\n * action. Prefer `ActionRow` with `interactive` when the row also needs a\n * title/subtitle layout; prefer `ButtonRow` for single-label CTA rows.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html\n */\nexport function ButtonRow({\n  title,\n  variant = 'default',\n  leading,\n  trailing,\n  className,\n  ...props\n}: ButtonRowProps) {\n  const classes = [styles.row, styles[variant], className].filter(Boolean).join(' ');\n\n  return (\n    <button className={classes} {...props}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n      <span className={styles.title}>{title}</span>\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </button>\n  );\n}\n"],"mappings":"iFA0BA,SAAgB,EAAU,CACxB,QACA,UAAU,UACV,UACA,WACA,YACA,GAAG,GACc,CAGjB,OACE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAHM,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,GAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAGpD,GAAI,WAAhC,CACG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAC7D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CACzD"}
+{"version":3,"file":"ButtonRow.cjs","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonRow.module.css';\n\nexport type ButtonRowVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface ButtonRowProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Label displayed centered in the row. */\n  title: string;\n  /** Visual style that colours the title text. */\n  variant?: ButtonRowVariant;\n  /** Icon placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon placed at the trailing edge. */\n  trailing?: ReactNode;\n}\n\n/**\n * Full-width activatable row styled as a button inside a `BoxedList`.\n *\n * Mirrors `AdwButtonRow` — use when an entire list row should trigger a single\n * action. Prefer `ActionRow` with `interactive` when the row also needs a\n * title/subtitle layout; prefer `ButtonRow` for single-label CTA rows.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html\n */\nexport const ButtonRow = ({\n  title,\n  variant = 'default',\n  leading,\n  trailing,\n  className,\n  ...props\n}: ButtonRowProps) => {\n  const classes = [styles.row, styles[variant], className].filter(Boolean).join(' ');\n\n  return (\n    <button className={classes} {...props}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n      <span className={styles.title}>{title}</span>\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </button>\n  );\n};\n"],"mappings":"iFA0BA,IAAa,GAAa,CACxB,QACA,UAAU,UACV,UACA,WACA,YACA,GAAG,MAKD,EAAA,EAAA,MAAC,SAAD,CAAQ,UAHM,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,GAAU,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAGzD,EAAS,GAAI,WAAhC,CACG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAC5D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,EAC3C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,CACzD"}

package/dist/components/ButtonRow/ButtonRow.d.ts

@@ -19,4 +19,4 @@ export interface ButtonRowProps extends ButtonHTMLAttributes<HTMLButtonElement>
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html
  */
-export declare function ButtonRow({ title, variant, leading, trailing, className, ...props }: ButtonRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const ButtonRow: ({ title, variant, leading, trailing, className, ...props }: ButtonRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ButtonRow/ButtonRow.js

@@ -1,30 +1,28 @@
 import e from "./ButtonRow.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/ButtonRow/ButtonRow.tsx
-function r({ title: r, variant: i = "default", leading: a, trailing: o, className: s, ...c }) {
-	return /* @__PURE__ */ n("button", {
-		className: [
-			e.row,
-			e[i],
-			s
-		].filter(Boolean).join(" "),
-		...c,
-		children: [
-			a && /* @__PURE__ */ t("span", {
-				className: e.leading,
-				children: a
-			}),
-			/* @__PURE__ */ t("span", {
-				className: e.title,
-				children: r
-			}),
-			o && /* @__PURE__ */ t("span", {
-				className: e.trailing,
-				children: o
-			})
-		]
-	});
-}
+var r = ({ title: r, variant: i = "default", leading: a, trailing: o, className: s, ...c }) => /* @__PURE__ */ n("button", {
+	className: [
+		e.row,
+		e[i],
+		s
+	].filter(Boolean).join(" "),
+	...c,
+	children: [
+		a && /* @__PURE__ */ t("span", {
+			className: e.leading,
+			children: a
+		}),
+		/* @__PURE__ */ t("span", {
+			className: e.title,
+			children: r
+		}),
+		o && /* @__PURE__ */ t("span", {
+			className: e.trailing,
+			children: o
+		})
+	]
+});
 //#endregion
 export { r as ButtonRow };
 

package/dist/components/ButtonRow/ButtonRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.js","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonRow.module.css';\n\nexport type ButtonRowVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface ButtonRowProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Label displayed centered in the row. */\n  title: string;\n  /** Visual style that colours the title text. */\n  variant?: ButtonRowVariant;\n  /** Icon placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon placed at the trailing edge. */\n  trailing?: ReactNode;\n}\n\n/**\n * Full-width activatable row styled as a button inside a `BoxedList`.\n *\n * Mirrors `AdwButtonRow` — use when an entire list row should trigger a single\n * action. Prefer `ActionRow` with `interactive` when the row also needs a\n * title/subtitle layout; prefer `ButtonRow` for single-label CTA rows.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html\n */\nexport function ButtonRow({\n  title,\n  variant = 'default',\n  leading,\n  trailing,\n  className,\n  ...props\n}: ButtonRowProps) {\n  const classes = [styles.row, styles[variant], className].filter(Boolean).join(' ');\n\n  return (\n    <button className={classes} {...props}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n      <span className={styles.title}>{title}</span>\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </button>\n  );\n}\n"],"mappings":";;;AA0BA,SAAgB,EAAU,EACxB,UACA,aAAU,WACV,YACA,aACA,cACA,GAAG,KACc;AAGjB,QACE,kBAAC,UAAD;EAAQ,WAHM;GAAC,EAAO;GAAK,EAAO;GAAU;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAGpD,GAAI;YAAhC;GACG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAC7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;IAAa,CAAA;GAC5C,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GACzD"}
+{"version":3,"file":"ButtonRow.js","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ButtonRow.module.css';\n\nexport type ButtonRowVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface ButtonRowProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Label displayed centered in the row. */\n  title: string;\n  /** Visual style that colours the title text. */\n  variant?: ButtonRowVariant;\n  /** Icon placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon placed at the trailing edge. */\n  trailing?: ReactNode;\n}\n\n/**\n * Full-width activatable row styled as a button inside a `BoxedList`.\n *\n * Mirrors `AdwButtonRow` — use when an entire list row should trigger a single\n * action. Prefer `ActionRow` with `interactive` when the row also needs a\n * title/subtitle layout; prefer `ButtonRow` for single-label CTA rows.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html\n */\nexport const ButtonRow = ({\n  title,\n  variant = 'default',\n  leading,\n  trailing,\n  className,\n  ...props\n}: ButtonRowProps) => {\n  const classes = [styles.row, styles[variant], className].filter(Boolean).join(' ');\n\n  return (\n    <button className={classes} {...props}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n      <span className={styles.title}>{title}</span>\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </button>\n  );\n};\n"],"mappings":";;;AA0BA,IAAa,KAAa,EACxB,UACA,aAAU,WACV,YACA,aACA,cACA,GAAG,QAKD,kBAAC,UAAD;CAAQ,WAHM;EAAC,EAAO;EAAK,EAAO;EAAU;CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAGzD;CAAS,GAAI;WAAhC;EACG,KAAW,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAU;EAAc,CAAA;EAC5D,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;EAAY,CAAA;EAC3C,KAAY,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAW;EAAe,CAAA;CACzD"}

package/dist/components/ButtonRow.cjs

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

package/dist/components/Card/Card.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Card.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({interactive:n=!1,padding:r=`md`,as:i,className:a,children:o,...s}){return(0,t.jsx)(i??(n?`button`:`div`),{className:[e.default.card,e.default[`padding-${r}`],n?e.default.interactive:null,a].filter(Boolean).join(` `),...s,children:o})}exports.Card=n;
+const e=require("./Card.module.css.cjs");let t=require("react/jsx-runtime");var n=({interactive:n=!1,padding:r=`md`,as:i,className:a,children:o,...s})=>(0,t.jsx)(i??(n?`button`:`div`),{className:[e.default.card,e.default[`padding-${r}`],n?e.default.interactive:null,a].filter(Boolean).join(` `),...s,children:o});exports.Card=n;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":[],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * When true the card becomes clickable (Adwaita `.activatable`).\n   * Renders as `<button>` by default; override with `as`.\n   */\n  interactive?: boolean;\n  /** Internal spacing. Defaults to `\"md\"`. */\n  padding?: CardPadding;\n  /** Override the rendered HTML element. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\n/**\n * Card component following the GNOME HIG and Adwaita `.card` style class.\n *\n * Use for grouping related content on an elevated surface.\n * For clickable cards (e.g. grid item, settings shortcut) set `interactive`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Card({\n  interactive = false,\n  padding = 'md',\n  as,\n  className,\n  children,\n  ...props\n}: CardProps) {\n  const Tag: ElementType = as ?? (interactive ? 'button' : 'div');\n\n  const classes = [\n    styles.card,\n    styles[`padding-${padding}`],\n    interactive ? styles.interactive : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...props}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"4EA4BA,SAAgB,EAAK,CACnB,cAAc,GACd,UAAU,KACV,KACA,YACA,WACA,GAAG,GACS,CAYZ,OACE,EAAA,EAAA,KAZuB,IAAO,EAAc,SAAW,OAYvD,CAAK,UAVS,CACd,EAAA,QAAO,KACP,EAAA,QAAO,WAAW,KAClB,EAAc,EAAA,QAAO,YAAc,KACnC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAI,EAC1B,WACG,CAAA"}
+{"version":3,"file":"Card.cjs","names":[],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Card.module.css';\n\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * When true the card becomes clickable (Adwaita `.activatable`).\n   * Renders as `<button>` by default; override with `as`.\n   */\n  interactive?: boolean;\n  /** Internal spacing. Defaults to `\"md\"`. */\n  padding?: CardPadding;\n  /** Override the rendered HTML element. */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\n/**\n * Card component following the GNOME HIG and Adwaita `.card` style class.\n *\n * Use for grouping related content on an elevated surface.\n * For clickable cards (e.g. grid item, settings shortcut) set `interactive`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const Card = ({\n  interactive = false,\n  padding = 'md',\n  as,\n  className,\n  children,\n  ...props\n}: CardProps) => {\n  const Tag: ElementType = as ?? (interactive ? 'button' : 'div');\n\n  const classes = [\n    styles.card,\n    styles[`padding-${padding}`],\n    interactive ? styles.interactive : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...props}>\n      {children}\n    </Tag>\n  );\n};\n"],"mappings":"4EA4BA,IAAa,GAAQ,CACnB,cAAc,GACd,UAAU,KACV,KACA,YACA,WACA,GAAG,MAcD,EAAA,EAAA,KAZuB,IAAO,EAAc,SAAW,OAYvD,CAAK,UAVS,CACd,EAAA,QAAO,KACP,EAAA,QAAO,WAAW,KAClB,EAAc,EAAA,QAAO,YAAc,KACnC,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAGU,EAAS,GAAI,EAC1B,UACE,CAAA"}

package/dist/components/Card/Card.d.ts

@@ -21,4 +21,4 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html
  * @see https://developer.gnome.org/hig/patterns/containers.html
  */
-export declare function Card({ interactive, padding, as, className, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ interactive, padding, as, className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.js

@@ -1,18 +1,16 @@
 import e from "./Card.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Card/Card.tsx
-function n({ interactive: n = !1, padding: r = "md", as: i, className: a, children: o, ...s }) {
-	return /* @__PURE__ */ t(i ?? (n ? "button" : "div"), {
-		className: [
-			e.card,
-			e[`padding-${r}`],
-			n ? e.interactive : null,
-			a
-		].filter(Boolean).join(" "),
-		...s,
-		children: o
-	});
-}
+var n = ({ interactive: n = !1, padding: r = "md", as: i, className: a, children: o, ...s }) => /* @__PURE__ */ t(i ?? (n ? "button" : "div"), {
+	className: [
+		e.card,
+		e[`padding-${r}`],
+		n ? e.interactive : null,
+		a
+	].filter(Boolean).join(" "),
+	...s,
+	children: o
+});
 //#endregion
 export { n as Card };