sate-lib 1.1.11 → 1.1.14

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/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/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/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/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/index.js

@@ -1,11 +1,2 @@
-import*as e from"react";import r from"react";var t,n={exports:{}},o={};var a,i,l={};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */function s(){return a||(a=1,"production"!==process.env.NODE_ENV&&function(){function e(r){if(null==r)return null;if("function"==typeof r)return r.$$typeof===O?null:r.displayName||r.name||null;if("string"==typeof r)return r;switch(r){case m:return"Fragment";case h:return"Profiler";case d:return"StrictMode";case _:return"Suspense";case k:return"SuspenseList";case S:return"Activity"}if("object"==typeof r)switch("number"==typeof r.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case f:return"Portal";case g:return(r.displayName||"Context")+".Provider";case b:return(r._context.displayName||"Context")+".Consumer";case v:var t=r.render;return(r=r.displayName)||(r=""!==(r=t.displayName||t.name||"")?"ForwardRef("+r+")":"ForwardRef"),r;case w:return null!==(t=r.displayName||null)?t:e(r.type)||"Memo";case j:t=r._payload,r=r._init;try{return e(r(t))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function o(r){if(r===m)return"<>";if("object"==typeof r&&null!==r&&r.$$typeof===j)return"<...>";try{var t=e(r);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var r=e(this.type);return $[r]||($[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(r=this.props.ref)?r:null}function s(r,t,o,a,l,s,p,f){var m,d=t.children;if(void 0!==d)if(a)if(E(d)){for(a=0;a<d.length;a++)c(d[a]);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(d);if(N.call(t,"key")){d=e(r);var h=Object.keys(t).filter((function(e){return"key"!==e}));a=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",A[d+a]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',a,d,h,d),A[d+a]=!0)}if(d=null,void 0!==o&&(n(o),d=""+o),function(e){if(N.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(t)&&(n(t.key),d=""+t.key),"key"in t)for(var b in o={},t)"key"!==b&&(o[b]=t[b]);else o=t;return d&&function(e,r){function t(){u||(u=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof r?r.displayName||r.name||"Unknown":r),function(e,r,t,n,o,a,l,s){return t=a.ref,e={$$typeof:y,type:e,key:r,props:a,_owner:o},null!==(void 0!==t?t:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(r,d,s,0,null===(m=x.A)?null:m.getOwner(),o,p,f)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var u,p=r,y=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),d=Symbol.for("react.strict_mode"),h=Symbol.for("react.profiler"),b=Symbol.for("react.consumer"),g=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),_=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),S=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),x=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,E=Array.isArray,T=console.createTask?console.createTask:function(){return null},$={},P=(p={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(p,a)(),R=T(o(a)),A={};l.Fragment=m,l.jsx=function(e,r,t,n,a){var i=1e4>x.recentlyCreatedOwnerStacks++;return s(e,r,t,!1,0,a,i?Error("react-stack-top-frame"):P,i?T(o(e)):R)},l.jsxs=function(e,r,t,n,a){var i=1e4>x.recentlyCreatedOwnerStacks++;return s(e,r,t,!0,0,a,i?Error("react-stack-top-frame"):P,i?T(o(e)):R)}}()),l}var c,u=(i||(i=1,"production"===process.env.NODE_ENV?n.exports=function(){if(t)return o;t=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(r,t,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in n={},t)"key"!==a&&(n[a]=t[a]);else n=t;return t=n.ref,{$$typeof:e,type:r,key:o,ref:void 0!==t?t:null,props:n}}return o.Fragment=r,o.jsx=n,o.jsxs=n,o}():n.exports=s()),n.exports),p="badge-styles-module_badge__0T5Ik";function y({className:e="",children:r,...t}){return u.jsx("span",{className:`${p} ${e}`.trim(),...t,children:r})}function f(){return f=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},f.apply(null,arguments)}var m;function d(){return d=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},d.apply(null,arguments)}const h={Bed:function(r){return e.createElement("svg",f({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},r),c||(c=e.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(r){return e.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},r),m||(m=e.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 b({name:e,size:r=24,...t}){const n=h[e];return n?u.jsx(n,{width:r,height:r,fill:"currentColor",...t}):("production"!==process.env.NODE_ENV&&console.warn(`Icon "${e}" not found.`),null)}var g={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 v=({as:e="p",variant:r="body",className:t="",children:n,...o})=>{const a=`${g.typography} ${g[`typography${r.charAt(0).toUpperCase()+r.slice(1)}`]} ${t}`.trim();return u.jsx(e,{className:a,...o,children:n})};export{y as Badge,b as Icon,v as Typography};
-//# sourceMappingURL=index.js.map
+import { Button } from "./Button.js";
+export { Button };

package/package.json

@@ -1,86 +1,48 @@
 {
   "name": "sate-lib",
-  "version": "1.1.11",
-  "author": "Tiago Sousa (tiagorsousa0@gmail.com)",
-  "license": "MIT",
+  "version": "1.1.14",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "css": "dist/assets/styles/index.css",
-  "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/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
 }

package/dist/assets/styles/index.css

@@ -1 +0,0 @@
-.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/reset.css

@@ -1,87 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  outline: none;
-}
-
-ul,
-ol {
-  list-style: none;
-}
-
-html:focus-within {
-  scroll-behavior: smooth;
-}
-
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-  color: inherit;
-}
-
-img,
-picture,
-svg,
-video,
-canvas {
-  max-width: 100%;
-  height: auto;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-  color: inherit;
-  border: none;
-  background: none;
-  outline: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-    transition: none;
-  }
-}
-
-body,
-html {
-  height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-button {
-  cursor: pointer;
-}

package/dist/assets/styles/tokens.css

@@ -1,41 +0,0 @@
-:root {
-  --box-shadow-1: 0px 1px 0px 0px rgba(17, 17, 26, 0.1);
-  --box-shadow-2: 0px 1px 0px rgba(17, 17, 26, 0.05),
-    0px 0px 8px rgba(17, 17, 26, 0.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;
-}