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

@gnome-ui/react 1.45.1 → 1.46.0

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

Files changed (576) hide show

package/dist/components/Blockquote/Blockquote.js CHANGED Viewed

@@ -1,33 +1,31 @@
 import e from "./Blockquote.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Blockquote/Blockquote.tsx
-function r({ variant: r = "default", icon: i, cite: a, children: o, className: s, ...c }) {
-	return /* @__PURE__ */ n("blockquote", {
-		className: [
-			e.blockquote,
-			e[r],
-			s
-		].filter(Boolean).join(" "),
-		...c,
-		children: [/* @__PURE__ */ n("div", {
-			className: e.body,
-			children: [i && /* @__PURE__ */ t("span", {
-				className: e.icon,
-				"aria-hidden": "true",
-				children: i
-			}), /* @__PURE__ */ t("p", {
-				className: e.content,
-				children: o
-			})]
-		}), a !== void 0 && /* @__PURE__ */ t("footer", {
-			className: e.footer,
-			children: /* @__PURE__ */ t("cite", {
-				className: e.cite,
-				children: a
-			})
+var r = ({ variant: r = "default", icon: i, cite: a, children: o, className: s, ...c }) => /* @__PURE__ */ n("blockquote", {
+	className: [
+		e.blockquote,
+		e[r],
+		s
+	].filter(Boolean).join(" "),
+	...c,
+	children: [/* @__PURE__ */ n("div", {
+		className: e.body,
+		children: [i && /* @__PURE__ */ t("span", {
+			className: e.icon,
+			"aria-hidden": "true",
+			children: i
+		}), /* @__PURE__ */ t("p", {
+			className: e.content,
+			children: o
 		})]
-	});
-}
+	}), a !== void 0 && /* @__PURE__ */ t("footer", {
+		className: e.footer,
+		children: /* @__PURE__ */ t("cite", {
+			className: e.cite,
+			children: a
+		})
+	})]
+});
 //#endregion
 export { r as Blockquote };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Blockquote.js","names":[],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Blockquote.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type BlockquoteVariant = 'default' \| 'info' \| 'warning' \| 'error' \| 'success';\n\nexport interface BlockquoteProps extends HTMLAttributes<HTMLQuoteElement> {\n /*\n Visual emphasis style.\n * - `\"default\"` — neutral left border; use for general quotations.\n * - `\"info\"` — accent blue; use for tips and noteworthy passages.\n * - `\"warning\"` — yellow; use for cautionary content.\n * - `\"error\"` — red; use for critical or deprecated content.\n * - `\"success\"` — green; use for positive or approved content.\n /\n variant?: BlockquoteVariant;\n /\n Optional icon displayed to the left of the quoted text.\n * Typically a 16 px `<Icon>` component.\n /\n icon?: ReactNode;\n /\n Attribution rendered below the quote — author name, source title, etc.\n * Rendered inside a `<footer><cite>` for semantic correctness.\n /\n cite?: ReactNode;\n /* The quoted content. /\n children: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/\n Styled pull-quote with semantic `<blockquote>` markup.\n \n Supports five visual variants and optional icon + attribution.\n \n ```tsx\n * <Blockquote variant=\"info\" cite=\"Ada Lovelace, 1842\">\n * The Analytical Engine has no pretensions to originate anything.\n * </Blockquote>\n \n <Blockquote variant=\"warning\" icon={<Icon icon={Warning} size={16} />}>\n * This API is deprecated and will be removed in v3.\n * </Blockquote>\n * ```\n */\nexport ~~function~~ Blockquote({\n variant = 'default',\n icon,\n cite,\n children,\n className,\n ...props\n}: BlockquoteProps) {\n return (\n <blockquote\n className={[styles.blockquote, styles[variant], className].filter(Boolean).join(' ')}\n {...props}\n >\n <div className={styles.body}>\n {icon && (\n <span className={styles.icon} aria-hidden=\"true\">\n {icon}\n </span>\n )}\n <p className={styles.content}>{children}</p>\n </div>\n\n {cite !== undefined && (\n <footer className={styles.footer}>\n <cite className={styles.cite}>{cite}</cite>\n </footer>\n )}\n </blockquote>\n );\n}\n"],"mappings":";;;AAiDA,~~SAAgB~~,~~EAAW~~,EACzB,aAAU,WACV,SACA,SACA,aACA,cACA,GAAG,~~KACe;AAClB~~,~~QACE,~~kBAAC,cAAD;~~EACE~~,WAAW;~~GAAC~~,EAAO;~~GAAY~~,EAAO;~~GAAU~~;~~GAAU~~,~~CAAC~~,OAAO,~~QAAQ~~,~~CAAC~~,KAAK,~~IAAI~~;~~EACpF~~,GAAI;~~YAFN~~,CAIE,kBAAC,OAAD;~~GAAK~~,WAAW,EAAO;~~aAAvB~~,CACG,KACC,kBAAC,QAAD;~~IAAM~~,WAAW,EAAO;~~IAAM~~,eAAY;~~cACvC~~;~~IACI~~,CAAA,~~EAET~~,kBAAC,KAAD;~~IAAG~~,WAAW,EAAO;~~IAAU~~;~~IAAa~~,CAAA,CACxC;~~MAEL~~,MAAS,KAAA,KACR,kBAAC,UAAD;~~GAAQ~~,WAAW,EAAO;~~aACxB~~,kBAAC,QAAD;~~IAAM~~,WAAW,EAAO;~~cAAO~~;~~IAAY~~,CAAA;~~GACpC~~,CAAA,CAEA"}
1	+ {"version":3,"file":"Blockquote.js","names":[],"sources":["../../../src/components/Blockquote/Blockquote.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Blockquote.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type BlockquoteVariant = 'default' \| 'info' \| 'warning' \| 'error' \| 'success';\n\nexport interface BlockquoteProps extends HTMLAttributes<HTMLQuoteElement> {\n /*\n Visual emphasis style.\n * - `\"default\"` — neutral left border; use for general quotations.\n * - `\"info\"` — accent blue; use for tips and noteworthy passages.\n * - `\"warning\"` — yellow; use for cautionary content.\n * - `\"error\"` — red; use for critical or deprecated content.\n * - `\"success\"` — green; use for positive or approved content.\n /\n variant?: BlockquoteVariant;\n /\n Optional icon displayed to the left of the quoted text.\n * Typically a 16 px `<Icon>` component.\n /\n icon?: ReactNode;\n /\n Attribution rendered below the quote — author name, source title, etc.\n * Rendered inside a `<footer><cite>` for semantic correctness.\n /\n cite?: ReactNode;\n /* The quoted content. /\n children: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/\n Styled pull-quote with semantic `<blockquote>` markup.\n \n Supports five visual variants and optional icon + attribution.\n \n ```tsx\n * <Blockquote variant=\"info\" cite=\"Ada Lovelace, 1842\">\n * The Analytical Engine has no pretensions to originate anything.\n * </Blockquote>\n \n <Blockquote variant=\"warning\" icon={<Icon icon={Warning} size={16} />}>\n * This API is deprecated and will be removed in v3.\n * </Blockquote>\n * ```\n */\nexport const Blockquote = ({\n variant = 'default',\n icon,\n cite,\n children,\n className,\n ...props\n}: BlockquoteProps) => {\n return (\n <blockquote\n className={[styles.blockquote, styles[variant], className].filter(Boolean).join(' ')}\n {...props}\n >\n <div className={styles.body}>\n {icon && (\n <span className={styles.icon} aria-hidden=\"true\">\n {icon}\n </span>\n )}\n <p className={styles.content}>{children}</p>\n </div>\n\n {cite !== undefined && (\n <footer className={styles.footer}>\n <cite className={styles.cite}>{cite}</cite>\n </footer>\n )}\n </blockquote>\n );\n};\n"],"mappings":";;;AAiDA,IAAa,KAAc,EACzB,aAAU,WACV,SACA,SACA,aACA,cACA,GAAG,QAGD,kBAAC,cAAD;CACE,WAAW;EAAC,EAAO;EAAY,EAAO;EAAU;CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CACnF,GAAI;WAFN,CAIE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAM,eAAY;aACvC;EACG,CAAA,GAER,kBAAC,KAAD;GAAG,WAAW,EAAO;GAAU;EAAY,CAAA,CACxC;KAEJ,MAAS,KAAA,KACR,kBAAC,UAAD;EAAQ,WAAW,EAAO;YACxB,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAO;EAAW,CAAA;CACpC,CAAA,CAEA"}

package/dist/components/Blockquote.cjs CHANGED Viewed

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

package/dist/components/BottomSheet/BottomSheet.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`./BottomSheet.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function a({open:a,title:o,children:s,onClose:c,closeOnBackdrop:l=!0,className:u,...d}){let f=(0,t.useRef)(null),p=(0,t.useId)(),m=(0,t.useRef)(null);(0,t.useEffect)(()=>{a?(m.current=document.activeElement,(f.current?.querySelector(i))?.focus()):m.current?.focus()},[a]);let h=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),c?.();return}if(e.key!==`Tab`)return;let t=Array.from(f.current?.querySelectorAll(i)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[c]);if(!a)return null;let g=(0,r.jsx)(`div`,{className:e.default.backdrop,onClick:l?c:void 0,"aria-hidden":`true`,children:(0,r.jsxs)(`div`,{ref:f,role:`dialog`,"aria-modal":`true`,"aria-labelledby":o?p:void 0,className:[e.default.sheet,u].filter(Boolean).join(` `),onKeyDown:h,onClick:e=>e.stopPropagation(),...d,children:[(0,r.jsx)(`div`,{className:e.default.handle,"aria-hidden":`true`,children:(0,r.jsx)(`div`,{className:e.default.handleBar})}),o&&(0,r.jsx)(`div`,{id:p,className:e.default.title,children:o}),s&&(0,r.jsx)(`div`,{className:e.default.content,children:s})]})});return typeof document>`u`?g:(0,n.createPortal)(g,document.body)}exports.BottomSheet=a;
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./BottomSheet.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=({open:o,title:s,children:c,onClose:l,closeOnBackdrop:u=!0,className:d,...f})=>{let p=(0,n.useRef)(null),m=(0,n.useId)(),h=(0,n.useRef)(null);e.useBodyScrollLock(o),(0,n.useEffect)(()=>{o?(h.current=document.activeElement,(p.current?.querySelector(a))?.focus()):h.current?.focus()},[o]);let g=(0,n.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),l?.();return}if(e.key!==`Tab`)return;let t=Array.from(p.current?.querySelectorAll(a)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[l]);if(!o)return null;let _=(0,i.jsx)(`div`,{className:t.default.backdrop,onClick:u?l:void 0,children:(0,i.jsxs)(`div`,{ref:p,role:`dialog`,"aria-modal":`true`,"aria-labelledby":s?m:void 0,className:[t.default.sheet,d].filter(Boolean).join(` `),onKeyDown:g,onClick:e=>e.stopPropagation(),...f,children:[(0,i.jsx)(`div`,{className:t.default.handle,"aria-hidden":`true`,children:(0,i.jsx)(`div`,{className:t.default.handleBar})}),s&&(0,i.jsx)(`div`,{id:m,className:t.default.title,children:s}),c&&(0,i.jsx)(`div`,{className:t.default.content,children:c})]})});return typeof document>`u`?_:(0,r.createPortal)(_,document.body)};exports.BottomSheet=o;
 //# sourceMappingURL=BottomSheet.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape or backdrop click). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport ~~function~~ BottomSheet({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) {\n const sheetRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n if (!open) {\n return null;\n }\n\n const node = (\n <div\n className={styles.backdrop}\n onClick={closeOnBackdrop ? onClose : undefined}~~\n aria-hidden=\"true\"\n~~ >\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[styles.sheet, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar /}\n <div className={styles.handle} aria-hidden=\"true\">\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n}\n"],"mappings":"~~6HAcA~~,IAAM,EACJ,~~2IA4BF~~,~~SAAgB~~,~~EAAY,~~CAC1B,OACA,QACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,~~GACgB~~,~~CACnB~~,IAAM,GAAA,EAAA,EAAA,QAAkC,~~KAAK~~,~~CACvC~~,GAAA,EAAA,EAAA,~~QAAiB~~,~~CACjB~~,GAAA,EAAA,EAAA,QAA2C,~~KAAK~~,~~EAGtD~~,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAS,SAAS,cAA2B,~~EAAU~~,~~GAE9D~~,~~OAAO~~,~~EAEV~~,~~EAAkB~~,SAAgC,~~OAAO~~,~~EAE3D~~,CAAC,~~EAAK~~,CAAC,~~CAGV~~,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,~~gBAAgB~~,~~CAClB~~,~~KAAW~~,~~CAEX~~,~~OAGF~~,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,~~EAAU~~,~~EAAI~~,~~EAAE~~,CACjE,~~CAED~~,GAAI,EAAU,SAAW,EACvB,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,~~gBAAgB~~,~~CAClB~~,EAAK,~~OAAO~~,~~EAGV~~,SAAS,gBAAkB,IAC7B,EAAE,~~gBAAgB~~,~~CAClB~~,EAAM,~~OAAO~~,~~GAInB~~,CAAC,~~EAAQ~~,CACV,~~CAED~~,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,~~CACE~~,UAAW,EAAA,QAAO,~~SAClB~~,QAAS,EAAkB,EAAU,IAAA,~~GACrC~~,~~cAAY,iBAEZ,~~EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,CAAC,EAAA,QAAO,MAAO,~~EAAU~~,~~CAAC~~,OAAO,~~QAAQ~~,~~CAAC~~,KAAK,~~IAAI~~,~~CAC9D~~,UAAW,EACX,QAAU,GAAM,EAAE,~~iBAAiB~~,~~CACnC~~,GAAI,WARN,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,cAAY,iBACzC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,~~UAAa~~,CAAA,CAChC,CAAA,~~CAGL~~,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,~~EACG~~,CAAA,~~CAIP~~,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,~~WAAe~~,CAAA,CACzD,GACF,CAAA,~~CAOR~~,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,~~KAAK~~"}
1	+ {"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape or backdrop click). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport const BottomSheet = ({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n useBodyScrollLock(open);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n if (!open) {\n return null;\n }\n\n const node = (\n <div className={styles.backdrop} onClick={closeOnBackdrop ? onClose : undefined}>\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[styles.sheet, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar /}\n <div className={styles.handle} aria-hidden=\"true\">\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n};\n"],"mappings":"oKAgBA,IAAM,EACJ,2IA4BW,GAAe,CAC1B,OACA,QACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACmB,CACtB,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAErD,EAAA,kBAAkB,CAAI,GAGtB,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,GAEV,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAGT,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,eAAe,EACjB,IAAU,EAEV,MACF,CAEA,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,GAAK,CAAC,CACjE,EAEA,GAAI,EAAU,SAAW,EACvB,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAK,MAAM,GAGT,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAM,MAAM,EAGlB,EACA,CAAC,CAAO,CACV,EAEA,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAU,QAAS,EAAkB,EAAU,IAAA,aACpE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,UAAW,EACX,QAAU,GAAM,EAAE,gBAAgB,EAClC,GAAI,WARN,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,cAAY,iBACzC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAY,CAAA,CAChC,CAAA,EAGJ,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,CACE,CAAA,EAIN,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,CACzD,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}

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

@@ -24,4 +24,4 @@ export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html
  */
-export declare function BottomSheet({ open, title, children, onClose, closeOnBackdrop, className, ...props }: BottomSheetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const BottomSheet: ({ open, title, children, onClose, closeOnBackdrop, className, ...props }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/BottomSheet/BottomSheet.js CHANGED Viewed

@@ -1,60 +1,59 @@
-import e from "./BottomSheet.module.css.js";
-import { useCallback as t, useEffect as n, useId as r, useRef as i } from "react";
-import { createPortal as a } from "react-dom";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useBodyScrollLock as e } from "../Dialog/dialogUtils.js";
+import t from "./BottomSheet.module.css.js";
+import { useCallback as n, useEffect as r, useId as i, useRef as a } from "react";
+import { createPortal as o } from "react-dom";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/BottomSheet/BottomSheet.tsx
-var c = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function l({ open: l, title: u, children: d, onClose: f, closeOnBackdrop: p = !0, className: m, ...h }) {
-	let g = i(null), _ = r(), v = i(null);
-	n(() => {
-		l ? (v.current = document.activeElement, (g.current?.querySelector(c))?.focus()) : v.current?.focus();
-	}, [l]);
-	let y = t((e) => {
+var l = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = ({ open: u, title: d, children: f, onClose: p, closeOnBackdrop: m = !0, className: h, ...g }) => {
+	let _ = a(null), v = i(), y = a(null);
+	e(u), r(() => {
+		u ? (y.current = document.activeElement, (_.current?.querySelector(l))?.focus()) : y.current?.focus();
+	}, [u]);
+	let b = n((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), f?.();
+			e.preventDefault(), p?.();
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let t = Array.from(g.current?.querySelectorAll(c) ?? []);
+		let t = Array.from(_.current?.querySelectorAll(l) ?? []);
 		if (t.length === 0) return;
 		let n = t[0], r = t[t.length - 1];
 		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-	}, [f]);
-	if (!l) return null;
-	let b = /* @__PURE__ */ o("div", {
-		className: e.backdrop,
-		onClick: p ? f : void 0,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("div", {
-			ref: g,
+	}, [p]);
+	if (!u) return null;
+	let x = /* @__PURE__ */ s("div", {
+		className: t.backdrop,
+		onClick: m ? p : void 0,
+		children: /* @__PURE__ */ c("div", {
+			ref: _,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": u ? _ : void 0,
-			className: [e.sheet, m].filter(Boolean).join(" "),
-			onKeyDown: y,
+			"aria-labelledby": d ? v : void 0,
+			className: [t.sheet, h].filter(Boolean).join(" "),
+			onKeyDown: b,
 			onClick: (e) => e.stopPropagation(),
-			...h,
+			...g,
 			children: [
-				/* @__PURE__ */ o("div", {
-					className: e.handle,
+				/* @__PURE__ */ s("div", {
+					className: t.handle,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ o("div", { className: e.handleBar })
+					children: /* @__PURE__ */ s("div", { className: t.handleBar })
 				}),
-				u && /* @__PURE__ */ o("div", {
-					id: _,
-					className: e.title,
-					children: u
-				}),
-				d && /* @__PURE__ */ o("div", {
-					className: e.content,
+				d && /* @__PURE__ */ s("div", {
+					id: v,
+					className: t.title,
 					children: d
+				}),
+				f && /* @__PURE__ */ s("div", {
+					className: t.content,
+					children: f
 				})
 			]
 		})
 	});
-	return typeof document > "u" ? b : a(b, document.body);
-}
+	return typeof document > "u" ? x : o(x, document.body);
+};
 //#endregion
-export { l as BottomSheet };
+export { u as BottomSheet };
 //# sourceMappingURL=BottomSheet.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape or backdrop click). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport ~~function~~ BottomSheet({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) {\n const sheetRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n if (!open) {\n return null;\n }\n\n const node = (\n <div\n className={styles.backdrop}\n onClick={closeOnBackdrop ? onClose : undefined}~~\n aria-hidden=\"true\"\n~~ >\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[styles.sheet, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar /}\n <div className={styles.handle} aria-hidden=\"true\">\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n}\n"],"mappings":"~~;;;;;AAcA~~,IAAM,IACJ~~;AA4BF~~,~~SAAgB~~,~~EAAY~~,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,~~KACgB~~;~~CACnB~~,IAAM,IAAW,EAAuB,~~KAAK~~,~~EACvC~~,IAAU,~~GAAO~~,~~EACjB~~,IAAoB,EAAuB,~~KAAK~~;~~AAGtD~~,~~SAAgB~~;~~AACd~~,~~EAAI~~,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,~~EAAU~~,~~GAE9D~~,~~OAAO~~,~~IAEV~~,~~EAAkB~~,SAAgC,~~OAAO~~;~~IAE3D~~,CAAC,~~EAAK~~,CAAC;~~CAGV~~,IAAM,IAAgB,GACnB,MAAqC;~~AACpC~~,~~MAAI~~,EAAE,QAAQ,UAAU;~~AAEtB~~,~~GADA~~,EAAE,~~gBAAgB~~,~~EAClB~~,~~KAAW~~;~~AAEX;;AAGF~~,~~MAAI~~,EAAE,QAAQ,~~MACZ~~;EAGF,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,~~EAAU~~,~~IAAI~~,~~EAAE~~,CACjE;~~AAED~~,~~MAAI~~,EAAU,WAAW,~~EACvB~~;EAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;~~AAE1C~~,~~EAAI~~,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,~~gBAAgB~~,~~EAClB~~,EAAK,~~OAAO~~,~~IAGV~~,SAAS,kBAAkB,MAC7B,EAAE,~~gBAAgB~~,~~EAClB~~,EAAM,~~OAAO~~;~~IAInB~~,CAAC,~~EAAQ~~,CACV;~~AAED~~,~~KAAI~~,CAAC,~~EACH~~,~~QAAO~~;CAGT,IAAM,IACJ,kBAAC,OAAD;~~EACE~~,WAAW,EAAO;~~EAClB~~,SAAS,IAAkB,IAAU,KAAA;~~EACrC~~,~~eAAY;YAEZ,~~kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,~~EAAU~~,~~CAAC~~,OAAO,~~QAAQ~~,~~CAAC~~,KAAK,~~IAAI~~;~~GAC9D~~,WAAW;GACX,UAAU,MAAM,EAAE,~~iBAAiB~~;~~GACnC~~,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,~~WAAa~~,CAAA;~~KAChC~~,CAAA;~~IAGL~~,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;~~KACG~~,CAAA;~~IAIP~~,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;~~KAAe~~,CAAA;~~IACzD~~;;~~EACF~~,CAAA;~~AAOR~~,~~QAJI~~,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,~~KAAK~~"}
1	+ {"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape or backdrop click). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport const BottomSheet = ({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n useBodyScrollLock(open);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n if (!open) {\n return null;\n }\n\n const node = (\n <div className={styles.backdrop} onClick={closeOnBackdrop ? onClose : undefined}>\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[styles.sheet, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar /}\n <div className={styles.handle} aria-hidden=\"true\">\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n};\n"],"mappings":";;;;;;AAgBA,IAAM,IACJ,8IA4BW,KAAe,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACmB;CACtB,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI;CAKrD,AAHA,EAAkB,CAAI,GAGtB,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACjB,IAAU;GAEV;EACF;EAEA,IAAI,EAAE,QAAQ,OACZ;EAGF,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,KAAK,CAAC,CACjE;EAEA,IAAI,EAAU,WAAW,GACvB;EAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;EAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;CAGlB,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAU,SAAS,IAAkB,IAAU,KAAA;YACpE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC7D,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,UAAY,CAAA;IAChC,CAAA;IAGJ,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;IACE,CAAA;IAIN,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;IAAc,CAAA;GACzD;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_1a57s_3`,t=`_sheet_1a57s_30`,n=`_handle_1a57s_57`,r=`_handleBar_1a57s_64`,i=`_title_1a57s_74`,a=`_content_1a57s_87`,o={backdrop:e,"backdrop-in":`_backdrop-in_1a57s_1`,sheet:t,"sheet-in":`_sheet-in_1a57s_1`,handle:n,handleBar:r,title:i,content:a};exports.default=o;
+var e={backdrop:`_backdrop_1a57s_3`,"backdrop-in":`_backdrop-in_1a57s_1`,sheet:`_sheet_1a57s_30`,"sheet-in":`_sheet-in_1a57s_1`,handle:`_handle_1a57s_57`,handleBar:`_handleBar_1a57s_64`,title:`_title_1a57s_74`,content:`_content_1a57s_87`};exports.default=e;
 //# sourceMappingURL=BottomSheet.module.css.cjs.map

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

@@ -1,15 +1,14 @@
-//#region src/components/BottomSheet/BottomSheet.module.css
-var e = "_backdrop_1a57s_3", t = "_sheet_1a57s_30", n = "_handle_1a57s_57", r = "_handleBar_1a57s_64", i = "_title_1a57s_74", a = "_content_1a57s_87", o = {
-	backdrop: e,
+var e = {
+	backdrop: "_backdrop_1a57s_3",
 	"backdrop-in": "_backdrop-in_1a57s_1",
-	sheet: t,
+	sheet: "_sheet_1a57s_30",
 	"sheet-in": "_sheet-in_1a57s_1",
-	handle: n,
-	handleBar: r,
-	title: i,
-	content: a
+	handle: "_handle_1a57s_57",
+	handleBar: "_handleBar_1a57s_64",
+	title: "_title_1a57s_74",
+	content: "_content_1a57s_87"
 };
 //#endregion
-export { o as default };
+export { e as default };
 //# sourceMappingURL=BottomSheet.module.css.js.map

package/dist/components/BottomSheet.cjs CHANGED Viewed

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

package/dist/components/Box/Box.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-let e=require(`react/jsx-runtime`);function 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(0,e.jsx)(`div`,{className:o,style:{display:`flex`,flexDirection:t===`horizontal`?`row`:`column`,gap:typeof n==`number`?`${n}px`:n,alignItems:r??u,justifyContent:i,...a!==void 0&&{padding:typeof a==`number`?`${a}px`:a},...s},...l,children:c})}exports.Box=t;
+let e=require("react/jsx-runtime");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(0,e.jsx)(`div`,{className:o,style:{display:`flex`,flexDirection:t===`horizontal`?`row`:`column`,gap:typeof n==`number`?`${n}px`:n,alignItems:r??u,justifyContent:i,...a!==void 0&&{padding:typeof a==`number`?`${a}px`:a},...s},...l,children:c})};exports.Box=t;
 //# sourceMappingURL=Box.cjs.map

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

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

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

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

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

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

package/dist/components/BoxedList/BoxedList.cjs CHANGED Viewed

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

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

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

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

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

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

package/dist/components/BreakpointBin/BreakpointBin.cjs CHANGED Viewed

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

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

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

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

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

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

package/dist/components/Button/Button.cjs CHANGED Viewed

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