@gnome-ui/react 1.48.0 → 1.49.0

package/dist/components/Icon/Icon.js

@@ -1,35 +1,37 @@
-import { jsx as e } from "react/jsx-runtime";
+import e from "./Icon.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Icon/Icon.tsx
-var t = {
+var n = {
 	sm: 12,
 	md: 16,
 	lg: 20
 };
-function n(e) {
+function r(e) {
 	return "paths" in e && Array.isArray(e.paths);
 }
-var r = ({ icon: r, size: i = "md", label: a, width: o, height: s, ...c }) => {
-	let l = t[i], u = n(r) ? r.viewBox : r.viewBox ?? "0 0 24 24", d = n(r) ? r.paths.map((t, n) => /* @__PURE__ */ e("path", {
-		d: t.d,
-		fillRule: t.fillRule,
-		clipRule: t.clipRule,
-		transform: t.transform
-	}, n)) : [/* @__PURE__ */ e("path", { d: r.path }, 0)];
-	return /* @__PURE__ */ e("svg", {
+var i = ({ icon: i, size: a = "md", label: o, width: s, height: c, color: l, className: u, ...d }) => {
+	let f = n[a], p = r(i) ? i.viewBox : i.viewBox ?? "0 0 24 24", m = r(i) ? i.paths.map((e, n) => /* @__PURE__ */ t("path", {
+		d: e.d,
+		fillRule: e.fillRule,
+		clipRule: e.clipRule,
+		transform: e.transform
+	}, n)) : [/* @__PURE__ */ t("path", { d: i.path }, 0)], h = [l && l !== "default" ? e[`color-${l}`] : void 0, u].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ t("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: u,
-		width: o ?? l,
-		height: s ?? l,
+		viewBox: p,
+		width: s ?? f,
+		height: c ?? f,
 		fill: "currentColor",
-		"aria-label": a,
-		"aria-hidden": a ? void 0 : !0,
-		role: a ? "img" : void 0,
+		"aria-label": o,
+		"aria-hidden": o ? void 0 : !0,
+		role: o ? "img" : void 0,
 		focusable: "false",
-		...c,
-		children: d
+		className: h,
+		...d,
+		children: m
 	});
 };
 //#endregion
-export { r as Icon };
+export { i as Icon };
 
 //# sourceMappingURL=Icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { AnyIconDefinition, IconDefinition } from '@gnome-ui/icons';\nimport type { SVGAttributes } from 'react';\n\nexport type IconSize = 'sm' | 'md' | 'lg';\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n  icon: AnyIconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n  // When an object has both `path` and `paths`, `paths` wins.\n  return 'paths' in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport const Icon = ({ icon, size = 'md', label, width, height, ...props }: IconProps) => {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon) ? icon.viewBox : (icon.viewBox ?? '0 0 24 24');\n\n  const paths = isIconDefinition(icon)\n    ? icon.paths.map((p, i) => (\n        <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} transform={p.transform} />\n      ))\n    : [<path key={0} d={icon.path} />];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={resolvedViewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? 'img' : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {paths}\n    </svg>\n  );\n};\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;AAEpE,SAAS,EAAiB,GAAiD;CAEzE,OAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,KAAK;AACxE;AAiBA,IAAa,KAAQ,EAAE,SAAM,UAAO,MAAM,UAAO,UAAO,WAAQ,GAAG,QAAuB;CACxF,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,CAAI,IAAI,EAAK,UAAW,EAAK,WAAW,aAE3E,IAAQ,EAAiB,CAAI,IAC/B,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAU,WAAW,EAAE;CAAY,GAAhF,CAAgF,CAC5F,IACD,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,KAAO,GAAlB,CAAkB,CAAC;CAEnC,OACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH;CACE,CAAA;AAET"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { AnyIconDefinition, IconDefinition } from '@gnome-ui/icons';\nimport type { SVGAttributes } from 'react';\n\nimport styles from './Icon.module.css';\n\nexport type IconSize = 'sm' | 'md' | 'lg';\n\n/** Named GNOME palette color for the icon. `\"default\"` (or omitting the prop) inherits `currentColor` from the parent. */\nexport type IconColor =\n  | 'default'\n  | 'blue'\n  | 'green'\n  | 'yellow'\n  | 'orange'\n  | 'red'\n  | 'purple'\n  | 'brown';\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n  icon: AnyIconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n  /**\n   * Named GNOME palette color. Omit (or pass `\"default\"`) to inherit `currentColor`\n   * from the parent element — the existing behavior is fully preserved.\n   */\n  color?: IconColor;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n  // When an object has both `path` and `paths`, `paths` wins.\n  return 'paths' in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport const Icon = ({\n  icon,\n  size = 'md',\n  label,\n  width,\n  height,\n  color,\n  className,\n  ...props\n}: IconProps) => {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon) ? icon.viewBox : (icon.viewBox ?? '0 0 24 24');\n\n  const paths = isIconDefinition(icon)\n    ? icon.paths.map((p, i) => (\n        <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} transform={p.transform} />\n      ))\n    : [<path key={0} d={icon.path} />];\n\n  const colorClass = color && color !== 'default' ? styles[`color-${color}`] : undefined;\n  const computedClassName = [colorClass, className].filter(Boolean).join(' ') || undefined;\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={resolvedViewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? 'img' : undefined}\n      focusable=\"false\"\n      className={computedClassName}\n      {...props}\n    >\n      {paths}\n    </svg>\n  );\n};\n"],"mappings":";;;AAuCA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;AAEpE,SAAS,EAAiB,GAAiD;CAEzE,OAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,KAAK;AACxE;AAiBA,IAAa,KAAQ,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,UACA,cACA,GAAG,QACY;CACf,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,CAAI,IAAI,EAAK,UAAW,EAAK,WAAW,aAE3E,IAAQ,EAAiB,CAAI,IAC/B,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAU,WAAW,EAAE;CAAY,GAAhF,CAAgF,CAC5F,IACD,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,KAAO,GAAlB,CAAkB,CAAC,GAG7B,IAAoB,CADP,KAAS,MAAU,YAAY,EAAO,SAAS,OAAW,KAAA,GACtC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,KAAA;CAE/E,OACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,WAAW;EACX,GAAI;YAEH;CACE,CAAA;AAET"}

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

@@ -0,0 +1,2 @@
+var e={"color-blue":`_color-blue_wmix2_7`,"color-green":`_color-green_wmix2_11`,"color-yellow":`_color-yellow_wmix2_15`,"color-orange":`_color-orange_wmix2_19`,"color-red":`_color-red_wmix2_23`,"color-purple":`_color-purple_wmix2_27`,"color-brown":`_color-brown_wmix2_31`};exports.default=e;
+//# sourceMappingURL=Icon.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.css.cjs","names":[],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":["/* ─── Palette color overrides ───────────────────────────────────────────────── */\n/* Applied via the `color` prop. Each class sets the CSS `color` property so   */\n/* the SVG's fill=\"currentColor\" resolves to the palette token.                */\n\n/* stylelint-disable selector-class-pattern */\n\n.color-blue {\n  color: var(--gnome-blue-3, #3584e4);\n}\n\n.color-green {\n  color: var(--gnome-green-4, #2ec27e);\n}\n\n.color-yellow {\n  color: var(--gnome-yellow-4, #f5c211);\n}\n\n.color-orange {\n  color: var(--gnome-orange-3, #ff7800);\n}\n\n.color-red {\n  color: var(--gnome-red-3, #e01b24);\n}\n\n.color-purple {\n  color: var(--gnome-purple-3, #9141ac);\n}\n\n.color-brown {\n  color: var(--gnome-brown-3, #986a44);\n}\n\n/* stylelint-enable selector-class-pattern */\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+//#region src/components/Icon/Icon.module.css
+var e = {
+	"color-blue": "_color-blue_wmix2_7",
+	"color-green": "_color-green_wmix2_11",
+	"color-yellow": "_color-yellow_wmix2_15",
+	"color-orange": "_color-orange_wmix2_19",
+	"color-red": "_color-red_wmix2_23",
+	"color-purple": "_color-purple_wmix2_27",
+	"color-brown": "_color-brown_wmix2_31"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Icon.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.css.js","names":[],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":["/* ─── Palette color overrides ───────────────────────────────────────────────── */\n/* Applied via the `color` prop. Each class sets the CSS `color` property so   */\n/* the SVG's fill=\"currentColor\" resolves to the palette token.                */\n\n/* stylelint-disable selector-class-pattern */\n\n.color-blue {\n  color: var(--gnome-blue-3, #3584e4);\n}\n\n.color-green {\n  color: var(--gnome-green-4, #2ec27e);\n}\n\n.color-yellow {\n  color: var(--gnome-yellow-4, #f5c211);\n}\n\n.color-orange {\n  color: var(--gnome-orange-3, #ff7800);\n}\n\n.color-red {\n  color: var(--gnome-red-3, #e01b24);\n}\n\n.color-purple {\n  color: var(--gnome-purple-3, #9141ac);\n}\n\n.color-brown {\n  color: var(--gnome-brown-3, #986a44);\n}\n\n/* stylelint-enable selector-class-pattern */\n"],"mappings":""}

package/dist/components/Icon/index.d.ts

@@ -1,2 +1,2 @@
-export type { IconProps, IconSize } from './Icon';
+export type { IconColor, IconProps, IconSize } from './Icon';
 export { Icon } from './Icon';

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,2 @@
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./Modal.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=200,o=({open:o,title:s,children:c,primaryAction:l,secondaryActions:u,onClose:d,closeOnBackdrop:f=!0,className:p,...m})=>{let h=(0,n.useRef)(null),g=(0,n.useId)(),_=(0,n.useRef)(null),[v,y]=(0,n.useState)(o),[b,x]=(0,n.useState)(o),[S,C]=(0,n.useState)(!1),w=(0,n.useRef)(o),T=e.useVisualViewport();e.useBodyScrollLock(o),(0,n.useEffect)(()=>{let e=w.current;w.current=o,o?(y(!0),x(!0),C(!1)):e&&(x(!1),typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?y(!1):C(!0))},[o]),(0,n.useEffect)(()=>{if(!S)return;let e=window.setTimeout(()=>{y(!1),C(!1)},a);return()=>window.clearTimeout(e)},[S]),(0,n.useEffect)(()=>{o?(_.current=document.activeElement,(h.current?.querySelector(e.FOCUSABLE))?.focus()):_.current?.focus()},[o]);let E=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),d?.();return}e.trapFocus(t,h)},[d]);if(!v)return null;let D=l??(u&&u.length>0),O=(0,i.jsx)(`div`,{className:[t.default.backdrop,S?t.default.closing:null].filter(Boolean).join(` `),style:T,onClick:f?d:void 0,children:(0,i.jsxs)(`div`,{ref:h,role:`dialog`,"aria-modal":`true`,"aria-labelledby":s?g:void 0,className:[t.default.modal,b?t.default.entering:null,S?t.default.closing:null,p].filter(Boolean).join(` `),onAnimationEnd:e=>{e.target===e.currentTarget&&b&&x(!1)},onKeyDown:E,onClick:e=>e.stopPropagation(),...m,children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[(0,i.jsx)(`button`,{type:`button`,className:t.default.closeBtn,"aria-label":`Close`,onClick:d,children:`×`}),(0,i.jsx)(`div`,{id:s?g:void 0,className:t.default.title,children:s}),D&&(0,i.jsxs)(`div`,{className:t.default.actions,children:[u?.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,className:[t.default.btn,t.default[`btn-${e.variant??`default`}`]].filter(Boolean).join(` `),onClick:e.onClick,children:e.label},e.label)),l&&(0,i.jsx)(`button`,{type:`button`,disabled:l.disabled,className:[t.default.btn,t.default[`btn-${l.variant??`suggested`}`]].filter(Boolean).join(` `),onClick:l.onClick,children:l.label})]})]}),c&&(0,i.jsx)(`div`,{className:t.default.body,children:c})]})});return typeof document>`u`?O:(0,r.createPortal)(O,document.body)};exports.Modal=o;
+//# sourceMappingURL=Modal.cjs.map

package/dist/components/Modal/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useBodyScrollLock, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Modal.module.css';\n\nconst CLOSE_ANIM_DURATION = 200;\n\nexport interface ModalAction {\n  label: string;\n  variant?: 'default' | 'suggested' | 'destructive';\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the modal is visible. */\n  open: boolean;\n  /** Modal heading — also used as the accessible name. */\n  title?: ReactNode;\n  /** Body content. Can be any React node; the body scrolls independently. */\n  children?: ReactNode;\n  /**\n   * Single primary action rendered rightmost in the header.\n   * Defaults to the `\"suggested\"` variant when `variant` is omitted.\n   */\n  primaryAction?: ModalAction;\n  /**\n   * One or more secondary actions rendered between the title and primary action.\n   * Defaults to the `\"default\"` variant when `variant` is omitted.\n   */\n  secondaryActions?: ModalAction[];\n  /** Called when the user closes the modal (× button, Escape, or backdrop click). */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the modal. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Large overlay for rich content, forms, and settings.\n *\n * Unlike `Dialog` (confirmations / alerts), `Modal` provides a wider card\n * (up to 720 px), a scrollable body region, and a header bar with an\n * integrated close button plus optional primary and secondary actions.\n *\n * Renders into a portal on `document.body`. Traps focus, closes on Escape,\n * and plays slide+fade animations on entry and exit.\n */\nexport const Modal = ({\n  open,\n  title,\n  children,\n  primaryAction,\n  secondaryActions,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: ModalProps) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Animation state\n  const [isVisible, setIsVisible] = useState(open);\n  const [isEntering, setIsEntering] = useState(open);\n  const [isClosing, setIsClosing] = useState(false);\n  const prevOpen = useRef(open);\n\n  const viewportStyle = useVisualViewport();\n  useBodyScrollLock(open);\n\n  // Track open ↔ closed transitions\n  useEffect(() => {\n    const wasOpen = prevOpen.current;\n    prevOpen.current = open;\n\n    if (open) {\n      setIsVisible(true);\n      setIsEntering(true);\n      setIsClosing(false);\n    } else if (wasOpen) {\n      setIsEntering(false);\n\n      const reducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      if (reducedMotion) {\n        setIsVisible(false);\n      } else {\n        setIsClosing(true);\n      }\n    }\n  }, [open]);\n\n  // Unmount after exit animation — using setTimeout instead of onAnimationEnd\n  // because React 18 portals render into document.body, outside the root\n  // container where event delegation is registered, so animationend events\n  // on portal children do not bubble through the synthetic event system.\n  useEffect(() => {\n    if (!isClosing) {\n      return;\n    }\n\n    const id = window.setTimeout(() => {\n      setIsVisible(false);\n      setIsClosing(false);\n    }, CLOSE_ANIM_DURATION);\n\n    return () => window.clearTimeout(id);\n  }, [isClosing]);\n\n  // Save / restore focus around open/close\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = modalRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n        return;\n      }\n\n      trapFocus(e, modalRef);\n    },\n    [onClose],\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const hasActions = primaryAction ?? (secondaryActions && secondaryActions.length > 0);\n\n  const node = (\n    <div\n      className={[styles.backdrop, isClosing ? styles.closing : null].filter(Boolean).join(' ')}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={modalRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[\n          styles.modal,\n          isEntering ? styles.entering : null,\n          isClosing ? styles.closing : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onAnimationEnd={(e) => {\n          if (e.target === e.currentTarget && isEntering) {\n            setIsEntering(false);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        <div className={styles.header}>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n\n          {/* Title grows to fill center — always rendered so actions stay right-aligned */}\n          <div id={title ? titleId : undefined} className={styles.title}>\n            {title}\n          </div>\n\n          {hasActions && (\n            <div className={styles.actions}>\n              {secondaryActions?.map((action) => (\n                <button\n                  key={action.label}\n                  type=\"button\"\n                  disabled={action.disabled}\n                  className={[styles.btn, styles[`btn-${action.variant ?? 'default'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </button>\n              ))}\n              {primaryAction && (\n                <button\n                  type=\"button\"\n                  disabled={primaryAction.disabled}\n                  className={[styles.btn, styles[`btn-${primaryAction.variant ?? 'suggested'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n\n        {children && <div className={styles.body}>{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":"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"}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalAction {
+    label: string;
+    variant?: 'default' | 'suggested' | 'destructive';
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Whether the modal is visible. */
+    open: boolean;
+    /** Modal heading — also used as the accessible name. */
+    title?: ReactNode;
+    /** Body content. Can be any React node; the body scrolls independently. */
+    children?: ReactNode;
+    /**
+     * Single primary action rendered rightmost in the header.
+     * Defaults to the `"suggested"` variant when `variant` is omitted.
+     */
+    primaryAction?: ModalAction;
+    /**
+     * One or more secondary actions rendered between the title and primary action.
+     * Defaults to the `"default"` variant when `variant` is omitted.
+     */
+    secondaryActions?: ModalAction[];
+    /** Called when the user closes the modal (× button, Escape, or backdrop click). */
+    onClose?: () => void;
+    /** Whether clicking the backdrop closes the modal. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+}
+/**
+ * Large overlay for rich content, forms, and settings.
+ *
+ * Unlike `Dialog` (confirmations / alerts), `Modal` provides a wider card
+ * (up to 720 px), a scrollable body region, and a header bar with an
+ * integrated close button plus optional primary and secondary actions.
+ *
+ * Renders into a portal on `document.body`. Traps focus, closes on Escape,
+ * and plays slide+fade animations on entry and exit.
+ */
+export declare const Modal: ({ open, title, children, primaryAction, secondaryActions, onClose, closeOnBackdrop, className, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,93 @@
+import { FOCUSABLE as e, trapFocus as t, useBodyScrollLock as n, useVisualViewport as r } from "../Dialog/dialogUtils.js";
+import i from "./Modal.module.css.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { createPortal as u } from "react-dom";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/Modal/Modal.tsx
+var p = 200, m = ({ open: m, title: h, children: g, primaryAction: _, secondaryActions: v, onClose: y, closeOnBackdrop: b = !0, className: x, ...S }) => {
+	let C = c(null), w = s(), T = c(null), [E, D] = l(m), [O, k] = l(m), [A, j] = l(!1), M = c(m), N = r();
+	n(m), o(() => {
+		let e = M.current;
+		M.current = m, m ? (D(!0), k(!0), j(!1)) : e && (k(!1), typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? D(!1) : j(!0));
+	}, [m]), o(() => {
+		if (!A) return;
+		let e = window.setTimeout(() => {
+			D(!1), j(!1);
+		}, p);
+		return () => window.clearTimeout(e);
+	}, [A]), o(() => {
+		m ? (T.current = document.activeElement, (C.current?.querySelector(e))?.focus()) : T.current?.focus();
+	}, [m]);
+	let P = a((e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), y?.();
+			return;
+		}
+		t(e, C);
+	}, [y]);
+	if (!E) return null;
+	let F = _ ?? (v && v.length > 0), I = /* @__PURE__ */ d("div", {
+		className: [i.backdrop, A ? i.closing : null].filter(Boolean).join(" "),
+		style: N,
+		onClick: b ? y : void 0,
+		children: /* @__PURE__ */ f("div", {
+			ref: C,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": h ? w : void 0,
+			className: [
+				i.modal,
+				O ? i.entering : null,
+				A ? i.closing : null,
+				x
+			].filter(Boolean).join(" "),
+			onAnimationEnd: (e) => {
+				e.target === e.currentTarget && O && k(!1);
+			},
+			onKeyDown: P,
+			onClick: (e) => e.stopPropagation(),
+			...S,
+			children: [/* @__PURE__ */ f("div", {
+				className: i.header,
+				children: [
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						className: i.closeBtn,
+						"aria-label": "Close",
+						onClick: y,
+						children: "×"
+					}),
+					/* @__PURE__ */ d("div", {
+						id: h ? w : void 0,
+						className: i.title,
+						children: h
+					}),
+					F && /* @__PURE__ */ f("div", {
+						className: i.actions,
+						children: [v?.map((e) => /* @__PURE__ */ d("button", {
+							type: "button",
+							disabled: e.disabled,
+							className: [i.btn, i[`btn-${e.variant ?? "default"}`]].filter(Boolean).join(" "),
+							onClick: e.onClick,
+							children: e.label
+						}, e.label)), _ && /* @__PURE__ */ d("button", {
+							type: "button",
+							disabled: _.disabled,
+							className: [i.btn, i[`btn-${_.variant ?? "suggested"}`]].filter(Boolean).join(" "),
+							onClick: _.onClick,
+							children: _.label
+						})]
+					})
+				]
+			}), g && /* @__PURE__ */ d("div", {
+				className: i.body,
+				children: g
+			})]
+		})
+	});
+	return typeof document > "u" ? I : u(I, document.body);
+};
+//#endregion
+export { m as Modal };
+
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useBodyScrollLock, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Modal.module.css';\n\nconst CLOSE_ANIM_DURATION = 200;\n\nexport interface ModalAction {\n  label: string;\n  variant?: 'default' | 'suggested' | 'destructive';\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the modal is visible. */\n  open: boolean;\n  /** Modal heading — also used as the accessible name. */\n  title?: ReactNode;\n  /** Body content. Can be any React node; the body scrolls independently. */\n  children?: ReactNode;\n  /**\n   * Single primary action rendered rightmost in the header.\n   * Defaults to the `\"suggested\"` variant when `variant` is omitted.\n   */\n  primaryAction?: ModalAction;\n  /**\n   * One or more secondary actions rendered between the title and primary action.\n   * Defaults to the `\"default\"` variant when `variant` is omitted.\n   */\n  secondaryActions?: ModalAction[];\n  /** Called when the user closes the modal (× button, Escape, or backdrop click). */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the modal. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Large overlay for rich content, forms, and settings.\n *\n * Unlike `Dialog` (confirmations / alerts), `Modal` provides a wider card\n * (up to 720 px), a scrollable body region, and a header bar with an\n * integrated close button plus optional primary and secondary actions.\n *\n * Renders into a portal on `document.body`. Traps focus, closes on Escape,\n * and plays slide+fade animations on entry and exit.\n */\nexport const Modal = ({\n  open,\n  title,\n  children,\n  primaryAction,\n  secondaryActions,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: ModalProps) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Animation state\n  const [isVisible, setIsVisible] = useState(open);\n  const [isEntering, setIsEntering] = useState(open);\n  const [isClosing, setIsClosing] = useState(false);\n  const prevOpen = useRef(open);\n\n  const viewportStyle = useVisualViewport();\n  useBodyScrollLock(open);\n\n  // Track open ↔ closed transitions\n  useEffect(() => {\n    const wasOpen = prevOpen.current;\n    prevOpen.current = open;\n\n    if (open) {\n      setIsVisible(true);\n      setIsEntering(true);\n      setIsClosing(false);\n    } else if (wasOpen) {\n      setIsEntering(false);\n\n      const reducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      if (reducedMotion) {\n        setIsVisible(false);\n      } else {\n        setIsClosing(true);\n      }\n    }\n  }, [open]);\n\n  // Unmount after exit animation — using setTimeout instead of onAnimationEnd\n  // because React 18 portals render into document.body, outside the root\n  // container where event delegation is registered, so animationend events\n  // on portal children do not bubble through the synthetic event system.\n  useEffect(() => {\n    if (!isClosing) {\n      return;\n    }\n\n    const id = window.setTimeout(() => {\n      setIsVisible(false);\n      setIsClosing(false);\n    }, CLOSE_ANIM_DURATION);\n\n    return () => window.clearTimeout(id);\n  }, [isClosing]);\n\n  // Save / restore focus around open/close\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = modalRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n        return;\n      }\n\n      trapFocus(e, modalRef);\n    },\n    [onClose],\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const hasActions = primaryAction ?? (secondaryActions && secondaryActions.length > 0);\n\n  const node = (\n    <div\n      className={[styles.backdrop, isClosing ? styles.closing : null].filter(Boolean).join(' ')}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={modalRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[\n          styles.modal,\n          isEntering ? styles.entering : null,\n          isClosing ? styles.closing : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onAnimationEnd={(e) => {\n          if (e.target === e.currentTarget && isEntering) {\n            setIsEntering(false);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        <div className={styles.header}>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n\n          {/* Title grows to fill center — always rendered so actions stay right-aligned */}\n          <div id={title ? titleId : undefined} className={styles.title}>\n            {title}\n          </div>\n\n          {hasActions && (\n            <div className={styles.actions}>\n              {secondaryActions?.map((action) => (\n                <button\n                  key={action.label}\n                  type=\"button\"\n                  disabled={action.disabled}\n                  className={[styles.btn, styles[`btn-${action.variant ?? 'default'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </button>\n              ))}\n              {primaryAction && (\n                <button\n                  type=\"button\"\n                  disabled={primaryAction.disabled}\n                  className={[styles.btn, styles[`btn-${primaryAction.variant ?? 'suggested'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n\n        {children && <div className={styles.body}>{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":"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"}

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

@@ -0,0 +1,2 @@
+var e={backdrop:`_backdrop_1g4xm_3`,"backdrop-in":`_backdrop-in_1g4xm_1`,closing:`_closing_1g4xm_19`,"backdrop-out":`_backdrop-out_1g4xm_1`,modal:`_modal_1g4xm_43`,entering:`_entering_1g4xm_60`,"modal-in":`_modal-in_1g4xm_1`,"modal-out":`_modal-out_1g4xm_1`,header:`_header_1g4xm_92`,closeBtn:`_closeBtn_1g4xm_103`,title:`_title_1g4xm_144`,actions:`_actions_1g4xm_156`,btn:`_btn_1g4xm_165`,"btn-default":`_btn-default_1g4xm_210`,"btn-suggested":`_btn-suggested_1g4xm_214`,"btn-destructive":`_btn-destructive_1g4xm_228`,body:`_body_1g4xm_236`};exports.default=e;
+//# sourceMappingURL=Modal.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.css.cjs","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgba(0, 0, 0, 0.22),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  overflow: hidden;\n}\n\n.modal.entering {\n  animation: modal-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.modal.closing {\n  animation: modal-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modal-out {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 8px);\n  padding: 10px var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  flex-shrink: 0;\n}\n\n/* ─── Close button ──────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  flex-shrink: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.closeBtn:active {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.closeBtn:focus {\n  outline: none;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n/* Grows to fill center space — always present to keep actions right-aligned */\n.title {\n  flex: 1 1 auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Actions ───────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action buttons ────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 6px 14px;\n  border-radius: var(--gnome-radius-sm, 6px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-accent-color, #3584e4);\n\n  cursor: pointer;\n  white-space: nowrap;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 16%, transparent);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n/* stylelint-disable selector-class-pattern */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.btn-suggested {\n  background-color: var(--gnome-accent-color, #3584e4);\n  color: #fff;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-suggested:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 85%, #000);\n}\n\n.btn-suggested:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 70%, #000);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* stylelint-enable selector-class-pattern */\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .modal {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 40px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .backdrop.closing,\n  .modal.entering,\n  .modal.closing {\n    animation: none;\n  }\n\n  .btn,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,23 @@
+var e = {
+	backdrop: "_backdrop_1g4xm_3",
+	"backdrop-in": "_backdrop-in_1g4xm_1",
+	closing: "_closing_1g4xm_19",
+	"backdrop-out": "_backdrop-out_1g4xm_1",
+	modal: "_modal_1g4xm_43",
+	entering: "_entering_1g4xm_60",
+	"modal-in": "_modal-in_1g4xm_1",
+	"modal-out": "_modal-out_1g4xm_1",
+	header: "_header_1g4xm_92",
+	closeBtn: "_closeBtn_1g4xm_103",
+	title: "_title_1g4xm_144",
+	actions: "_actions_1g4xm_156",
+	btn: "_btn_1g4xm_165",
+	"btn-default": "_btn-default_1g4xm_210",
+	"btn-suggested": "_btn-suggested_1g4xm_214",
+	"btn-destructive": "_btn-destructive_1g4xm_228",
+	body: "_body_1g4xm_236"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Modal.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.css.js","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgba(0, 0, 0, 0.22),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  overflow: hidden;\n}\n\n.modal.entering {\n  animation: modal-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.modal.closing {\n  animation: modal-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modal-out {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 8px);\n  padding: 10px var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  flex-shrink: 0;\n}\n\n/* ─── Close button ──────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  flex-shrink: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.closeBtn:active {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.closeBtn:focus {\n  outline: none;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n/* Grows to fill center space — always present to keep actions right-aligned */\n.title {\n  flex: 1 1 auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Actions ───────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action buttons ────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 6px 14px;\n  border-radius: var(--gnome-radius-sm, 6px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-accent-color, #3584e4);\n\n  cursor: pointer;\n  white-space: nowrap;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 16%, transparent);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n/* stylelint-disable selector-class-pattern */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.btn-suggested {\n  background-color: var(--gnome-accent-color, #3584e4);\n  color: #fff;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-suggested:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 85%, #000);\n}\n\n.btn-suggested:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 70%, #000);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* stylelint-enable selector-class-pattern */\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .modal {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 40px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .backdrop.closing,\n  .modal.entering,\n  .modal.closing {\n    animation: none;\n  }\n\n  .btn,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export type { ModalAction, ModalProps } from './Modal';
+export { Modal } from './Modal';

package/dist/components/Modal.cjs

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

package/dist/components/Modal.d.ts

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

package/dist/components/Modal.js

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

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components/AboutDialog/AboutDialog.cjs"),ee=require("./components/ActionRow/ActionRow.cjs"),t=require("./components/Avatar/Avatar.cjs"),n=require("./components/AvatarRotator/AvatarRotator.cjs"),r=require("./components/Badge/Badge.cjs"),i=require("./components/Banner/Banner.cjs"),a=require("./components/Bin/Bin.cjs"),te=require("./components/Blockquote/Blockquote.cjs"),o=require("./components/BottomSheet/BottomSheet.cjs"),s=require("./components/Box/Box.cjs"),c=require("./components/Separator/Separator.cjs"),l=require("./components/BoxedList/BoxedList.cjs"),u=require("./components/BreakpointBin/BreakpointBin.cjs"),d=require("./components/Button/Button.cjs"),f=require("./components/ButtonContent/ButtonContent.cjs"),p=require("./components/ButtonRow/ButtonRow.cjs"),m=require("./components/Card/Card.cjs"),h=require("./components/Carousel/Carousel.cjs"),g=require("./components/CheckRow/CheckRow.cjs"),_=require("./components/Checkbox/Checkbox.cjs"),v=require("./components/Icon/Icon.cjs"),y=require("./components/Chip/Chip.cjs"),b=require("./components/Clamp/Clamp.cjs"),x=require("./components/ColorPicker/ColorPicker.cjs"),S=require("./components/ColumnView/ColumnView.cjs"),C=require("./components/ComboRow/ComboRow.cjs"),w=require("./components/GnomeProvider/GnomeContext.cjs"),T=require("./components/ContributionGraph/ContributionGraph.cjs"),E=require("./components/CountDownTimer/CountDownTimer.cjs"),D=require("./components/Dialog/Dialog.cjs"),O=require("./components/Drawer/Drawer.cjs"),k=require("./components/Dropdown/Dropdown.cjs"),A=require("./components/EntryRow/EntryRow.cjs"),j=require("./components/ExpanderRow/ExpanderRow.cjs"),M=require("./components/Footer/Footer.cjs"),N=require("./components/Frame/Frame.cjs"),P=require("./components/GnomeProvider/GnomeProvider.cjs"),F=require("./components/HeaderBar/HeaderBar.cjs"),I=require("./components/Tooltip/Tooltip.cjs"),L=require("./components/IconButton/IconButton.cjs"),R=require("./components/InlineViewSwitcher/InlineViewSwitcher.cjs"),z=require("./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs"),B=require("./components/Link/Link.cjs"),V=require("./components/LinkedGroup/LinkedGroup.cjs"),H=require("./hooks/useBreakpoint.cjs"),U=require("./components/NavigationSplitView/NavigationSplitView.cjs"),W=require("./components/NavigationView/NavigationView.cjs"),G=require("./components/OverlaySplitView/OverlaySplitView.cjs"),K=require("./components/PasswordEntryRow/PasswordEntryRow.cjs"),q=require("./components/PathBar/PathBar.cjs"),J=require("./components/Popover/Popover.cjs"),Y=require("./components/PreferencesDialog/PreferencesDialog.cjs"),X=require("./components/PreferencesGroup/PreferencesGroup.cjs"),Z=require("./components/PreferencesPage/PreferencesPage.cjs"),Q=require("./components/ProgressBar/ProgressBar.cjs"),ne=require("./components/RadioButton/RadioButton.cjs"),re=require("./components/ScrollToTop/ScrollToTop.cjs"),ie=require("./components/Spinner/Spinner.cjs"),ae=require("./components/SearchBar/SearchBar.cjs"),oe=require("./components/SegmentedBar/SegmentedBar.cjs"),se=require("./components/ShortcutLabel/ShortcutLabel.cjs"),ce=require("./components/ShortcutsDialog/ShortcutsDialog.cjs"),le=require("./components/StatusPage/StatusPage.cjs"),$=require("./components/Sidebar/Sidebar.cjs"),ue=require("./components/Sidebar/SidebarItem.cjs"),de=require("./components/Sidebar/SidebarSection.cjs"),fe=require("./components/Skeleton/Skeleton.cjs"),pe=require("./components/Slider/Slider.cjs"),me=require("./components/SpinButton/SpinButton.cjs"),he=require("./components/SpinRow/SpinRow.cjs"),ge=require("./components/SplitButton/SplitButton.cjs"),_e=require("./components/StatusBadge/StatusBadge.cjs"),ve=require("./components/Switch/Switch.cjs"),ye=require("./components/SwitchRow/SwitchRow.cjs"),be=require("./components/Tabs/TabBar.cjs"),xe=require("./components/Tabs/TabItem.cjs"),Se=require("./components/Tabs/TabPanel.cjs"),Ce=require("./components/TerminalView/TerminalView.cjs"),we=require("./components/Text/Text.cjs"),Te=require("./components/TextField/TextField.cjs"),Ee=require("./components/Timeline/Timeline.cjs"),De=require("./components/Toast/Toast.cjs"),Oe=require("./components/Toast/Toaster.cjs"),ke=require("./components/ToggleGroup/ToggleGroup.cjs"),Ae=require("./components/ToggleGroup/ToggleGroupItem.cjs"),je=require("./components/Toolbar/Spacer.cjs"),Me=require("./components/Toolbar/Toolbar.cjs"),Ne=require("./components/ToolbarView/ToolbarView.cjs"),Pe=require("./components/ViewSwitcher/ViewSwitcher.cjs"),Fe=require("./components/ViewSwitcher/ViewSwitcherItem.cjs"),Ie=require("./components/ViewSwitcherBar/ViewSwitcherBar.cjs"),Le=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs"),Re=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs"),ze=require("./components/WindowTitle/WindowTitle.cjs"),Be=require("./components/WrapBox/WrapBox.cjs");exports.AboutDialog=e.AboutDialog,exports.ActionRow=ee.ActionRow,exports.Avatar=t.Avatar,exports.AvatarRotator=n.AvatarRotator,exports.Badge=r.Badge,exports.Banner=i.Banner,exports.Bin=a.Bin,exports.Blockquote=te.Blockquote,exports.BottomSheet=o.BottomSheet,exports.Box=s.Box,exports.BoxedList=l.BoxedList,exports.BreakpointBin=u.BreakpointBin,exports.Button=d.Button,exports.ButtonContent=f.ButtonContent,exports.ButtonRow=p.ButtonRow,exports.Card=m.Card,exports.Carousel=h.Carousel,exports.CarouselIndicatorDots=h.CarouselIndicatorDots,exports.CarouselIndicatorLines=h.CarouselIndicatorLines,exports.CheckRow=g.CheckRow,exports.Checkbox=_.Checkbox,exports.Chip=y.Chip,exports.Clamp=b.Clamp,exports.ColorPicker=x.ColorPicker,exports.ColorSwatch=x.ColorSwatch,exports.ColumnView=S.ColumnView,exports.ComboRow=C.ComboRow,exports.ContributionGraph=T.ContributionGraph,exports.CountDownTimer=E.CountDownTimer,exports.Dialog=D.Dialog,exports.Drawer=O.Drawer,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=H.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=x.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=v.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.NavigationPage=W.NavigationPage,exports.NavigationSplitView=U.NavigationSplitView,exports.NavigationView=W.NavigationView,exports.OverlaySplitView=G.OverlaySplitView,exports.PasswordEntryRow=K.PasswordEntryRow,exports.PathBar=q.PathBar,exports.Popover=J.Popover,exports.PreferencesDialog=Y.PreferencesDialog,exports.PreferencesGroup=X.PreferencesGroup,exports.PreferencesPage=Z.PreferencesPage,exports.ProgressBar=Q.ProgressBar,exports.RadioButton=ne.RadioButton,exports.ScrollToTop=re.ScrollToTop,exports.SearchBar=ae.SearchBar,exports.SegmentedBar=oe.SegmentedBar,exports.Separator=c.Separator,exports.ShortcutLabel=se.ShortcutLabel,exports.ShortcutsDialog=ce.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=ue.SidebarItem,exports.SidebarSection=de.SidebarSection,exports.Skeleton=fe.Skeleton,exports.Slider=pe.Slider,exports.Spacer=je.Spacer,exports.SpinButton=me.SpinButton,exports.SpinRow=he.SpinRow,exports.Spinner=ie.Spinner,exports.SplitButton=ge.SplitButton,exports.StatusBadge=_e.StatusBadge,exports.StatusPage=le.StatusPage,exports.Switch=ve.Switch,exports.SwitchRow=ye.SwitchRow,exports.TabBar=be.TabBar,exports.TabItem=xe.TabItem,exports.TabPanel=Se.TabPanel,exports.TerminalView=Ce.TerminalView,exports.Text=we.Text,exports.TextField=Te.TextField,exports.Timeline=Ee.Timeline,exports.Toast=De.Toast,exports.Toaster=Oe.Toaster,exports.ToggleGroup=ke.ToggleGroup,exports.ToggleGroupItem=Ae.ToggleGroupItem,exports.Toolbar=Me.Toolbar,exports.ToolbarView=Ne.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=Pe.ViewSwitcher,exports.ViewSwitcherBar=Ie.ViewSwitcherBar,exports.ViewSwitcherItem=Fe.ViewSwitcherItem,exports.ViewSwitcherSidebar=Le.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Re.ViewSwitcherSidebarItem,exports.WindowTitle=ze.WindowTitle,exports.WrapBox=Be.WrapBox,exports.useAccentColor=w.useAccentColor,exports.useBreakpoint=H.useBreakpoint,exports.useColorScheme=w.useColorScheme,exports.useDateTimeFormatter=w.useDateTimeFormatter,exports.useDir=w.useDir,exports.useLocale=w.useLocale,exports.useNavigation=W.useNavigation,exports.useNumberFormatter=w.useNumberFormatter,exports.useResolvedColorScheme=w.useResolvedColorScheme,exports.useSidebarCollapsed=$.useSidebarCollapsed;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const ee=require("./components/AboutDialog/AboutDialog.cjs"),te=require("./components/ActionRow/ActionRow.cjs"),e=require("./components/Avatar/Avatar.cjs"),t=require("./components/AvatarGroup/AvatarGroup.cjs"),n=require("./components/AvatarRotator/AvatarRotator.cjs"),r=require("./components/Badge/Badge.cjs"),i=require("./components/Banner/Banner.cjs"),ne=require("./components/Bin/Bin.cjs"),a=require("./components/Blockquote/Blockquote.cjs"),o=require("./components/BottomSheet/BottomSheet.cjs"),s=require("./components/Box/Box.cjs"),c=require("./components/Separator/Separator.cjs"),l=require("./components/BoxedList/BoxedList.cjs"),u=require("./components/BreakpointBin/BreakpointBin.cjs"),d=require("./components/Button/Button.cjs"),f=require("./components/ButtonContent/ButtonContent.cjs"),p=require("./components/ButtonRow/ButtonRow.cjs"),m=require("./components/Card/Card.cjs"),h=require("./components/Carousel/Carousel.cjs"),g=require("./components/CheckRow/CheckRow.cjs"),_=require("./components/Checkbox/Checkbox.cjs"),v=require("./components/Icon/Icon.cjs"),y=require("./components/Chip/Chip.cjs"),b=require("./components/Clamp/Clamp.cjs"),x=require("./components/ColorPicker/ColorPicker.cjs"),S=require("./components/ColumnView/ColumnView.cjs"),C=require("./components/ComboRow/ComboRow.cjs"),w=require("./components/GnomeProvider/GnomeContext.cjs"),T=require("./components/ContributionGraph/ContributionGraph.cjs"),E=require("./components/CountDownTimer/CountDownTimer.cjs"),D=require("./components/Dialog/Dialog.cjs"),O=require("./components/Drawer/Drawer.cjs"),k=require("./components/Dropdown/Dropdown.cjs"),A=require("./components/EntryRow/EntryRow.cjs"),j=require("./components/ExpanderRow/ExpanderRow.cjs"),M=require("./components/Footer/Footer.cjs"),N=require("./components/Frame/Frame.cjs"),P=require("./components/GnomeProvider/GnomeProvider.cjs"),F=require("./components/HeaderBar/HeaderBar.cjs"),I=require("./components/Tooltip/Tooltip.cjs"),L=require("./components/IconButton/IconButton.cjs"),R=require("./components/InlineViewSwitcher/InlineViewSwitcher.cjs"),z=require("./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs"),B=require("./components/Link/Link.cjs"),V=require("./components/LinkedGroup/LinkedGroup.cjs"),H=require("./components/Modal/Modal.cjs"),U=require("./hooks/useBreakpoint.cjs"),W=require("./components/NavigationSplitView/NavigationSplitView.cjs"),G=require("./components/NavigationView/NavigationView.cjs"),K=require("./components/OverlaySplitView/OverlaySplitView.cjs"),q=require("./components/PasswordEntryRow/PasswordEntryRow.cjs"),J=require("./components/PathBar/PathBar.cjs"),Y=require("./components/Popover/Popover.cjs"),X=require("./components/PreferencesDialog/PreferencesDialog.cjs"),Z=require("./components/PreferencesGroup/PreferencesGroup.cjs"),Q=require("./components/PreferencesPage/PreferencesPage.cjs"),re=require("./components/ProgressBar/ProgressBar.cjs"),ie=require("./components/RadioButton/RadioButton.cjs"),ae=require("./components/ScrollToTop/ScrollToTop.cjs"),oe=require("./components/Spinner/Spinner.cjs"),se=require("./components/SearchBar/SearchBar.cjs"),ce=require("./components/SegmentedBar/SegmentedBar.cjs"),le=require("./components/ShortcutLabel/ShortcutLabel.cjs"),ue=require("./components/ShortcutsDialog/ShortcutsDialog.cjs"),de=require("./components/StatusPage/StatusPage.cjs"),$=require("./components/Sidebar/Sidebar.cjs"),fe=require("./components/Sidebar/SidebarItem.cjs"),pe=require("./components/Sidebar/SidebarSection.cjs"),me=require("./components/Skeleton/Skeleton.cjs"),he=require("./components/Slider/Slider.cjs"),ge=require("./components/SpinButton/SpinButton.cjs"),_e=require("./components/SpinRow/SpinRow.cjs"),ve=require("./components/SplitButton/SplitButton.cjs"),ye=require("./components/StatusBadge/StatusBadge.cjs"),be=require("./components/Switch/Switch.cjs"),xe=require("./components/SwitchRow/SwitchRow.cjs"),Se=require("./components/Tabs/TabBar.cjs"),Ce=require("./components/Tabs/TabItem.cjs"),we=require("./components/Tabs/TabPanel.cjs"),Te=require("./components/TerminalView/TerminalView.cjs"),Ee=require("./components/Text/Text.cjs"),De=require("./components/TextField/TextField.cjs"),Oe=require("./components/Timeline/Timeline.cjs"),ke=require("./components/Toast/Toast.cjs"),Ae=require("./components/Toast/Toaster.cjs"),je=require("./components/ToggleGroup/ToggleGroup.cjs"),Me=require("./components/ToggleGroup/ToggleGroupItem.cjs"),Ne=require("./components/Toolbar/Spacer.cjs"),Pe=require("./components/Toolbar/Toolbar.cjs"),Fe=require("./components/ToolbarView/ToolbarView.cjs"),Ie=require("./components/ViewSwitcher/ViewSwitcher.cjs"),Le=require("./components/ViewSwitcher/ViewSwitcherItem.cjs"),Re=require("./components/ViewSwitcherBar/ViewSwitcherBar.cjs"),ze=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs"),Be=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs"),Ve=require("./components/WindowTitle/WindowTitle.cjs"),He=require("./components/WrapBox/WrapBox.cjs");exports.AboutDialog=ee.AboutDialog,exports.ActionRow=te.ActionRow,exports.Avatar=e.Avatar,exports.AvatarGroup=t.AvatarGroup,exports.AvatarRotator=n.AvatarRotator,exports.Badge=r.Badge,exports.Banner=i.Banner,exports.Bin=ne.Bin,exports.Blockquote=a.Blockquote,exports.BottomSheet=o.BottomSheet,exports.Box=s.Box,exports.BoxedList=l.BoxedList,exports.BreakpointBin=u.BreakpointBin,exports.Button=d.Button,exports.ButtonContent=f.ButtonContent,exports.ButtonRow=p.ButtonRow,exports.Card=m.Card,exports.Carousel=h.Carousel,exports.CarouselIndicatorDots=h.CarouselIndicatorDots,exports.CarouselIndicatorLines=h.CarouselIndicatorLines,exports.CheckRow=g.CheckRow,exports.Checkbox=_.Checkbox,exports.Chip=y.Chip,exports.Clamp=b.Clamp,exports.ColorPicker=x.ColorPicker,exports.ColorSwatch=x.ColorSwatch,exports.ColumnView=S.ColumnView,exports.ComboRow=C.ComboRow,exports.ContributionGraph=T.ContributionGraph,exports.CountDownTimer=E.CountDownTimer,exports.Dialog=D.Dialog,exports.Drawer=O.Drawer,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=U.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=x.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=v.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.Modal=H.Modal,exports.NavigationPage=G.NavigationPage,exports.NavigationSplitView=W.NavigationSplitView,exports.NavigationView=G.NavigationView,exports.OverlaySplitView=K.OverlaySplitView,exports.PasswordEntryRow=q.PasswordEntryRow,exports.PathBar=J.PathBar,exports.Popover=Y.Popover,exports.PreferencesDialog=X.PreferencesDialog,exports.PreferencesGroup=Z.PreferencesGroup,exports.PreferencesPage=Q.PreferencesPage,exports.ProgressBar=re.ProgressBar,exports.RadioButton=ie.RadioButton,exports.ScrollToTop=ae.ScrollToTop,exports.SearchBar=se.SearchBar,exports.SegmentedBar=ce.SegmentedBar,exports.Separator=c.Separator,exports.ShortcutLabel=le.ShortcutLabel,exports.ShortcutsDialog=ue.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=fe.SidebarItem,exports.SidebarSection=pe.SidebarSection,exports.Skeleton=me.Skeleton,exports.Slider=he.Slider,exports.Spacer=Ne.Spacer,exports.SpinButton=ge.SpinButton,exports.SpinRow=_e.SpinRow,exports.Spinner=oe.Spinner,exports.SplitButton=ve.SplitButton,exports.StatusBadge=ye.StatusBadge,exports.StatusPage=de.StatusPage,exports.Switch=be.Switch,exports.SwitchRow=xe.SwitchRow,exports.TabBar=Se.TabBar,exports.TabItem=Ce.TabItem,exports.TabPanel=we.TabPanel,exports.TerminalView=Te.TerminalView,exports.Text=Ee.Text,exports.TextField=De.TextField,exports.Timeline=Oe.Timeline,exports.Toast=ke.Toast,exports.Toaster=Ae.Toaster,exports.ToggleGroup=je.ToggleGroup,exports.ToggleGroupItem=Me.ToggleGroupItem,exports.Toolbar=Pe.Toolbar,exports.ToolbarView=Fe.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=Ie.ViewSwitcher,exports.ViewSwitcherBar=Re.ViewSwitcherBar,exports.ViewSwitcherItem=Le.ViewSwitcherItem,exports.ViewSwitcherSidebar=ze.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Be.ViewSwitcherSidebarItem,exports.WindowTitle=Ve.WindowTitle,exports.WrapBox=He.WrapBox,exports.useAccentColor=w.useAccentColor,exports.useBreakpoint=U.useBreakpoint,exports.useColorScheme=w.useColorScheme,exports.useDateTimeFormatter=w.useDateTimeFormatter,exports.useDir=w.useDir,exports.useLocale=w.useLocale,exports.useNavigation=G.useNavigation,exports.useNumberFormatter=w.useNumberFormatter,exports.useResolvedColorScheme=w.useResolvedColorScheme,exports.useSidebarCollapsed=$.useSidebarCollapsed;

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export type { ActionRowProps } from './components/ActionRow';
 export { ActionRow } from './components/ActionRow';
 export type { AvatarColor, AvatarProps, AvatarSize } from './components/Avatar';
 export { Avatar } from './components/Avatar';
+export type { AvatarGroupItem, AvatarGroupProps } from './components/AvatarGroup';
+export { AvatarGroup } from './components/AvatarGroup';
 export type { AvatarRotatorProps } from './components/AvatarRotator';
 export { AvatarRotator } from './components/AvatarRotator';
 export type { BadgeProps, BadgeVariant } from './components/Badge';
@@ -70,7 +72,7 @@ export type { GnomeProviderProps } from './components/GnomeProvider/GnomeProvide
 export { GnomeProvider } from './components/GnomeProvider/GnomeProvider';
 export type { HeaderBarProps } from './components/HeaderBar';
 export { HeaderBar } from './components/HeaderBar';
-export type { IconProps, IconSize } from './components/Icon';
+export type { IconColor, IconProps, IconSize } from './components/Icon';
 export { Icon } from './components/Icon';
 export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './components/IconButton';
 export { IconButton } from './components/IconButton';
@@ -80,6 +82,8 @@ export type { LinkProps } from './components/Link';
 export { Link } from './components/Link';
 export type { LinkedGroupProps } from './components/LinkedGroup';
 export { LinkedGroup } from './components/LinkedGroup';
+export type { ModalAction, ModalProps } from './components/Modal';
+export { Modal } from './components/Modal';
 export type { NavigationSplitViewProps } from './components/NavigationSplitView';
 export { NavigationSplitView } from './components/NavigationSplitView';
 export type { NavigationPageProps, NavigationViewProps } from './components/NavigationView';