@zyncat/ui 0.11.0 → 0.12.0

package/dist/types/tokens/component-styles.generated.d.ts

@@ -0,0 +1,262 @@
+import type { CSSProperties } from 'react';
+/**
+ * Inline styles for Confetti, including its `--confetti-*` knobs.
+ *
+ * One interface per component that publishes scoped properties: the design tokens plus
+ * that component's own knobs, and nothing from any other component.
+ *
+ * Generated from the token and component CSS by `scripts/gen-theme.mjs` - `pnpm sync` rebuilds it.
+ */
+export interface ConfettiStyle extends CSSProperties {
+    /** `--confetti-paper-1`. Default: `oklch(0.53 0.2 288)`. */
+    '--confetti-paper-1'?: string | number;
+    /** `--confetti-paper-2`. Default: `var(--accent)`. */
+    '--confetti-paper-2'?: string | number;
+    /** `--confetti-paper-3`. Default: `oklch(0.78 0.115 62)`. */
+    '--confetti-paper-3'?: string | number;
+    /** `--confetti-paper-4`. Default: `oklch(0.67 0.18 12)`. */
+    '--confetti-paper-4'?: string | number;
+    /** `--confetti-paper-5`. Default: `var(--text-strong)`. */
+    '--confetti-paper-5'?: string | number;
+    /** `--confetti-weights`. Default: `1 1 1 1 0.45`. */
+    '--confetti-weights'?: string | number;
+    /** `--confetti-ink`. Default: `var(--text-strong)`. */
+    '--confetti-ink'?: string | number;
+    /** `--confetti-light`. Default: `var(--bg-surface)`. */
+    '--confetti-light'?: string | number;
+    /** `--confetti-shade`. Default: `42%`. */
+    '--confetti-shade'?: string | number;
+    /** `--confetti-gloss`. Default: `66%`. */
+    '--confetti-gloss'?: string | number;
+    /** `--confetti-layer`. Default: `var(--layer-toast)`. */
+    '--confetti-layer'?: string | number;
+    /** `--confetti-reverse-1`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-1))`. */
+    '--confetti-reverse-1'?: string | number;
+    /** `--confetti-reverse-2`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-2))`. */
+    '--confetti-reverse-2'?: string | number;
+    /** `--confetti-reverse-3`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-3))`. */
+    '--confetti-reverse-3'?: string | number;
+    /** `--confetti-reverse-4`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-4))`. */
+    '--confetti-reverse-4'?: string | number;
+    /** `--confetti-reverse-5`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-5))`. */
+    '--confetti-reverse-5'?: string | number;
+    /** `--confetti-sheen-1`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-1))`. */
+    '--confetti-sheen-1'?: string | number;
+    /** `--confetti-sheen-2`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-2))`. */
+    '--confetti-sheen-2'?: string | number;
+    /** `--confetti-sheen-3`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-3))`. */
+    '--confetti-sheen-3'?: string | number;
+    /** `--confetti-sheen-4`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-4))`. */
+    '--confetti-sheen-4'?: string | number;
+    /** `--confetti-sheen-5`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-5))`. */
+    '--confetti-sheen-5'?: string | number;
+}
+/** Inline styles for FlowField, including its `--flow-field-*` knobs. */
+export interface FlowFieldStyle extends CSSProperties {
+    /** `--flow-field-ink`. Default: `var(--text-subtle)`. */
+    '--flow-field-ink'?: string | number;
+    /** `--flow-field-accent`. Default: `var(--accent)`. */
+    '--flow-field-accent'?: string | number;
+    /** `--flow-field-min-height`. Default: `var(--space-10)`. */
+    '--flow-field-min-height'?: string | number;
+    /** `--flow-field-ramp-0`. Default: `var(--flow-field-ink)`. */
+    '--flow-field-ramp-0'?: string | number;
+    /** `--flow-field-ramp-1`. Default: `color-mix(in oklab, var(--flow-field-accent) 9%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-1'?: string | number;
+    /** `--flow-field-ramp-2`. Default: `color-mix(in oklab, var(--flow-field-accent) 18%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-2'?: string | number;
+    /** `--flow-field-ramp-3`. Default: `color-mix(in oklab, var(--flow-field-accent) 27%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-3'?: string | number;
+    /** `--flow-field-ramp-4`. Default: `color-mix(in oklab, var(--flow-field-accent) 36%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-4'?: string | number;
+    /** `--flow-field-ramp-5`. Default: `color-mix(in oklab, var(--flow-field-accent) 45%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-5'?: string | number;
+    /** `--flow-field-ramp-6`. Default: `color-mix(in oklab, var(--flow-field-accent) 55%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-6'?: string | number;
+    /** `--flow-field-ramp-7`. Default: `color-mix(in oklab, var(--flow-field-accent) 64%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-7'?: string | number;
+    /** `--flow-field-ramp-8`. Default: `color-mix(in oklab, var(--flow-field-accent) 73%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-8'?: string | number;
+    /** `--flow-field-ramp-9`. Default: `color-mix(in oklab, var(--flow-field-accent) 82%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-9'?: string | number;
+    /** `--flow-field-ramp-10`. Default: `color-mix(in oklab, var(--flow-field-accent) 91%, var(--flow-field-ink))`. */
+    '--flow-field-ramp-10'?: string | number;
+    /** `--flow-field-ramp-11`. Default: `var(--flow-field-accent)`. */
+    '--flow-field-ramp-11'?: string | number;
+}
+/** Inline styles for Lens, including its `--lens-*` knobs. */
+export interface LensStyle extends CSSProperties {
+    /** `--lens-ink`. Default: `var(--text-strong)`. */
+    '--lens-ink'?: string | number;
+    /** `--lens-surface`. Default: `var(--bg-surface)`. */
+    '--lens-surface'?: string | number;
+    /** `--lens-edge`. Default: `color-mix(in oklab, var(--lens-ink) 16%, transparent)`. */
+    '--lens-edge'?: string | number;
+    /** `--lens-highlight`. Default: `color-mix(in oklab, var(--bg-surface) 90%, transparent)`. */
+    '--lens-highlight'?: string | number;
+    /** `--lens-vignette-mid`. Default: `5%`. */
+    '--lens-vignette-mid'?: string | number;
+    /** `--lens-vignette-edge`. Default: `15%`. */
+    '--lens-vignette-edge'?: string | number;
+    /** `--lens-fringe-warm`. Default: `oklch(0.72 0.16 12 / 0.3)`. */
+    '--lens-fringe-warm'?: string | number;
+    /** `--lens-fringe-cool`. Default: `oklch(0.7 0.15 265 / 0.34)`. */
+    '--lens-fringe-cool'?: string | number;
+    /** `--lens-rim-start`. Default: `79%`. */
+    '--lens-rim-start'?: string | number;
+    /** `--lens-rim-end`. Default: `87%`. */
+    '--lens-rim-end'?: string | number;
+}
+/** Inline styles for MorphingText, including its `--morphing-text-*` knobs. */
+export interface MorphingTextStyle extends CSSProperties {
+    /** `--morphing-text-ink`. Default: `var(--text-strong)`. */
+    '--morphing-text-ink'?: string | number;
+    /** `--morphing-text-size`. Default: `var(--size-display-lg)`. */
+    '--morphing-text-size'?: string | number;
+    /** `--morphing-text-weight`. Default: `var(--weight-medium)`. */
+    '--morphing-text-weight'?: string | number;
+    /** `--morphing-text-leading`. Default: `1.2`. */
+    '--morphing-text-leading'?: string | number;
+    /** `--morphing-text-tracking`. Default: `var(--tracking-display)`. */
+    '--morphing-text-tracking'?: string | number;
+    /** `--morphing-text-smear`. Default: `1`. */
+    '--morphing-text-smear'?: string | number;
+    /** `--morphing-text-rule-ink`. Default: `var(--text-strong)`. */
+    '--morphing-text-rule-ink'?: string | number;
+    /** `--morphing-text-rule-accent`. Default: `var(--accent)`. */
+    '--morphing-text-rule-accent'?: string | number;
+    /** `--morphing-text-rule-height`. Default: `1px`. */
+    '--morphing-text-rule-height'?: string | number;
+    /** `--morphing-text-rule-gap`. Default: `var(--space-3)`. */
+    '--morphing-text-rule-gap'?: string | number;
+    /** `--morphing-text-rule-rest`. Default: `0.1`. */
+    '--morphing-text-rule-rest'?: string | number;
+    /** `--morphing-text-rule-lift`. Default: `0.3`. */
+    '--morphing-text-rule-lift'?: string | number;
+}
+/** Inline styles for Odometer, including its `--odometer-*` knobs. */
+export interface OdometerStyle extends CSSProperties {
+    /** `--odometer-cell`. Default: `1em`. */
+    '--odometer-cell'?: string | number;
+    /** `--odometer-digit`. Default: `1ch`. */
+    '--odometer-digit'?: string | number;
+    /** `--odometer-gap`. Default: `0.02em`. */
+    '--odometer-gap'?: string | number;
+    /** `--odometer-ink`. Default: `var(--text-strong)`. */
+    '--odometer-ink'?: string | number;
+    /** `--odometer-accent`. Default: `var(--accent)`. */
+    '--odometer-accent'?: string | number;
+    /** `--odometer-separator-ink`. Default: `var(--text-muted)`. */
+    '--odometer-separator-ink'?: string | number;
+    /** `--odometer-size`. Default: `var(--size-display)`. */
+    '--odometer-size'?: string | number;
+    /** `--odometer-weight`. Default: `var(--weight-medium)`. */
+    '--odometer-weight'?: string | number;
+}
+/** Inline styles for TypingLines, including its `--typing-lines-*` knobs. */
+export interface TypingLinesStyle extends CSSProperties {
+    /** `--typing-lines-ink`. Default: `var(--text-strong)`. */
+    '--typing-lines-ink'?: string | number;
+    /** `--typing-lines-caret-ink`. Default: `var(--accent)`. */
+    '--typing-lines-caret-ink'?: string | number;
+    /** `--typing-lines-size`. Default: `var(--size-title)`. */
+    '--typing-lines-size'?: string | number;
+    /** `--typing-lines-weight`. Default: `var(--weight-regular)`. */
+    '--typing-lines-weight'?: string | number;
+    /** `--typing-lines-leading`. Default: `1.4`. */
+    '--typing-lines-leading'?: string | number;
+    /** `--typing-lines-blink`. Default: `1080ms`. */
+    '--typing-lines-blink'?: string | number;
+    /** `--typing-lines-caret-gap`. Default: `0.12em`. */
+    '--typing-lines-caret-gap'?: string | number;
+}
+/** Inline styles for WeightField, including its `--weight-field-*` knobs. */
+export interface WeightFieldStyle extends CSSProperties {
+    /** `--weight-field-ink`. Default: `var(--text-strong)`. */
+    '--weight-field-ink'?: string | number;
+    /** `--weight-field-size`. Default: `6rem`. */
+    '--weight-field-size'?: string | number;
+    /** `--weight-field-leading`. Default: `1`. */
+    '--weight-field-leading'?: string | number;
+    /** `--weight-field-align`. Default: `center`. */
+    '--weight-field-align'?: string | number;
+    /** `--weight-field-pad`. Default: `var(--space-6) var(--space-4)`. */
+    '--weight-field-pad'?: string | number;
+    /** `--weight-field-tracking`. Default: `-0.05em`. */
+    '--weight-field-tracking'?: string | number;
+    /** `--weight-field-rest-weight`. Default: `300`. */
+    '--weight-field-rest-weight'?: string | number;
+    /** `--weight-field-far-weight`. Default: `400`. */
+    '--weight-field-far-weight'?: string | number;
+    /** `--weight-field-near-weight`. Default: `600`. */
+    '--weight-field-near-weight'?: string | number;
+    /** `--weight-field-peak-weight`. Default: `900`. */
+    '--weight-field-peak-weight'?: string | number;
+    /** `--weight-field-hover-padding`. Default: `calc(1em / 12)`. */
+    '--weight-field-hover-padding'?: string | number;
+    /** `--weight-field-stroke`. Default: `calc(1em * 125 / 6000)`. */
+    '--weight-field-stroke'?: string | number;
+    /** `--weight-field-stroke-peak`. Default: `calc(var(--weight-field-stroke) * 2)`. */
+    '--weight-field-stroke-peak'?: string | number;
+    /** `--weight-field-duration`. Default: `400ms`. */
+    '--weight-field-duration'?: string | number;
+    /** `--weight-field-ease`. Default: `ease`. */
+    '--weight-field-ease'?: string | number;
+    /** `--weight-field-ramp`. Default: `calc(var(--weight-field-duration) / var(--weight-field-speed))`. */
+    '--weight-field-ramp'?: string | number;
+}
+/** Inline styles for SupportRail, including its `--support-rail-*` knobs. */
+export interface SupportRailStyle extends CSSProperties {
+    /** `--support-rail-width`. Default: `318px`. */
+    '--support-rail-width'?: string | number;
+    /** `--support-rail-needle-width`. Default: `42px`. */
+    '--support-rail-needle-width'?: string | number;
+    /** `--support-rail-needle-height`. Default: `150px`. */
+    '--support-rail-needle-height'?: string | number;
+    /** `--support-rail-needle-duck`. Default: `0.55`. */
+    '--support-rail-needle-duck'?: string | number;
+    /** `--support-rail-needle-tracking`. Default: `0.22em`. */
+    '--support-rail-needle-tracking'?: string | number;
+    /** `--support-rail-caps-tracking`. Default: `0.13em`. */
+    '--support-rail-caps-tracking'?: string | number;
+    /** `--support-rail-grabber-width`. Default: `13px`. */
+    '--support-rail-grabber-width'?: string | number;
+    /** `--support-rail-grabber-pill`. Default: `34px`. */
+    '--support-rail-grabber-pill'?: string | number;
+    /** `--support-rail-live-size`. Default: `6px`. */
+    '--support-rail-live-size'?: string | number;
+    /** `--support-rail-live-reach`. Default: `2.6`. */
+    '--support-rail-live-reach'?: string | number;
+    /** `--support-rail-rule-width`. Default: `1.5px`. */
+    '--support-rail-rule-width'?: string | number;
+    /** `--support-rail-rule-height`. Default: `20px`. */
+    '--support-rail-rule-height'?: string | number;
+    /** `--support-rail-row-pad-block`. Default: `var(--space-4)`. */
+    '--support-rail-row-pad-block'?: string | number;
+    /** `--support-rail-row-pad-inline`. Default: `var(--space-4)`. */
+    '--support-rail-row-pad-inline'?: string | number;
+    /** `--support-rail-row-nudge`. Default: `5px`. */
+    '--support-rail-row-nudge'?: string | number;
+    /** `--support-rail-surface`. Default: `var(--bg-subtle)`. */
+    '--support-rail-surface'?: string | number;
+    /** `--support-rail-surface-raised`. Default: `var(--bg-surface)`. */
+    '--support-rail-surface-raised'?: string | number;
+    /** `--support-rail-line`. Default: `var(--border-default)`. */
+    '--support-rail-line'?: string | number;
+    /** `--support-rail-line-soft`. Default: `var(--border-subtle)`. */
+    '--support-rail-line-soft'?: string | number;
+    /** `--support-rail-accent`. Default: `var(--accent)`. */
+    '--support-rail-accent'?: string | number;
+    /** `--support-rail-live-color`. Default: `var(--success)`. */
+    '--support-rail-live-color'?: string | number;
+    /** `--support-rail-radius`. Default: `var(--radius-2xl)`. */
+    '--support-rail-radius'?: string | number;
+    /** `--support-rail-open-duration`. Default: `calc(var(--duration-slower) * 1.4)`. */
+    '--support-rail-open-duration'?: string | number;
+    /** `--support-rail-close-duration`. Default: `var(--duration-slower)`. */
+    '--support-rail-close-duration'?: string | number;
+    /** `--support-rail-needle-delay`. Default: `calc(var(--duration-slow) * 0.5)`. */
+    '--support-rail-needle-delay'?: string | number;
+    /** `--support-rail-stagger`. Default: `calc(var(--duration-fast) * 0.3)`. */
+    '--support-rail-stagger'?: string | number;
+}

package/dist/{motion-scale-Canq4stZ.d.ts → types/tokens/motion-scale.d.ts}

@@ -5,7 +5,7 @@
  *  - `slower` 450ms - large-surface movement: dialogs, sheets, page-scale reveals.
  *  - `slowest` 900ms - hero-scale movement: card expansion, container transforms. The scale's
  *    ceiling: anything longer is choreography and belongs to Motion, not a transition token. */
-type DurationToken = 'fast' | 'base' | 'slow' | 'slower' | 'slowest';
+export type DurationToken = 'fast' | 'base' | 'slow' | 'slower' | 'slowest';
 /** Names of the brand easing curves (`--ease-*`):
  *  - `standard` cubic-bezier(0.2, 0, 0, 1) - brisk start, soft landing; the default for state changes.
  *  - `entrance` cubic-bezier(0.16, 1, 0.3, 1) - hard deceleration; content arriving on screen.
@@ -13,6 +13,6 @@ type DurationToken = 'fast' | 'base' | 'slow' | 'slower' | 'slowest';
  *  - `spring` cubic-bezier(0.34, 1.4, 0.5, 1) - overshoots then settles; playful confirmations.
  *  - `glide` cubic-bezier(0.55, 0, 0.15, 1) - symmetric in-out travel; a persistent element moving
  *    between positions, never enter/exit. */
-type EaseToken = 'standard' | 'entrance' | 'exit' | 'spring' | 'glide';
-
-export type { DurationToken as D, EaseToken as E };
+export type EaseToken = 'standard' | 'entrance' | 'exit' | 'spring' | 'glide';
+export type DistanceToken = 'sm' | 'md' | 'lg';
+export type ScaleToken = 'panel' | 'floating' | 'chip';

package/dist/{motion-tokens.d.ts → types/tokens/motion-tokens.d.ts}

@@ -1,6 +1,5 @@
-import { D as DurationToken, E as EaseToken } from './motion-scale-Canq4stZ.js';
-
-interface MotionTransition {
+import type { DistanceToken, DurationToken, EaseToken, ScaleToken } from './motion-scale';
+export interface MotionTransition {
     type?: 'spring' | 'tween' | 'inertia' | 'keyframes';
     duration?: number;
     ease?: Bezier | 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'circInOut' | 'backIn' | 'backOut' | 'backInOut' | 'anticipate';
@@ -8,12 +7,14 @@ interface MotionTransition {
     visualDuration?: number;
     delay?: number;
 }
-type Bezier = [number, number, number, number];
-
-interface MotionTokens {
+export type Bezier = [number, number, number, number];
+export type { DistanceToken, DurationToken, EaseToken, ScaleToken } from './motion-scale';
+export interface MotionTokens {
     /** seconds - fast 0.14 - base 0.2 - slow 0.3 - slower 0.45 - slowest 0.9 */
     dur: Record<DurationToken, number>;
     ease: Record<EaseToken, Bezier>;
+    dist: Record<DistanceToken, number>;
+    scale: Record<ScaleToken, number>;
     /** ready-made Motion transitions */
     t: {
         enter: MotionTransition;
@@ -23,6 +24,5 @@ interface MotionTokens {
     };
     reduced: boolean;
 }
-declare const UIMotion: MotionTokens;
-
-export { type Bezier, DurationToken, EaseToken, type MotionTokens, type MotionTransition, UIMotion, UIMotion as default };
+export declare const UIMotion: MotionTokens;
+export default UIMotion;