sate-lib 1.1.13 → 1.1.15

package/README.md

@@ -7,27 +7,17 @@ A lightweight and modular React component library designed for modern web interf
 
 ## Tech Stack
 
-- [Vite](https://vite.dev/guide/)
+- [RSLib](https://rslib.rs/)
 - [React](https://react.dev/)
 - [Typescript](https://www.typescriptlang.org/)
 - [Storybook](https://storybook.js.org/)
-- [Sass](https://sass-lang.com/)
-- [Rollup](https://www.npmjs.com/package/rollup)
+- [Biome](https://biomejs.dev/)
 
 ## Installation
 
 ```bash
   pnpm install
-  pnpm dev
-```
-
-## Fonts
-
-SATE Lib uses custom fonts to define the typographic styles used in components like Typography.
-To keep the bundle lightweight and flexible, fonts are not bundled with the main library output but are still included in the dist/assets/fonts directory.
-
-```bash
-import "sate-lib/dist/assets/styles/fonts.scss";
+  pnpm storybook
 ```
 
 ## Component usage

package/dist/components/badge/badge.css

@@ -0,0 +1,4 @@
+.badge {
+  border-radius: .25rem;
+}
+

package/dist/{types/components → components}/badge/badge.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
+import "./badge.css";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
 }

package/dist/components/badge/badge.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import "./badge.css";
+function Badge({ className = "", children, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: `badge ${className}`.trim(),
+        ...props,
+        children: children
+    });
+}
+export { Badge };

package/dist/components/button/button.css

@@ -0,0 +1,35 @@
+.demo-button {
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-block;
+}
+
+.demo-button--primary {
+  color: #fff;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: #0000;
+  box-shadow: inset 0 0 0 1px #00000026;
+}
+
+.demo-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+
+.demo-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+
+.demo-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+

package/dist/components/button/button.d.ts

@@ -0,0 +1,10 @@
+import './button.css';
+interface ButtonProps {
+    primary?: boolean;
+    backgroundColor?: string;
+    size?: 'small' | 'medium' | 'large';
+    label: string;
+    onClick?: () => void;
+}
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/button.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "./button.css";
+const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props })=>{
+    const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: [
+            'demo-button',
+            `demo-button--${size}`,
+            mode
+        ].join(' '),
+        style: {
+            backgroundColor
+        },
+        ...props,
+        children: label
+    });
+};
+export { Button };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./components/button/button";
+export { Badge } from "./components/badge/badge";

package/dist/index.js

@@ -1,2 +1,3 @@
-import{jsx as a}from"react/jsx-runtime";import*as t from"react";var r,e="badge-styles-module_badge__0T5Ik";function n({className:t="",children:r,...n}){return a("span",{className:`${e} ${t}`.trim(),...n,children:r})}function o(){return o=Object.assign?Object.assign.bind():function(a){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)({}).hasOwnProperty.call(r,e)&&(a[e]=r[e])}return a},o.apply(null,arguments)}var h;function p(){return p=Object.assign?Object.assign.bind():function(a){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)({}).hasOwnProperty.call(r,e)&&(a[e]=r[e])}return a},p.apply(null,arguments)}const s={Bed:function(a){return t.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},a),r||(r=t.createElement("path",{d:"M20.25 6.75H3V4.5a.75.75 0 0 0-1.5 0v15a.75.75 0 1 0 1.5 0v-3h19.5v3a.75.75 0 1 0 1.5 0v-9a3.75 3.75 0 0 0-3.75-3.75M3 8.25h6.75V15H3zM11.25 15V8.25h9a2.25 2.25 0 0 1 2.25 2.25V15z"})))},Building:function(a){return t.createElement("svg",p({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},a),h||(h=t.createElement("path",{d:"M21.75 21H19.5V3h.75a.75.75 0 1 0 0-1.5H3.75a.75.75 0 0 0 0 1.5h.75v18H2.25a.75.75 0 1 0 0 1.5h19.5a.75.75 0 1 0 0-1.5M6 3h12v18h-3v-3.75a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0-.75.75V21H6zm7.5 18h-3v-3h3zM8.25 6A.75.75 0 0 1 9 5.25h1.5a.75.75 0 1 1 0 1.5H9A.75.75 0 0 1 8.25 6m4.5 0a.75.75 0 0 1 .75-.75H15a.75.75 0 1 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75m-4.5 3.75A.75.75 0 0 1 9 9h1.5a.75.75 0 1 1 0 1.5H9a.75.75 0 0 1-.75-.75m4.5 0A.75.75 0 0 1 13.5 9H15a.75.75 0 1 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75m-4.5 3.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 1 1 0 1.5H9a.75.75 0 0 1-.75-.75m4.5 0a.75.75 0 0 1 .75-.75H15a.75.75 0 1 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75"})))}};function l({name:t,size:r=24,...e}){const n=s[t];return n?a(n,{width:r,height:r,fill:"currentColor",...e}):("production"!==process.env.NODE_ENV&&console.warn(`Icon "${t}" not found.`),null)}var y={typography:"typography-styles-module_typography__h3ta9",typographyTitle:"typography-styles-module_typographyTitle__9V99m",typographyHeader:"typography-styles-module_typographyHeader__k4mIZ",typographyBody:"typography-styles-module_typographyBody__4rtGZ",typographyCaption:"typography-styles-module_typographyCaption__-ci4T"};const i=({as:t="p",variant:r="body",className:e="",children:n,...o})=>{const h=`${y.typography} ${y[`typography${r.charAt(0).toUpperCase()+r.slice(1)}`]} ${e}`.trim();return a(t,{className:h,...o,children:n})};export{n as Badge,l as Icon,i as Typography};
-//# sourceMappingURL=index.js.map
+import { Button } from "./components/button/button.js";
+import { Badge } from "./components/badge/badge.js";
+export { Badge, Button };

package/package.json

@@ -1,86 +1,61 @@
 {
   "name": "sate-lib",
-  "version": "1.1.13",
-  "author": "Tiago Sousa (tiagorsousa0@gmail.com)",
-  "license": "MIT",
+  "version": "1.1.15",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/"
+    "dist"
   ],
   "scripts": {
-    "dev": "storybook dev -p 6006",
-    "lint": "eslint ./src",
-    "prepare": "husky",
-    "build": "pnpm build:package && pnpm build:storybook",
-    "build:package": "rollup --config rollup.config.ts --configPlugin typescript",
-    "build:storybook": "storybook build"
-  },
-  "keywords": [
-    "design-system",
-    "react",
-    "vite",
-    "storybook",
-    "components",
-    "tokens",
-    "sass",
-    "ui-kit",
-    "SATE"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TiagoSousa123/sate-lib.git"
-  },
-  "dependencies": {
-    "sass": "^1.89.0"
+    "build": "rslib build",
+    "build:storybook": "storybook build",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "storybook": "storybook dev"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.8.0",
-    "@commitlint/config-conventional": "19.8.0",
-    "@eslint/js": "^9.25.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "28.0.6",
-    "@rollup/plugin-node-resolve": "16.0.1",
-    "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "12.1.3",
-    "@storybook/addon-a11y": "^9.0.11",
+    "@biomejs/biome": "^1.9.4",
+    "@rsbuild/core": "1.4.0-beta.4",
+    "@rsbuild/plugin-react": "^1.3.2",
+    "@rslib/core": "^0.10.2",
     "@storybook/addon-docs": "^9.0.11",
-    "@storybook/builder-vite": "^9.0.11",
-    "@storybook/react-vite": "^9.0.11",
-    "@svgr/rollup": "^8.1.0",
-    "@types/node": "^24.0.3",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "cssnano": "^7.0.7",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^9.0.11",
-    "globals": "^16.0.0",
-    "husky": "^9.1.7",
-    "postcss": "^8.5.6",
-    "rollup": "4.44.0",
-    "rollup-plugin-bundle-stats": "^4.20.2",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "semantic-release": "^24.2.5",
+    "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.0.11",
+    "@storybook/addon-onboarding": "^9.0.11",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/react": "^9.0.11",
+    "@storybook/test": "^9.0.0-alpha.2",
+    "@types/react": "^19.1.8",
+    "react": "^19.1.0",
     "storybook": "^9.0.11",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5",
-    "vite-plugin-dynamic-import": "^1.6.0",
-    "vite-plugin-svgr": "^4.3.0"
+    "storybook-addon-rslib": "^2.0.1",
+    "storybook-react-rsbuild": "^2.0.1",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
+  "private": false,
+  "keywords": [
+    "react",
+    "component-library",
+    "design-system",
+    "storybook",
+    "rsbuild",
+    "rslib",
+    "biome",
+    "typescript",
+    "ui-library",
+    "react-components",
+    "frontend"
+  ]
 }

package/dist/assets/styles/index.css

@@ -1 +0,0 @@
-*,:after,:before{box-sizing:border-box}*{margin:0;outline:none;padding:0}ol,ul{list-style:none}html:focus-within{scroll-behavior:smooth}a:not([class]){color:inherit;text-decoration-skip-ink:auto}canvas,img,picture,svg,video{background-repeat:no-repeat;background-size:cover;height:auto;max-width:100%;vertical-align:middle}button,input,select,textarea{background:none;border:none;color:inherit;font:inherit;outline:none}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;transition:none}}body,html{height:100%;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}button{cursor:pointer}:root{--box-shadow-1:0px 1px 0px 0px rgba(17,17,26,.1);--box-shadow-2:0px 1px 0px rgba(17,17,26,.05),0px 0px 8px rgba(17,17,26,.1);--opacity-disabled:0.38;--color-theme-core-bright:#317c6c;--color-theme-core-dark:#b80f0f;--color-system-content-primary:#0e0e0e;--color-system-content-secondary:#474747;--color-system-content-tertiary:#767676;--radius-radii-10:0.625rem;--radius-radii-16:1rem;--radius-radii-24:1.5rem;--radius-large-container:1rem;--radius-chip:0.5rem;--radius-medium-container:0.75rem;--spacing-size-4:0.25rem;--spacing-size-154:9.625rem;--spacing-size-0:0;--padding-x-small:0.5rem;--padding-small:1rem;--padding-medium:1.5rem;--padding-large:2rem;--size-x-small:1.5rem;--size-medium:2.5rem;--size-large:3rem;--size-x-large:3.5rem;--size-small:2rem;--size-2x-large:4.5rem;--size-2x-small:1rem;--spacing-column-gap-cards:0.75rem;--spacing-column-gap-chips:0.5rem;--spacing-column-margin-screen-mobile:1.5rem}.badge-styles-module_badge__0T5Ik{border-radius:.25rem;color:var(--color-system-content-secondary,#474747);padding:var(--spacing-size-4,.25rem)}.typography-styles-module_typography__h3ta9{color:#111;margin:0}.typography-styles-module_typographyTitle__9V99m{font-family:Author,Arial Black,Impact,sans-serif;font-size:4rem;font-weight:700;line-height:1.1}.typography-styles-module_typographyBody__4rtGZ,.typography-styles-module_typographyCaption__-ci4T,.typography-styles-module_typographyHeader__k4mIZ{font-family:Golos UI,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.typography-styles-module_typographyHeader__k4mIZ{font-size:2rem;font-weight:500;line-height:1.3}.typography-styles-module_typographyBody__4rtGZ{font-size:1rem;font-weight:400;line-height:1.6}.typography-styles-module_typographyCaption__-ci4T{font-size:.875rem;font-weight:400;line-height:1.4;opacity:.7}

package/dist/assets/styles/typography.scss

@@ -1,46 +0,0 @@
-@font-face {
-  font-family: "Author";
-  src: url("../fonts/author-bold.woff2") format("woff2");
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Golos UI";
-  src: url("../fonts/golos-ui-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Golos UI";
-  src: url("../fonts/golos-ui-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Golos UI";
-  src: url("../fonts/golos-ui-bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@mixin typescale-display-large {
-  font-family: var(--font-display, "Author");
-  font-size: 4rem;
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.01em;
-}
-
-@mixin typescale-body {
-  font-family: var(--font-primary, "Golos UI");
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-}