@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/tokens/tailwind-palette.js

@@ -0,0 +1,352 @@
+/**
+ * Tailwind CSS v4's default colour palette, as literal oklch() values.
+ *
+ * Generated from tailwindcss@4.3.4 theme.css by
+ * scripts/copy-tailwind-palette.ts. Do not edit by hand; rerun the script.
+ * Copyright (c) Tailwind Labs, Inc. MIT License; the full notice is in
+ * LICENSES/tailwindcss.txt.
+ *
+ * Literals rather than var(--color-zinc-…) references, because Tailwind
+ * prunes theme variables a consumer never uses.
+ */
+export const STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+export const tailwindPalette = {
+    red: {
+        50: 'oklch(97.1% 0.013 17.38)',
+        100: 'oklch(93.6% 0.032 17.717)',
+        200: 'oklch(88.5% 0.062 18.334)',
+        300: 'oklch(80.8% 0.114 19.571)',
+        400: 'oklch(70.4% 0.191 22.216)',
+        500: 'oklch(63.7% 0.237 25.331)',
+        600: 'oklch(57.7% 0.245 27.325)',
+        700: 'oklch(50.5% 0.213 27.518)',
+        800: 'oklch(44.4% 0.177 26.899)',
+        900: 'oklch(39.6% 0.141 25.723)',
+        950: 'oklch(25.8% 0.092 26.042)',
+    },
+    orange: {
+        50: 'oklch(98% 0.016 73.684)',
+        100: 'oklch(95.4% 0.038 75.164)',
+        200: 'oklch(90.1% 0.076 70.697)',
+        300: 'oklch(83.7% 0.128 66.29)',
+        400: 'oklch(75% 0.183 55.934)',
+        500: 'oklch(70.5% 0.213 47.604)',
+        600: 'oklch(64.6% 0.222 41.116)',
+        700: 'oklch(55.3% 0.195 38.402)',
+        800: 'oklch(47% 0.157 37.304)',
+        900: 'oklch(40.8% 0.123 38.172)',
+        950: 'oklch(26.6% 0.079 36.259)',
+    },
+    amber: {
+        50: 'oklch(98.7% 0.022 95.277)',
+        100: 'oklch(96.2% 0.059 95.617)',
+        200: 'oklch(92.4% 0.12 95.746)',
+        300: 'oklch(87.9% 0.169 91.605)',
+        400: 'oklch(82.8% 0.189 84.429)',
+        500: 'oklch(76.9% 0.188 70.08)',
+        600: 'oklch(66.6% 0.179 58.318)',
+        700: 'oklch(55.5% 0.163 48.998)',
+        800: 'oklch(47.3% 0.137 46.201)',
+        900: 'oklch(41.4% 0.112 45.904)',
+        950: 'oklch(27.9% 0.077 45.635)',
+    },
+    yellow: {
+        50: 'oklch(98.7% 0.026 102.212)',
+        100: 'oklch(97.3% 0.071 103.193)',
+        200: 'oklch(94.5% 0.129 101.54)',
+        300: 'oklch(90.5% 0.182 98.111)',
+        400: 'oklch(85.2% 0.199 91.936)',
+        500: 'oklch(79.5% 0.184 86.047)',
+        600: 'oklch(68.1% 0.162 75.834)',
+        700: 'oklch(55.4% 0.135 66.442)',
+        800: 'oklch(47.6% 0.114 61.907)',
+        900: 'oklch(42.1% 0.095 57.708)',
+        950: 'oklch(28.6% 0.066 53.813)',
+    },
+    lime: {
+        50: 'oklch(98.6% 0.031 120.757)',
+        100: 'oklch(96.7% 0.067 122.328)',
+        200: 'oklch(93.8% 0.127 124.321)',
+        300: 'oklch(89.7% 0.196 126.665)',
+        400: 'oklch(84.1% 0.238 128.85)',
+        500: 'oklch(76.8% 0.233 130.85)',
+        600: 'oklch(64.8% 0.2 131.684)',
+        700: 'oklch(53.2% 0.157 131.589)',
+        800: 'oklch(45.3% 0.124 130.933)',
+        900: 'oklch(40.5% 0.101 131.063)',
+        950: 'oklch(27.4% 0.072 132.109)',
+    },
+    green: {
+        50: 'oklch(98.2% 0.018 155.826)',
+        100: 'oklch(96.2% 0.044 156.743)',
+        200: 'oklch(92.5% 0.084 155.995)',
+        300: 'oklch(87.1% 0.15 154.449)',
+        400: 'oklch(79.2% 0.209 151.711)',
+        500: 'oklch(72.3% 0.219 149.579)',
+        600: 'oklch(62.7% 0.194 149.214)',
+        700: 'oklch(52.7% 0.154 150.069)',
+        800: 'oklch(44.8% 0.119 151.328)',
+        900: 'oklch(39.3% 0.095 152.535)',
+        950: 'oklch(26.6% 0.065 152.934)',
+    },
+    emerald: {
+        50: 'oklch(97.9% 0.021 166.113)',
+        100: 'oklch(95% 0.052 163.051)',
+        200: 'oklch(90.5% 0.093 164.15)',
+        300: 'oklch(84.5% 0.143 164.978)',
+        400: 'oklch(76.5% 0.177 163.223)',
+        500: 'oklch(69.6% 0.17 162.48)',
+        600: 'oklch(59.6% 0.145 163.225)',
+        700: 'oklch(50.8% 0.118 165.612)',
+        800: 'oklch(43.2% 0.095 166.913)',
+        900: 'oklch(37.8% 0.077 168.94)',
+        950: 'oklch(26.2% 0.051 172.552)',
+    },
+    teal: {
+        50: 'oklch(98.4% 0.014 180.72)',
+        100: 'oklch(95.3% 0.051 180.801)',
+        200: 'oklch(91% 0.096 180.426)',
+        300: 'oklch(85.5% 0.138 181.071)',
+        400: 'oklch(77.7% 0.152 181.912)',
+        500: 'oklch(70.4% 0.14 182.503)',
+        600: 'oklch(60% 0.118 184.704)',
+        700: 'oklch(51.1% 0.096 186.391)',
+        800: 'oklch(43.7% 0.078 188.216)',
+        900: 'oklch(38.6% 0.063 188.416)',
+        950: 'oklch(27.7% 0.046 192.524)',
+    },
+    cyan: {
+        50: 'oklch(98.4% 0.019 200.873)',
+        100: 'oklch(95.6% 0.045 203.388)',
+        200: 'oklch(91.7% 0.08 205.041)',
+        300: 'oklch(86.5% 0.127 207.078)',
+        400: 'oklch(78.9% 0.154 211.53)',
+        500: 'oklch(71.5% 0.143 215.221)',
+        600: 'oklch(60.9% 0.126 221.723)',
+        700: 'oklch(52% 0.105 223.128)',
+        800: 'oklch(45% 0.085 224.283)',
+        900: 'oklch(39.8% 0.07 227.392)',
+        950: 'oklch(30.2% 0.056 229.695)',
+    },
+    sky: {
+        50: 'oklch(97.7% 0.013 236.62)',
+        100: 'oklch(95.1% 0.026 236.824)',
+        200: 'oklch(90.1% 0.058 230.902)',
+        300: 'oklch(82.8% 0.111 230.318)',
+        400: 'oklch(74.6% 0.16 232.661)',
+        500: 'oklch(68.5% 0.169 237.323)',
+        600: 'oklch(58.8% 0.158 241.966)',
+        700: 'oklch(50% 0.134 242.749)',
+        800: 'oklch(44.3% 0.11 240.79)',
+        900: 'oklch(39.1% 0.09 240.876)',
+        950: 'oklch(29.3% 0.066 243.157)',
+    },
+    blue: {
+        50: 'oklch(97% 0.014 254.604)',
+        100: 'oklch(93.2% 0.032 255.585)',
+        200: 'oklch(88.2% 0.059 254.128)',
+        300: 'oklch(80.9% 0.105 251.813)',
+        400: 'oklch(70.7% 0.165 254.624)',
+        500: 'oklch(62.3% 0.214 259.815)',
+        600: 'oklch(54.6% 0.245 262.881)',
+        700: 'oklch(48.8% 0.243 264.376)',
+        800: 'oklch(42.4% 0.199 265.638)',
+        900: 'oklch(37.9% 0.146 265.522)',
+        950: 'oklch(28.2% 0.091 267.935)',
+    },
+    indigo: {
+        50: 'oklch(96.2% 0.018 272.314)',
+        100: 'oklch(93% 0.034 272.788)',
+        200: 'oklch(87% 0.065 274.039)',
+        300: 'oklch(78.5% 0.115 274.713)',
+        400: 'oklch(67.3% 0.182 276.935)',
+        500: 'oklch(58.5% 0.233 277.117)',
+        600: 'oklch(51.1% 0.262 276.966)',
+        700: 'oklch(45.7% 0.24 277.023)',
+        800: 'oklch(39.8% 0.195 277.366)',
+        900: 'oklch(35.9% 0.144 278.697)',
+        950: 'oklch(25.7% 0.09 281.288)',
+    },
+    violet: {
+        50: 'oklch(96.9% 0.016 293.756)',
+        100: 'oklch(94.3% 0.029 294.588)',
+        200: 'oklch(89.4% 0.057 293.283)',
+        300: 'oklch(81.1% 0.111 293.571)',
+        400: 'oklch(70.2% 0.183 293.541)',
+        500: 'oklch(60.6% 0.25 292.717)',
+        600: 'oklch(54.1% 0.281 293.009)',
+        700: 'oklch(49.1% 0.27 292.581)',
+        800: 'oklch(43.2% 0.232 292.759)',
+        900: 'oklch(38% 0.189 293.745)',
+        950: 'oklch(28.3% 0.141 291.089)',
+    },
+    purple: {
+        50: 'oklch(97.7% 0.014 308.299)',
+        100: 'oklch(94.6% 0.033 307.174)',
+        200: 'oklch(90.2% 0.063 306.703)',
+        300: 'oklch(82.7% 0.119 306.383)',
+        400: 'oklch(71.4% 0.203 305.504)',
+        500: 'oklch(62.7% 0.265 303.9)',
+        600: 'oklch(55.8% 0.288 302.321)',
+        700: 'oklch(49.6% 0.265 301.924)',
+        800: 'oklch(43.8% 0.218 303.724)',
+        900: 'oklch(38.1% 0.176 304.987)',
+        950: 'oklch(29.1% 0.149 302.717)',
+    },
+    fuchsia: {
+        50: 'oklch(97.7% 0.017 320.058)',
+        100: 'oklch(95.2% 0.037 318.852)',
+        200: 'oklch(90.3% 0.076 319.62)',
+        300: 'oklch(83.3% 0.145 321.434)',
+        400: 'oklch(74% 0.238 322.16)',
+        500: 'oklch(66.7% 0.295 322.15)',
+        600: 'oklch(59.1% 0.293 322.896)',
+        700: 'oklch(51.8% 0.253 323.949)',
+        800: 'oklch(45.2% 0.211 324.591)',
+        900: 'oklch(40.1% 0.17 325.612)',
+        950: 'oklch(29.3% 0.136 325.661)',
+    },
+    pink: {
+        50: 'oklch(97.1% 0.014 343.198)',
+        100: 'oklch(94.8% 0.028 342.258)',
+        200: 'oklch(89.9% 0.061 343.231)',
+        300: 'oklch(82.3% 0.12 346.018)',
+        400: 'oklch(71.8% 0.202 349.761)',
+        500: 'oklch(65.6% 0.241 354.308)',
+        600: 'oklch(59.2% 0.249 0.584)',
+        700: 'oklch(52.5% 0.223 3.958)',
+        800: 'oklch(45.9% 0.187 3.815)',
+        900: 'oklch(40.8% 0.153 2.432)',
+        950: 'oklch(28.4% 0.109 3.907)',
+    },
+    rose: {
+        50: 'oklch(96.9% 0.015 12.422)',
+        100: 'oklch(94.1% 0.03 12.58)',
+        200: 'oklch(89.2% 0.058 10.001)',
+        300: 'oklch(81% 0.117 11.638)',
+        400: 'oklch(71.2% 0.194 13.428)',
+        500: 'oklch(64.5% 0.246 16.439)',
+        600: 'oklch(58.6% 0.253 17.585)',
+        700: 'oklch(51.4% 0.222 16.935)',
+        800: 'oklch(45.5% 0.188 13.697)',
+        900: 'oklch(41% 0.159 10.272)',
+        950: 'oklch(27.1% 0.105 12.094)',
+    },
+    slate: {
+        50: 'oklch(98.4% 0.003 247.858)',
+        100: 'oklch(96.8% 0.007 247.896)',
+        200: 'oklch(92.9% 0.013 255.508)',
+        300: 'oklch(86.9% 0.022 252.894)',
+        400: 'oklch(70.4% 0.04 256.788)',
+        500: 'oklch(55.4% 0.046 257.417)',
+        600: 'oklch(44.6% 0.043 257.281)',
+        700: 'oklch(37.2% 0.044 257.287)',
+        800: 'oklch(27.9% 0.041 260.031)',
+        900: 'oklch(20.8% 0.042 265.755)',
+        950: 'oklch(12.9% 0.042 264.695)',
+    },
+    gray: {
+        50: 'oklch(98.5% 0.002 247.839)',
+        100: 'oklch(96.7% 0.003 264.542)',
+        200: 'oklch(92.8% 0.006 264.531)',
+        300: 'oklch(87.2% 0.01 258.338)',
+        400: 'oklch(70.7% 0.022 261.325)',
+        500: 'oklch(55.1% 0.027 264.364)',
+        600: 'oklch(44.6% 0.03 256.802)',
+        700: 'oklch(37.3% 0.034 259.733)',
+        800: 'oklch(27.8% 0.033 256.848)',
+        900: 'oklch(21% 0.034 264.665)',
+        950: 'oklch(13% 0.028 261.692)',
+    },
+    zinc: {
+        50: 'oklch(98.5% 0 none)',
+        100: 'oklch(96.7% 0.001 286.375)',
+        200: 'oklch(92% 0.004 286.32)',
+        300: 'oklch(87.1% 0.006 286.286)',
+        400: 'oklch(70.5% 0.015 286.067)',
+        500: 'oklch(55.2% 0.016 285.938)',
+        600: 'oklch(44.2% 0.017 285.786)',
+        700: 'oklch(37% 0.013 285.805)',
+        800: 'oklch(27.4% 0.006 286.033)',
+        900: 'oklch(21% 0.006 285.885)',
+        950: 'oklch(14.1% 0.005 285.823)',
+    },
+    neutral: {
+        50: 'oklch(98.5% 0 none)',
+        100: 'oklch(97% 0 none)',
+        200: 'oklch(92.2% 0 none)',
+        300: 'oklch(87% 0 none)',
+        400: 'oklch(70.8% 0 none)',
+        500: 'oklch(55.6% 0 none)',
+        600: 'oklch(43.9% 0 none)',
+        700: 'oklch(37.1% 0 none)',
+        800: 'oklch(26.9% 0 none)',
+        900: 'oklch(20.5% 0 none)',
+        950: 'oklch(14.5% 0 none)',
+    },
+    stone: {
+        50: 'oklch(98.5% 0.001 106.423)',
+        100: 'oklch(97% 0.001 106.424)',
+        200: 'oklch(92.3% 0.003 48.717)',
+        300: 'oklch(86.9% 0.005 56.366)',
+        400: 'oklch(70.9% 0.01 56.259)',
+        500: 'oklch(55.3% 0.013 58.071)',
+        600: 'oklch(44.4% 0.011 73.639)',
+        700: 'oklch(37.4% 0.01 67.558)',
+        800: 'oklch(26.8% 0.007 34.298)',
+        900: 'oklch(21.6% 0.006 56.043)',
+        950: 'oklch(14.7% 0.004 49.25)',
+    },
+    mauve: {
+        50: 'oklch(98.5% 0 none)',
+        100: 'oklch(96% 0.003 325.6)',
+        200: 'oklch(92.2% 0.005 325.62)',
+        300: 'oklch(86.5% 0.012 325.68)',
+        400: 'oklch(71.1% 0.019 323.02)',
+        500: 'oklch(54.2% 0.034 322.5)',
+        600: 'oklch(43.5% 0.029 321.78)',
+        700: 'oklch(36.4% 0.029 323.89)',
+        800: 'oklch(26.3% 0.024 320.12)',
+        900: 'oklch(21.2% 0.019 322.12)',
+        950: 'oklch(14.5% 0.008 326)',
+    },
+    olive: {
+        50: 'oklch(98.8% 0.003 106.5)',
+        100: 'oklch(96.6% 0.005 106.5)',
+        200: 'oklch(93% 0.007 106.5)',
+        300: 'oklch(88% 0.011 106.6)',
+        400: 'oklch(73.7% 0.021 106.9)',
+        500: 'oklch(58% 0.031 107.3)',
+        600: 'oklch(46.6% 0.025 107.3)',
+        700: 'oklch(39.4% 0.023 107.4)',
+        800: 'oklch(28.6% 0.016 107.4)',
+        900: 'oklch(22.8% 0.013 107.4)',
+        950: 'oklch(15.3% 0.006 107.1)',
+    },
+    mist: {
+        50: 'oklch(98.7% 0.002 197.1)',
+        100: 'oklch(96.3% 0.002 197.1)',
+        200: 'oklch(92.5% 0.005 214.3)',
+        300: 'oklch(87.2% 0.007 219.6)',
+        400: 'oklch(72.3% 0.014 214.4)',
+        500: 'oklch(56% 0.021 213.5)',
+        600: 'oklch(45% 0.017 213.2)',
+        700: 'oklch(37.8% 0.015 216)',
+        800: 'oklch(27.5% 0.011 216.9)',
+        900: 'oklch(21.8% 0.008 223.9)',
+        950: 'oklch(14.8% 0.004 228.8)',
+    },
+    taupe: {
+        50: 'oklch(98.6% 0.002 67.8)',
+        100: 'oklch(96% 0.002 17.2)',
+        200: 'oklch(92.2% 0.005 34.3)',
+        300: 'oklch(86.8% 0.007 39.5)',
+        400: 'oklch(71.4% 0.014 41.2)',
+        500: 'oklch(54.7% 0.021 43.1)',
+        600: 'oklch(43.8% 0.017 39.3)',
+        700: 'oklch(36.7% 0.016 35.7)',
+        800: 'oklch(26.8% 0.011 36.5)',
+        900: 'oklch(21.4% 0.009 43.1)',
+        950: 'oklch(14.7% 0.004 49.3)',
+    },
+};

package/dist/tokens.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The `/tokens` entry: pure values and the emitters that shape them. It can
+ * be imported from a Node script, a test, or Storybook without pulling in
+ * Svelte.
+ */
+export { defineTheme, type HueOrRamp, RAMP_ROLES, type RampRole, type ResolvedTheme, resolveRamp, resolveTheme, STATUS_ROLES, type StatusRole, type ThemeConfig, type ThemeFonts, type TokenOverrides, } from './tokens/config.js';
+export { emitThemeCss, emitThemeVariables, themeStylesheet } from './tokens/emit-web.js';
+export { geometryRules, layout, radiusScale, sizing } from './tokens/geometry.js';
+export { BASES, type BaseName, defaultTheme, type PresetName, presets } from './tokens/presets.js';
+export { darkTokens, lightTokens, SEMANTIC_TOKENS, type SemanticToken } from './tokens/semantic.js';
+export { type HueName, type Ramp, STEPS, type Step, tailwindPalette, } from './tokens/tailwind-palette.js';

package/dist/tokens.js

@@ -0,0 +1,11 @@
+/**
+ * The `/tokens` entry: pure values and the emitters that shape them. It can
+ * be imported from a Node script, a test, or Storybook without pulling in
+ * Svelte.
+ */
+export { defineTheme, RAMP_ROLES, resolveRamp, resolveTheme, STATUS_ROLES, } from './tokens/config.js';
+export { emitThemeCss, emitThemeVariables, themeStylesheet } from './tokens/emit-web.js';
+export { geometryRules, layout, radiusScale, sizing } from './tokens/geometry.js';
+export { BASES, defaultTheme, presets } from './tokens/presets.js';
+export { darkTokens, lightTokens, SEMANTIC_TOKENS } from './tokens/semantic.js';
+export { STEPS, tailwindPalette, } from './tokens/tailwind-palette.js';

package/dist/utils/cn.d.ts

@@ -0,0 +1,11 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Merges class names, with later Tailwind utilities beating earlier ones in the
+ * same group: `cn('p-2', 'p-4')` is `'p-4'`, not both.
+ *
+ * `clsx` first, so Svelte 5's array and object `class` values work as they do
+ * on a plain element.
+ *
+ * Copied from the React package 2.23.0 src/lib/cn.ts.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,14 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Merges class names, with later Tailwind utilities beating earlier ones in the
+ * same group: `cn('p-2', 'p-4')` is `'p-4'`, not both.
+ *
+ * `clsx` first, so Svelte 5's array and object `class` values work as they do
+ * on a plain element.
+ *
+ * Copied from the React package 2.23.0 src/lib/cn.ts.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/monotone-path.d.ts

@@ -0,0 +1,10 @@
+/**
+ * An SVG path through points, smoothed without overshooting: a curve that is
+ * monotone wherever the data is, and flat at every peak and trough. It is
+ * d3-shape's `curveMonotoneX` (Steffen's method), which is what recharts draws
+ * for `type="monotone"`, written out so a sparkline needs no chart library.
+ *
+ * Points are `[x, y]` with x increasing. Fewer than two draws nothing; two draw
+ * a straight line.
+ */
+export declare function monotonePath(points: readonly (readonly [number, number])[]): string;

package/dist/utils/monotone-path.js

@@ -0,0 +1,52 @@
+/**
+ * An SVG path through points, smoothed without overshooting: a curve that is
+ * monotone wherever the data is, and flat at every peak and trough. It is
+ * d3-shape's `curveMonotoneX` (Steffen's method), which is what recharts draws
+ * for `type="monotone"`, written out so a sparkline needs no chart library.
+ *
+ * Points are `[x, y]` with x increasing. Fewer than two draws nothing; two draw
+ * a straight line.
+ */
+export function monotonePath(points) {
+    if (points.length < 2)
+        return '';
+    const [[x0, y0], [x1, y1]] = points;
+    if (points.length === 2)
+        return `M${x0},${y0}L${x1},${y1}`;
+    const tangents = interiorTangents(points);
+    const last = points.length - 1;
+    tangents[0] = endTangent(points[0], points[1], tangents[1]);
+    tangents[last] = endTangent(points[last - 1], points[last], tangents[last - 1]);
+    let path = `M${x0},${y0}`;
+    for (let index = 0; index < last; index++) {
+        path += segment(points[index], points[index + 1], tangents[index], tangents[index + 1]);
+    }
+    return path;
+}
+/** The tangent at every interior point; the two ends are filled in after. */
+function interiorTangents(points) {
+    const tangents = new Array(points.length).fill(0);
+    for (let index = 1; index < points.length - 1; index++) {
+        tangents[index] = interiorTangent(points[index - 1], points[index], points[index + 1]);
+    }
+    return tangents;
+}
+/** Steffen's tangent: zero where the slopes change sign, never steeper than either side allows. */
+function interiorTangent([x0, y0], [x1, y1], [x2, y2]) {
+    const h0 = x1 - x0;
+    const h1 = x2 - x1;
+    const s0 = h0 === 0 ? 0 : (y1 - y0) / h0;
+    const s1 = h1 === 0 ? 0 : (y2 - y1) / h1;
+    const p = (s0 * h1 + s1 * h0) / (h0 + h1);
+    return (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p));
+}
+/** An end's tangent, from its neighbour's: the one-sided version of the same rule. */
+function endTangent([x0, y0], [x1, y1], neighbour) {
+    const h = x1 - x0;
+    return h === 0 ? neighbour : (3 * ((y1 - y0) / h) - neighbour) / 2;
+}
+/** One cubic Bézier, its control points a third of the way along each tangent. */
+function segment([x0, y0], [x1, y1], t0, t1) {
+    const dx = (x1 - x0) / 3;
+    return `C${x0 + dx},${y0 + dx * t0},${x1 - dx},${y1 - dx * t1},${x1},${y1}`;
+}

package/dist/utils/segmented-control.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Origin: the React package
+ */
+/**
+ * The segmented control, written once.
+ *
+ * A row of mutually-exclusive options where the chosen one is a pill lifted off
+ * a washed track: the reference's `30D 90D 12M` range picker, a chart's
+ * Revenue/Transactions switch, a table's table/grid toggle. Not to be confused
+ * with `SegmentedBar`, which is a chart — this is the control, that is the data.
+ *
+ * It lives in its own module because three components had already drawn it
+ * three different ways. `TabsList` was `bg-black/5` at `rounded-full` with a
+ * `bg-background` pill; `DataTableViewToggle` hand-wrote `bg-input/50` at
+ * `rounded-2xl` with a `bg-card` pill on its call site; the chart headers never
+ * got the treatment at all and were still stock shadcn's outlined
+ * `bg-accent`. Three approximations of one control is what `docs/theme-fixes.md`
+ * §9 predicted when it said the family should end up on one scale.
+ *
+ * `Tabs` supplies the values because it is the one that was argued. See §9 for
+ * the wash, and §20 for why the others follow it.
+ */
+/**
+ * The track the pill slides in.
+ *
+ * A wash, not a colour. `SidebarInset` paints every routed page `bg-muted`, so
+ * a `bg-muted` track was the page's own colour and vanished into it. Darkening
+ * whatever is underneath reads on the muted page and on a white card without
+ * the control having to know which one it is sitting on — and a flat token
+ * cannot be correct on both, because the two surfaces are 14 steps apart.
+ */
+export declare const segmentedTrack = "text-muted-foreground inline-flex h-8 w-fit items-center justify-center rounded-full bg-black/5 p-1 dark:bg-white/5";
+/**
+ * One option inside the track.
+ *
+ * Both Radix state attributes are spelled out. Tabs marks its chosen trigger
+ * `data-[state=active]` and ToggleGroup marks its pressed item
+ * `data-[state=on]`, so a single class string has to answer to both — and it
+ * has to be written literally, because Tailwind scans source text and cannot
+ * see a selector assembled at runtime.
+ *
+ * The active fill is `bg-background` rather than `bg-card`, and steps to
+ * `bg-card` in dark. In light the two are the same white; in dark `bg-background`
+ * is the page colour, which would make the pill disappear the way the track
+ * used to.
+ */
+export declare const segmentedItem = "text-foreground/60 hover:text-foreground hover:bg-transparent dark:text-muted-foreground dark:hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-card dark:data-[state=active]:text-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm dark:data-[state=on]:bg-card dark:data-[state=on]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex h-full flex-auto items-center justify-center gap-1.5 rounded-full border border-transparent px-3 py-0.5 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";

package/dist/utils/segmented-control.js

@@ -0,0 +1,53 @@
+// Copied from the React package 2.23.0 src/components/segmented-control.ts.
+// It is a class module with no component, so it lives in utils/ (round 2 plan, R2-1).
+// Diverged: the item is `flex-auto` rather than `flex-1`. With a zero basis, a
+// `w-fit` track shares its width out equally, so a longer label ("Custom" beside
+// "2x") got less than its text and overflowed its pill. `flex-auto` starts each
+// item from its own width; a `w-full` track still stretches them.
+/**
+ * Origin: the React package
+ */
+/**
+ * The segmented control, written once.
+ *
+ * A row of mutually-exclusive options where the chosen one is a pill lifted off
+ * a washed track: the reference's `30D 90D 12M` range picker, a chart's
+ * Revenue/Transactions switch, a table's table/grid toggle. Not to be confused
+ * with `SegmentedBar`, which is a chart — this is the control, that is the data.
+ *
+ * It lives in its own module because three components had already drawn it
+ * three different ways. `TabsList` was `bg-black/5` at `rounded-full` with a
+ * `bg-background` pill; `DataTableViewToggle` hand-wrote `bg-input/50` at
+ * `rounded-2xl` with a `bg-card` pill on its call site; the chart headers never
+ * got the treatment at all and were still stock shadcn's outlined
+ * `bg-accent`. Three approximations of one control is what `docs/theme-fixes.md`
+ * §9 predicted when it said the family should end up on one scale.
+ *
+ * `Tabs` supplies the values because it is the one that was argued. See §9 for
+ * the wash, and §20 for why the others follow it.
+ */
+/**
+ * The track the pill slides in.
+ *
+ * A wash, not a colour. `SidebarInset` paints every routed page `bg-muted`, so
+ * a `bg-muted` track was the page's own colour and vanished into it. Darkening
+ * whatever is underneath reads on the muted page and on a white card without
+ * the control having to know which one it is sitting on — and a flat token
+ * cannot be correct on both, because the two surfaces are 14 steps apart.
+ */
+export const segmentedTrack = 'text-muted-foreground inline-flex h-8 w-fit items-center justify-center rounded-full bg-black/5 p-1 dark:bg-white/5';
+/**
+ * One option inside the track.
+ *
+ * Both Radix state attributes are spelled out. Tabs marks its chosen trigger
+ * `data-[state=active]` and ToggleGroup marks its pressed item
+ * `data-[state=on]`, so a single class string has to answer to both — and it
+ * has to be written literally, because Tailwind scans source text and cannot
+ * see a selector assembled at runtime.
+ *
+ * The active fill is `bg-background` rather than `bg-card`, and steps to
+ * `bg-card` in dark. In light the two are the same white; in dark `bg-background`
+ * is the page colour, which would make the pill disappear the way the track
+ * used to.
+ */
+export const segmentedItem = "text-foreground/60 hover:text-foreground hover:bg-transparent dark:text-muted-foreground dark:hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:bg-card dark:data-[state=active]:text-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm dark:data-[state=on]:bg-card dark:data-[state=on]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex h-full flex-auto items-center justify-center gap-1.5 rounded-full border border-transparent px-3 py-0.5 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";

package/dist/utils/tone.d.ts

@@ -0,0 +1,78 @@
+/**
+ * The one status scale, and the one size scale, every component takes.
+ *
+ * Before 2.0 there were six tone types — `MetricTone`, `StatTone`,
+ * `RadialTone`, `SegmentTone`, `SparklineTone`, `IconTone` — naming the same
+ * idea five ways: the neutral was `default`, `muted` or `neutral`; the red was
+ * `critical`, `destructive` or `error`; the brand was `primary` or `accent`.
+ * A caller moving a status from a tile to a badge had to translate it, and
+ * each map drifted on its own.
+ *
+ * `critical` rather than `destructive` or `error`. It names what the operator
+ * should feel about the state, which is what a tone is for; `destructive`
+ * describes an action and `error` a failure, and a badge reading "Overdue" is
+ * neither. The CSS token keeps its shadcn name, `--destructive`.
+ *
+ * `primary` is the brand, washed from `--color-primary-soft`. It is never
+ * `--accent`, which means "active nav row" and nothing else.
+ *
+ * The maps are whole class strings so Tailwind can see every one of them.
+ * Components pick the treatment — a soft wash, a solid fill, an outline, bare
+ * ink, a bar fill — and never write a colour of their own.
+ */
+export type Tone = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'critical';
+/**
+ * `md` is the default everywhere. A component with only two sizes takes `sm`
+ * and `md`; one that needs a larger step takes `lg`. Never `default`, `slim`
+ * or `xs` — those were three names for "not the big one".
+ */
+export type Size = 'sm' | 'md' | 'lg';
+export declare const TONES: readonly Tone[];
+/**
+ * A 10% wash under ink of the same tone — a status, not an action.
+ *
+ * Neutral is a 7% foreground wash, not `--muted`. The canvas is `--muted`, so
+ * a neutral badge or chip in `bg-muted` vanished wherever it sat on the page
+ * rather than on a card; a foreground wash reads on the canvas, on a card and
+ * on a muted row, in both schemes, as Skeleton's always has. 7% rather than
+ * Skeleton's 10%: at 10% a neutral fill read a step darker than the old
+ * `bg-muted` on a white card, heavier than a status that claims nothing should.
+ * Every neutral fill outside this map (an avatar, a rank disc, a stepper's
+ * track) writes the same `bg-foreground/[0.07]`.
+ */
+export declare const TONE_SOFT_CLASS: Record<Tone, string>;
+/**
+ * A full fill. Neutral is the ink colour inverted rather than a grey, so that
+ * "solid" always means the loudest thing in its row; a light grey fill is
+ * what `soft` is for.
+ *
+ * Each status writes in its own `-foreground` ink rather than white: white
+ * reads on the light scheme's 600 steps but all but vanishes on the dark
+ * scheme's bright 400s.
+ */
+export declare const TONE_SOLID_CLASS: Record<Tone, string>;
+export declare const TONE_OUTLINE_CLASS: Record<Tone, string>;
+/** Ink alone, for a ghost or a link. Neutral inherits the surrounding text. */
+export declare const TONE_TEXT_CLASS: Record<Tone, string>;
+/** The wash an interactive element takes on hover and while its menu is open. */
+export declare const TONE_HOVER_CLASS: Record<Tone, string>;
+/**
+ * The fill of a mark — a bar, a ring, a dot, a sparkline. Neutral is the
+ * muted ink rather than the brand, so an unremarkable bar reads as a quantity
+ * and not as a claim; `primary` is there for the bar that should.
+ */
+export declare const TONE_FILL_CLASS: Record<Tone, string>;
+/** The same fill as a stroke, for a ring. */
+export declare const TONE_STROKE_CLASS: Record<Tone, string>;
+/**
+ * The fill of `Progress`'s indicator, set from the outside. `Progress` is
+ * shadcn's and paints its own `bg-primary`; the `data-slot` selector beats it.
+ */
+export declare const TONE_INDICATOR_CLASS: Record<Tone, string>;
+/**
+ * The colour as a CSS value, for a library that takes one rather than a class
+ * — recharts' `stroke` and `stopColor`. Red is `--destructive`, not the
+ * `--color-error` palette hue: `Sparkline` once drew with the latter, a second
+ * red beside every badge and bar on the page.
+ */
+export declare const TONE_CSS_VAR: Record<Tone, string>;