@gnome-ui/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 el_jijuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = "default" | "suggested" | "destructive" | "flat";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonShape = "default" | "pill" | "circular";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style of the button. Follows GNOME HIG button types. */
+    variant?: ButtonVariant;
+    /** Size of the button. */
+    size?: ButtonSize;
+    /** Shape of the button. "pill" for primary actions in open space, "circular" for icon-only buttons. */
+    shape?: ButtonShape;
+    /** Icon placed before the label. */
+    leadingIcon?: ReactNode;
+    /** Icon placed after the label. */
+    trailingIcon?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Button component following GNOME Human Interface Guidelines.
+ *
+ * Variants:
+ * - `default`     — Standard action, flat appearance with subtle border.
+ * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.
+ * - `destructive` — Dangerous or irreversible action (red). Use sparingly.
+ * - `flat`        — No border or background; ideal for header bars and toolbars.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/buttons.html
+ */
+export declare function Button({ variant, size, shape, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape } from './Button';

package/dist/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react/jsx-runtime`);var t={button:`_button_lkjar_1`,pill:`_pill_lkjar_52`,circular:`_circular_lkjar_59`,default:`_default_lkjar_71`,suggested:`_suggested_lkjar_105`,destructive:`_destructive_lkjar_120`,flat:`_flat_lkjar_135`,sm:`_sm_lkjar_161`,lg:`_lg_lkjar_168`};function n({variant:n=`default`,size:r=`md`,shape:i=`default`,leadingIcon:a,trailingIcon:o,children:s,className:c,...l}){return(0,e.jsxs)(`button`,{className:[t.button,t[n],r===`md`?null:t[r],i===`default`?null:t[i],c].filter(Boolean).join(` `),...l,children:[a,s,o]})}exports.Button=n;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/components/Button/Button.module.css","../src/components/Button/Button.tsx"],"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: rgba(0, 0, 0, 0.06);\n}\n\n.flat:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .flat:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\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","import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\";\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  /** 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  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    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":"0VCgCA,SAAgB,EAAO,CACrB,UAAU,UACV,OAAO,KACP,QAAQ,UACR,cACA,eACA,WACA,YACA,GAAG,GACW,CAWd,OACE,EAAA,EAAA,MAAC,SAAD,CAAQ,UAXM,CACd,EAAO,OACP,EAAO,GACP,IAAS,KAAsB,KAAf,EAAO,GACvB,IAAU,UAA4B,KAAhB,EAAO,GAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGkB,GAAI,WAAhC,CACG,EACA,EACA,EACM"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape } from './components/Button';

package/dist/index.js

@@ -0,0 +1,35 @@
+import { jsxs as e } from "react/jsx-runtime";
+var t = {
+	button: "_button_lkjar_1",
+	pill: "_pill_lkjar_52",
+	circular: "_circular_lkjar_59",
+	default: "_default_lkjar_71",
+	suggested: "_suggested_lkjar_105",
+	destructive: "_destructive_lkjar_120",
+	flat: "_flat_lkjar_135",
+	sm: "_sm_lkjar_161",
+	lg: "_lg_lkjar_168"
+};
+//#endregion
+//#region src/components/Button/Button.tsx
+function n({ variant: n = "default", size: r = "md", shape: i = "default", leadingIcon: a, trailingIcon: o, children: s, className: c, ...l }) {
+	return /* @__PURE__ */ e("button", {
+		className: [
+			t.button,
+			t[n],
+			r === "md" ? null : t[r],
+			i === "default" ? null : t[i],
+			c
+		].filter(Boolean).join(" "),
+		...l,
+		children: [
+			a,
+			s,
+			o
+		]
+	});
+}
+//#endregion
+export { n as Button };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/Button/Button.module.css","../src/components/Button/Button.tsx"],"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: rgba(0, 0, 0, 0.06);\n}\n\n.flat:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .flat:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\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","import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\";\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  /** 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  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    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":";;;;;;;;;;;;;;ACgCA,SAAgB,EAAO,EACrB,aAAU,WACV,UAAO,MACP,WAAQ,WACR,gBACA,iBACA,aACA,cACA,GAAG,KACW;AAWd,QACE,kBAAC,UAAD;EAAQ,WAXM;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGkB,GAAI;YAAhC;GACG;GACA;GACA;GACM"}

package/dist/style.css

@@ -0,0 +1,2 @@
+:root{--gnome-blue-1:#99c1f1;--gnome-blue-2:#62a0ea;--gnome-blue-3:#3584e4;--gnome-blue-4:#1c71d8;--gnome-blue-5:#1a5fb4;--gnome-green-1:#8ff0a4;--gnome-green-2:#57e389;--gnome-green-3:#33d17a;--gnome-green-4:#2ec27e;--gnome-green-5:#26a269;--gnome-yellow-1:#f9f06b;--gnome-yellow-2:#f8e45c;--gnome-yellow-3:#f6d32d;--gnome-yellow-4:#f5c211;--gnome-yellow-5:#e5a50a;--gnome-orange-1:#ffbe6f;--gnome-orange-2:#ffa348;--gnome-orange-3:#ff7800;--gnome-orange-4:#e66100;--gnome-orange-5:#c64600;--gnome-red-1:#f66151;--gnome-red-2:#ed333b;--gnome-red-3:#e01b24;--gnome-red-4:#c01c28;--gnome-red-5:#a51d2d;--gnome-purple-1:#dc8add;--gnome-purple-2:#c061cb;--gnome-purple-3:#9141ac;--gnome-purple-4:#813d9c;--gnome-purple-5:#63452c;--gnome-brown-1:#cdab8f;--gnome-brown-2:#b5835a;--gnome-brown-3:#986a44;--gnome-brown-4:#865e3c;--gnome-brown-5:#63452c;--gnome-light-1:#fff;--gnome-light-2:#f6f5f4;--gnome-light-3:#deddda;--gnome-light-4:#c0bfbc;--gnome-light-5:#9a9996;--gnome-dark-1:#77767b;--gnome-dark-2:#5e5c64;--gnome-dark-3:#3d3846;--gnome-dark-4:#241f31;--gnome-dark-5:#000;--gnome-accent-color:var(--gnome-blue-3);--gnome-accent-bg-color:var(--gnome-blue-3);--gnome-accent-fg-color:#fff;--gnome-destructive-color:var(--gnome-red-3);--gnome-destructive-bg-color:var(--gnome-red-3);--gnome-destructive-fg-color:#fff;--gnome-success-color:var(--gnome-green-4);--gnome-success-bg-color:var(--gnome-green-4);--gnome-success-fg-color:#fff;--gnome-warning-color:var(--gnome-yellow-5);--gnome-warning-bg-color:var(--gnome-yellow-3);--gnome-warning-fg-color:#000c;--gnome-error-color:var(--gnome-red-3);--gnome-error-bg-color:var(--gnome-red-3);--gnome-error-fg-color:#fff;--gnome-window-bg-color:#fafafa;--gnome-window-fg-color:#000c;--gnome-view-bg-color:#fff;--gnome-view-fg-color:#000c;--gnome-card-bg-color:#fff;--gnome-card-fg-color:#000c;--gnome-card-shade-color:#00000012;--gnome-headerbar-bg-color:#ebebeb;--gnome-headerbar-fg-color:#000c;--gnome-headerbar-border-color:#0000001f;--gnome-headerbar-shade-color:#0000001f;--gnome-sidebar-bg-color:#ebebeb;--gnome-sidebar-fg-color:#000c;--gnome-popover-bg-color:#fff;--gnome-popover-fg-color:#000c;--gnome-dialog-bg-color:#fafafa;--gnome-dialog-fg-color:#000c;--gnome-font-family:"Adwaita Sans", Cantarell, "Inter", system-ui, sans-serif;--gnome-font-family-mono:"Adwaita Mono", "Source Code Pro", monospace;--gnome-font-size-caption:.75rem;--gnome-font-size-body:1rem;--gnome-font-size-title-4:1.125rem;--gnome-font-size-title-3:1.25rem;--gnome-font-size-title-2:1.5rem;--gnome-font-size-title-1:1.875rem;--gnome-font-size-large-title:2.25rem;--gnome-font-weight-normal:400;--gnome-font-weight-semibold:600;--gnome-font-weight-bold:700;--gnome-line-height-body:1.5;--gnome-line-height-heading:1.2;--gnome-space-1:6px;--gnome-space-2:12px;--gnome-space-3:18px;--gnome-space-4:24px;--gnome-space-5:36px;--gnome-space-6:48px;--gnome-radius-sm:4px;--gnome-radius-md:8px;--gnome-radius-lg:12px;--gnome-radius-xl:15px;--gnome-radius-pill:9999px;--gnome-shadow-sm:0 1px 2px #0000001f;--gnome-shadow-md:0 2px 6px 2px #0003, 0 0 0 1px #00000014;--gnome-shadow-lg:0 3px 9px 1px #0000001a, 0 2px 6px 2px #0003, 0 0 0 1px #1c1f1fe6;--gnome-opacity-disabled:.5;--gnome-opacity-dim:.55;--gnome-opacity-border:.15;--gnome-duration-fast:.1s;--gnome-duration-normal:.2s;--gnome-duration-slow:.4s;--gnome-easing-default:cubic-bezier(.25, .46, .45, .94);--gnome-focus-ring-color:var(--gnome-accent-color);--gnome-focus-ring-width:3px;--gnome-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:root{--gnome-accent-color:var(--gnome-blue-2);--gnome-accent-bg-color:var(--gnome-blue-3);--gnome-window-bg-color:#242424;--gnome-window-fg-color:#ffffffde;--gnome-view-bg-color:#1e1e1e;--gnome-view-fg-color:#ffffffde;--gnome-card-bg-color:#383838;--gnome-card-fg-color:#ffffffde;--gnome-card-shade-color:#0000005c;--gnome-headerbar-bg-color:#303030;--gnome-headerbar-fg-color:#ffffffde;--gnome-headerbar-border-color:#ffffff1a;--gnome-headerbar-shade-color:#0000005c;--gnome-sidebar-bg-color:#303030;--gnome-sidebar-fg-color:#ffffffde;--gnome-popover-bg-color:#383838;--gnome-popover-fg-color:#ffffffde;--gnome-dialog-bg-color:#242424;--gnome-dialog-fg-color:#ffffffde}}*,:before,:after{box-sizing:border-box}._button_lkjar_1{justify-content:center;align-items:center;gap:var(--gnome-space-1);font-family:var(--gnome-font-family);font-size:var(--gnome-font-size-body);font-weight:var(--gnome-font-weight-semibold);white-space:nowrap;border-radius:var(--gnome-radius-md);padding:var(--gnome-space-1) var(--gnome-space-2);cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;min-width:5.5rem;min-height:34px;transition:background-color var(--gnome-duration-fast) var(--gnome-easing-default), box-shadow var(--gnome-duration-fast) var(--gnome-easing-default), opacity var(--gnome-duration-fast) var(--gnome-easing-default);border:1px solid #0000;outline:none;line-height:1;text-decoration:none;display:inline-flex}._button_lkjar_1:focus-visible{box-shadow:0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color), 0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color)}._button_lkjar_1:disabled,._button_lkjar_1[aria-disabled=true]{opacity:var(--gnome-opacity-disabled);cursor:not-allowed;pointer-events:none}._pill_lkjar_52{border-radius:var(--gnome-radius-pill);padding-inline:var(--gnome-space-3)}._circular_lkjar_59{border-radius:var(--gnome-radius-pill);padding:var(--gnome-space-1);width:34px;min-width:34px;height:34px;min-height:34px}._default_lkjar_71{background-color:var(--gnome-card-bg-color,#fff);color:var(--gnome-window-fg-color,#000c);border-color:var(--gnome-light-3,#deddda);box-shadow:var(--gnome-shadow-sm)}._default_lkjar_71:hover:not(:disabled){background-color:var(--gnome-light-2,#f6f5f4)}._default_lkjar_71:active:not(:disabled){background-color:var(--gnome-light-3,#deddda);box-shadow:none}@media (prefers-color-scheme:dark){._default_lkjar_71{background-color:var(--gnome-card-bg-color,#383838);box-shadow:none;border-color:#ffffff1f}._default_lkjar_71:hover:not(:disabled){background-color:#ffffff14}._default_lkjar_71:active:not(:disabled){box-shadow:none;background-color:#ffffff24}}._suggested_lkjar_105{background-color:var(--gnome-accent-bg-color);color:var(--gnome-accent-fg-color);border-color:#0000}._suggested_lkjar_105:hover:not(:disabled){filter:brightness(1.08)}._suggested_lkjar_105:active:not(:disabled){filter:brightness(.92)}._destructive_lkjar_120{background-color:var(--gnome-destructive-bg-color);color:var(--gnome-destructive-fg-color);border-color:#0000}._destructive_lkjar_120:hover:not(:disabled){filter:brightness(1.08)}._destructive_lkjar_120:active:not(:disabled){filter:brightness(.92)}._flat_lkjar_135{color:var(--gnome-window-fg-color,#000c);background-color:#0000;border-color:#0000}._flat_lkjar_135:hover:not(:disabled){background-color:#0000000f}._flat_lkjar_135:active:not(:disabled){background-color:#0000001f}@media (prefers-color-scheme:dark){._flat_lkjar_135:hover:not(:disabled){background-color:#ffffff14}._flat_lkjar_135:active:not(:disabled){background-color:#ffffff24}}._sm_lkjar_161{font-size:var(--gnome-font-size-caption);min-height:28px;padding:4px var(--gnome-space-1);min-width:4rem}._lg_lkjar_168{font-size:var(--gnome-font-size-title-4);min-height:42px;padding:var(--gnome-space-1) var(--gnome-space-3)}
+/*$vite$:1*/

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@gnome-ui/react",
+  "version": "0.1.0",
+  "description": "React component library following GNOME Human Interface Guidelines",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "author": {
+    "name": "El Jijuna",
+    "email": "pilmee@gmail.com"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.5.3",
+    "vite": "^8.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "@storybook/react": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.3",
+    "storybook": "^10.3.3"
+  }
+}