@tempoxyz/ds 0.2.6 → 0.3.0

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "license": "MIT",
   "files": [
     "DESIGN.md",
     "LICENSE-MIT",
     "dist",
     "src",
+    "!src/**/*.figma.ts",
+    "!src/**/figma.config.ts",
     "!src/**/*.zyzz.json",
     "!src/**/*.test.*",
     "!src/**/*.test-d.*",
@@ -19,6 +21,8 @@
     "@oxlint/plugins": "1.79.0",
     "cuer": "0.0.3",
     "midcut": "0.2.0",
+    "react-is": "19.2.3",
+    "recharts": "3.10.1",
     "torph": "0.1.3"
   },
   "exports": {
@@ -27,10 +31,6 @@
       "types": "./dist/web/index.d.ts",
       "default": "./dist/web/index.js"
     },
-    "./fonts/GeistMono-Variable.woff2": {
-      "src": "./src/fonts/GeistMono-Variable.woff2",
-      "default": "./dist/fonts/GeistMono-Variable.woff2"
-    },
     "./fonts/Inter-cyrillic-ext.woff2": {
       "src": "./src/fonts/Inter-cyrillic-ext.woff2",
       "default": "./dist/fonts/Inter-cyrillic-ext.woff2"
@@ -67,6 +67,150 @@
       "src": "./src/fonts/Inter-vietnamese.woff2",
       "default": "./dist/fonts/Inter-vietnamese.woff2"
     },
+    "./fonts/JetBrainsMono-Bold-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Bold-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Bold-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-Bold-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Bold-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Bold-other.woff2"
+    },
+    "./fonts/JetBrainsMono-Bold.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Bold.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Bold.woff2"
+    },
+    "./fonts/JetBrainsMono-Medium-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Medium-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Medium-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-Medium-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Medium-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Medium-other.woff2"
+    },
+    "./fonts/JetBrainsMono-Medium.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Medium.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Medium.woff2"
+    },
+    "./fonts/JetBrainsMono-Regular-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Regular-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Regular-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-Regular-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Regular-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Regular-other.woff2"
+    },
+    "./fonts/JetBrainsMono-Regular.woff2": {
+      "src": "./src/fonts/JetBrainsMono-Regular.woff2",
+      "default": "./dist/fonts/JetBrainsMono-Regular.woff2"
+    },
+    "./fonts/JetBrainsMono-SemiBold-latin.woff2": {
+      "src": "./src/fonts/JetBrainsMono-SemiBold-latin.woff2",
+      "default": "./dist/fonts/JetBrainsMono-SemiBold-latin.woff2"
+    },
+    "./fonts/JetBrainsMono-SemiBold-other.woff2": {
+      "src": "./src/fonts/JetBrainsMono-SemiBold-other.woff2",
+      "default": "./dist/fonts/JetBrainsMono-SemiBold-other.woff2"
+    },
+    "./fonts/JetBrainsMono-SemiBold.woff2": {
+      "src": "./src/fonts/JetBrainsMono-SemiBold.woff2",
+      "default": "./dist/fonts/JetBrainsMono-SemiBold.woff2"
+    },
+    "./fonts/Pilat-Black-latin.woff2": {
+      "src": "./src/fonts/Pilat-Black-latin.woff2",
+      "default": "./dist/fonts/Pilat-Black-latin.woff2"
+    },
+    "./fonts/Pilat-Black-other.woff2": {
+      "src": "./src/fonts/Pilat-Black-other.woff2",
+      "default": "./dist/fonts/Pilat-Black-other.woff2"
+    },
+    "./fonts/Pilat-Black.woff2": {
+      "src": "./src/fonts/Pilat-Black.woff2",
+      "default": "./dist/fonts/Pilat-Black.woff2"
+    },
+    "./fonts/Pilat-Bold-latin.woff2": {
+      "src": "./src/fonts/Pilat-Bold-latin.woff2",
+      "default": "./dist/fonts/Pilat-Bold-latin.woff2"
+    },
+    "./fonts/Pilat-Bold-other.woff2": {
+      "src": "./src/fonts/Pilat-Bold-other.woff2",
+      "default": "./dist/fonts/Pilat-Bold-other.woff2"
+    },
+    "./fonts/Pilat-Bold.woff2": {
+      "src": "./src/fonts/Pilat-Bold.woff2",
+      "default": "./dist/fonts/Pilat-Bold.woff2"
+    },
+    "./fonts/Pilat-Book-latin.woff2": {
+      "src": "./src/fonts/Pilat-Book-latin.woff2",
+      "default": "./dist/fonts/Pilat-Book-latin.woff2"
+    },
+    "./fonts/Pilat-Book-other.woff2": {
+      "src": "./src/fonts/Pilat-Book-other.woff2",
+      "default": "./dist/fonts/Pilat-Book-other.woff2"
+    },
+    "./fonts/Pilat-Book.woff2": {
+      "src": "./src/fonts/Pilat-Book.woff2",
+      "default": "./dist/fonts/Pilat-Book.woff2"
+    },
+    "./fonts/Pilat-Demi-latin.woff2": {
+      "src": "./src/fonts/Pilat-Demi-latin.woff2",
+      "default": "./dist/fonts/Pilat-Demi-latin.woff2"
+    },
+    "./fonts/Pilat-Demi-other.woff2": {
+      "src": "./src/fonts/Pilat-Demi-other.woff2",
+      "default": "./dist/fonts/Pilat-Demi-other.woff2"
+    },
+    "./fonts/Pilat-Demi.woff2": {
+      "src": "./src/fonts/Pilat-Demi.woff2",
+      "default": "./dist/fonts/Pilat-Demi.woff2"
+    },
+    "./fonts/Pilat-Heavy-latin.woff2": {
+      "src": "./src/fonts/Pilat-Heavy-latin.woff2",
+      "default": "./dist/fonts/Pilat-Heavy-latin.woff2"
+    },
+    "./fonts/Pilat-Heavy-other.woff2": {
+      "src": "./src/fonts/Pilat-Heavy-other.woff2",
+      "default": "./dist/fonts/Pilat-Heavy-other.woff2"
+    },
+    "./fonts/Pilat-Heavy.woff2": {
+      "src": "./src/fonts/Pilat-Heavy.woff2",
+      "default": "./dist/fonts/Pilat-Heavy.woff2"
+    },
+    "./fonts/Pilat-Light-latin.woff2": {
+      "src": "./src/fonts/Pilat-Light-latin.woff2",
+      "default": "./dist/fonts/Pilat-Light-latin.woff2"
+    },
+    "./fonts/Pilat-Light-other.woff2": {
+      "src": "./src/fonts/Pilat-Light-other.woff2",
+      "default": "./dist/fonts/Pilat-Light-other.woff2"
+    },
+    "./fonts/Pilat-Light.woff2": {
+      "src": "./src/fonts/Pilat-Light.woff2",
+      "default": "./dist/fonts/Pilat-Light.woff2"
+    },
+    "./fonts/Pilat-Regular-latin.woff2": {
+      "src": "./src/fonts/Pilat-Regular-latin.woff2",
+      "default": "./dist/fonts/Pilat-Regular-latin.woff2"
+    },
+    "./fonts/Pilat-Regular-other.woff2": {
+      "src": "./src/fonts/Pilat-Regular-other.woff2",
+      "default": "./dist/fonts/Pilat-Regular-other.woff2"
+    },
+    "./fonts/Pilat-Regular.woff2": {
+      "src": "./src/fonts/Pilat-Regular.woff2",
+      "default": "./dist/fonts/Pilat-Regular.woff2"
+    },
+    "./fonts/Pilat-Thin-latin.woff2": {
+      "src": "./src/fonts/Pilat-Thin-latin.woff2",
+      "default": "./dist/fonts/Pilat-Thin-latin.woff2"
+    },
+    "./fonts/Pilat-Thin-other.woff2": {
+      "src": "./src/fonts/Pilat-Thin-other.woff2",
+      "default": "./dist/fonts/Pilat-Thin-other.woff2"
+    },
+    "./fonts/Pilat-Thin.woff2": {
+      "src": "./src/fonts/Pilat-Thin.woff2",
+      "default": "./dist/fonts/Pilat-Thin.woff2"
+    },
     "./icons": {
       "src": "./src/web/icons/index.ts",
       "types": "./dist/web/icons/index.d.ts",

package/src/fonts/{Geist-OFL.txt → JetBrainsMono-OFL.txt}

@@ -1,8 +1,9 @@
-Copyright (c) 2023 Vercel, in collaboration with basement.studio
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
+https://scripts.sil.org/OFL
+
 
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
@@ -43,7 +44,7 @@ new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 
-PERMISSION AND CONDITIONS
+PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font

package/src/fonts/README.md

@@ -1,11 +1,24 @@
 # Fonts
 
-Inter is the Inter Project's variable font, copied unchanged from `web/InterVariable.woff2` in the [Inter 4.1 release](https://github.com/rsms/inter/releases/tag/v4.1). Geist Mono is Vercel's variable font, copied unchanged from the [`geist`](https://www.npmjs.com/package/geist) package (1.8.1). The SIL Open Font License 1.1 in `Inter-OFL.txt` and `Geist-OFL.txt` permits redistribution in `@tempoxyz/ds`. The Web contracts declare each face across weights 100 to 900.
+Inter is the Inter Project's variable font, copied unchanged from `web/InterVariable.woff2` in the [Inter 4.1 release](https://github.com/rsms/inter/releases/tag/v4.1). The SIL Open Font License 1.1 in `Inter-OFL.txt` permits redistribution in `@tempoxyz/ds`. The Web contracts declare it across weights 100 to 900.
 
 The Web contracts load Inter from its subsets, such as `Inter-latin.woff2`, one for each Inter face in `src/web/zyzz.config.ts`. A browser downloads only the subsets that cover the page's text. Each subset keeps Inter's axes, OpenType features, and names, and together they hold every character of `Inter-Variable.woff2`. The license permits modified versions, since Inter reserves no font name.
 
-If an Inter face's `unicodeRange` changes, write the subsets again. The script requires fonttools and brotli (`pip install fonttools brotli`).
+If a face's `unicodeRange` changes, write the subsets again. The script requires fonttools and brotli (`pip install fonttools brotli`).
 
 ```sh
 node scripts/subset-fonts.ts
 ```
+
+Each JetBrains Mono and Pilat weight loads the same way, from a `latin` subset with Inter's Latin range and an `other` subset with every other character, such as `Pilat-Book-latin.woff2`. Each subset keeps the font's OpenType features and names, and the two hold every character of the weight's file. The unmodified files stay exported.
+
+Pilat is supplied by Tempo, which confirmed that its license permits redistribution in `@tempoxyz/ds`. The Web contracts declare its eight static weights, from Thin (100) to Black (900).
+
+JetBrains Mono comes from the [JetBrains Mono v2.304](https://github.com/JetBrains/JetBrainsMono/tree/v2.304/fonts/webfonts) webfonts. Each unmodified WOFF2 also matches the `JetBrainsMono-2.304.zip` release asset. Its [SIL Open Font License](./JetBrainsMono-OFL.txt) permits bundling and redistribution with the included copyright notice and license.
+
+| File                           | Weight | SHA-256                                                            |
+| ------------------------------ | ------ | ------------------------------------------------------------------ |
+| `JetBrainsMono-Regular.woff2`  | 400    | `a9cb1cd82332b23a47e3a1239d25d13c86d16c4220695e34b243effa999f45f2` |
+| `JetBrainsMono-Medium.woff2`   | 500    | `086c48dfbea9ddaff1320f7e09399b8e2924e88ce67453721255db3bdbb5a353` |
+| `JetBrainsMono-SemiBold.woff2` | 600    | `918edad542a1da608fd2ba8daebaff9ac802309103fe760eed465b8b4e47faf1` |
+| `JetBrainsMono-Bold.woff2`     | 700    | `c503cc5ec5f8b2c7666b7ecda1adf44bd45f2e6579b2eba0fc292150416588a2` |

package/src/oxlint/rules/PreferComponent.ts

@@ -21,17 +21,17 @@ const inputs: Record<string, string> = {
   button: 'Button',
   checkbox: 'Checkbox',
   date: 'DatePicker',
-  email: 'Input',
+  email: 'TextInput',
   number: 'NumberField',
-  password: 'Input',
+  password: 'TextInput',
   radio: 'RadioGroup',
   range: 'Slider',
   reset: 'Button',
-  search: 'Input',
+  search: 'TextInput',
   submit: 'Button',
-  tel: 'Input',
-  text: 'Input',
-  url: 'Input',
+  tel: 'TextInput',
+  text: 'TextInput',
+  url: 'TextInput',
 }
 
 /**

package/src/web/README.md

@@ -1,17 +1,17 @@
 # Web
 
-Use `@tempoxyz/ds` with a Zyzz plugin for product interfaces. Web variables start from a copy of [Zyzz's default variables](https://zyzz.style/vars), and typography sets, with Inter as the sans face.
+Use `@tempoxyz/ds` with a Zyzz plugin for product interfaces. Web variables pair a scale of raw colors and sizes with tokens named for their role.
 
 ```tsx
 import { style } from '@tempoxyz/ds'
 
 namespace styles {
   export const panel = style({
-    backgroundColor: 'background.surface',
-    borderRadius: '8',
-    color: 'foreground',
+    backgroundColor: 'background.elevated',
+    borderRadius: 'xs',
+    color: 'content.primary',
     padding: '24',
-    typography: 'copy.14',
+    typography: 'body.b2',
   })
 }
 
@@ -35,9 +35,9 @@ export default defineConfig({
 
 ## Variables
 
-Tokens use Zyzz's default names, such as `foreground`, `background.primary`, `gray.400`, and typography sets such as `heading.32` and `copy.14`. Size scales name each step by its size in pixels, so spacing `'24'` is `1.5rem` and radius `'8'` is `0.5rem`. Shadow keys name the largest blur radius, such as `'6'`. Weight, tracking, and leading come from the typography sets. Light and dark values follow the inherited `color-scheme`. [`vars.ts`](./vars.ts) lists every value.
+The scales hold the `neutral` and `accent` colors, such as `neutral.shade.040` and `accent.blue.background`, and the `spacing` steps, so spacing `'24'` is `1.5rem`. Tokens named for their role derive from them, such as `content.primary`, `container.regular`, `line.primary`, `radius.xs`, and `borderWidth.thin`. Light and dark values follow the inherited `color-scheme`. [`vars.ts`](./vars.ts) lists every value.
 
-Typography sets keep Zyzz's sizes, weights, and line heights, set in Inter with tracking from Inter's dynamic metrics. Mono sets keep Geist Mono. The plugin emits the bundled Inter and Geist Mono faces.
+Typography sets bundle a family, size, weight, tracking, and leading, such as `body.b2`, `heading.h1`, and `mono.m1`. The plugin emits the bundled Inter, Pilat, and JetBrains Mono faces, so only the HB Set display face falls back, to Pilat.
 
 An app that needs tokens of its own extends `variables` in its own Zyzz config, and applies that config's `vars()` class beside the library's.
 

package/src/web/components/Accordion.tsx

@@ -133,7 +133,7 @@ export namespace Accordion {
 
 namespace styles {
   export const content = style(
-    { color: 'gray.900', paddingBottom: '16', typography: 'copy.14' },
+    { color: 'content.secondary', paddingBottom: '16', typography: 'body.b2' },
     { id: 'tds/web/accordion/content' },
   )
 
@@ -157,7 +157,7 @@ namespace styles {
     {
       base: {
         borderBottom: '1px solid !custom',
-        borderColor: 'grayAlpha.200',
+        borderColor: 'line.secondary',
       },
     },
     { id: 'tds/web/accordion/item' },
@@ -197,7 +197,7 @@ namespace styles {
               '& [data-accordion-trigger]': {
                 minHeight: '56',
                 paddingBlock: '12',
-                typography: 'button.16',
+                typography: 'body.b1Strong',
               },
             },
           },
@@ -207,7 +207,7 @@ namespace styles {
               '& [data-accordion-trigger]': {
                 minHeight: '32',
                 paddingBlock: '4',
-                typography: 'button.12',
+                typography: 'body.b3Strong',
               },
             },
           },
@@ -223,9 +223,9 @@ namespace styles {
         alignItems: 'center',
         backgroundColor: 'transparent !custom',
         border: 'none !custom',
-        borderRadius: '8',
+        borderRadius: '2xs',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '16',
         cursor: 'pointer',
         display: 'flex',
@@ -242,10 +242,10 @@ namespace styles {
         transitionProperty: 'opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
-        typography: 'button.14',
+        typography: 'body.b2Strong',
         width: '100% !custom',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity, outline-color' },