@windmorph/react 0.0.0-stage → 0.1.0

package/dist/tokens/color.js

@@ -0,0 +1,147 @@
+//#region src/tokens/color.ts
+/**
+* M3 colour roles, built-in themes and contrast levels.
+*
+* Role names are the kebab-case form of the `MaterialDynamicColors` methods in
+* `@material/material-color-utilities`, plus the custom-colour roles (`success`,
+* `warning`; see {@link CUSTOM_COLOR_ROLES}). They become `--md-sys-color-<role>` CSS
+* variables and `bg-<role>` / `text-<role>` / … Tailwind utilities.
+*/
+const COLOR_ROLES = [
+	"primary",
+	"on-primary",
+	"primary-container",
+	"on-primary-container",
+	"inverse-primary",
+	"primary-fixed",
+	"primary-fixed-dim",
+	"on-primary-fixed",
+	"on-primary-fixed-variant",
+	"secondary",
+	"on-secondary",
+	"secondary-container",
+	"on-secondary-container",
+	"secondary-fixed",
+	"secondary-fixed-dim",
+	"on-secondary-fixed",
+	"on-secondary-fixed-variant",
+	"tertiary",
+	"on-tertiary",
+	"tertiary-container",
+	"on-tertiary-container",
+	"tertiary-fixed",
+	"tertiary-fixed-dim",
+	"on-tertiary-fixed",
+	"on-tertiary-fixed-variant",
+	"error",
+	"on-error",
+	"error-container",
+	"on-error-container",
+	"background",
+	"on-background",
+	"surface",
+	"surface-dim",
+	"surface-bright",
+	"surface-container-lowest",
+	"surface-container-low",
+	"surface-container",
+	"surface-container-high",
+	"surface-container-highest",
+	"on-surface",
+	"surface-variant",
+	"on-surface-variant",
+	"inverse-surface",
+	"inverse-on-surface",
+	"outline",
+	"outline-variant",
+	"shadow",
+	"scrim",
+	"surface-tint",
+	"success",
+	"on-success",
+	"success-container",
+	"on-success-container",
+	"warning",
+	"on-warning",
+	"warning-container",
+	"on-warning-container"
+];
+/**
+* Colours M3 has no key colour for, generated the way Material Theme Builder makes "custom
+* colours": each gets colour, on-colour, container and on-container roles, with the error
+* roles' tone rules (so the same contrast as error), harmonised toward the theme's seed.
+*/
+const CUSTOM_COLORS = ["success", "warning"];
+/** The four roles of each custom colour. */
+const CUSTOM_COLOR_ROLES = COLOR_ROLES.filter((role) => CUSTOM_COLORS.some((name) => role.includes(name)));
+/** The default custom colours; only their hue and chroma matter, not their lightness. */
+const DEFAULT_CUSTOM_COLORS = {
+	success: "#1E8E3E",
+	warning: "#F9AB00"
+};
+/** Scheme variants supported by the 2025 colour spec. */
+const SCHEME_VARIANTS = [
+	"tonal-spot",
+	"neutral",
+	"vibrant",
+	"expressive"
+];
+/**
+* The six tonal palettes an M3 scheme is built from: the "core colours" of Material Theme
+* Builder. Every colour role takes its tone from one of them.
+*/
+const PALETTE_NAMES = [
+	"primary",
+	"secondary",
+	"tertiary",
+	"error",
+	"neutral",
+	"neutralVariant"
+];
+/** The six built-in themes: each one's seed colour and scheme variant. */
+const BUILT_IN_THEMES = {
+	baseline: {
+		seed: "#6750A4",
+		variant: "tonal-spot"
+	},
+	ocean: {
+		seed: "#0061A4",
+		variant: "tonal-spot"
+	},
+	forest: {
+		seed: "#386A20",
+		variant: "tonal-spot"
+	},
+	sunset: {
+		seed: "#A04100",
+		variant: "tonal-spot"
+	},
+	rose: {
+		seed: "#9C4146",
+		variant: "tonal-spot"
+	},
+	slate: {
+		seed: "#545F71",
+		variant: "neutral"
+	}
+};
+/** The built-in themes' names, in order: `baseline`, `ocean`, `forest`, `sunset`, `rose`, `slate`. */
+const BUILT_IN_THEME_NAMES = Object.keys(BUILT_IN_THEMES);
+const DEFAULT_THEME = "baseline";
+const COLOR_MODES = [
+	"light",
+	"dark",
+	"system"
+];
+/** Contrast levels and the `contrastLevel` passed to the colour library. */
+const CONTRAST_LEVELS = {
+	standard: 0,
+	medium: .5,
+	high: 1
+};
+/** The contrast levels' names: `standard`, `medium` and `high`. */
+const CONTRAST_LEVEL_NAMES = Object.keys(CONTRAST_LEVELS);
+//#endregion
+export { BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, DEFAULT_CUSTOM_COLORS, DEFAULT_THEME, PALETTE_NAMES, SCHEME_VARIANTS };
+
+//# sourceMappingURL=color.js.map

package/dist/tokens/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/tokens/color.ts"],"sourcesContent":["/**\n * M3 colour roles, built-in themes and contrast levels.\n *\n * Role names are the kebab-case form of the `MaterialDynamicColors` methods in\n * `@material/material-color-utilities`, plus the custom-colour roles (`success`,\n * `warning`; see {@link CUSTOM_COLOR_ROLES}). They become `--md-sys-color-<role>` CSS\n * variables and `bg-<role>` / `text-<role>` / … Tailwind utilities.\n */\n\nexport const COLOR_ROLES = [\n  'primary',\n  'on-primary',\n  'primary-container',\n  'on-primary-container',\n  'inverse-primary',\n  'primary-fixed',\n  'primary-fixed-dim',\n  'on-primary-fixed',\n  'on-primary-fixed-variant',\n  'secondary',\n  'on-secondary',\n  'secondary-container',\n  'on-secondary-container',\n  'secondary-fixed',\n  'secondary-fixed-dim',\n  'on-secondary-fixed',\n  'on-secondary-fixed-variant',\n  'tertiary',\n  'on-tertiary',\n  'tertiary-container',\n  'on-tertiary-container',\n  'tertiary-fixed',\n  'tertiary-fixed-dim',\n  'on-tertiary-fixed',\n  'on-tertiary-fixed-variant',\n  'error',\n  'on-error',\n  'error-container',\n  'on-error-container',\n  'background',\n  'on-background',\n  'surface',\n  'surface-dim',\n  'surface-bright',\n  'surface-container-lowest',\n  'surface-container-low',\n  'surface-container',\n  'surface-container-high',\n  'surface-container-highest',\n  'on-surface',\n  'surface-variant',\n  'on-surface-variant',\n  'inverse-surface',\n  'inverse-on-surface',\n  'outline',\n  'outline-variant',\n  'shadow',\n  'scrim',\n  'surface-tint',\n  'success',\n  'on-success',\n  'success-container',\n  'on-success-container',\n  'warning',\n  'on-warning',\n  'warning-container',\n  'on-warning-container',\n] as const;\n\n/** An M3 colour role, such as `primary` or `on-surface-variant` (`--md-sys-color-<role>`). */\nexport type ColorRole = (typeof COLOR_ROLES)[number];\n\n/**\n * Colours M3 has no key colour for, generated the way Material Theme Builder makes \"custom\n * colours\": each gets colour, on-colour, container and on-container roles, with the error\n * roles' tone rules (so the same contrast as error), harmonised toward the theme's seed.\n */\nexport const CUSTOM_COLORS = ['success', 'warning'] as const;\nexport type CustomColorName = (typeof CUSTOM_COLORS)[number];\n\n/** The four roles of each custom colour. */\nexport const CUSTOM_COLOR_ROLES = COLOR_ROLES.filter((role) =>\n  CUSTOM_COLORS.some((name) => role.includes(name)),\n);\n\n/** The default custom colours; only their hue and chroma matter, not their lightness. */\nexport const DEFAULT_CUSTOM_COLORS: Readonly<Record<CustomColorName, `#${string}`>> = {\n  success: '#1E8E3E',\n  warning: '#F9AB00',\n};\n\n/** Scheme variants supported by the 2025 colour spec. */\nexport const SCHEME_VARIANTS = ['tonal-spot', 'neutral', 'vibrant', 'expressive'] as const;\nexport type SchemeVariant = (typeof SCHEME_VARIANTS)[number];\n\n/**\n * The six tonal palettes an M3 scheme is built from: the \"core colours\" of Material Theme\n * Builder. Every colour role takes its tone from one of them.\n */\nexport const PALETTE_NAMES = [\n  'primary',\n  'secondary',\n  'tertiary',\n  'error',\n  'neutral',\n  'neutralVariant',\n] as const;\nexport type PaletteName = (typeof PALETTE_NAMES)[number];\n\n/**\n * Where a palette comes from: a scheme variant (that palette from that variant of the same\n * seed) or a hex colour (a palette built from its hue and chroma, as Material Theme Builder\n * does for a core colour).\n */\nexport type PaletteSource = SchemeVariant | `#${string}`;\n\n/** Per-palette sources; any palette left out comes from the theme's own `variant`. */\nexport type ThemePalettes = Partial<Record<PaletteName, PaletteSource>>;\n\nexport interface ThemeSeed {\n  seed: string;\n  variant: SchemeVariant;\n  /**\n   * Takes some palettes from elsewhere, e.g. `{ neutral: 'tonal-spot', neutralVariant:\n   * 'tonal-spot' }` for vivid accents on calm surfaces, or `{ tertiary: '#00A07A' }` for a\n   * brand's own tertiary colour. Roles still take their tones from the M3 spec, so contrast\n   * is unchanged.\n   */\n  palettes?: ThemePalettes;\n  /** The success and warning colours; each defaults to {@link DEFAULT_CUSTOM_COLORS}. */\n  customColors?: Partial<Record<CustomColorName, `#${string}`>>;\n  /**\n   * Turns each custom colour's hue up to 15° toward the seed, as Material Theme Builder\n   * does, so it belongs to the theme. `false` keeps a brand's exact status colours.\n   * @default true\n   */\n  harmonize?: boolean;\n}\n\n/** The six built-in themes: each one's seed colour and scheme variant. */\nexport const BUILT_IN_THEMES = {\n  baseline: { seed: '#6750A4', variant: 'tonal-spot' },\n  ocean: { seed: '#0061A4', variant: 'tonal-spot' },\n  forest: { seed: '#386A20', variant: 'tonal-spot' },\n  sunset: { seed: '#A04100', variant: 'tonal-spot' },\n  rose: { seed: '#9C4146', variant: 'tonal-spot' },\n  slate: { seed: '#545F71', variant: 'neutral' },\n} as const satisfies Record<string, ThemeSeed>;\n\nexport type BuiltInThemeName = keyof typeof BUILT_IN_THEMES;\n/** The built-in themes' names, in order: `baseline`, `ocean`, `forest`, `sunset`, `rose`, `slate`. */\nexport const BUILT_IN_THEME_NAMES = Object.keys(BUILT_IN_THEMES) as BuiltInThemeName[];\nexport const DEFAULT_THEME: BuiltInThemeName = 'baseline';\n\nexport const COLOR_MODES = ['light', 'dark', 'system'] as const;\nexport type ColorMode = (typeof COLOR_MODES)[number];\nexport type ResolvedColorMode = Exclude<ColorMode, 'system'>;\n\n/** Contrast levels and the `contrastLevel` passed to the colour library. */\nexport const CONTRAST_LEVELS = { standard: 0, medium: 0.5, high: 1 } as const;\nexport type ContrastLevel = keyof typeof CONTRAST_LEVELS;\n/** The contrast levels' names: `standard`, `medium` and `high`. */\nexport const CONTRAST_LEVEL_NAMES = Object.keys(CONTRAST_LEVELS) as ContrastLevel[];\n"],"mappings":";;;;;;;;;AASA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;AAUA,MAAa,gBAAgB,CAAC,WAAW,SAAS;;AAIlD,MAAa,qBAAqB,YAAY,QAAQ,SACpD,cAAc,MAAM,SAAS,KAAK,SAAS,IAAI,CAAC,CAClD;;AAGA,MAAa,wBAAyE;CACpF,SAAS;CACT,SAAS;AACX;;AAGA,MAAa,kBAAkB;CAAC;CAAc;CAAW;CAAW;AAAY;;;;;AAOhF,MAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;AACF;;AAkCA,MAAa,kBAAkB;CAC7B,UAAU;EAAE,MAAM;EAAW,SAAS;CAAa;CACnD,OAAO;EAAE,MAAM;EAAW,SAAS;CAAa;CAChD,QAAQ;EAAE,MAAM;EAAW,SAAS;CAAa;CACjD,QAAQ;EAAE,MAAM;EAAW,SAAS;CAAa;CACjD,MAAM;EAAE,MAAM;EAAW,SAAS;CAAa;CAC/C,OAAO;EAAE,MAAM;EAAW,SAAS;CAAU;AAC/C;;AAIA,MAAa,uBAAuB,OAAO,KAAK,eAAe;AAC/D,MAAa,gBAAkC;AAE/C,MAAa,cAAc;CAAC;CAAS;CAAQ;AAAQ;;AAKrD,MAAa,kBAAkB;CAAE,UAAU;CAAG,QAAQ;CAAK,MAAM;AAAE;;AAGnE,MAAa,uBAAuB,OAAO,KAAK,eAAe"}

package/dist/tokens/component.d.ts

@@ -0,0 +1,110 @@
+import { ColorRole } from "./color.js";
+import { SpringFamily, SpringSpeed } from "./motion.js";
+import { ElevationLevel } from "./elevation.js";
+import { CornerName } from "./shape.js";
+import { TypeRole } from "./typography.js";
+//#region src/tokens/component.d.ts
+/** A token's default, as CSS. Use the helpers below, so it reads the system tokens. */
+export type TokenValue = string;
+/**
+ * Where a token shows, for the tests that set it and check the result: the element (the
+ * component's root, or the element with `data-slot="<slot>"` inside it), the computed CSS
+ * property, and the `data-*` state the element must be in.
+ */
+export interface TokenPaints {
+  /** The `data-slot` of the element it paints. The component's root when omitted. */
+  slot?: string;
+  /** The CSS property, as `getComputedStyle` names it: `background-color`. */
+  property: string;
+  /** A state attribute the element needs, without `data-`: `selected`. */
+  state?: string;
+}
+export interface ComponentToken {
+  /** The default, usually a system token. */
+  value: TokenValue;
+  /** What it paints, for the docs site's token table. */
+  description: string;
+  /** The Jetpack Compose token it matches (`FilledCardTokens.ContainerColor`), for the docs. */
+  compose?: string;
+  /** Where it shows, for the token tests. */
+  paints?: TokenPaints;
+}
+/**
+ * One value of a scoping attribute (`data-variant="filled"`): the public prefix of its
+ * tokens, its tokens, and the private values it sets without a public name.
+ */
+export interface ComponentTokenScope {
+  /** The public prefix: `md-comp-filled-card` gives `--md-comp-filled-card-<token>`. */
+  prefix: string;
+  /** Tokens with a public name, `--<prefix>-<token>`, read as `--_<set name>-<token>`. */
+  tokens?: Readonly<Record<string, ComponentToken>>;
+  /** Private-only values (`--_<set name>-<token>`): not themeable and not documented. */
+  fixed?: Readonly<Record<string, TokenValue>>;
+}
+export interface ComponentTokenSet<Token extends string = string> {
+  /** The private prefix and `data-tokens` value: `md-comp-card`, `wm-message-field`. */
+  name: string;
+  /** Tokens with one public name, `--<name>-<token>`, whatever the element's state. */
+  tokens: Readonly<Record<Token, ComponentToken>>;
+  /**
+   * Defaults that change with a `data-*` attribute on the same element:
+   * `{ size: { sm: { height: px(40) } } }` applies on `[data-size="sm"]`.
+   */
+  states?: Readonly<Record<string, Readonly<Record<string, Readonly<Partial<Record<Token, TokenValue>>>>>>>;
+  /**
+   * Private values worked out from the tokens (`--_<name>-<key>`), such as a corner capped
+   * at half the height. Not themeable themselves: set the tokens they come from.
+   */
+  derived?: Readonly<Record<string, TokenValue>>;
+  /**
+   * Tokens whose public name depends on a `data-*` attribute on the same element:
+   * `{ variant: { filled: { prefix: 'md-comp-filled-card', tokens: { 'container-color': … } } } }`
+   * applies on `[data-variant="filled"]` and is set as `--md-comp-filled-card-container-color`.
+   * Every value of an attribute declares the same private variables (a token or a `fixed`
+   * value each), so a nested component never inherits its parent's.
+   */
+  scopes?: Readonly<Record<string, Readonly<Record<string, ComponentTokenScope>>>>;
+}
+/** A public variable of a set, as the docs, the tests and the generated name list read it. */
+export interface PublicComponentToken extends ComponentToken {
+  /** The variable an app sets: `--md-comp-filled-card-container-color`. */
+  name: string;
+  /** The part the component's classes read, `--_<set name>-<token>`: `container-color`. */
+  token: string;
+  /** For a scoped token, the attribute (without `data-`) and value it applies on. */
+  scope?: {
+    attribute: string;
+    value: string;
+  };
+}
+export declare function defineComponentTokens<Token extends string>(set: ComponentTokenSet<Token>): ComponentTokenSet<Token>;
+/** A colour role's variable, for a token's default: `color('primary')`. */
+export declare const color: (role: ColorRole) => TokenValue;
+/** A colour role at an opacity, as M3's disabled states (`on-surface` at 12% or 38%). */
+export declare const colorAt: (role: ColorRole, opacity: number) => TokenValue;
+/** An elevation level's shadow: `elevation(1)`. */
+export declare const elevation: (level: ElevationLevel) => TokenValue;
+/** A corner-scale step's variable: `corner('large')`. */
+export declare const corner: (name: CornerName) => TokenValue;
+/** A length in px (Compose dp map to CSS px 1:1): `px(56)`. */
+export declare const px: (value: number) => TokenValue;
+/** One property of a type-scale role: `typescale('body-large', 'size')`. */
+export declare const typescale: (role: TypeRole, property: "font" | "size" | "line-height" | "tracking" | "weight") => TokenValue;
+/** A motion spring's duration or easing: `spring('spatial', 'fast', 'easing')`. */
+export declare const spring: (family: SpringFamily, speed: SpringSpeed, part: "duration" | "easing") => TokenValue;
+/** The five `text-*` tokens for one type role. */
+export declare const typeTokens: (role: TypeRole) => {
+  readonly 'text-font': string;
+  readonly 'text-size': string;
+  readonly 'text-line-height': string;
+  readonly 'text-tracking': string;
+  readonly 'text-weight': string;
+};
+/** Whether a value is a component token set, for code that discovers them in a module. */
+export declare function isComponentTokenSet(value: unknown): value is ComponentTokenSet;
+/** Every public variable of a set: its own tokens, then each scope value's, in order. */
+export declare function componentTokenList(set: ComponentTokenSet): PublicComponentToken[];
+/** The CSS for one set: the resolved variables, then each state's and scope's defaults. */
+export declare function componentTokensCss(set: ComponentTokenSet): string;
+//#endregion
+//# sourceMappingURL=component.d.ts.map

package/dist/tokens/component.js

@@ -0,0 +1,67 @@
+//#region src/tokens/component.ts
+function defineComponentTokens(set) {
+	return set;
+}
+/** A colour role's variable, for a token's default: `color('primary')`. */
+const color = (role) => `var(--md-sys-color-${role})`;
+/** A colour role at an opacity, as M3's disabled states (`on-surface` at 12% or 38%). */
+const colorAt = (role, opacity) => `color-mix(in srgb, var(--md-sys-color-${role}) ${Math.round(opacity * 100)}%, transparent)`;
+/** An elevation level's shadow: `elevation(1)`. */
+const elevation = (level) => `var(--md-sys-elevation-level-${level})`;
+/** A corner-scale step's variable: `corner('large')`. */
+const corner = (name) => `var(--md-sys-shape-corner-${name})`;
+/** A length in px (Compose dp map to CSS px 1:1): `px(56)`. */
+const px = (value) => `${value}px`;
+/** One property of a type-scale role: `typescale('body-large', 'size')`. */
+const typescale = (role, property) => `var(--md-sys-typescale-${role}-${property})`;
+/** A motion spring's duration or easing: `spring('spatial', 'fast', 'easing')`. */
+const spring = (family, speed, part) => `var(--md-sys-motion-spring-${family}-${speed}-${part})`;
+/** The five `text-*` tokens for one type role. */
+const typeTokens = (role) => ({
+	"text-font": typescale(role, "font"),
+	"text-size": typescale(role, "size"),
+	"text-line-height": typescale(role, "line-height"),
+	"text-tracking": typescale(role, "tracking"),
+	"text-weight": typescale(role, "weight")
+});
+/** Whether a value is a component token set, for code that discovers them in a module. */
+function isComponentTokenSet(value) {
+	return typeof value === "object" && value !== null && typeof value.name === "string" && typeof value.tokens === "object" && value.tokens !== null;
+}
+/** Every public variable of a set: its own tokens, then each scope value's, in order. */
+function componentTokenList(set) {
+	const own = Object.entries(set.tokens).map(([token, entry]) => ({
+		...entry,
+		name: `--${set.name}-${token}`,
+		token
+	}));
+	const scoped = Object.entries(set.scopes ?? {}).flatMap(([attribute, values]) => Object.entries(values).flatMap(([value, scope]) => Object.entries(scope.tokens ?? {}).map(([token, entry]) => ({
+		...entry,
+		name: `--${scope.prefix}-${token}`,
+		token,
+		scope: {
+			attribute,
+			value
+		}
+	}))));
+	return [...own, ...scoped];
+}
+/** The CSS for one set: the resolved variables, then each state's and scope's defaults. */
+function componentTokensCss(set) {
+	const element = `[data-tokens~="${set.name}"]`;
+	const declarations = (values) => Object.entries(values).flatMap(([token, value]) => value === void 0 ? [] : [`  --_${set.name}-${token}: var(--${set.name}-${token}, ${value});`]);
+	const rule = (selector, lines) => lines.length ? [`:where(${selector}) {\n${lines.join("\n")}\n}`] : [];
+	const base = declarations(Object.fromEntries(Object.entries(set.tokens).map(([token, { value }]) => [token, value])));
+	const derived = Object.entries(set.derived ?? {}).map(([key, value]) => `  --_${set.name}-${key}: ${value};`);
+	const states = Object.entries(set.states ?? {}).flatMap(([attribute, values]) => Object.entries(values).flatMap(([state, overrides]) => rule(`${element}[data-${attribute}="${state}"]`, declarations(overrides))));
+	const scopes = Object.entries(set.scopes ?? {}).flatMap(([attribute, values]) => Object.entries(values).flatMap(([value, scope]) => rule(`${element}[data-${attribute}="${value}"]`, [...Object.entries(scope.tokens ?? {}).map(([token, entry]) => `  --_${set.name}-${token}: var(--${scope.prefix}-${token}, ${entry.value});`), ...Object.entries(scope.fixed ?? {}).map(([token, fixed]) => `  --_${set.name}-${token}: ${fixed};`)])));
+	return [
+		...rule(element, [...base, ...derived]),
+		...states,
+		...scopes
+	].join("\n\n");
+}
+//#endregion
+export { color, colorAt, componentTokenList, componentTokensCss, corner, defineComponentTokens, elevation, isComponentTokenSet, px, spring, typeTokens, typescale };
+
+//# sourceMappingURL=component.js.map

package/dist/tokens/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../src/tokens/component.ts"],"sourcesContent":["import type { ColorRole } from './color';\nimport type { ElevationLevel } from './elevation';\nimport type { SpringFamily, SpringSpeed } from './motion';\nimport type { CornerName } from './shape';\nimport type { TypeRole } from './typography';\n\n/*\n * Component tokens: every value a component paints, as a CSS variable an app can set.\n *\n * A component's tokens file defines a set with `defineComponentTokens`, and its package's\n * `generate` script writes the CSS with `componentTokensCss` (the core's and Windmorph Pro's\n * to their `generated/components.css`). Each token is two variables:\n *\n * - the public one, unset by default. An app sets it on the component (`className`) or on\n *   any ancestor, globally or per theme. A set's own tokens are `--<name>-<token>`; a scoped\n *   token (below) is `--<scope prefix>-<token>`, so M3's names can put the variant or size\n *   in the component segment (`--md-comp-filled-card-container-color`).\n * - `--_<name>-<token>`, the resolved one, which the component's classes read. It is set on\n *   the element marked `data-tokens=\"<name>\"` to the public variable, falling back to the\n *   default for that element's `data-size`, `data-variant` (or any other `data-*` state).\n *\n * So a component's classes read one private variable per part, and sizes and variants only\n * change which public variable and default fill it.\n */\n\n/** A token's default, as CSS. Use the helpers below, so it reads the system tokens. */\nexport type TokenValue = string;\n\n/**\n * Where a token shows, for the tests that set it and check the result: the element (the\n * component's root, or the element with `data-slot=\"<slot>\"` inside it), the computed CSS\n * property, and the `data-*` state the element must be in.\n */\nexport interface TokenPaints {\n  /** The `data-slot` of the element it paints. The component's root when omitted. */\n  slot?: string;\n  /** The CSS property, as `getComputedStyle` names it: `background-color`. */\n  property: string;\n  /** A state attribute the element needs, without `data-`: `selected`. */\n  state?: string;\n}\n\nexport interface ComponentToken {\n  /** The default, usually a system token. */\n  value: TokenValue;\n  /** What it paints, for the docs site's token table. */\n  description: string;\n  /** The Jetpack Compose token it matches (`FilledCardTokens.ContainerColor`), for the docs. */\n  compose?: string;\n  /** Where it shows, for the token tests. */\n  paints?: TokenPaints;\n}\n\n/**\n * One value of a scoping attribute (`data-variant=\"filled\"`): the public prefix of its\n * tokens, its tokens, and the private values it sets without a public name.\n */\nexport interface ComponentTokenScope {\n  /** The public prefix: `md-comp-filled-card` gives `--md-comp-filled-card-<token>`. */\n  prefix: string;\n  /** Tokens with a public name, `--<prefix>-<token>`, read as `--_<set name>-<token>`. */\n  tokens?: Readonly<Record<string, ComponentToken>>;\n  /** Private-only values (`--_<set name>-<token>`): not themeable and not documented. */\n  fixed?: Readonly<Record<string, TokenValue>>;\n}\n\nexport interface ComponentTokenSet<Token extends string = string> {\n  /** The private prefix and `data-tokens` value: `md-comp-card`, `wm-message-field`. */\n  name: string;\n  /** Tokens with one public name, `--<name>-<token>`, whatever the element's state. */\n  tokens: Readonly<Record<Token, ComponentToken>>;\n  /**\n   * Defaults that change with a `data-*` attribute on the same element:\n   * `{ size: { sm: { height: px(40) } } }` applies on `[data-size=\"sm\"]`.\n   */\n  states?: Readonly<\n    Record<string, Readonly<Record<string, Readonly<Partial<Record<Token, TokenValue>>>>>>\n  >;\n  /**\n   * Private values worked out from the tokens (`--_<name>-<key>`), such as a corner capped\n   * at half the height. Not themeable themselves: set the tokens they come from.\n   */\n  derived?: Readonly<Record<string, TokenValue>>;\n  /**\n   * Tokens whose public name depends on a `data-*` attribute on the same element:\n   * `{ variant: { filled: { prefix: 'md-comp-filled-card', tokens: { 'container-color': … } } } }`\n   * applies on `[data-variant=\"filled\"]` and is set as `--md-comp-filled-card-container-color`.\n   * Every value of an attribute declares the same private variables (a token or a `fixed`\n   * value each), so a nested component never inherits its parent's.\n   */\n  scopes?: Readonly<Record<string, Readonly<Record<string, ComponentTokenScope>>>>;\n}\n\n/** A public variable of a set, as the docs, the tests and the generated name list read it. */\nexport interface PublicComponentToken extends ComponentToken {\n  /** The variable an app sets: `--md-comp-filled-card-container-color`. */\n  name: string;\n  /** The part the component's classes read, `--_<set name>-<token>`: `container-color`. */\n  token: string;\n  /** For a scoped token, the attribute (without `data-`) and value it applies on. */\n  scope?: { attribute: string; value: string };\n}\n\nexport function defineComponentTokens<Token extends string>(\n  set: ComponentTokenSet<Token>,\n): ComponentTokenSet<Token> {\n  return set;\n}\n\n/** The variable a component's classes read for `token`: `var(--_<name>-<token>)`. */\nexport const resolvedToken = (set: ComponentTokenSet, token: string) =>\n  `var(--_${set.name}-${token})`;\n\n/** A colour role's variable, for a token's default: `color('primary')`. */\nexport const color = (role: ColorRole): TokenValue => `var(--md-sys-color-${role})`;\n\n/** A colour role at an opacity, as M3's disabled states (`on-surface` at 12% or 38%). */\nexport const colorAt = (role: ColorRole, opacity: number): TokenValue =>\n  `color-mix(in srgb, var(--md-sys-color-${role}) ${Math.round(opacity * 100)}%, transparent)`;\n\n/** An elevation level's shadow: `elevation(1)`. */\nexport const elevation = (level: ElevationLevel): TokenValue =>\n  `var(--md-sys-elevation-level-${level})`;\n\n/** A corner-scale step's variable: `corner('large')`. */\nexport const corner = (name: CornerName): TokenValue => `var(--md-sys-shape-corner-${name})`;\n\n/** A length in px (Compose dp map to CSS px 1:1): `px(56)`. */\nexport const px = (value: number): TokenValue => `${value}px`;\n\n/** One property of a type-scale role: `typescale('body-large', 'size')`. */\nexport const typescale = (\n  role: TypeRole,\n  property: 'font' | 'size' | 'line-height' | 'tracking' | 'weight',\n): TokenValue => `var(--md-sys-typescale-${role}-${property})`;\n\n/** A motion spring's duration or easing: `spring('spatial', 'fast', 'easing')`. */\nexport const spring = (\n  family: SpringFamily,\n  speed: SpringSpeed,\n  part: 'duration' | 'easing',\n): TokenValue => `var(--md-sys-motion-spring-${family}-${speed}-${part})`;\n\n/** The five `text-*` tokens for one type role. */\nexport const typeTokens = (role: TypeRole) =>\n  ({\n    'text-font': typescale(role, 'font'),\n    'text-size': typescale(role, 'size'),\n    'text-line-height': typescale(role, 'line-height'),\n    'text-tracking': typescale(role, 'tracking'),\n    'text-weight': typescale(role, 'weight'),\n  }) as const;\n\n/** Whether a value is a component token set, for code that discovers them in a module. */\nexport function isComponentTokenSet(value: unknown): value is ComponentTokenSet {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    typeof (value as ComponentTokenSet).name === 'string' &&\n    typeof (value as ComponentTokenSet).tokens === 'object' &&\n    (value as ComponentTokenSet).tokens !== null\n  );\n}\n\n/** Every public variable of a set: its own tokens, then each scope value's, in order. */\nexport function componentTokenList(set: ComponentTokenSet): PublicComponentToken[] {\n  const own = Object.entries<ComponentToken>(set.tokens).map(([token, entry]) => ({\n    ...entry,\n    name: `--${set.name}-${token}`,\n    token,\n  }));\n  const scoped = Object.entries(set.scopes ?? {}).flatMap(([attribute, values]) =>\n    Object.entries(values).flatMap(([value, scope]) =>\n      Object.entries(scope.tokens ?? {}).map(([token, entry]) => ({\n        ...entry,\n        name: `--${scope.prefix}-${token}`,\n        token,\n        scope: { attribute, value },\n      })),\n    ),\n  );\n  return [...own, ...scoped];\n}\n\n/** The CSS for one set: the resolved variables, then each state's and scope's defaults. */\nexport function componentTokensCss(set: ComponentTokenSet): string {\n  const element = `[data-tokens~=\"${set.name}\"]`;\n  const declarations = (values: Readonly<Record<string, TokenValue | undefined>>) =>\n    Object.entries(values).flatMap(([token, value]) =>\n      value === undefined\n        ? []\n        : [`  --_${set.name}-${token}: var(--${set.name}-${token}, ${value});`],\n    );\n  const rule = (selector: string, lines: string[]) =>\n    lines.length ? [`:where(${selector}) {\\n${lines.join('\\n')}\\n}`] : [];\n\n  const base = declarations(\n    Object.fromEntries(\n      Object.entries<ComponentToken>(set.tokens).map(([token, { value }]) => [token, value]),\n    ),\n  );\n  const derived = Object.entries(set.derived ?? {}).map(\n    ([key, value]) => `  --_${set.name}-${key}: ${value};`,\n  );\n  const states = Object.entries(set.states ?? {}).flatMap(([attribute, values]) =>\n    Object.entries(values).flatMap(([state, overrides]) =>\n      rule(`${element}[data-${attribute}=\"${state}\"]`, declarations(overrides)),\n    ),\n  );\n  const scopes = Object.entries(set.scopes ?? {}).flatMap(([attribute, values]) =>\n    Object.entries(values).flatMap(([value, scope]) =>\n      rule(`${element}[data-${attribute}=\"${value}\"]`, [\n        ...Object.entries(scope.tokens ?? {}).map(\n          ([token, entry]) =>\n            `  --_${set.name}-${token}: var(--${scope.prefix}-${token}, ${entry.value});`,\n        ),\n        ...Object.entries(scope.fixed ?? {}).map(\n          ([token, fixed]) => `  --_${set.name}-${token}: ${fixed};`,\n        ),\n      ]),\n    ),\n  );\n  return [...rule(element, [...base, ...derived]), ...states, ...scopes].join('\\n\\n');\n}\n"],"mappings":"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"}

package/dist/tokens/density.d.ts

@@ -0,0 +1,20 @@
+//#region src/tokens/density.d.ts
+/**
+ * M3 web density levels, `0` (default) to `-3`. `data-density` sets `--md-sys-density` for a
+ * subtree; components scale their heights by it (architecture §5, Density).
+ */
+export declare const DENSITIES: readonly [0, -1, -2, -3];
+/** A density level: `0` (default) to `-3` (densest). Each step takes 4px off a component's height. */
+export type Density = (typeof DENSITIES)[number];
+export declare const DEFAULT_DENSITY: Density;
+/** Whether `value` is a density level, as a number or as its attribute text (`"-2"`). */
+export declare function isDensity(value: unknown): value is Density | `${Density}`;
+/**
+ * The `data-density` attribute for an element, or nothing when `density` is left out (the
+ * element then inherits its ancestors' density). Spread it on a component's root.
+ */
+export declare function densityAttribute(density: Density | undefined): {
+  'data-density'?: `${Density}`;
+};
+//#endregion
+//# sourceMappingURL=density.d.ts.map

package/dist/tokens/density.js

@@ -0,0 +1,27 @@
+//#region src/tokens/density.ts
+/**
+* M3 web density levels, `0` (default) to `-3`. `data-density` sets `--md-sys-density` for a
+* subtree; components scale their heights by it (architecture §5, Density).
+*/
+const DENSITIES = [
+	0,
+	-1,
+	-2,
+	-3
+];
+const DEFAULT_DENSITY = 0;
+/** Whether `value` is a density level, as a number or as its attribute text (`"-2"`). */
+function isDensity(value) {
+	return DENSITIES.some((level) => level === value || String(level) === value);
+}
+/**
+* The `data-density` attribute for an element, or nothing when `density` is left out (the
+* element then inherits its ancestors' density). Spread it on a component's root.
+*/
+function densityAttribute(density) {
+	return density === void 0 ? {} : { "data-density": `${density}` };
+}
+//#endregion
+export { DEFAULT_DENSITY, DENSITIES, densityAttribute, isDensity };
+
+//# sourceMappingURL=density.js.map

package/dist/tokens/density.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.js","names":[],"sources":["../../src/tokens/density.ts"],"sourcesContent":["/**\n * M3 web density levels, `0` (default) to `-3`. `data-density` sets `--md-sys-density` for a\n * subtree; components scale their heights by it (architecture §5, Density).\n */\nexport const DENSITIES = [0, -1, -2, -3] as const;\n\n/** A density level: `0` (default) to `-3` (densest). Each step takes 4px off a component's height. */\nexport type Density = (typeof DENSITIES)[number];\n\nexport const DEFAULT_DENSITY: Density = 0;\n\n/** Whether `value` is a density level, as a number or as its attribute text (`\"-2\"`). */\nexport function isDensity(value: unknown): value is Density | `${Density}` {\n  return DENSITIES.some((level) => level === value || String(level) === value);\n}\n\n/**\n * The `data-density` attribute for an element, or nothing when `density` is left out (the\n * element then inherits its ancestors' density). Spread it on a component's root.\n */\nexport function densityAttribute(density: Density | undefined): { 'data-density'?: `${Density}` } {\n  return density === undefined ? {} : { 'data-density': `${density}` };\n}\n"],"mappings":";;;;;AAIA,MAAa,YAAY;CAAC;CAAG;CAAI;CAAI;AAAE;AAKvC,MAAa,kBAA2B;;AAGxC,SAAgB,UAAU,OAAiD;CACzE,OAAO,UAAU,MAAM,UAAU,UAAU,SAAS,OAAO,KAAK,MAAM,KAAK;AAC7E;;;;;AAMA,SAAgB,iBAAiB,SAAiE;CAChG,OAAO,YAAY,KAAA,IAAY,CAAC,IAAI,EAAE,gBAAgB,GAAG,UAAU;AACrE"}

package/dist/tokens/elevation.d.ts

@@ -0,0 +1,44 @@
+//#region src/tokens/elevation.d.ts
+/**
+ * M3 elevation levels (Compose `ElevationTokens`) and their shadows.
+ * Shadows follow the M3 design kit's key + ambient pair and are tinted with the
+ * `shadow` colour role, so they follow the active theme.
+ */
+export declare const ELEVATION_LEVELS: {
+  readonly 0: {
+    readonly dp: 0;
+    readonly key: null;
+    readonly ambient: null;
+  };
+  readonly 1: {
+    readonly dp: 1;
+    readonly key: "0 1px 2px 0";
+    readonly ambient: "0 1px 3px 1px";
+  };
+  readonly 2: {
+    readonly dp: 3;
+    readonly key: "0 1px 2px 0";
+    readonly ambient: "0 2px 6px 2px";
+  };
+  readonly 3: {
+    readonly dp: 6;
+    readonly key: "0 1px 3px 0";
+    readonly ambient: "0 4px 8px 3px";
+  };
+  readonly 4: {
+    readonly dp: 8;
+    readonly key: "0 2px 3px 0";
+    readonly ambient: "0 6px 10px 4px";
+  };
+  readonly 5: {
+    readonly dp: 12;
+    readonly key: "0 4px 4px 0";
+    readonly ambient: "0 8px 12px 6px";
+  };
+};
+export type ElevationLevel = keyof typeof ELEVATION_LEVELS;
+export declare const ELEVATION_LEVEL_NAMES: ElevationLevel[];
+export declare const SHADOW_KEY_OPACITY = 0.3;
+export declare const SHADOW_AMBIENT_OPACITY = 0.15;
+//#endregion
+//# sourceMappingURL=elevation.d.ts.map

package/dist/tokens/elevation.js

@@ -0,0 +1,45 @@
+//#region src/tokens/elevation.ts
+/**
+* M3 elevation levels (Compose `ElevationTokens`) and their shadows.
+* Shadows follow the M3 design kit's key + ambient pair and are tinted with the
+* `shadow` colour role, so they follow the active theme.
+*/
+const ELEVATION_LEVELS = {
+	0: {
+		dp: 0,
+		key: null,
+		ambient: null
+	},
+	1: {
+		dp: 1,
+		key: "0 1px 2px 0",
+		ambient: "0 1px 3px 1px"
+	},
+	2: {
+		dp: 3,
+		key: "0 1px 2px 0",
+		ambient: "0 2px 6px 2px"
+	},
+	3: {
+		dp: 6,
+		key: "0 1px 3px 0",
+		ambient: "0 4px 8px 3px"
+	},
+	4: {
+		dp: 8,
+		key: "0 2px 3px 0",
+		ambient: "0 6px 10px 4px"
+	},
+	5: {
+		dp: 12,
+		key: "0 4px 4px 0",
+		ambient: "0 8px 12px 6px"
+	}
+};
+const ELEVATION_LEVEL_NAMES = Object.keys(ELEVATION_LEVELS).map(Number);
+const SHADOW_KEY_OPACITY = .3;
+const SHADOW_AMBIENT_OPACITY = .15;
+//#endregion
+export { ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY };
+
+//# sourceMappingURL=elevation.js.map

package/dist/tokens/elevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.js","names":[],"sources":["../../src/tokens/elevation.ts"],"sourcesContent":["/**\n * M3 elevation levels (Compose `ElevationTokens`) and their shadows.\n * Shadows follow the M3 design kit's key + ambient pair and are tinted with the\n * `shadow` colour role, so they follow the active theme.\n */\nexport const ELEVATION_LEVELS = {\n  0: { dp: 0, key: null, ambient: null },\n  1: { dp: 1, key: '0 1px 2px 0', ambient: '0 1px 3px 1px' },\n  2: { dp: 3, key: '0 1px 2px 0', ambient: '0 2px 6px 2px' },\n  3: { dp: 6, key: '0 1px 3px 0', ambient: '0 4px 8px 3px' },\n  4: { dp: 8, key: '0 2px 3px 0', ambient: '0 6px 10px 4px' },\n  5: { dp: 12, key: '0 4px 4px 0', ambient: '0 8px 12px 6px' },\n} as const;\n\nexport type ElevationLevel = keyof typeof ELEVATION_LEVELS;\nexport const ELEVATION_LEVEL_NAMES = Object.keys(ELEVATION_LEVELS).map(Number) as ElevationLevel[];\n\nexport const SHADOW_KEY_OPACITY = 0.3;\nexport const SHADOW_AMBIENT_OPACITY = 0.15;\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB;CAC9B,GAAG;EAAE,IAAI;EAAG,KAAK;EAAM,SAAS;CAAK;CACrC,GAAG;EAAE,IAAI;EAAG,KAAK;EAAe,SAAS;CAAgB;CACzD,GAAG;EAAE,IAAI;EAAG,KAAK;EAAe,SAAS;CAAgB;CACzD,GAAG;EAAE,IAAI;EAAG,KAAK;EAAe,SAAS;CAAgB;CACzD,GAAG;EAAE,IAAI;EAAG,KAAK;EAAe,SAAS;CAAiB;CAC1D,GAAG;EAAE,IAAI;EAAI,KAAK;EAAe,SAAS;CAAiB;AAC7D;AAGA,MAAa,wBAAwB,OAAO,KAAK,gBAAgB,CAAC,CAAC,IAAI,MAAM;AAE7E,MAAa,qBAAqB;AAClC,MAAa,yBAAyB"}

package/dist/tokens/motion.d.ts

@@ -0,0 +1,79 @@
+//#region src/tokens/motion.d.ts
+/**
+ * M3 Expressive motion: spring tokens for the `expressive` and `standard` motion
+ * schemes (Compose `ExpressiveMotionTokens` / `StandardMotionTokens`), plus the
+ * legacy duration + easing tokens for consumers migrating from baseline M3.
+ *
+ * Compose springs are expressed as a damping ratio and stiffness with mass 1.
+ * Motion (`motion/react`) takes a damping coefficient, so
+ * `damping = 2 * dampingRatio * sqrt(stiffness * mass)`.
+ */
+export declare const MOTION_SCHEMES: readonly ["expressive", "standard"];
+export type MotionScheme = (typeof MOTION_SCHEMES)[number];
+export declare const DEFAULT_MOTION_SCHEME: MotionScheme;
+export declare const SPRING_FAMILIES: readonly ["spatial", "effects"];
+export type SpringFamily = (typeof SPRING_FAMILIES)[number];
+export declare const SPRING_SPEEDS: readonly ["fast", "default", "slow"];
+export type SpringSpeed = (typeof SPRING_SPEEDS)[number];
+export interface SpringToken {
+  dampingRatio: number;
+  stiffness: number;
+}
+type SpringScheme = Record<SpringFamily, Record<SpringSpeed, SpringToken>>;
+export declare const SPRINGS: Record<MotionScheme, SpringScheme>;
+/** A spring transition in the shape Motion's `transition` prop expects. */
+export interface MotionSpring {
+  type: 'spring';
+  stiffness: number;
+  damping: number;
+  mass: number;
+}
+export declare function toMotionSpring({ dampingRatio, stiffness }: SpringToken): MotionSpring;
+/**
+ * Position of a unit step spring (0 → 1, mass 1) at time `t` seconds,
+ * using the closed-form solution for under- and critically-damped springs.
+ */
+export declare function springPosition({ dampingRatio: z, stiffness: k }: SpringToken, t: number): number;
+/** Time in ms after which the spring stays within the settle threshold of its target. */
+export declare function springSettleDuration(token: SpringToken): number;
+/**
+ * CSS `linear()` approximation of a spring, sampled at evenly spaced points
+ * over its settle duration. Pair it with {@link springSettleDuration}.
+ */
+export declare function springToLinearEasing(token: SpringToken, samples?: number): string;
+/** Legacy M3 durations (Compose `MotionTokens`), in ms. */
+export declare const LEGACY_DURATIONS: {
+  readonly 'short-1': 50;
+  readonly 'short-2': 100;
+  readonly 'short-3': 150;
+  readonly 'short-4': 200;
+  readonly 'medium-1': 250;
+  readonly 'medium-2': 300;
+  readonly 'medium-3': 350;
+  readonly 'medium-4': 400;
+  readonly 'long-1': 450;
+  readonly 'long-2': 500;
+  readonly 'long-3': 550;
+  readonly 'long-4': 600;
+  readonly 'extra-long-1': 700;
+  readonly 'extra-long-2': 800;
+  readonly 'extra-long-3': 900;
+  readonly 'extra-long-4': 1000;
+};
+/** Legacy M3 easing curves (Compose `MotionTokens`). */
+export declare const LEGACY_EASINGS: {
+  readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
+  readonly 'emphasized-accelerate': "cubic-bezier(0.3, 0, 0.8, 0.15)";
+  readonly 'emphasized-decelerate': "cubic-bezier(0.05, 0.7, 0.1, 1)";
+  readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+  readonly 'standard-accelerate': "cubic-bezier(0.3, 0, 1, 1)";
+  readonly 'standard-decelerate': "cubic-bezier(0, 0, 0, 1)";
+  readonly legacy: "cubic-bezier(0.4, 0, 0.2, 1)";
+  readonly 'legacy-accelerate': "cubic-bezier(0.4, 0, 1, 1)";
+  readonly 'legacy-decelerate': "cubic-bezier(0, 0, 0.2, 1)";
+  readonly linear: "cubic-bezier(0, 0, 1, 1)";
+};
+/** `<family>-<speed>` names used by the `ease-m3-*` / `duration-m3-*` utilities. */
+export declare const SPRING_TOKEN_NAMES: ("spatial-fast" | "spatial-default" | "spatial-slow" | "effects-fast" | "effects-default" | "effects-slow")[];
+//#endregion
+//# sourceMappingURL=motion.d.ts.map