webadwaita 0.0.15 → 0.0.16

package/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@repo/eslint-config/react.js"],
+  // Resolve tsconfig.json relative to this package, not the workspace root.
+  parserOptions: {
+    project: require("node:path").resolve(__dirname, "tsconfig.json"),
+  },
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,30 @@
+npm warn Unknown project config "auto-install-peers". This will stop working in the next major version of npm.
+npm warn Unknown project config "public-hoist-pattern". This will stop working in the next major version of npm.
+
+> webadwaita@0.0.16 build
+> tsup
+
+CLI Building entry: src/index.ts, src/components/atoms/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: C:\Users\micha\repos\webadwaita\packages\ui\tsup.config.ts
+CLI Target: es6
+CJS Build start
+ESM Build start
+DTS Build start
+CJS dist\index.css                  688.00 B
+CJS dist\index.js                   2.76 KB
+CJS dist\components\atoms\index.css 688.00 B
+CJS dist\components\atoms\index.js  2.78 KB
+CJS ⚡️ Build success in 1324ms
+ESM dist\index.mjs                  70.00 B
+ESM dist\components\atoms\index.mjs 74.00 B
+ESM dist\chunk-APFHYC4L.mjs         1.82 KB
+ESM dist\components\atoms\index.css 688.00 B
+ESM dist\index.css                  688.00 B
+ESM ⚡️ Build success in 1330ms
+DTS ⚡️ Build success in 3352ms
+DTS dist\components\atoms\index.d.ts  294.00 B
+DTS dist\index.d.ts                   67.00 B
+DTS dist\components\atoms\index.d.mts 294.00 B
+DTS dist\index.d.mts                  68.00 B

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# webadwaita
+
+## 0.0.16
+
+### Patch Changes
+
+- Set up project structure with atomic design pattern (atoms/molecules), SCSS modules support, co-located Storybook stories, and component type files.

package/dist/button.d.mts

@@ -0,0 +1,9 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+declare function Button({ children, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/button.d.ts

@@ -0,0 +1,9 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+declare function Button({ children, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", __spreadProps(__spreadValues({ type: "button" }, other), { children }));
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/button.mjs

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({ type: "button" }, other), { children }));
+}
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/chunk-APFHYC4L.mjs

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/atoms/Button/Button.module.scss
+var Button_module_default = {};
+
+// src/components/atoms/Button/Button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button(_a) {
+  var _b = _a, { children, className } = _b, other = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: className ? `${Button_module_default.button} ${className}` : Button_module_default.button
+    }, other), {
+      children
+    })
+  );
+}
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/components/atoms/index.css

@@ -0,0 +1,32 @@
+/* src/components/atoms/Button/Button.module.scss */
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #0052a3;
+  border-radius: 0.25rem;
+  background-color: #0066cc;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+.button:hover {
+  background-color: #0052a3;
+  border-color: #004080;
+}
+.button:focus {
+  border-color: #004080;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
+.button:active {
+  background-color: #004080;
+}
+.button:disabled {
+  background-color: #99c2e6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/components/atoms/index.d.mts

@@ -0,0 +1,10 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+
+declare function Button({ children, className, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

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

@@ -0,0 +1,10 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+
+declare function Button({ children, className, ...other }: ButtonProps): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button, type ButtonProps };

package/dist/components/atoms/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/atoms/index.ts
+var atoms_exports = {};
+__export(atoms_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(atoms_exports);
+
+// src/components/atoms/Button/Button.module.scss
+var Button_module_default = {};
+
+// src/components/atoms/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, { children, className } = _b, other = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: className ? `${Button_module_default.button} ${className}` : Button_module_default.button
+    }, other), {
+      children
+    })
+  );
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/components/atoms/index.mjs

@@ -0,0 +1,6 @@
+import {
+  Button
+} from "../../chunk-APFHYC4L.mjs";
+export {
+  Button
+};

package/dist/index.css

@@ -0,0 +1,32 @@
+/* src/components/atoms/Button/Button.module.scss */
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #0052a3;
+  border-radius: 0.25rem;
+  background-color: #0066cc;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+.button:hover {
+  background-color: #0052a3;
+  border-color: #004080;
+}
+.button:focus {
+  border-color: #004080;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
+.button:active {
+  background-color: #004080;
+}
+.button:disabled {
+  background-color: #99c2e6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/index.d.mts

@@ -0,0 +1 @@
+export { Button, ButtonProps } from './components/atoms/index.mjs';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Button, ButtonProps } from './components/atoms/index.js';

package/dist/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/atoms/Button/Button.module.scss
+var Button_module_default = {};
+
+// src/components/atoms/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(_a) {
+  var _b = _a, { children, className } = _b, other = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: className ? `${Button_module_default.button} ${className}` : Button_module_default.button
+    }, other), {
+      children
+    })
+  );
+}
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import {
+  Button
+} from "./chunk-APFHYC4L.mjs";
+export {
+  Button
+};

package/package.json

@@ -1,48 +1,44 @@
 {
   "name": "webadwaita",
-  "version": "0.0.15",
-  "author": "Michal Shelenberg <michalshelenberg@outlook.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/michalshelenberg/webadwaita.git"
-  },
-  "type": "module",
-  "files": [
-    "dist"
+  "version": "0.0.16",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
   ],
-  "main": "./dist/webadwaita.umd.cjs",
-  "module": "./dist/webadwaita.js",
+  "license": "MIT",
   "exports": {
     ".": {
-      "import": "./dist/webadwaita.js",
-      "require": "./dist/webadwaita.cjs"
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./atoms": {
+      "types": "./src/components/atoms/index.ts",
+      "import": "./dist/atoms.mjs",
+      "require": "./dist/atoms.js"
     }
   },
   "scripts": {
-    "dev": "vite",
-    "prebuild": "rm -rf dist",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo node_modules dist"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "esbuild-sass-plugin": "^3.6.0",
+    "eslint": "^8.57.0",
+    "sass": "^1.97.3",
+    "tsup": "^8.0.2",
+    "typescript": "5.5.4"
   },
   "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "vite-tsconfig-paths": "^6.0.4"
+    "react": "^18.2.0"
   },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/components/atoms/Button/Button.module.scss

@@ -0,0 +1,32 @@
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #0052a3;
+  border-radius: 0.25rem;
+  background-color: #0066cc;
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  &:hover {
+    background-color: #0052a3;
+    border-color: #004080;
+  }
+
+  &:focus {
+    border-color: #004080;
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+  }
+
+  &:active {
+    background-color: #004080;
+  }
+
+  &:disabled {
+    background-color: #99c2e6;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}

package/src/components/atoms/Button/Button.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    type: {
+      control: { type: "radio" },
+      options: ["button", "submit", "reset"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: (props) => (
+    <Button
+      {...props}
+      onClick={(): void => {
+        // eslint-disable-next-line no-alert -- alert for demo
+        alert("Hello from Turborepo!");
+      }}
+    >
+      Hello
+    </Button>
+  ),
+  name: "Button",
+  args: {
+    children: "Hello",
+    type: "button",
+  },
+};

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,16 @@
+import styles from "./Button.module.scss";
+import type { ButtonProps } from "./Button.types";
+
+export function Button({ children, className, ...other }: ButtonProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      className={className ? `${styles.button} ${className}` : styles.button}
+      {...other}
+    >
+      {children}
+    </button>
+  );
+}
+
+Button.displayName = "Button";

package/src/components/atoms/Button/Button.types.ts

@@ -0,0 +1,4 @@
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}

package/src/components/atoms/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button.types";

package/src/components/atoms/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./atoms";

package/src/global.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-restricted-syntax */
+declare module '*.module.scss' {
+    const classes: Readonly<Record<string, string>>;
+    export default classes;
+}
+
+declare module '*.module.css' {
+    const classes: Readonly<Record<string, string>>;
+    export default classes;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+import { sassPlugin } from "esbuild-sass-plugin";
+
+export default defineConfig((options) => ({
+  entryPoints: ["src/index.ts", "src/components/atoms/index.ts", "src/components/molecules/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  external: ["react"],
+  esbuildPlugins: [sassPlugin()],
+  ...options,
+}));

package/dist/webadwaita.css

@@ -1 +0,0 @@
-._button_j9o65_1{--button-align-items: center;--button-border: none;--button-cursor: pointer;--button-display: flex;--button-font-family: inherit;--button-font-size: .875rem;--button-font-weight: 600;--button-justify-content: center;--button-letter-spacing: .04em;--button-line-height: 1rem;--button-transition: all .3s ease;align-items:var(--button-align-items);background-color:var(--button-background-color);border:var(--button-border);border-radius:var(--button-border-radius);color:var(--button-color);cursor:var(--button-cursor);display:var(--button-display);font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);justify-content:var(--button-justify-content);letter-spacing:var(--button-letter-spacing);line-height:var(--button-line-height);padding-block:var(--button-padding-block);padding-inline:var(--button-padding-inline);transition:var(--button-transition)}._button--variant-regular_j9o65_63{--button-border-radius: .5rem;--button-min-width: 7.125rem;--button-padding-block: .5625rem;--button-padding-inline: 1.0625rem}._button--variant-pill_j9o65_77{--button-border-radius: 9999px;--button-min-width: auto;--button-padding-block: .875rem;--button-padding-inline: 2rem}._button--color-gray_j9o65_91{--button-background-color: #e6e6e7;--button-color: #2e2e33}._button--color-gray_j9o65_91:hover{--button-background-color: #dcdcdd;--button-color: #2c2c31}._button--color-gray_j9o65_91:active{--button-background-color: #bebec0;--button-color: #26262b}._button--color-suggested_j9o65_121{--button-background-color: #3584e4;--button-color: #ffffff}._button--color-suggested_j9o65_121:hover{--button-background-color: #4a91e7}._button--color-suggested_j9o65_121:active{--button-background-color: #2a6ab7}._button--color-destructive_j9o65_147{--button-background-color: #f2d5d6;--button-color: #c30000}._button--color-destructive_j9o65_147:hover{--button-background-color: #efc8c9}._button--color-destructive_j9o65_147:active{--button-background-color: #e7a3a3}

package/dist/webadwaita.js

@@ -1,21 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-const _ = "_button_j9o65_1", t = {
-  button: _,
-  "button--variant-regular": "_button--variant-regular_j9o65_63",
-  "button--variant-pill": "_button--variant-pill_j9o65_77",
-  "button--color-gray": "_button--color-gray_j9o65_91",
-  "button--color-suggested": "_button--color-suggested_j9o65_121",
-  "button--color-destructive": "_button--color-destructive_j9o65_147"
-};
-function e(o) {
-  const { variant: n, color: r, children: u, className: a, ...c } = o, s = [
-    t.button,
-    t[`button--variant-${n}`],
-    t[`button--color-${r}`],
-    a
-  ].join(" ");
-  return /* @__PURE__ */ l("button", { ...c, className: s, children: u });
-}
-export {
-  e as Button
-};

package/dist/webadwaita.umd.cjs

@@ -1 +0,0 @@
-(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t.webadwaita={},t["react/jsx-runtime"]))})(this,(function(t,o){"use strict";const n={button:"_button_j9o65_1","button--variant-regular":"_button--variant-regular_j9o65_63","button--variant-pill":"_button--variant-pill_j9o65_77","button--color-gray":"_button--color-gray_j9o65_91","button--color-suggested":"_button--color-suggested_j9o65_121","button--color-destructive":"_button--color-destructive_j9o65_147"};function e(u){const{variant:r,color:i,children:s,className:a,...c}=u,b=[n.button,n[`button--variant-${r}`],n[`button--color-${i}`],a].join(" ");return o.jsx("button",{...c,className:b,children:s})}t.Button=e,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));