@gnome-ui/react 1.38.1 → 1.40.0

package/README.md

@@ -60,6 +60,7 @@ import { Button } from "@gnome-ui/react/components/Button";
 | Component | Description |
 |-----------|-------------|
 | [`Button`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-button--docs) | Default, Suggested, Destructive, Flat, Raised variants; `osd` overlay modifier; sm/md/lg sizes; pill and circular shapes |
+| [`IconButton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-iconbutton--docs) | Accessible icon-only action button composed from `Button`, `Icon`, and optional `Tooltip`; supports variants, sizes, disabled state, and refs |
 | [`SplitButton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-splitbutton--docs) | Primary action button with attached dropdown arrow; Default, Suggested, Destructive variants |
 | [`ButtonContent`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-buttoncontent--docs) | Icon + label layout helper for buttons that contain both an icon and text |
 | [`Switch`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-switch--docs) | On/off toggle for settings that apply immediately |
@@ -80,12 +81,13 @@ import { Button } from "@gnome-ui/react/components/Button";
 | Component | Description |
 |-----------|-------------|
 | [`Text`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-text--docs) | 12 Adwaita type styles: large-title, title-1…4, heading, body, caption… |
-| [`Icon`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-icon--docs) | React adapter for `@gnome-ui/icons` — inline SVG, inherits `currentColor` |
+| [`Icon`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-icon--docs) | Inline SVG icon. Accepts `@gnome-ui/icons` definitions, [`simple-icons`](https://simpleicons.org/) icons, or any `{ path }` object; inherits `currentColor` |
 | [`Avatar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-avatar--docs) | Circular user image with deterministic-color initials fallback |
 | [`Badge`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-badge--docs) | Counter or status dot, optionally anchored over another element |
 | [`Blockquote`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-blockquote--docs) | Styled pull-quote with left-border accent; default, info, warning, error, success variants; optional icon and attribution |
 | [`Spinner`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-spinner--docs) | Indeterminate loading indicator; sm/md/lg sizes |
 | [`ProgressBar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-progressbar--docs) | Determinate (0–1) and indeterminate progress indicator |
+| [`Skeleton`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-skeleton--docs) | Content-shaped loading placeholder; rectangular, circular, and multi-line text variants with optional shimmer |
 | [`CountDownTimer`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-countdowntimer--docs) | Countdown timer showing remaining time until a specified date; `date`, `time`, or `datetime` formats; executes callback on completion |
 | [`StatusPage`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-statuspage--docs) | Empty-state page with icon, title, description, and optional actions; `compact` prop for sidebars/popovers |
 | [`Separator`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-separator--docs) | Horizontal/vertical dividing line between content groups |

package/dist/components/Button/Button.cjs

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

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

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

package/dist/components/Button/Button.d.ts

@@ -31,4 +31,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/controls/buttons.html
  */
-export declare function Button({ variant, size, shape, osd, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,11 +1,13 @@
 import e from "./Button.module.css.js";
-import { jsxs as t } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { jsxs as n } from "react/jsx-runtime";
 //#region src/components/Button/Button.tsx
-function n({ variant: n = "default", size: r = "md", shape: i = "default", osd: a = !1, leadingIcon: o, trailingIcon: s, children: c, className: l, ...u }) {
-	return /* @__PURE__ */ t("button", {
+var r = t(function({ variant: t = "default", size: r = "md", shape: i = "default", osd: a = !1, leadingIcon: o, trailingIcon: s, children: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ n("button", {
+		ref: d,
 		className: [
 			e.button,
-			e[n],
+			e[t],
 			r === "md" ? null : e[r],
 			i === "default" ? null : e[i],
 			a ? e.osd : null,
@@ -18,8 +20,8 @@ function n({ variant: n = "default", size: r = "md", shape: i = "default", osd:
 			s
 		]
 	});
-}
+});
 //#endregion
-export { n as Button };
+export { r as Button };
 
 //# sourceMappingURL=Button.js.map

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

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

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

@@ -1,2 +1,2 @@
-var e={button:`_button_1qgdy_1`,pill:`_pill_1qgdy_52`,circular:`_circular_1qgdy_59`,default:`_default_1qgdy_71`,suggested:`_suggested_1qgdy_105`,destructive:`_destructive_1qgdy_120`,flat:`_flat_1qgdy_135`,raised:`_raised_1qgdy_150`,osd:`_osd_1qgdy_184`,sm:`_sm_1qgdy_228`,lg:`_lg_1qgdy_235`};exports.default=e;
+var e={button:`_button_mln0u_1`,pill:`_pill_mln0u_52`,circular:`_circular_mln0u_59`,default:`_default_mln0u_71`,suggested:`_suggested_mln0u_105`,destructive:`_destructive_mln0u_120`,flat:`_flat_mln0u_135`,raised:`_raised_mln0u_150`,osd:`_osd_mln0u_184`,sm:`_sm_mln0u_228`,lg:`_lg_mln0u_243`};exports.default=e;
 //# sourceMappingURL=Button.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

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

@@ -1,15 +1,15 @@
 var e = {
-	button: "_button_1qgdy_1",
-	pill: "_pill_1qgdy_52",
-	circular: "_circular_1qgdy_59",
-	default: "_default_1qgdy_71",
-	suggested: "_suggested_1qgdy_105",
-	destructive: "_destructive_1qgdy_120",
-	flat: "_flat_1qgdy_135",
-	raised: "_raised_1qgdy_150",
-	osd: "_osd_1qgdy_184",
-	sm: "_sm_1qgdy_228",
-	lg: "_lg_1qgdy_235"
+	button: "_button_mln0u_1",
+	pill: "_pill_mln0u_52",
+	circular: "_circular_mln0u_59",
+	default: "_default_mln0u_71",
+	suggested: "_suggested_mln0u_105",
+	destructive: "_destructive_mln0u_120",
+	flat: "_flat_mln0u_135",
+	raised: "_raised_mln0u_150",
+	osd: "_osd_mln0u_184",
+	sm: "_sm_mln0u_228",
+	lg: "_lg_mln0u_243"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

package/dist/components/Icon/Icon.cjs

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

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

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

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

@@ -1,9 +1,9 @@
 import { SVGAttributes } from 'react';
-import { IconDefinition } from '@gnome-ui/icons';
+import { AnyIconDefinition } from '@gnome-ui/icons';
 export type IconSize = "sm" | "md" | "lg";
 export interface IconProps extends SVGAttributes<SVGSVGElement> {
-    /** Icon definition imported from `@gnome-ui/icons`. */
-    icon: IconDefinition;
+    /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */
+    icon: AnyIconDefinition;
     /**
      * Rendered size.
      * - `sm` — 12 px
@@ -17,14 +17,18 @@ export interface IconProps extends SVGAttributes<SVGSVGElement> {
     label?: string;
 }
 /**
- * Renders an `@gnome-ui/icons` definition as an inline SVG.
+ * Renders an icon as an inline SVG.
  *
- * Uses `currentColor` so the icon inherits the text color of its parent.
- * Pass `label` only when the icon conveys meaning on its own;
- * omit it when a sibling text label already describes the action.
+ * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain
+ * `{ path }` object. Uses `currentColor` so the icon inherits the text color
+ * of its parent. Pass `label` only when the icon conveys meaning on its own.
  *
  * @example
  * import { Search } from "@gnome-ui/icons";
  * <Icon icon={Search} label="Search" />
+ *
+ * @example
+ * import { siGithub } from "simple-icons";
+ * <Icon icon={siGithub} label="GitHub" />
  */
 export declare function Icon({ icon, size, label, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.js

@@ -5,27 +5,30 @@ var t = {
 	md: 16,
 	lg: 20
 };
-function n({ icon: n, size: r = "md", label: i, width: a, height: o, ...s }) {
-	let c = t[r];
+function n(e) {
+	return "paths" in e && Array.isArray(e.paths);
+}
+function 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
+	}, n)) : [/* @__PURE__ */ e("path", { d: r.path }, 0)];
 	return /* @__PURE__ */ e("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: n.viewBox,
-		width: a ?? c,
-		height: o ?? c,
+		viewBox: u,
+		width: o ?? l,
+		height: s ?? l,
 		fill: "currentColor",
-		"aria-label": i,
-		"aria-hidden": i ? void 0 : !0,
-		role: i ? "img" : void 0,
+		"aria-label": a,
+		"aria-hidden": a ? void 0 : !0,
+		role: a ? "img" : void 0,
 		focusable: "false",
-		...s,
-		children: n.paths.map((t, n) => /* @__PURE__ */ e("path", {
-			d: t.d,
-			fillRule: t.fillRule,
-			clipRule: t.clipRule
-		}, n))
+		...c,
+		children: d
 	});
 }
 //#endregion
-export { n as Icon };
+export { r 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 { SVGAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /**\n   * Rendered size.\n   * - `sm` — 12 px\n   * - `md` — 16 px (default)\n   * - `lg` — 20 px\n   *\n   * Override with `width`/`height` for non-standard sizes.\n   */\n  size?: IconSize;\n  /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n  label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\n/**\n * Renders an `@gnome-ui/icons` definition as an inline SVG.\n *\n * Uses `currentColor` so the icon inherits the text color of its parent.\n * Pass `label` only when the icon conveys meaning on its own;\n * omit it when a sibling text label already describes the action.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n */\nexport function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={icon.viewBox}\n      width={width ?? px}\n      height={height ?? px}\n      fill=\"currentColor\"\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      role={label ? \"img\" : undefined}\n      focusable=\"false\"\n      {...props}\n    >\n      {icon.paths.map((p, i) => (\n        <path\n          key={i}\n          d={p.d}\n          fillRule={p.fillRule}\n          clipRule={p.clipRule}\n        />\n      ))}\n    </svg>\n  );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAarE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS;AAEpB,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS,EAAK;EACd,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH,EAAK,MAAM,KAAK,GAAG,MAClB,kBAAC,QAAD;GAEE,GAAG,EAAE;GACL,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,EAJK,EAIL,CACF;EACE,CAAA"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\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 function Icon({\n  icon,\n  size = \"md\",\n  label,\n  width,\n  height,\n  ...props\n}: IconProps) {\n  const px = SIZE_MAP[size];\n\n  const resolvedViewBox = isIconDefinition(icon)\n    ? icon.viewBox\n    : (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} />\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;CAAI;AAErE,SAAS,EAAiB,GAAiD;AAEzE,QAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,MAAM;;AAkBzE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,EAAK,GAC1C,EAAK,UACJ,EAAK,WAAW,aAEf,IAAQ,EAAiB,EAAK,GAChC,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAY,EAAzD,EAAyD,CACpE,GACF,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,MAAQ,EAAnB,EAAmB,CAAC;AAEpC,QACE,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;EACG,CAAA"}

package/dist/components/IconButton/IconButton.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Button/Button.cjs`),t=require(`../Icon/Icon.cjs`),n=require(`../Tooltip/Tooltip.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);var a={sm:`sm`,md:`md`,lg:`lg`},o=(0,r.forwardRef)(function({icon:r,label:o,variant:s=`default`,size:c=`md`,iconSize:l,tooltip:u,tooltipPlacement:d,tooltipDelay:f,...p},m){let h=s===`osd`?`flat`:s,g=(0,i.jsx)(e.Button,{ref:m,"aria-label":o,shape:`circular`,size:c,variant:h,osd:s===`osd`,...p,children:(0,i.jsx)(t.Icon,{icon:r,size:l??a[c]})});return u?(0,i.jsx)(n.Tooltip,{label:u,placement:d,delay:f,children:g}):g});exports.IconButton=o;
+//# sourceMappingURL=IconButton.cjs.map

package/dist/components/IconButton/IconButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.cjs","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from \"../Button\";\nimport { Icon, type IconSize } from \"../Icon\";\nimport { Tooltip, type TooltipPlacement } from \"../Tooltip\";\n\nexport type IconButtonVariant = ButtonVariant | \"osd\";\nexport type IconButtonSize = ButtonSize;\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    \"aria-label\" | \"children\" | \"leadingIcon\" | \"osd\" | \"shape\" | \"trailingIcon\" | \"variant\"\n  > {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /** Accessible name for the icon-only button. */\n  label: string;\n  /** Visual style of the button. Use `\"osd\"` for media overlay controls. */\n  variant?: IconButtonVariant;\n  /** Size of the button. */\n  size?: IconButtonSize;\n  /** Override the rendered icon size. Defaults to a size matched to `size`. */\n  iconSize?: IconSize;\n  /** Optional tooltip text shown on hover/focus. */\n  tooltip?: string;\n  /** Preferred tooltip placement. */\n  tooltipPlacement?: TooltipPlacement;\n  /** Tooltip delay in milliseconds. */\n  tooltipDelay?: number;\n}\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: \"sm\",\n  md: \"md\",\n  lg: \"lg\",\n};\n\n/**\n * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.\n *\n * `label` is required because the button has no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton({\n  icon,\n  label,\n  variant = \"default\",\n  size = \"md\",\n  iconSize,\n  tooltip,\n  tooltipPlacement,\n  tooltipDelay,\n  ...props\n}, ref) {\n  const buttonVariant = variant === \"osd\" ? \"flat\" : variant;\n\n  const button = (\n    <Button\n      ref={ref}\n      aria-label={label}\n      shape=\"circular\"\n      size={size}\n      variant={buttonVariant}\n      osd={variant === \"osd\"}\n      {...props}\n    >\n      <Icon icon={icon} size={iconSize ?? ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <Tooltip\n      label={tooltip}\n      placement={tooltipPlacement}\n      delay={tooltipDelay}\n    >\n      {button}\n    </Tooltip>\n  );\n});\n"],"mappings":"gKAgCA,IAAM,EAA6D,CACjE,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAOY,GAAA,EAAA,EAAA,YAA4D,SAAoB,CAC3F,OACA,QACA,UAAU,UACV,OAAO,KACP,WACA,UACA,mBACA,eACA,GAAG,GACF,EAAK,CACN,IAAM,EAAgB,IAAY,MAAQ,OAAS,EAE7C,GACJ,EAAA,EAAA,KAAC,EAAA,OAAD,CACO,MACL,aAAY,EACZ,MAAM,WACA,OACN,QAAS,EACT,IAAK,IAAY,MACjB,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAM,GAAY,EAAyB,GAAS,CAAA,CAC/D,CAAA,CAKX,OAFK,GAGH,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,EACP,UAAW,EACX,MAAO,WAEN,EACO,CAAA,CATS,GAWrB"}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,30 @@
+import { IconDefinition } from '@gnome-ui/icons';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../Button';
+import { IconSize } from '../Icon';
+import { TooltipPlacement } from '../Tooltip';
+export type IconButtonVariant = ButtonVariant | "osd";
+export type IconButtonSize = ButtonSize;
+export interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "leadingIcon" | "osd" | "shape" | "trailingIcon" | "variant"> {
+    /** Icon definition imported from `@gnome-ui/icons`. */
+    icon: IconDefinition;
+    /** Accessible name for the icon-only button. */
+    label: string;
+    /** Visual style of the button. Use `"osd"` for media overlay controls. */
+    variant?: IconButtonVariant;
+    /** Size of the button. */
+    size?: IconButtonSize;
+    /** Override the rendered icon size. Defaults to a size matched to `size`. */
+    iconSize?: IconSize;
+    /** Optional tooltip text shown on hover/focus. */
+    tooltip?: string;
+    /** Preferred tooltip placement. */
+    tooltipPlacement?: TooltipPlacement;
+    /** Tooltip delay in milliseconds. */
+    tooltipDelay?: number;
+}
+/**
+ * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.
+ *
+ * `label` is required because the button has no visible text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,35 @@
+import { Button as e } from "../Button/Button.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { Tooltip as n } from "../Tooltip/Tooltip.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/IconButton/IconButton.tsx
+var a = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+}, o = r(function({ icon: r, label: o, variant: s = "default", size: c = "md", iconSize: l, tooltip: u, tooltipPlacement: d, tooltipDelay: f, ...p }, m) {
+	let h = s === "osd" ? "flat" : s, g = /* @__PURE__ */ i(e, {
+		ref: m,
+		"aria-label": o,
+		shape: "circular",
+		size: c,
+		variant: h,
+		osd: s === "osd",
+		...p,
+		children: /* @__PURE__ */ i(t, {
+			icon: r,
+			size: l ?? a[c]
+		})
+	});
+	return u ? /* @__PURE__ */ i(n, {
+		label: u,
+		placement: d,
+		delay: f,
+		children: g
+	}) : g;
+});
+//#endregion
+export { o as IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from \"../Button\";\nimport { Icon, type IconSize } from \"../Icon\";\nimport { Tooltip, type TooltipPlacement } from \"../Tooltip\";\n\nexport type IconButtonVariant = ButtonVariant | \"osd\";\nexport type IconButtonSize = ButtonSize;\n\nexport interface IconButtonProps\n  extends Omit<\n    ButtonProps,\n    \"aria-label\" | \"children\" | \"leadingIcon\" | \"osd\" | \"shape\" | \"trailingIcon\" | \"variant\"\n  > {\n  /** Icon definition imported from `@gnome-ui/icons`. */\n  icon: IconDefinition;\n  /** Accessible name for the icon-only button. */\n  label: string;\n  /** Visual style of the button. Use `\"osd\"` for media overlay controls. */\n  variant?: IconButtonVariant;\n  /** Size of the button. */\n  size?: IconButtonSize;\n  /** Override the rendered icon size. Defaults to a size matched to `size`. */\n  iconSize?: IconSize;\n  /** Optional tooltip text shown on hover/focus. */\n  tooltip?: string;\n  /** Preferred tooltip placement. */\n  tooltipPlacement?: TooltipPlacement;\n  /** Tooltip delay in milliseconds. */\n  tooltipDelay?: number;\n}\n\nconst ICON_SIZE_BY_BUTTON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: \"sm\",\n  md: \"md\",\n  lg: \"lg\",\n};\n\n/**\n * Icon-only action button composed from `Button`, `Icon`, and optionally `Tooltip`.\n *\n * `label` is required because the button has no visible text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton({\n  icon,\n  label,\n  variant = \"default\",\n  size = \"md\",\n  iconSize,\n  tooltip,\n  tooltipPlacement,\n  tooltipDelay,\n  ...props\n}, ref) {\n  const buttonVariant = variant === \"osd\" ? \"flat\" : variant;\n\n  const button = (\n    <Button\n      ref={ref}\n      aria-label={label}\n      shape=\"circular\"\n      size={size}\n      variant={buttonVariant}\n      osd={variant === \"osd\"}\n      {...props}\n    >\n      <Icon icon={icon} size={iconSize ?? ICON_SIZE_BY_BUTTON_SIZE[size]} />\n    </Button>\n  );\n\n  if (!tooltip) return button;\n\n  return (\n    <Tooltip\n      label={tooltip}\n      placement={tooltipPlacement}\n      delay={tooltipDelay}\n    >\n      {button}\n    </Tooltip>\n  );\n});\n"],"mappings":";;;;;;AAgCA,IAAM,IAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAOY,IAAa,EAA+C,SAAoB,EAC3F,SACA,UACA,aAAU,WACV,UAAO,MACP,aACA,YACA,qBACA,iBACA,GAAG,KACF,GAAK;CACN,IAAM,IAAgB,MAAY,QAAQ,SAAS,GAE7C,IACJ,kBAAC,GAAD;EACO;EACL,cAAY;EACZ,OAAM;EACA;EACN,SAAS;EACT,KAAK,MAAY;EACjB,GAAI;YAEJ,kBAAC,GAAD;GAAY;GAAM,MAAM,KAAY,EAAyB;GAAS,CAAA;EAC/D,CAAA;AAKX,QAFK,IAGH,kBAAC,GAAD;EACE,OAAO;EACP,WAAW;EACX,OAAO;YAEN;EACO,CAAA,GATS;EAWrB"}

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

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';

package/dist/components/IconButton.cjs

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

package/dist/components/IconButton.d.ts

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

package/dist/components/IconButton.js

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

package/dist/components/Sidebar/SidebarItem.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Sidebar.module.css.cjs`),n=require(`./Sidebar.cjs`),r=require(`../Tooltip/Tooltip.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=n.useSidebarCollapsed(),y=(0,i.useContext)(n.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[t.default.itemBtn,l?t.default.active:null,v?t.default.itemCollapsed:null,C?t.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:t.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:t.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:t.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:t.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(r.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:t.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[t.default.contextMenuItem,e.destructive?t.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
+const e=require(`../Icon/Icon.cjs`),t=require(`../Tooltip/Tooltip.cjs`),n=require(`./Sidebar.module.css.cjs`),r=require(`./Sidebar.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
 //# sourceMappingURL=SidebarItem.cjs.map

package/dist/components/Sidebar/SidebarItem.js

@@ -1,13 +1,13 @@
 import { Icon as e } from "../Icon/Icon.js";
-import t from "./Sidebar.module.css.js";
-import { SidebarFilterContext as n, useSidebarCollapsed as r } from "./Sidebar.js";
-import { Tooltip as i } from "../Tooltip/Tooltip.js";
+import { Tooltip as t } from "../Tooltip/Tooltip.js";
+import n from "./Sidebar.module.css.js";
+import { SidebarFilterContext as r, useSidebarCollapsed as i } from "./Sidebar.js";
 import { useCallback as a, useContext as o, useEffect 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/Sidebar/SidebarItem.tsx
 function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v, menuItems: y, onDrop: b, acceptTypes: x, className: S, ...C }) {
-	let w = r(), T = o(n), E = g ?? _, D = w ? v ?? p : v, O = T.length > 0 && !p.toLowerCase().includes(T.toLowerCase()), [k, A] = l(!1), j = (e) => {
+	let w = i(), T = o(r), E = g ?? _, D = w ? v ?? p : v, O = T.length > 0 && !p.toLowerCase().includes(T.toLowerCase()), [k, A] = l(!1), j = (e) => {
 		b && (x?.length && !x.some((t) => e.dataTransfer.types.includes(t)) || (e.preventDefault(), A(!0)));
 	}, M = () => A(!1), N = (e) => {
 		b && (e.preventDefault(), A(!1), b(e));
@@ -40,10 +40,10 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 		"aria-current": h ? "page" : void 0,
 		"aria-label": w ? p : void 0,
 		className: [
-			t.itemBtn,
-			h ? t.active : null,
-			w ? t.itemCollapsed : null,
-			k ? t.dragOver : null,
+			n.itemBtn,
+			h ? n.active : null,
+			w ? n.itemCollapsed : null,
+			k ? n.dragOver : null,
 			S
 		].filter(Boolean).join(" "),
 		onContextMenu: z,
@@ -54,7 +54,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 		...C,
 		children: [
 			m && /* @__PURE__ */ d("span", {
-				className: t.itemIcon,
+				className: n.itemIcon,
 				children: /* @__PURE__ */ d(e, {
 					icon: m,
 					size: "md",
@@ -62,25 +62,25 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 				})
 			}),
 			!w && /* @__PURE__ */ d("span", {
-				className: t.itemLabel,
+				className: n.itemLabel,
 				children: p
 			}),
 			!w && E && /* @__PURE__ */ d("span", {
-				className: t.itemSuffix,
+				className: n.itemSuffix,
 				children: E
 			})
 		]
 	});
 	return /* @__PURE__ */ f("li", {
-		className: t.item,
+		className: n.item,
 		hidden: O || void 0,
-		children: [D ? /* @__PURE__ */ d(i, {
+		children: [D ? /* @__PURE__ */ d(t, {
 			label: D,
 			placement: "right",
 			children: V
 		}) : V, P && y?.length && typeof document < "u" && u(/* @__PURE__ */ d("div", {
 			ref: I,
-			className: t.contextMenu,
+			className: n.contextMenu,
 			style: {
 				top: P.y,
 				left: P.x
@@ -90,7 +90,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 				type: "button",
 				role: "menuitem",
 				disabled: e.disabled,
-				className: [t.contextMenuItem, e.destructive ? t.contextMenuDestructive : null].filter(Boolean).join(" "),
+				className: [n.contextMenuItem, e.destructive ? n.contextMenuDestructive : null].filter(Boolean).join(" "),
 				onClick: () => {
 					e.onClick(), R();
 				},

package/dist/components/Skeleton/Skeleton.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Skeleton.module.css.cjs`);let t=require(`react/jsx-runtime`);function n(e){return typeof e==`number`?`${e}px`:e}function r({variant:r=`rect`,width:i=`100%`,height:a=16,size:o=40,lines:s=3,animated:c=!0,className:l,style:u,...d}){let f=[e.default.skeleton,e.default[r],c?e.default.animated:null,l].filter(Boolean).join(` `);if(r===`text`){let n=Math.max(1,Math.floor(s));return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:u,...d,children:Array.from({length:n},(r,i)=>(0,t.jsx)(`div`,{className:e.default.line,style:i===n-1?{"--skeleton-line-width":`60%`}:void 0},i))})}let p=r===`circle`?{width:`${o}px`,height:`${o}px`}:{width:n(i),height:n(a)};return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:{...p,...u},...d})}exports.Skeleton=r;
+//# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from \"react\";\nimport styles from \"./Skeleton.module.css\";\n\nexport type SkeletonVariant = \"rect\" | \"circle\" | \"text\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = \"rect\",\n  width = \"100%\",\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [\n    styles.skeleton,\n    styles[variant],\n    animated ? styles.animated : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (variant === \"text\") {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div\n        aria-hidden=\"true\"\n        className={classes}\n        style={style}\n        {...props}\n      >\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ \"--skeleton-line-width\": \"60%\" } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === \"circle\"\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={classes}\n      style={{ ...shapeStyle, ...style }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"gFAuBA,SAAS,EAAU,EAAwB,CACzC,OAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EASpD,SAAgB,EAAS,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,GACa,CAChB,IAAM,EAAU,CACd,EAAA,QAAO,SACP,EAAA,QAAO,GACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEZ,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,EAAM,CAAC,CAEhD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,EACJ,QACP,GAAI,WAEH,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,MAAO,CACnC,IAAA,GAEN,CAPK,EAOL,CACF,CACE,CAAA,CAIV,IAAM,EACJ,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,IAAK,CAC3C,CAAE,MAAO,EAAU,EAAM,CAAE,OAAQ,EAAU,EAAO,CAAE,CAE5D,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,EACX,MAAO,CAAE,GAAG,EAAY,GAAG,EAAO,CAClC,GAAI,EACJ,CAAA"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonVariant = "rect" | "circle" | "text";
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shape of the placeholder. Defaults to `"rect"`. */
+    variant?: SkeletonVariant;
+    /** Width for rectangular placeholders. Defaults to `"100%"`. */
+    width?: number | string;
+    /** Height for rectangular placeholders. Defaults to `16`. */
+    height?: number | string;
+    /** Diameter for circular placeholders. Defaults to `40`. */
+    size?: number;
+    /** Number of rows for text placeholders. Defaults to `3`. */
+    lines?: number;
+    /**
+     * Enables the shimmer animation.
+     * Respects `prefers-reduced-motion`. Defaults to `true`.
+     */
+    animated?: boolean;
+}
+/**
+ * Loading placeholder for content-shaped skeleton screens.
+ *
+ * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a
+ * pragmatic web-style extension for layouts that benefit from placeholder shape.
+ */
+export declare function Skeleton({ variant, width, height, size, lines, animated, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;