@smartyweb/ui 1.0.3 → 1.1.1

package/README.md

@@ -8,6 +8,7 @@ Shared React component library consumed by multiple Next.js microservices via pr
 - Vite (outputs ESM + CJS + types to `dist/`)
 - Storybook v10 for component development and documentation
 - Changesets for versioning and changelogs
+- Style Dictionary v4 for design token transformation
 
 ## Getting Started
 
@@ -21,12 +22,22 @@ npm install
 npm run storybook
 ```
 
+This also runs `node sd.config.js` first to generate CSS tokens from `tokens.json`.
+
 ### Build
 
 ```bash
 npm run build
 ```
 
+### Tokens only
+
+```bash
+npm run tokens
+```
+
+Regenerates `src/styles/_tokens.generated.scss` from `tokens.json` without building or starting Storybook.
+
 ## Usage
 
 Install the package in your consuming app:
@@ -44,23 +55,61 @@ import "@smartyweb/ui/styles.css";
 Then import components:
 
 ```js
-import { Button } from "@smartyweb/ui";
+import { H1, Paragraph } from "@smartyweb/ui";
+```
+
+### Font Setup
+
+This library does not bundle fonts. Consumers are responsible for loading fonts and exposing them as CSS custom properties. The library reads these three variables:
+
+| CSS variable        | Font         | Used by                           |
+| ------------------- | ------------ | --------------------------------- |
+| `--ui-font-primary` | TT Hoves Pro | All heading and button components |
+| `--ui-font-body`    | Inter        | Body and paragraph components     |
+| `--ui-font-code`    | Hack         | Code component                    |
+
+In a Next.js app using `next/font/local`, set these on the root element:
+
+```tsx
+// app/layout.tsx
+import localFont from "next/font/local";
+
+const ttHovesPro = localFont({
+  src: [...],
+  variable: "--font-tthoves",
+});
+
+export default function RootLayout({ children }) {
+  return (
+    <html className={ttHovesPro.variable}>
+      <body style={{
+        "--ui-font-primary": "var(--font-tthoves, 'TT Hoves Pro', system-ui, sans-serif)",
+      }}>
+        {children}
+      </body>
+    </html>
+  );
+}
 ```
 
+If a variable is not set, components fall back to `system-ui` (headings/body) or `monospace` (code).
+
 ## Project Structure
 
 ```
+sd.config.js                     # Style Dictionary config — tokens.json → _tokens.generated.scss
+tokens.json                      # Designer-owned, synced from Tokens Studio (Figma plugin)
 src/
-  components/
+  text/
     ComponentName/
       ComponentName.tsx          # "use client" at top
-      ComponentName.module.scss
+      ComponentName.module.scss  # uses var(--token-*) CSS custom properties
       ComponentName.stories.tsx
       index.ts                   # named export
     index.ts                     # barrel export
   styles/
-    _variables.scss
-    _mixins.scss
+    _variables.scss              # SCSS variables (fonts, weights, breakpoints, font-feature-settings)
+    _tokens.generated.scss       # Auto-generated by sd.config.js — do not edit manually
     global.scss
   index.ts                       # main entry point
 ```
@@ -69,6 +118,17 @@ src/
 
 This package uses [Changesets](https://github.com/changesets/changesets) for versioning and changelog management.
 
+### Semver policy
+
+| Change type                                                                | Bump    |
+| -------------------------------------------------------------------------- | ------- |
+| Token value changes (e.g. heading size goes from 64px → 60px)              | `patch` |
+| New CSS custom property names added (new tokens consumers could reference) | `minor` |
+| New components added                                                       | `minor` |
+| Removed components, renamed props, or changed component API                | `major` |
+
+Visual changes (token values) are always `patch` — semver communicates API stability, not pixel perfection.
+
 ### Step 1 — On your feature branch
 
 Create a changeset to describe the change and bump type:
@@ -80,7 +140,7 @@ npm run changeset
 This opens an interactive prompt:
 
 1. **Which packages changed?** — select `@smartyweb/ui`
-2. **Bump type?** — `patch` for fixes/styles, `minor` for new features, `major` for breaking changes
+2. **Bump type?** — see semver policy above
 3. **Summary?** — plain English description (goes into the changelog)
 
 Then apply the version bump immediately on the same branch:
@@ -131,6 +191,50 @@ Two secured repository variables must be configured under **Bitbucket repo → S
 
 Mark both as **Secured** so they are masked in logs.
 
+## Design Tokens
+
+Design tokens flow from Figma → code via this pipeline:
+
+1. **Designer** makes changes in Tokens Studio (Figma plugin) and syncs to the `design/tokens-update` branch
+2. **CI** (Bitbucket Pipelines) runs `npm run tokens` on push, regenerates `src/styles/_tokens.generated.scss`, and commits the diff automatically
+3. **Developer** opens a PR from `design/tokens-update` → `master`, runs `npx changeset add` on the branch, and merges after review
+4. **Build** on `master` picks up the updated tokens and publishes a new npm version
+
+### Reviewing a token PR
+
+When reviewing a `design/tokens-update` PR, check:
+
+- The `_tokens.generated.scss` diff — values should match the designer's intent in Figma
+- Spot-check affected components in Storybook (deployed on Vercel, or run `npm run storybook` locally)
+- Confirm a changeset file is present in `.changeset/` before merging
+
+A changeset must be committed to the branch before the PR is merged. The developer opening the PR is responsible for this — the pipeline cannot do it automatically because bump type and description require human input.
+
+`sd.config.js` reads only the `Responsive/Desktop`, `Responsive/Tablet`, and `Responsive/Mobile` token sets, outputting ~99 CSS custom properties like:
+
+```css
+:root {
+	--h1-desktop-font-size: 64px;
+	--h1-desktop-line-height: 64px;
+	--h1-desktop-letter-spacing: -0.02em;
+	/* ... */
+}
+```
+
+Text components consume these via `var(--{component}-{breakpoint}-{property})`. Font families, weights, and OpenType feature settings remain as SCSS variables in `_variables.scss`.
+
+Note: tablet CSS custom properties are generated but components intentionally do not use them. Components apply desktop values down to 768px, then switch to mobile. Tablet tokens are kept in `tokens.json` as source data for the planned fluid typography migration (see Roadmap).
+
+## Roadmap
+
+### Fluid typography
+
+The current breakpoint approach (desktop / mobile with a hard switch at 768px) will be replaced with fluid typography using CSS `clamp()`. The desktop and mobile token values will become the max and min of the clamp range respectively, scaling continuously across the viewport.
+
+The planned implementation: Style Dictionary computes the `clamp()` formula at build time (it has access to the raw numbers), outputting a single token per property (e.g. `--h1-font-size: clamp(44px, ..., 64px)`) instead of the current per-breakpoint triplets. Component SCSS becomes a single `font-size: var(--h1-font-size)` with no media queries.
+
+The tablet token set in `tokens.json` will be retired from the Style Dictionary transform when this ships.
+
 ## Architecture
 
 - **Component library only** — no routing, no pages, no app logic.
@@ -138,3 +242,4 @@ Mark both as **Secured** so they are masked in logs.
 - **CSS is compiled to a single file at build time.** No runtime CSS injection.
 - **React is a peerDependency**, not bundled.
 - **Stories are co-located with components.**
+- **`_tokens.generated.scss` is committed** so token changes are visible in PR diffs, but never edit it manually — always regenerate via `npm run tokens`.

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o="_hExtra_zekit_1",a={hExtra:o};function c({as:s="h1",children:t,className:n}){const r=[a.hExtra,n].filter(Boolean).join(" ");return e.jsx(s,{className:r,children:t})}const h="_h1_1w27n_1",i={h1:h};function l({children:s,className:t}){return e.jsx("h1",{className:`${i.h1}${t?` ${t}`:""}`,children:s})}exports.H1=l;exports.HExtra=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),e="_hExtra_dx1fb_1",c={hExtra:e};function l({as:a="h1",children:s,className:t}){const n=[c.hExtra,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const r="_h1_iuejz_1",i={h1:r};function u({children:a,className:s}){return o.jsx("h1",{className:`${i.h1}${s?` ${s}`:""}`,children:a})}const p="_h2_1i98w_1",m={h2:p};function _({as:a="h2",children:s,className:t}){const n=[m.h2,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const h="_h3_wip1f_1",f={h3:h};function j({as:a="h3",children:s,className:t}){const n=[f.h3,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const y="_h4_thwwf_1",d={h4:y};function N({as:a="h4",children:s,className:t}){const n=[d.h4,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const g="_h5_zem0s_1",x={h5:g};function B({as:a="h5",children:s,className:t}){const n=[x.h5,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const b="_h6_py9o3_1",L={h6:b};function $({as:a="h6",children:s,className:t}){const n=[L.h6,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const H="_paragraph_6mdxp_1",S={paragraph:H};function C({as:a="p",children:s,className:t}){const n=[S.paragraph,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const M="_bodyLarge_zgxpr_1",E={bodyLarge:M};function U({as:a="p",children:s,className:t}){const n=[E.bodyLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const z="_bodySmall_izgxi_1",w={bodySmall:z};function P({as:a="p",children:s,className:t}){const n=[w.bodySmall,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const k="_buttonLarge_1kib2_1",q={buttonLarge:k};function v({as:a="span",children:s,className:t}){const n=[q.buttonLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const O="_buttonSmall_1ga6z_1",R={buttonSmall:O};function T({as:a="span",children:s,className:t}){const n=[R.buttonSmall,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const A="_captionLarge_keyl9_1",D={captionLarge:A};function F({as:a="span",children:s,className:t}){const n=[D.captionLarge,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const G="_captionMedium_9rjdy_1",I={captionMedium:G};function J({as:a="span",children:s,className:t}){const n=[I.captionMedium,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const K="_captionUppercase_15jnh_1",Q={captionUppercase:K};function V({as:a="span",children:s,className:t}){const n=[Q.captionUppercase,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}const W="_code_1o5oi_1",X={code:W};function Y({as:a="code",children:s,className:t}){const n=[X.code,t].filter(Boolean).join(" ");return o.jsx(a,{className:n,children:s})}exports.BodyLarge=U;exports.BodySmall=P;exports.ButtonLarge=v;exports.ButtonSmall=T;exports.CaptionLarge=F;exports.CaptionMedium=J;exports.CaptionUppercase=V;exports.Code=Y;exports.H1=u;exports.H2=_;exports.H3=j;exports.H4=N;exports.H5=B;exports.H6=$;exports.HExtra=l;exports.Paragraph=C;

package/dist/index.js

@@ -1,18 +1,130 @@
-import { jsx as n } from "react/jsx-runtime";
-const a = "_hExtra_zekit_1", e = {
-  hExtra: a
+import { jsx as t } from "react/jsx-runtime";
+const e = "_hExtra_dx1fb_1", c = {
+  hExtra: e
 };
-function i({ as: s = "h1", children: t, className: o }) {
-  const r = [e.hExtra, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n(s, { className: r, children: t });
+function A({ as: a = "h1", children: s, className: n }) {
+  const o = [c.hExtra, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
 }
-const h = "_h1_1w27n_1", c = {
-  h1: h
+const l = "_h1_iuejz_1", r = {
+  h1: l
 };
-function l({ children: s, className: t }) {
-  return /* @__PURE__ */ n("h1", { className: `${c.h1}${t ? ` ${t}` : ""}`, children: s });
+function D({ children: a, className: s }) {
+  return /* @__PURE__ */ t("h1", { className: `${r.h1}${s ? ` ${s}` : ""}`, children: a });
+}
+const i = "_h2_1i98w_1", m = {
+  h2: i
+};
+function F({ as: a = "h2", children: s, className: n }) {
+  const o = [m.h2, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const p = "_h3_wip1f_1", u = {
+  h3: p
+};
+function G({ as: a = "h3", children: s, className: n }) {
+  const o = [u.h3, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const _ = "_h4_thwwf_1", h = {
+  h4: _
+};
+function I({ as: a = "h4", children: s, className: n }) {
+  const o = [h.h4, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const f = "_h5_zem0s_1", N = {
+  h5: f
+};
+function J({ as: a = "h5", children: s, className: n }) {
+  const o = [N.h5, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const y = "_h6_py9o3_1", d = {
+  h6: y
+};
+function K({ as: a = "h6", children: s, className: n }) {
+  const o = [d.h6, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const g = "_paragraph_6mdxp_1", b = {
+  paragraph: g
+};
+function O({ as: a = "p", children: s, className: n }) {
+  const o = [b.paragraph, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const j = "_bodyLarge_zgxpr_1", B = {
+  bodyLarge: j
+};
+function Q({ as: a = "p", children: s, className: n }) {
+  const o = [B.bodyLarge, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const $ = "_bodySmall_izgxi_1", L = {
+  bodySmall: $
+};
+function R({ as: a = "p", children: s, className: n }) {
+  const o = [L.bodySmall, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const x = "_buttonLarge_1kib2_1", S = {
+  buttonLarge: x
+};
+function T({ as: a = "span", children: s, className: n }) {
+  const o = [S.buttonLarge, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const H = "_buttonSmall_1ga6z_1", z = {
+  buttonSmall: H
+};
+function V({ as: a = "span", children: s, className: n }) {
+  const o = [z.buttonSmall, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const E = "_captionLarge_keyl9_1", M = {
+  captionLarge: E
+};
+function W({ as: a = "span", children: s, className: n }) {
+  const o = [M.captionLarge, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const U = "_captionMedium_9rjdy_1", w = {
+  captionMedium: U
+};
+function X({ as: a = "span", children: s, className: n }) {
+  const o = [w.captionMedium, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const C = "_captionUppercase_15jnh_1", k = {
+  captionUppercase: C
+};
+function Y({ as: a = "span", children: s, className: n }) {
+  const o = [k.captionUppercase, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
+}
+const P = "_code_1o5oi_1", q = {
+  code: P
+};
+function Z({ as: a = "code", children: s, className: n }) {
+  const o = [q.code, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t(a, { className: o, children: s });
 }
 export {
-  l as H1,
-  i as HExtra
+  Q as BodyLarge,
+  R as BodySmall,
+  T as ButtonLarge,
+  V as ButtonSmall,
+  W as CaptionLarge,
+  X as CaptionMedium,
+  Y as CaptionUppercase,
+  Z as Code,
+  D as H1,
+  F as H2,
+  G as H3,
+  I as H4,
+  J as H5,
+  K as H6,
+  A as HExtra,
+  O as Paragraph
 };

package/dist/text/BodyLarge/BodyLarge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface BodyLargeProps {
+    as?: "p" | "div" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function BodyLarge({ as: Tag, children, className }: BodyLargeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/BodyLarge/index.d.ts

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

package/dist/text/BodySmall/BodySmall.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface BodySmallProps {
+    as?: "p" | "div" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function BodySmall({ as: Tag, children, className }: BodySmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/BodySmall/index.d.ts

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

package/dist/text/ButtonLarge/ButtonLarge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ButtonLargeProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ButtonLarge({ as: Tag, children, className }: ButtonLargeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/ButtonLarge/index.d.ts

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

package/dist/text/ButtonSmall/ButtonSmall.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ButtonSmallProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function ButtonSmall({ as: Tag, children, className }: ButtonSmallProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/ButtonSmall/index.d.ts

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

package/dist/text/CaptionLarge/CaptionLarge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CaptionLargeProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CaptionLarge({ as: Tag, children, className }: CaptionLargeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/CaptionLarge/index.d.ts

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

package/dist/text/CaptionMedium/CaptionMedium.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CaptionMediumProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CaptionMedium({ as: Tag, children, className }: CaptionMediumProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/CaptionMedium/index.d.ts

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

package/dist/text/CaptionUppercase/CaptionUppercase.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CaptionUppercaseProps {
+    as?: "span" | "p" | "div";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CaptionUppercase({ as: Tag, children, className }: CaptionUppercaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/CaptionUppercase/index.d.ts

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

package/dist/text/Code/Code.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface CodeProps {
+    as?: "code" | "pre";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Code({ as: Tag, children, className }: CodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/Code/index.d.ts

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

package/dist/text/H2/H2.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H2Props {
+    as?: "h1" | "h2" | "h3" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H2({ as: Tag, children, className }: H2Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H2/index.d.ts

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

package/dist/text/H3/H3.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H3Props {
+    as?: "h2" | "h3" | "h4" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H3({ as: Tag, children, className }: H3Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H3/index.d.ts

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

package/dist/text/H4/H4.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H4Props {
+    as?: "h3" | "h4" | "h5" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H4({ as: Tag, children, className }: H4Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H4/index.d.ts

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

package/dist/text/H5/H5.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H5Props {
+    as?: "h4" | "h5" | "h6" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H5({ as: Tag, children, className }: H5Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H5/index.d.ts

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

package/dist/text/H6/H6.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface H6Props {
+    as?: "h5" | "h6" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function H6({ as: Tag, children, className }: H6Props): import("react/jsx-runtime").JSX.Element;

package/dist/text/H6/index.d.ts

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

package/dist/text/Paragraph/Paragraph.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface ParagraphProps {
+    as?: "p" | "div" | "span";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Paragraph({ as: Tag, children, className }: ParagraphProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/Paragraph/index.d.ts

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

package/dist/text/index.d.ts

@@ -1,2 +1,16 @@
 export * from './HExtra';
 export * from './H1';
+export * from './H2';
+export * from './H3';
+export * from './H4';
+export * from './H5';
+export * from './H6';
+export * from './Paragraph';
+export * from './BodyLarge';
+export * from './BodySmall';
+export * from './ButtonLarge';
+export * from './ButtonSmall';
+export * from './CaptionLarge';
+export * from './CaptionMedium';
+export * from './CaptionUppercase';
+export * from './Code';

package/dist/ui.css

@@ -1 +1 @@
-._hExtra_zekit_1{font-family:var(--ui-font-primary);font-weight:600;font-size:96px;line-height:106px;letter-spacing:-.03em;font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._hExtra_zekit_1{font-size:56px;line-height:62px;letter-spacing:-.02em}}._h1_1w27n_1{font-family:var(--ui-font-primary);font-weight:500;font-size:64px;line-height:64px;letter-spacing:-.02em;font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._h1_1w27n_1{font-size:44px;line-height:44px;letter-spacing:-.01em}}
+:root{--h-extra-desktop-font-size: 6rem;--h-extra-desktop-line-height: 6.625rem;--h-extra-desktop-letter-spacing: -.03em;--h1-desktop-font-size: 4rem;--h1-desktop-line-height: 4rem;--h1-desktop-letter-spacing: -.02em;--h2-desktop-font-size: 3.25rem;--h2-desktop-line-height: 3.5625rem;--h2-desktop-letter-spacing: -.02em;--h3-desktop-font-size: 2.75rem;--h3-desktop-line-height: 3rem;--h3-desktop-letter-spacing: -.02em;--h4-desktop-font-size: 2.25rem;--h4-desktop-line-height: 2.6875rem;--h4-desktop-letter-spacing: -.02em;--h5-desktop-font-size: 1.875rem;--h5-desktop-line-height: 2.0625rem;--h5-desktop-letter-spacing: -.01em;--h6-desktop-font-size: 1.75rem;--h6-desktop-line-height: 1.9375rem;--h6-desktop-letter-spacing: -.01em;--paragraph-desktop-font-size: 1.5rem;--paragraph-desktop-line-height: 2.25rem;--paragraph-desktop-letter-spacing: -.01em;--button-large-desktop-font-size: 1.25rem;--button-large-desktop-line-height: 1.5rem;--button-large-desktop-letter-spacing: -.02em;--body-large-desktop-font-size: 1.25rem;--body-large-desktop-line-height: 1.875rem;--body-large-desktop-letter-spacing: -.02em;--button-small-desktop-font-size: 1.0625rem;--button-small-desktop-line-height: 1.5rem;--button-small-desktop-letter-spacing: -.02em;--body-small-desktop-font-size: 1rem;--body-small-desktop-line-height: 1.5rem;--body-small-desktop-letter-spacing: -.02em;--caption-large-desktop-font-size: 1rem;--caption-large-desktop-line-height: 1.5rem;--caption-large-desktop-letter-spacing: -.02em;--caption-medium-desktop-font-size: .75rem;--caption-medium-desktop-line-height: 1.125rem;--caption-medium-desktop-letter-spacing: -.02em;--caption-uppercase-desktop-font-size: .8125rem;--caption-uppercase-desktop-line-height: 1rem;--caption-uppercase-desktop-letter-spacing: .04em;--code-desktop-font-size: .875rem;--code-desktop-line-height: 1.0625rem;--code-desktop-letter-spacing: 0;--h-extra-tablet-font-size: 6rem;--h-extra-tablet-line-height: 6.625rem;--h-extra-tablet-letter-spacing: -.03em;--h1-tablet-font-size: 4rem;--h1-tablet-line-height: 4rem;--h1-tablet-letter-spacing: -.02em;--h2-tablet-font-size: 3rem;--h2-tablet-line-height: 3.3125rem;--h2-tablet-letter-spacing: -.02em;--h3-tablet-font-size: 2.5rem;--h3-tablet-line-height: 2.75rem;--h3-tablet-letter-spacing: -.02em;--h4-tablet-font-size: 2.25rem;--h4-tablet-line-height: 2.6875rem;--h4-tablet-letter-spacing: -.02em;--h5-tablet-font-size: 2rem;--h5-tablet-line-height: 2.1875rem;--h5-tablet-letter-spacing: -.01em;--h6-tablet-font-size: 1.5rem;--h6-tablet-line-height: 1.625rem;--h6-tablet-letter-spacing: -.01em;--paragraph-tablet-font-size: 1.375rem;--paragraph-tablet-line-height: 2.0625rem;--paragraph-tablet-letter-spacing: -.01em;--button-large-tablet-font-size: 1.125rem;--button-large-tablet-line-height: 1.5rem;--button-large-tablet-letter-spacing: -.02em;--body-large-tablet-font-size: 1.125rem;--body-large-tablet-line-height: 1.6875rem;--body-large-tablet-letter-spacing: -.02em;--button-small-tablet-font-size: 1rem;--button-small-tablet-line-height: 1.5rem;--button-small-tablet-letter-spacing: -.02em;--body-small-tablet-font-size: 1rem;--body-small-tablet-line-height: 1.5rem;--body-small-tablet-letter-spacing: -.02em;--caption-large-tablet-font-size: 1rem;--caption-large-tablet-line-height: 1.5rem;--caption-large-tablet-letter-spacing: -.02em;--caption-medium-tablet-font-size: .75rem;--caption-medium-tablet-line-height: 1.125rem;--caption-medium-tablet-letter-spacing: -.02em;--caption-uppercase-tablet-font-size: .8125rem;--caption-uppercase-tablet-line-height: 1rem;--caption-uppercase-tablet-letter-spacing: .04em;--code-tablet-font-size: .875rem;--code-tablet-line-height: 1.0625rem;--code-tablet-letter-spacing: 0;--h-extra-mobile-font-size: 3.5rem;--h-extra-mobile-line-height: 3.875rem;--h-extra-mobile-letter-spacing: -.02em;--h1-mobile-font-size: 2.75rem;--h1-mobile-line-height: 2.75rem;--h1-mobile-letter-spacing: -.01em;--h2-mobile-font-size: 2.5rem;--h2-mobile-line-height: 2.75rem;--h2-mobile-letter-spacing: -.01em;--h3-mobile-font-size: 2.25rem;--h3-mobile-line-height: 2.5rem;--h3-mobile-letter-spacing: -.01em;--h4-mobile-font-size: 2rem;--h4-mobile-line-height: 2.625rem;--h4-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 1.375rem;--h5-mobile-line-height: 1.5rem;--h5-mobile-letter-spacing: -.01em;--h6-mobile-font-size: 1.25rem;--h6-mobile-line-height: 1.375rem;--h6-mobile-letter-spacing: -.01em;--paragraph-mobile-font-size: 1.125rem;--paragraph-mobile-line-height: 1.6875rem;--paragraph-mobile-letter-spacing: -.01em;--button-large-mobile-font-size: 1rem;--button-large-mobile-line-height: 1.5rem;--button-large-mobile-letter-spacing: -.01em;--body-large-mobile-font-size: 1rem;--body-large-mobile-line-height: 1.5rem;--body-large-mobile-letter-spacing: -.01em;--button-small-mobile-font-size: .875rem;--button-small-mobile-line-height: 1.5rem;--button-small-mobile-letter-spacing: -.01em;--body-small-mobile-font-size: .875rem;--body-small-mobile-line-height: 1.3125rem;--body-small-mobile-letter-spacing: -.01em;--caption-large-mobile-font-size: 1rem;--caption-large-mobile-line-height: 1.5rem;--caption-large-mobile-letter-spacing: -.02em;--caption-medium-mobile-font-size: .75rem;--caption-medium-mobile-line-height: 1.125rem;--caption-medium-mobile-letter-spacing: -.02em;--caption-uppercase-mobile-font-size: .8125rem;--caption-uppercase-mobile-line-height: 1rem;--caption-uppercase-mobile-letter-spacing: .04em;--code-mobile-font-size: .75rem;--code-mobile-line-height: 1.0625rem;--code-mobile-letter-spacing: 0}._hExtra_dx1fb_1{font-family:var(--ui-font-primary);font-weight:600;font-size:var(--h-extra-desktop-font-size);line-height:var(--h-extra-desktop-line-height);letter-spacing:var(--h-extra-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._hExtra_dx1fb_1{font-size:var(--h-extra-mobile-font-size);line-height:var(--h-extra-mobile-line-height);letter-spacing:var(--h-extra-mobile-letter-spacing)}}._h1_iuejz_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h1-desktop-font-size);line-height:var(--h1-desktop-line-height);letter-spacing:var(--h1-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h1_iuejz_1{font-size:var(--h1-mobile-font-size);line-height:var(--h1-mobile-line-height);letter-spacing:var(--h1-mobile-letter-spacing)}}._h2_1i98w_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h2-desktop-font-size);line-height:var(--h2-desktop-line-height);letter-spacing:var(--h2-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h2_1i98w_1{font-size:var(--h2-tablet-font-size);line-height:var(--h2-tablet-line-height)}}@media(max-width:767px){._h2_1i98w_1{font-size:var(--h2-mobile-font-size);line-height:var(--h2-mobile-line-height);letter-spacing:var(--h2-mobile-letter-spacing)}}._h3_wip1f_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h3-desktop-font-size);line-height:var(--h3-desktop-line-height);letter-spacing:var(--h3-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h3_wip1f_1{font-size:var(--h3-tablet-font-size);line-height:var(--h3-tablet-line-height)}}@media(max-width:767px){._h3_wip1f_1{font-size:var(--h3-mobile-font-size);line-height:var(--h3-mobile-line-height);letter-spacing:var(--h3-mobile-letter-spacing)}}._h4_thwwf_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h4-desktop-font-size);line-height:var(--h4-desktop-line-height);letter-spacing:var(--h4-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:767px){._h4_thwwf_1{font-size:var(--h4-mobile-font-size);line-height:var(--h4-mobile-line-height);letter-spacing:var(--h4-mobile-letter-spacing)}}._h5_zem0s_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h5-desktop-font-size);line-height:var(--h5-desktop-line-height);letter-spacing:var(--h5-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h5_zem0s_1{font-size:var(--h5-tablet-font-size);line-height:var(--h5-tablet-line-height)}}@media(max-width:767px){._h5_zem0s_1{font-size:var(--h5-mobile-font-size);line-height:var(--h5-mobile-line-height)}}._h6_py9o3_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--h6-desktop-font-size);line-height:var(--h6-desktop-line-height);letter-spacing:var(--h6-desktop-letter-spacing);font-feature-settings:"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._h6_py9o3_1{font-size:var(--h6-tablet-font-size);line-height:var(--h6-tablet-line-height)}}@media(max-width:767px){._h6_py9o3_1{font-size:var(--h6-mobile-font-size);line-height:var(--h6-mobile-line-height)}}._paragraph_6mdxp_1{font-family:var(--ui-font-primary);font-weight:500;font-size:var(--paragraph-desktop-font-size);line-height:var(--paragraph-desktop-line-height);letter-spacing:var(--paragraph-desktop-letter-spacing);font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}@media(max-width:1439px){._paragraph_6mdxp_1{font-size:var(--paragraph-tablet-font-size);line-height:var(--paragraph-tablet-line-height)}}@media(max-width:767px){._paragraph_6mdxp_1{font-size:var(--paragraph-mobile-font-size);line-height:var(--paragraph-mobile-line-height)}}._bodyLarge_zgxpr_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-large-desktop-font-size);line-height:var(--body-large-desktop-line-height);letter-spacing:var(--body-large-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:1439px){._bodyLarge_zgxpr_1{font-size:var(--body-large-tablet-font-size);line-height:var(--body-large-tablet-line-height)}}@media(max-width:767px){._bodyLarge_zgxpr_1{font-size:var(--body-large-mobile-font-size);line-height:var(--body-large-mobile-line-height);letter-spacing:var(--body-large-mobile-letter-spacing)}}._bodySmall_izgxi_1{font-family:var(--ui-font-primary);font-weight:400;font-size:var(--body-small-desktop-font-size);line-height:var(--body-small-desktop-line-height);letter-spacing:var(--body-small-desktop-letter-spacing);font-feature-settings:"dlig" 1;margin:0}@media(max-width:767px){._bodySmall_izgxi_1{font-size:var(--body-small-mobile-font-size);line-height:var(--body-small-mobile-line-height);letter-spacing:var(--body-small-mobile-letter-spacing)}}._buttonLarge_1kib2_1{font-family:var(--ui-font-body);font-weight:500;font-size:var(--button-large-desktop-font-size);line-height:var(--button-large-desktop-line-height);letter-spacing:var(--button-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonLarge_1kib2_1{font-size:var(--button-large-tablet-font-size)}}@media(max-width:767px){._buttonLarge_1kib2_1{font-family:var(--ui-font-primary);font-size:var(--button-large-mobile-font-size);letter-spacing:var(--button-large-mobile-letter-spacing)}}._buttonSmall_1ga6z_1{font-family:var(--ui-font-body);font-weight:500;font-size:var(--button-small-desktop-font-size);line-height:var(--button-small-desktop-line-height);letter-spacing:var(--button-small-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:1439px){._buttonSmall_1ga6z_1{font-size:var(--button-small-tablet-font-size)}}@media(max-width:767px){._buttonSmall_1ga6z_1{font-family:var(--ui-font-primary);font-size:var(--button-small-mobile-font-size);letter-spacing:var(--button-small-mobile-letter-spacing)}}._captionLarge_keyl9_1{font-family:var(--ui-font-body);font-weight:500;font-size:var(--caption-large-desktop-font-size);line-height:var(--caption-large-desktop-line-height);letter-spacing:var(--caption-large-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionLarge_keyl9_1{font-family:var(--ui-font-primary)}}._captionMedium_9rjdy_1{font-family:var(--ui-font-body);font-weight:400;font-size:var(--caption-medium-desktop-font-size);line-height:var(--caption-medium-desktop-line-height);letter-spacing:var(--caption-medium-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._captionMedium_9rjdy_1{font-family:var(--ui-font-primary)}}._captionUppercase_15jnh_1{font-family:var(--ui-font-body);font-weight:400;font-size:var(--caption-uppercase-desktop-font-size);line-height:var(--caption-uppercase-desktop-line-height);letter-spacing:var(--caption-uppercase-desktop-letter-spacing);font-feature-settings:"dlig" 1;text-transform:uppercase}@media(max-width:767px){._captionUppercase_15jnh_1{font-family:var(--ui-font-primary)}}._code_1o5oi_1{font-family:var(--ui-font-code);font-weight:400;font-size:var(--code-desktop-font-size);line-height:var(--code-desktop-line-height);letter-spacing:var(--code-desktop-letter-spacing);font-feature-settings:"dlig" 1}@media(max-width:767px){._code_1o5oi_1{font-size:var(--code-mobile-font-size)}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartyweb/ui",
-	"version": "1.0.3",
+	"version": "1.1.1",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
@@ -17,12 +17,14 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "vite build",
+		"tokens": "node sd.config.js",
+		"build": "node sd.config.js && vite build",
 		"typecheck": "tsc --noEmit",
 		"changeset": "changeset",
 		"release": "changeset publish",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
+		"storybook": "node sd.config.js && storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"lint": "eslint src --max-warnings 0 && stylelint 'src/**/*.scss'"
 	},
 	"peerDependencies": {
 		"react": "^19.0.0",
@@ -30,16 +32,22 @@
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.29.8",
-		"@storybook/react-vite": "^10.2.8",
+		"@eslint/js": "^10.0.0",
+		"@storybook/react-vite": "^10.2.15",
 		"@types/react": "^19.2.13",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.3",
+		"eslint": "^10.0.0",
 		"prettier": "^3.8.1",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"sass": "^1.97.3",
-		"storybook": "^10.2.8",
+		"storybook": "^10.2.15",
+		"style-dictionary": "^4.4.0",
+		"stylelint": "^17.5.0",
+		"stylelint-config-standard-scss": "^17.0.0",
 		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.57.0",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4"
 	}