sate-lib 1.1.25 → 1.1.27

package/README.md

@@ -3,7 +3,8 @@
 A lightweight and modular React component library designed for modern web interfaces.  
 **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.
 
-[Demo](https://sate-lib.vercel.app/?path=/docs/components-badge--docs)
+[Demo](https://sate-lib.vercel.app/)
+[NPM](https://www.npmjs.com/package/sate-lib)
 
 ## Tech Stack
 
@@ -11,6 +12,7 @@ A lightweight and modular React component library designed for modern web interf
 - [React](https://react.dev/)
 - [Typescript](https://www.typescriptlang.org/)
 - [Storybook](https://storybook.js.org/)
+- [CSS Modules](https://github.com/css-modules/css-modules)
 - [Biome](https://biomejs.dev/)
 
 ## Installation
@@ -30,6 +32,24 @@ function App() {
 }
 ```
 
+## Tree shakable
+
+```bash
+import { Badge } from "sate-lib/Badge";
+
+function App() {
+  return <Badge>New</Badge>;
+}
+```
+
+## Optional CSS imports
+
+```bash
+import from "sate-lib/reset.css";
+import from "sate-lib/tokens.css";
+import from "sate-lib/typography.css";
+```
+
 ## Commit etiquette
 
 - [Commit Etiquette](https://www.conventionalcommits.org/en/v1.0.0/)

package/lib/assets/fonts/author-bold.js

@@ -0,0 +1 @@
+import o from"../../assets/fonts/author-bold.woff2";export{o as default};

package/lib/assets/fonts/golos-ui-bold.js

@@ -0,0 +1 @@
+import o from"../../assets/fonts/golos-ui-bold.woff2";export{o as default};

package/lib/assets/fonts/golos-ui-medium.js

@@ -0,0 +1 @@
+import o from"../../assets/fonts/golos-ui-medium.woff2";export{o as default};

package/lib/assets/fonts/golos-ui-regular.js

@@ -0,0 +1 @@
+import o from"../../assets/fonts/golos-ui-regular.woff2";export{o as default};

package/lib/assets/styles/reset.css

@@ -1,70 +1 @@
-*, :before, :after {
-  box-sizing: border-box;
-}
-
-* {
-  outline: none;
-  margin: 0;
-  padding: 0;
-}
-
-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 {
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-size: cover;
-  max-width: 100%;
-  height: auto;
-}
-
-input, button, textarea, select {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: none;
-  outline: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
-
-  *, :before, :after {
-    transition: none;
-    scroll-behavior: auto !important;
-    transition-duration: .01ms !important;
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}
-
-body, html {
-  scroll-behavior: smooth;
-  height: 100%;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-}
-
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-}
-
-button {
-  cursor: pointer;
-}
-
+*,:before,:after{box-sizing:border-box}*{outline:none;margin:0;padding:0}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{vertical-align:middle;background-repeat:no-repeat;background-size:cover;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit;background:0 0;border:none;outline:none}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:before,:after{transition:none;scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body,html{scroll-behavior:smooth;height:100%}body{-webkit-font-smoothing:antialiased}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}button{cursor:pointer}

package/lib/assets/styles/tokens.css

@@ -1,34 +1 @@
-:root {
-  --box-shadow-1: 0px 1px 0px 0px #11111a1a;
-  --box-shadow-2: 0px 1px 0px #11111a0d, 0px 0px 8px #11111a1a;
-  --opacity-disabled: .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: .625rem;
-  --radius-radii-16: 1rem;
-  --radius-radii-24: 1.5rem;
-  --radius-large-container: 1rem;
-  --radius-chip: .5rem;
-  --radius-medium-container: .75rem;
-  --spacing-size-4: .25rem;
-  --spacing-size-154: 9.625rem;
-  --spacing-size-0: 0;
-  --padding-x-small: .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: .75rem;
-  --spacing-column-gap-chips: .5rem;
-  --spacing-column-margin-screen-mobile: 1.5rem;
-}
-
+:root{--box-shadow-1:0px 1px 0px 0px #11111a1a;--box-shadow-2:0px 1px 0px #11111a0d,0px 0px 8px #11111a1a;--opacity-disabled:.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:.625rem;--radius-radii-16:1rem;--radius-radii-24:1.5rem;--radius-large-container:1rem;--radius-chip:.5rem;--radius-medium-container:.75rem;--spacing-size-4:.25rem;--spacing-size-154:9.625rem;--spacing-size-0:0;--padding-x-small:.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:.75rem;--spacing-column-gap-chips:.5rem;--spacing-column-margin-screen-mobile:1.5rem}

package/lib/assets/styles/typography.css

@@ -0,0 +1 @@
+@font-face{font-family:Author;src:url(../../assets/fonts/author-bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Golos UI;src:url(../../assets/fonts/golos-ui-regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Golos UI;src:url(../../assets/fonts/golos-ui-medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Golos UI;src:url(../../assets/fonts/golos-ui-bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}

package/lib/components/badge/badge.js

@@ -1,10 +1 @@
-import { jsx } from "react/jsx-runtime";
-import badge_styles_module from "./badge.styles.module.js";
-function Badge({ className = "", children, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: `${badge_styles_module.badge} ${className}`.trim(),
-        ...props,
-        children: children
-    });
-}
-export { Badge };
+import{jsx as e}from"react/jsx-runtime";import r from"./badge.styles.module.js";function t({className:t="",children:m,...a}){return e("span",{className:`${r.badge} ${t}`.trim(),...a,children:m})}export{t as Badge};

package/lib/components/badge/badge.styles.module.js

@@ -1,5 +1 @@
-import "./badge.styles_module.css";
-const badge_styles_module = {
-    badge: "badge-AenA5o"
-};
-export { badge_styles_module as default };
+import"./badge.styles_module.css";let e={badge:"badge-AenA5o"};export{e as default};

package/lib/components/badge/badge.styles_module.css

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

package/lib/components/button/button.js

@@ -1,19 +1 @@
-import { jsx } from "react/jsx-runtime";
-import button_styles_module from "./button.styles.module.js";
-function Button({ primary = false, size = "medium", backgroundColor, label, ...props }) {
-    const mode = primary ? button_styles_module.primary : button_styles_module.secondary;
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: [
-            button_styles_module.button,
-            button_styles_module[size],
-            mode
-        ].join(" "),
-        style: {
-            backgroundColor
-        },
-        ...props,
-        children: label
-    });
-}
-export { Button };
+import{jsx as t}from"react/jsx-runtime";import o from"./button.styles.module.js";function e({primary:e=!1,size:r="medium",backgroundColor:n,label:m,...u}){let i=e?o.primary:o.secondary;return t("button",{type:"button",className:[o.button,o[r],i].join(" "),style:{backgroundColor:n},...u,children:m})}export{e as Button};

package/lib/components/button/button.styles.module.js

@@ -1,10 +1 @@
-import "./button.styles_module.css";
-const button_styles_module = {
-    button: "button-dWV52U",
-    primary: "primary-bbJ4Nd",
-    secondary: "secondary-W91doR",
-    small: "small-uxUptY",
-    medium: "medium-iwhjuP",
-    large: "large-N1qL9e"
-};
-export { button_styles_module as default };
+import"./button.styles_module.css";let t={button:"button-dWV52U",primary:"primary-bbJ4Nd",secondary:"secondary-W91doR",small:"small-uxUptY",medium:"medium-iwhjuP",large:"large-N1qL9e"};export{t as default};

package/lib/components/button/button.styles_module.css

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

package/lib/components/typography/typography.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export type Variant = "title" | "header" | "body" | "caption";
+export interface TypographyProps extends HTMLAttributes<HTMLParagraphElement> {
+    as?: "p" | "span" | "h1" | "h2" | "h3" | "h4";
+    variant?: Variant;
+}
+export declare const Typography: ({ as: Tag, variant, className, children, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/typography/typography.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import p from"./typography.styles.module.js";let t=({as:t="p",variant:o="body",className:e="",children:a,...y})=>r(t,{className:`${p.typography} ${p[`typography${o.charAt(0).toUpperCase()+o.slice(1)}`]} ${e}`.trim(),...y,children:a});export{t as Typography};

package/lib/components/typography/typography.styles.module.js

@@ -0,0 +1 @@
+import"./typography.styles_module.css";let p={typography:"typography-B71hFi",typographyTitle:"typographyTitle-m8elLJ",typographyHeader:"typographyHeader-Mzvci0",typographyBody:"typographyBody-pzAoJJ",typographyCaption:"typographyCaption-DUKd5u"};export{p as default};

package/lib/components/typography/typography.styles_module.css

@@ -0,0 +1 @@
+.typography-B71hFi{color:#111;margin:0}.typographyTitle-m8elLJ{font-family:Author,Arial Black,Impact,sans-serif;font-size:4rem;font-weight:700;line-height:1.1}.typographyHeader-Mzvci0,.typographyBody-pzAoJJ,.typographyCaption-DUKd5u{font-family:Golos UI,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.typographyHeader-Mzvci0{font-size:2rem;font-weight:500;line-height:1.3}.typographyBody-pzAoJJ{font-size:1rem;font-weight:400;line-height:1.6}.typographyCaption-DUKd5u{opacity:.7;font-size:.875rem;font-weight:400;line-height:1.4}

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,3 +1 @@
-import { Button } from "./components/button/button.js";
-import { Badge } from "./components/badge/badge.js";
-export { Badge, Button };
+import{Button as o}from"./components/button/button.js";import{Badge as t}from"./components/badge/badge.js";import{Typography as p}from"./components/typography/typography.js";export{t as Badge,o as Button,p as Typography};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sate-lib",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "type": "module",
   "exports": {
     ".": {
@@ -16,7 +16,8 @@
       "types": "./lib/components/badge/badge.d.ts"
     },
     "./tokens.css": "./lib/assets/styles/tokens.css",
-    "./reset.css": "./lib/assets/styles/reset.css"
+    "./reset.css": "./lib/assets/styles/reset.css",
+    "./typography.css": "./lib/assets/styles/typography.css"
   },
   "types": "./lib/index.d.ts",
   "files": [
@@ -28,12 +29,12 @@
     "check": "biome check --write",
     "dev": "rslib build --watch",
     "format": "biome format --write",
-    "storybook": "storybook dev"
+    "storybook": "storybook dev",
+    "subset": "node ./subset-fonts.js"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@rsbuild/core": "1.4.0-beta.4",
-    "@rsbuild/plugin-css-minimizer": "^1.0.2",
     "@rsbuild/plugin-react": "^1.3.2",
     "@rslib/core": "^0.10.2",
     "@storybook/addon-docs": "^9.0.11",
@@ -44,6 +45,7 @@
     "@storybook/blocks": "^9.0.0-alpha.17",
     "@storybook/react": "^9.0.11",
     "@storybook/test": "^9.0.0-alpha.2",
+    "@types/node": "^24.0.4",
     "@types/react": "^19.1.8",
     "react": "^19.1.0",
     "storybook": "^9.0.11",
@@ -68,5 +70,8 @@
     "ui-library",
     "react-components",
     "frontend"
-  ]
+  ],
+  "dependencies": {
+    "subset-font": "^2.4.0"
+  }
 }