@tarsis/toolkit 0.7.3 → 0.7.5

package/dist/test/a11y.d.ts

@@ -0,0 +1,5 @@
+import { type RenderOptions } from '@testing-library/react';
+import { axe } from 'vitest-axe';
+type A11yResult = Awaited<ReturnType<typeof axe>>;
+declare function expectNoA11yViolations(ui: React.ReactElement, options?: RenderOptions): Promise<A11yResult>;
+export { expectNoA11yViolations };

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+import 'vitest-axe/extend-expect';

package/dist/tokens/animation.d.ts

@@ -0,0 +1,38 @@
+/**
+ * JS-accessible animation duration values (in seconds)
+ * for use with GSAP, framer-motion, and Web Animations API.
+ * Source of truth for the CSS var equivalents in global.css.
+ */
+declare const animationDuration: {
+    readonly fastest: 0.1;
+    readonly fast: 0.15;
+    readonly short: 0.2;
+    readonly medium: 0.3;
+    readonly long: 0.4;
+    readonly slow: 0.5;
+    readonly slowest: 0.8;
+};
+type AnimationDurationName = keyof typeof animationDuration;
+/**
+ * Cubic-bezier tuples for programmatic use.
+ * CSS equivalents live in global.css --ease-* vars.
+ */
+declare const easing: {
+    readonly linear: readonly [0, 0, 1, 1];
+    readonly ease: readonly [0.25, 0.1, 0.25, 1];
+    readonly easeIn: readonly [0.42, 0, 1, 1];
+    readonly easeOut: readonly [0, 0, 0.58, 1];
+    readonly easeInOut: readonly [0.42, 0, 0.58, 1];
+    readonly easeInOutCubic: readonly [0.4, 0, 0.2, 1];
+    readonly easeOutCubic: readonly [0.215, 0.61, 0.355, 1];
+    readonly easeOutQuad: readonly [0.25, 0.46, 0.45, 0.94];
+    readonly easeInOutQuad: readonly [0.455, 0.03, 0.515, 0.955];
+    readonly easeInQuart: readonly [0.5, 0, 0.75, 0];
+    readonly easeOutQuart: readonly [0.25, 1, 0.5, 1];
+    readonly easeInOutQuart: readonly [0.76, 0, 0.24, 1];
+    readonly easeOutExpo: readonly [0.16, 1, 0.3, 1];
+};
+type EasingName = keyof typeof easing;
+declare const staggerDelay = 0.03;
+export { animationDuration, easing, staggerDelay };
+export type { AnimationDurationName, EasingName };

package/dist/tokens/colorValidation.d.ts

@@ -0,0 +1,18 @@
+/**
+ * All semantic CSS custom property names that must be defined per theme.
+ * Used for CI/test validation to assert theme completeness.
+ */
+declare const REQUIRED_SEMANTIC_VARS: readonly ["--color-surface-canvas", "--color-surface-raised", "--color-surface-elevated", "--color-surface-overlay", "--color-surface-inverse", "--color-surface-disabled", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-text-inverse", "--color-text-disabled", "--color-border-muted", "--color-border-subtle", "--color-border-strong", "--color-accent-primary", "--color-accent-primary-muted", "--color-accent-primary-emphasis", "--color-accent-success", "--color-accent-success-emphasis", "--color-accent-warning", "--color-accent-warning-emphasis", "--color-accent-danger", "--color-accent-danger-emphasis", "--color-accent-highlight", "--color-accent-highlight-emphasis", "--color-focus-ring", "--color-bg"];
+type SemanticVar = (typeof REQUIRED_SEMANTIC_VARS)[number];
+type ColorValidationResult = {
+    valid: boolean;
+    missing: SemanticVar[];
+    present: SemanticVar[];
+};
+/**
+ * Validate that all required semantic CSS variables are defined
+ * on the given element (defaults to `document.body`).
+ */
+declare const validateColorScheme: (element?: Element) => ColorValidationResult;
+export { REQUIRED_SEMANTIC_VARS, validateColorScheme };
+export type { SemanticVar, ColorValidationResult };

package/dist/tokens/index.d.ts

@@ -0,0 +1,8 @@
+export { Token, getVarName, resolveToken } from './tokens';
+export type { CssVarRef } from './tokens';
+export { springPreset } from './spring';
+export type { SpringPresetName } from './spring';
+export { animationDuration, easing, staggerDelay } from './animation';
+export type { AnimationDurationName, EasingName } from './animation';
+export { REQUIRED_SEMANTIC_VARS, validateColorScheme } from './colorValidation';
+export type { SemanticVar, ColorValidationResult } from './colorValidation';

package/dist/tokens/spring.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Standardised spring presets for framer-motion / react-spring.
+ * Usage: <motion.div transition={springPreset.bouncy} />
+ */
+declare const springPreset: {
+    readonly stiff: {
+        readonly type: "spring";
+        readonly stiffness: 400;
+        readonly damping: 30;
+        readonly mass: 1;
+    };
+    readonly bouncy: {
+        readonly type: "spring";
+        readonly stiffness: 300;
+        readonly damping: 15;
+        readonly mass: 1;
+    };
+    readonly gentle: {
+        readonly type: "spring";
+        readonly stiffness: 150;
+        readonly damping: 20;
+        readonly mass: 1;
+    };
+    readonly snappy: {
+        readonly type: "spring";
+        readonly stiffness: 500;
+        readonly damping: 35;
+        readonly mass: 0.8;
+    };
+    readonly slow: {
+        readonly type: "spring";
+        readonly stiffness: 100;
+        readonly damping: 20;
+        readonly mass: 1.5;
+    };
+};
+type SpringPresetName = keyof typeof springPreset;
+export { springPreset };
+export type { SpringPresetName };

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,333 @@
+type CssVarRef = `var(--${string})`;
+/**
+ * Extract the CSS custom property name from a var() reference.
+ * `'var(--space-4)'` -> `'--space-4'`
+ */
+declare const getVarName: (token: CssVarRef) => string;
+/**
+ * Resolve the computed value of a CSS variable token at runtime.
+ * Checks `document.body` first so semantic theme tokens resolve from the
+ * same element they are defined on, then falls back to `document.documentElement`.
+ */
+declare const resolveToken: (token: CssVarRef, element?: Element) => string;
+export { getVarName, resolveToken };
+export type { CssVarRef };
+export declare const Token: {
+    readonly color: {
+        readonly black: "var(--color-black)";
+        readonly white: "var(--color-white)";
+        readonly accent1: "var(--color-accent1)";
+        readonly accent2: "var(--color-accent2)";
+        readonly accent3: "var(--color-accent3)";
+        readonly accentGreen: "var(--color-accent-green)";
+        readonly accentGreen1: "var(--color-accent-green1)";
+        readonly surfaceCanvas: "var(--color-surface-canvas)";
+        readonly surfaceRaised: "var(--color-surface-raised)";
+        readonly surfaceElevated: "var(--color-surface-elevated)";
+        readonly surfaceOverlay: "var(--color-surface-overlay)";
+        readonly surfaceInverse: "var(--color-surface-inverse)";
+        readonly surfaceDisabled: "var(--color-surface-disabled)";
+        readonly textPrimary: "var(--color-text-primary)";
+        readonly textSecondary: "var(--color-text-secondary)";
+        readonly textTertiary: "var(--color-text-tertiary)";
+        readonly textInverse: "var(--color-text-inverse)";
+        readonly textDisabled: "var(--color-text-disabled)";
+        readonly borderMuted: "var(--color-border-muted)";
+        readonly borderSubtle: "var(--color-border-subtle)";
+        readonly borderStrong: "var(--color-border-strong)";
+        readonly accentPrimary: "var(--color-accent-primary)";
+        readonly accentPrimaryMuted: "var(--color-accent-primary-muted)";
+        readonly accentPrimaryEmphasis: "var(--color-accent-primary-emphasis)";
+        readonly accentSuccess: "var(--color-accent-success)";
+        readonly accentSuccessEmphasis: "var(--color-accent-success-emphasis)";
+        readonly accentWarning: "var(--color-accent-warning)";
+        readonly accentWarningEmphasis: "var(--color-accent-warning-emphasis)";
+        readonly accentDanger: "var(--color-accent-danger)";
+        readonly accentDangerEmphasis: "var(--color-accent-danger-emphasis)";
+        readonly accentHighlight: "var(--color-accent-highlight)";
+        readonly accentHighlightEmphasis: "var(--color-accent-highlight-emphasis)";
+        readonly focusRing: "var(--color-focus-ring)";
+        readonly bg: "var(--color-bg)";
+        readonly gray1: "var(--color-gray1)";
+        readonly gray2: "var(--color-gray2)";
+        readonly gray3: "var(--color-gray3)";
+        readonly gray4: "var(--color-gray4)";
+        readonly gray5: "var(--color-gray5)";
+        readonly gray6: "var(--color-gray6)";
+        readonly gray7: "var(--color-gray7)";
+        readonly gray8: "var(--color-gray8)";
+        readonly gray9: "var(--color-gray9)";
+        readonly gray10: "var(--color-gray10)";
+        readonly gray11: "var(--color-gray11)";
+        readonly gray12: "var(--color-gray12)";
+        readonly grayA1: "var(--color-grayA1)";
+        readonly grayA2: "var(--color-grayA2)";
+        readonly grayA3: "var(--color-grayA3)";
+        readonly grayA4: "var(--color-grayA4)";
+        readonly grayA5: "var(--color-grayA5)";
+        readonly grayA6: "var(--color-grayA6)";
+        readonly grayA7: "var(--color-grayA7)";
+        readonly grayA8: "var(--color-grayA8)";
+        readonly grayA9: "var(--color-grayA9)";
+        readonly grayA10: "var(--color-grayA10)";
+        readonly grayA11: "var(--color-grayA11)";
+        readonly grayA12: "var(--color-grayA12)";
+        readonly blue1: "var(--color-blue1)";
+        readonly blue2: "var(--color-blue2)";
+        readonly blue3: "var(--color-blue3)";
+        readonly blue4: "var(--color-blue4)";
+        readonly blue5: "var(--color-blue5)";
+        readonly blue6: "var(--color-blue6)";
+        readonly blue7: "var(--color-blue7)";
+        readonly blue8: "var(--color-blue8)";
+        readonly blue9: "var(--color-blue9)";
+        readonly blue10: "var(--color-blue10)";
+        readonly blue11: "var(--color-blue11)";
+        readonly blue12: "var(--color-blue12)";
+        readonly green1: "var(--color-green1)";
+        readonly green2: "var(--color-green2)";
+        readonly green3: "var(--color-green3)";
+        readonly green4: "var(--color-green4)";
+        readonly green5: "var(--color-green5)";
+        readonly green6: "var(--color-green6)";
+        readonly green7: "var(--color-green7)";
+        readonly green8: "var(--color-green8)";
+        readonly green9: "var(--color-green9)";
+        readonly green10: "var(--color-green10)";
+        readonly green11: "var(--color-green11)";
+        readonly green12: "var(--color-green12)";
+        readonly amber1: "var(--color-amber1)";
+        readonly amber2: "var(--color-amber2)";
+        readonly amber3: "var(--color-amber3)";
+        readonly amber4: "var(--color-amber4)";
+        readonly amber5: "var(--color-amber5)";
+        readonly amber6: "var(--color-amber6)";
+        readonly amber7: "var(--color-amber7)";
+        readonly amber8: "var(--color-amber8)";
+        readonly amber9: "var(--color-amber9)";
+        readonly amber10: "var(--color-amber10)";
+        readonly amber11: "var(--color-amber11)";
+        readonly amber12: "var(--color-amber12)";
+        readonly purple1: "var(--color-purple1)";
+        readonly purple2: "var(--color-purple2)";
+        readonly purple3: "var(--color-purple3)";
+        readonly purple4: "var(--color-purple4)";
+        readonly purple5: "var(--color-purple5)";
+        readonly purple6: "var(--color-purple6)";
+        readonly purple7: "var(--color-purple7)";
+        readonly purple8: "var(--color-purple8)";
+        readonly purple9: "var(--color-purple9)";
+        readonly purple10: "var(--color-purple10)";
+        readonly purple11: "var(--color-purple11)";
+        readonly purple12: "var(--color-purple12)";
+        readonly red1: "var(--color-red1)";
+        readonly red2: "var(--color-red2)";
+        readonly red3: "var(--color-red3)";
+        readonly red4: "var(--color-red4)";
+        readonly red5: "var(--color-red5)";
+        readonly red6: "var(--color-red6)";
+        readonly red7: "var(--color-red7)";
+        readonly red8: "var(--color-red8)";
+        readonly red9: "var(--color-red9)";
+        readonly red10: "var(--color-red10)";
+        readonly red11: "var(--color-red11)";
+        readonly red12: "var(--color-red12)";
+    };
+    readonly space: {
+        readonly none: "var(--space-0)";
+        readonly s1: "var(--space-1)";
+        readonly s2: "var(--space-2)";
+        readonly s3: "var(--space-3)";
+        readonly s4: "var(--space-4)";
+        readonly s5: "var(--space-5)";
+        readonly s6: "var(--space-6)";
+        readonly s7: "var(--space-7)";
+        readonly s8: "var(--space-8)";
+        readonly s9: "var(--space-9)";
+        readonly s10: "var(--space-10)";
+        readonly s11: "var(--space-11)";
+        readonly s12: "var(--space-12)";
+        readonly s13: "var(--space-13)";
+        readonly s14: "var(--space-14)";
+        readonly s15: "var(--space-15)";
+        readonly xs: "var(--space-xs)";
+        readonly sm: "var(--space-sm)";
+        readonly md: "var(--space-md)";
+        readonly lg: "var(--space-lg)";
+        readonly xl: "var(--space-xl)";
+        readonly '2xl': "var(--space-2xl)";
+        readonly '3xl': "var(--space-3xl)";
+    };
+    readonly radius: {
+        readonly r1: "var(--radius-1)";
+        readonly r2: "var(--radius-2)";
+        readonly r3: "var(--radius-3)";
+        readonly r4: "var(--radius-4)";
+        readonly r5: "var(--radius-5)";
+        readonly r6: "var(--radius-6)";
+        readonly r7: "var(--radius-7)";
+        readonly xs: "var(--radius-xs)";
+        readonly sm: "var(--radius-sm)";
+        readonly md: "var(--radius-md)";
+        readonly lg: "var(--radius-lg)";
+        readonly xl: "var(--radius-xl)";
+        readonly round: "var(--radius-round)";
+        readonly pill: "var(--radius-pill)";
+    };
+    readonly shadow: {
+        readonly sm: "var(--shadow-sm)";
+        readonly md: "var(--shadow-md)";
+        readonly lg: "var(--shadow-lg)";
+        readonly raised: "var(--shadow-raised)";
+        readonly overlay: "var(--shadow-overlay)";
+    };
+    readonly font: {
+        readonly fancy: "var(--font-fancy)";
+        readonly body: "var(--font-body)";
+        readonly numeric: "var(--font-numeric)";
+    };
+    readonly fontSize: {
+        readonly f1: "var(--font-size-1)";
+        readonly f2: "var(--font-size-2)";
+        readonly f3: "var(--font-size-3)";
+        readonly f4: "var(--font-size-4)";
+        readonly f5: "var(--font-size-5)";
+        readonly f6: "var(--font-size-6)";
+        readonly f7: "var(--font-size-7)";
+    };
+    readonly fontWeight: {
+        readonly regular: "var(--font-weight-regular)";
+        readonly medium: "var(--font-weight-medium)";
+        readonly semibold: "var(--font-weight-semibold)";
+        readonly bold: "var(--font-weight-bold)";
+    };
+    readonly lineHeight: {
+        readonly tight: "var(--line-height-tight)";
+        readonly snug: "var(--line-height-snug)";
+        readonly body: "var(--line-height-body)";
+        readonly loose: "var(--line-height-loose)";
+    };
+    readonly letterSpacing: {
+        readonly tight: "var(--letter-spacing-tight)";
+        readonly normal: "var(--letter-spacing-normal)";
+        readonly wide: "var(--letter-spacing-wide)";
+    };
+    readonly duration: {
+        readonly fastest: "var(--duration-fastest)";
+        readonly fast: "var(--duration-fast)";
+        readonly normal: "var(--duration-normal)";
+        readonly slow: "var(--duration-slow)";
+        readonly slowest: "var(--duration-slowest)";
+    };
+    readonly easing: {
+        readonly snappy: "var(--easing-snappy)";
+        readonly inQuad: "var(--ease-in-quad)";
+        readonly inCubic: "var(--ease-in-cubic)";
+        readonly inQuart: "var(--ease-in-quart)";
+        readonly inQuint: "var(--ease-in-quint)";
+        readonly inExpo: "var(--ease-in-expo)";
+        readonly inCirc: "var(--ease-in-circ)";
+        readonly outQuad: "var(--ease-out-quad)";
+        readonly outCubic: "var(--ease-out-cubic)";
+        readonly outQuart: "var(--ease-out-quart)";
+        readonly outQuint: "var(--ease-out-quint)";
+        readonly outExpo: "var(--ease-out-expo)";
+        readonly outCirc: "var(--ease-out-circ)";
+        readonly inOutQuad: "var(--ease-in-out-quad)";
+        readonly inOutCubic: "var(--ease-in-out-cubic)";
+        readonly inOutQuart: "var(--ease-in-out-quart)";
+        readonly inOutQuint: "var(--ease-in-out-quint)";
+        readonly inOutExpo: "var(--ease-in-out-expo)";
+        readonly inOutCirc: "var(--ease-in-out-circ)";
+    };
+    readonly transition: {
+        readonly all: "var(--transition-all)";
+        readonly shadow: "var(--transition-shadow)";
+        readonly colors: "var(--transition-colors)";
+        readonly background: "var(--transition-background)";
+        readonly border: "var(--transition-border)";
+        readonly opacity: "var(--transition-opacity)";
+        readonly transform: "var(--transition-transform)";
+    };
+    readonly colorChannel: {
+        readonly accent: "var(--color-channel-accent)";
+        readonly success: "var(--color-channel-success)";
+        readonly danger: "var(--color-channel-danger)";
+        readonly warning: "var(--color-channel-warning)";
+        readonly highlight: "var(--color-channel-highlight)";
+        readonly white: "var(--color-channel-white)";
+        readonly black: "var(--color-channel-black)";
+    };
+    readonly effectChannel: {
+        readonly accent: "var(--effect-channel-accent)";
+        readonly danger: "var(--effect-channel-danger)";
+        readonly focusOutline: "var(--effect-channel-focus-outline)";
+        readonly glass: "var(--effect-channel-glass)";
+        readonly highlight: "var(--effect-channel-highlight)";
+        readonly shadow: "var(--effect-channel-shadow)";
+    };
+    readonly effect: {
+        readonly accentRingSoft: "var(--effect-accent-ring-soft)";
+        readonly focusOutline: "var(--effect-focus-outline)";
+        readonly focusOutlineHighlight: "var(--effect-focus-outline-highlight)";
+        readonly focusShadowAccent: "var(--effect-focus-shadow-accent)";
+        readonly focusShadowHighlight: "var(--effect-focus-shadow-highlight)";
+        readonly glassBorder: "var(--effect-glass-border)";
+        readonly glassBorderSoft: "var(--effect-glass-border-soft)";
+        readonly glassRing: "var(--effect-glass-ring)";
+        readonly glassShadowDepth: "var(--effect-glass-shadow-depth)";
+        readonly glassShadowSoft: "var(--effect-glass-shadow-soft)";
+        readonly glassShell: "var(--effect-glass-shell)";
+        readonly glassSurface: "var(--effect-glass-surface)";
+        readonly glowBorder: "var(--effect-glow-border)";
+        readonly glowCool: "var(--effect-glow-cool)";
+        readonly glowOutline: "var(--effect-glow-outline)";
+        readonly glowSheenEnd: "var(--effect-glow-sheen-end)";
+        readonly glowSheenStart: "var(--effect-glow-sheen-start)";
+        readonly glowVeil: "var(--effect-glow-veil)";
+        readonly glowWarm: "var(--effect-glow-warm)";
+        readonly glossLineFaint: "var(--effect-gloss-line-faint)";
+        readonly glossLineMedium: "var(--effect-gloss-line-medium)";
+        readonly glossLineSoft: "var(--effect-gloss-line-soft)";
+        readonly glossLineStrong: "var(--effect-gloss-line-strong)";
+        readonly highlightTrail: "var(--effect-highlight-trail)";
+        readonly overlayScrim: "var(--effect-overlay-scrim)";
+        readonly selectionAccent: "var(--effect-selection-accent)";
+        readonly shadowFaint: "var(--effect-shadow-faint)";
+        readonly shadowInteractive: "var(--effect-shadow-interactive)";
+        readonly shadowMuted: "var(--effect-shadow-muted)";
+        readonly shadowSoft: "var(--effect-shadow-soft)";
+        readonly shadowStrong: "var(--effect-shadow-strong)";
+        readonly thumbShadow: "var(--effect-thumb-shadow)";
+        readonly tooltipSurface: "var(--effect-tooltip-surface)";
+    };
+    readonly utils: {
+        readonly opacity: (channel: string, value: number | string) => string;
+    };
+    readonly textStyle: {
+        readonly heading1: "var(--text-heading-1)";
+        readonly heading2: "var(--text-heading-2)";
+        readonly heading3: "var(--text-heading-3)";
+        readonly body: "var(--text-body)";
+        readonly bodyEmphasis: "var(--text-body-emphasis)";
+        readonly small: "var(--text-small)";
+        readonly caption: "var(--text-caption)";
+    };
+    readonly zIndex: {
+        readonly n1: "var(--z-index-n1)";
+        readonly z0: "var(--z-index-0)";
+        readonly z1: "var(--z-index-1)";
+        readonly z2: "var(--z-index-2)";
+        readonly z3: "var(--z-index-3)";
+        readonly z4: "var(--z-index-4)";
+        readonly z5: "var(--z-index-5)";
+        readonly max: "var(--z-index-max)";
+    };
+    readonly breakpoint: {
+        readonly sm: "var(--breakpoint-sm)";
+        readonly md: "var(--breakpoint-md)";
+        readonly lg: "var(--breakpoint-lg)";
+        readonly xl: "var(--breakpoint-xl)";
+    };
+    readonly focusRingWidth: "var(--focus-ring-width)";
+};