sate-lib 1.1.26 → 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/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/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 +1 @@
-import{Button as o}from"./components/button/button.js";import{Badge as t}from"./components/badge/badge.js";export{t as Badge,o as 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.26",
+  "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,7 +29,8 @@
     "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",
@@ -43,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",
@@ -67,5 +70,8 @@
     "ui-library",
     "react-components",
     "frontend"
-  ]
+  ],
+  "dependencies": {
+    "subset-font": "^2.4.0"
+  }
 }