@tac-ui/tokens 0.1.0 → 1.0.0

package/dist/motion-DrXQxG6N.d.ts

@@ -0,0 +1,668 @@
+/**
+ * Component-specific tokens — Tac UI brand.
+ * Increased padding for airy feel, harmonious radii.
+ */
+declare const component: {
+    readonly button: {
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingX: 16;
+            readonly paddingY: 6;
+            readonly fontSize: 13;
+            readonly borderRadius: 8;
+            readonly iconSize: 16;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly paddingX: 20;
+            readonly paddingY: 10;
+            readonly fontSize: 15;
+            readonly borderRadius: 12;
+            readonly iconSize: 18;
+        };
+        readonly lg: {
+            readonly height: 50;
+            readonly paddingX: 28;
+            readonly paddingY: 14;
+            readonly fontSize: 17;
+            readonly borderRadius: 14;
+            readonly iconSize: 20;
+        };
+    };
+    readonly input: {
+        readonly height: 44;
+        readonly paddingX: 16;
+        readonly paddingY: 12;
+        readonly fontSize: 15;
+        readonly borderRadius: 12;
+        readonly iconSize: 18;
+        readonly iconPadding: 42;
+    };
+    readonly card: {
+        readonly padding: 24;
+        readonly gap: 16;
+        readonly borderRadius: 16;
+        readonly titleSize: 17;
+        readonly bodySize: 15;
+    };
+    readonly badge: {
+        readonly paddingX: 12;
+        readonly paddingY: 6;
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly borderRadius: 9999;
+    };
+    readonly checkbox: {
+        readonly wrapperPaddingX: 16;
+        readonly wrapperPaddingY: 10;
+        readonly wrapperRadius: 10;
+        readonly gap: 12;
+        readonly size: 22;
+        readonly borderRadius: 6;
+        readonly borderWidth: 1.5;
+        readonly iconSize: 14;
+        readonly labelSize: 15;
+    };
+    readonly radio: {
+        readonly wrapperPaddingX: 16;
+        readonly wrapperPaddingY: 10;
+        readonly wrapperRadius: 10;
+        readonly gap: 12;
+        readonly size: 22;
+        readonly borderWidth: 1.5;
+        readonly checkedBorderWidth: 6;
+        readonly labelSize: 15;
+    };
+    readonly switch: {
+        readonly width: 51;
+        readonly height: 31;
+        readonly thumbSize: 27;
+        readonly thumbOffset: 2;
+        readonly thumbTranslateOn: 22;
+        readonly thumbTranslateOff: 2;
+    };
+    readonly chip: {
+        readonly paddingX: 16;
+        readonly paddingY: 8;
+        readonly fontSize: 13;
+        readonly borderRadius: 9999;
+        readonly iconSize: 14;
+        readonly iconPaddingX: 12;
+    };
+    readonly tabs: {
+        readonly primary: {
+            readonly paddingX: 20;
+            readonly paddingY: 12;
+            readonly fontSize: 14;
+            readonly indicatorHeight: 2;
+        };
+        readonly secondary: {
+            readonly paddingX: 20;
+            readonly paddingY: 8;
+            readonly fontSize: 13;
+            readonly containerPadding: 4;
+            readonly containerRadius: 10;
+            readonly itemRadius: 8;
+        };
+    };
+    readonly slider: {
+        readonly trackHeight: 4;
+        readonly thumbSize: 28;
+        readonly thumbBorderWidth: 0;
+    };
+    readonly tooltip: {
+        readonly simple: {
+            readonly paddingX: 14;
+            readonly paddingY: 8;
+            readonly fontSize: 13;
+            readonly borderRadius: 10;
+        };
+        readonly rich: {
+            readonly paddingX: 16;
+            readonly paddingY: 10;
+            readonly maxWidth: 240;
+            readonly borderRadius: 10;
+        };
+        readonly delay: 150;
+    };
+    readonly avatar: {
+        readonly sm: {
+            readonly size: 28;
+            readonly fontSize: 11;
+        };
+        readonly md: {
+            readonly size: 36;
+            readonly fontSize: 14;
+        };
+        readonly lg: {
+            readonly size: 48;
+            readonly fontSize: 18;
+        };
+        readonly xl: {
+            readonly size: 64;
+            readonly fontSize: 24;
+        };
+        readonly statusDot: 10;
+        readonly statusBorder: 2;
+    };
+    readonly divider: {
+        readonly thickness: 1;
+        readonly thickThickness: 1;
+        readonly insetMargin: 64;
+        readonly labelSize: 12;
+    };
+    readonly progress: {
+        readonly linear: {
+            readonly height: 6;
+            readonly borderRadius: 9999;
+        };
+        readonly circular: {
+            readonly strokeWidth: 4;
+            readonly textSize: 14;
+        };
+    };
+    readonly snackbar: {
+        readonly paddingTop: 16;
+        readonly paddingRight: 18;
+        readonly paddingBottom: 16;
+        readonly paddingLeft: 22;
+        readonly borderRadius: 12;
+        readonly gap: 12;
+        readonly iconSize: 18;
+        readonly messageSize: 14;
+        readonly actionPaddingX: 14;
+        readonly actionPaddingY: 6;
+        readonly actionRadius: 8;
+        readonly actionSize: 13;
+    };
+    readonly dialog: {
+        readonly width: 320;
+        readonly borderRadius: 14;
+        readonly headerPaddingX: 24;
+        readonly headerPaddingY: 20;
+        readonly footerPaddingX: 24;
+        readonly footerPaddingY: 20;
+        readonly titleSize: 17;
+        readonly descSize: 13;
+        readonly footerGap: 8;
+    };
+    readonly animatedToggle: {
+        readonly size: 40;
+        readonly borderRadius: 10;
+        readonly iconSize: 20;
+    };
+};
+
+declare const motion: {
+    readonly duration: {
+        readonly instant: 80;
+        readonly fast: 150;
+        readonly normal: 220;
+        readonly slow: 320;
+        readonly complex: 450;
+    };
+    readonly easing: {
+        /** Slight overshoot with smooth natural deceleration. */
+        readonly standard: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+        /** Exit easing — fast acceleration, abrupt departure. */
+        readonly easeIn: "cubic-bezier(0.42, 0, 1, 1)";
+        /** Entrance easing — gentle deceleration without overshoot. */
+        readonly easeOut: "cubic-bezier(0, 0, 0.58, 1)";
+        /** Symmetric ease — smooth in both directions. */
+        readonly easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+        /** Restrained overshoot — for toggles, switches, confirmatory feedback. */
+        readonly bounce: "cubic-bezier(0.34, 1.3, 0.64, 1)";
+        /** Subtle spring feel — deliberate physical presence. */
+        readonly spring: "cubic-bezier(0.22, 1.1, 0.36, 1)";
+        /** Subtle rubber-band — elastic resistance with quick snap back. */
+        readonly elastic: "cubic-bezier(0.68, -0.1, 0.265, 1.1)";
+    };
+    /** Framer Motion spring presets — tuned with higher damping for natural deceleration. */
+    readonly spring: {
+        /** Quick interactive feedback — subtle and responsive. */
+        readonly snappy: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 32;
+        };
+        /** Smooth state changes — gentle spring resolution. */
+        readonly gentle: {
+            readonly type: "spring";
+            readonly stiffness: 180;
+            readonly damping: 30;
+        };
+        /** Toggle/switch feel — restrained with minimal bounce. */
+        readonly bouncy: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 30;
+        };
+        /** Large layout shifts — deliberate mass with controlled deceleration. */
+        readonly slow: {
+            readonly type: "spring";
+            readonly stiffness: 140;
+            readonly damping: 28;
+        };
+        /** Press/release with life — elastic resistance, mass gives it weight. */
+        readonly elastic: {
+            readonly type: "spring";
+            readonly stiffness: 220;
+            readonly damping: 28;
+            readonly mass: 0.8;
+        };
+        /** Elements appearing — spring resolves cleanly with organic arrival. */
+        readonly entrance: {
+            readonly type: "spring";
+            readonly stiffness: 180;
+            readonly damping: 28;
+            readonly mass: 0.9;
+        };
+    };
+    /** Mass-differentiated spring configs — tuned higher damping for smooth deceleration. */
+    readonly tacSpring: {
+        readonly default: {
+            readonly type: "spring";
+            readonly stiffness: 300;
+            readonly damping: 35;
+            readonly mass: 1;
+        };
+        readonly light: {
+            readonly type: "spring";
+            readonly stiffness: 350;
+            readonly damping: 35;
+            readonly mass: 0.5;
+        };
+        readonly heavy: {
+            readonly type: "spring";
+            readonly stiffness: 250;
+            readonly damping: 38;
+            readonly mass: 1.5;
+        };
+        readonly magnetic: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 40;
+            readonly mass: 0.8;
+        };
+        readonly entrance: {
+            readonly type: "spring";
+            readonly stiffness: 220;
+            readonly damping: 32;
+            readonly mass: 1.2;
+        };
+    };
+    /** Standard animation keyframe presets for reuse across components. */
+    readonly keyframes: {
+        readonly fadeIn: {
+            readonly from: {
+                readonly opacity: "0";
+            };
+            readonly to: {
+                readonly opacity: "1";
+            };
+        };
+        readonly fadeOut: {
+            readonly from: {
+                readonly opacity: "1";
+            };
+            readonly to: {
+                readonly opacity: "0";
+            };
+        };
+        /** Blur entrance — element fades in from blurry with subtle upward spring motion. */
+        readonly blurFadeIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly filter: "blur(4px)";
+                readonly transform: "translateY(4px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly filter: "blur(0px)";
+                readonly transform: "translateY(0)";
+            };
+        };
+        /** Blur scale entrance — deblurs while gently scaling up from slight compression. */
+        readonly blurScaleIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly filter: "blur(3px)";
+                readonly transform: "scale(0.98)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly filter: "blur(0px)";
+                readonly transform: "scale(1)";
+            };
+        };
+        /** Slide entrance from below — element springs up from offset position. */
+        readonly slideInUp: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateY(5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateY(0)";
+            };
+        };
+        /** Slide entrance from above — element springs down from offset position. */
+        readonly slideInDown: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateY(-5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateY(0)";
+            };
+        };
+        /** Slide entrance from left — element springs in from offset. */
+        readonly slideInLeft: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateX(-5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateX(0)";
+            };
+        };
+        /** Slide entrance from right — element springs in from offset. */
+        readonly slideInRight: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateX(5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateX(0)";
+            };
+        };
+        /** Scale entrance — element inflates from slight compression. */
+        readonly scaleIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "scale(0.98)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "scale(1)";
+            };
+        };
+        readonly scaleOut: {
+            readonly from: {
+                readonly opacity: "1";
+                readonly transform: "scale(1)";
+            };
+            readonly to: {
+                readonly opacity: "0";
+                readonly transform: "scale(0.98)";
+            };
+        };
+        /** Zoom entrance — element arrives from meaningful distance, not just nearby. */
+        readonly zoomIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "scale(0.92)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "scale(1)";
+            };
+        };
+        /** Press feedback — subtle scale to confirm tap/click with physical weight. */
+        readonly pressDown: {
+            readonly from: {
+                readonly transform: "scale(1)";
+            };
+            readonly to: {
+                readonly transform: "scale(0.98)";
+            };
+        };
+        /** Press keyframes — clean squish held at destination. */
+        readonly elasticPress: {
+            readonly '0%': {
+                readonly transform: "scale(1)";
+            };
+            readonly '50%': {
+                readonly transform: "scale(0.98)";
+            };
+            readonly '100%': {
+                readonly transform: "scale(0.98)";
+            };
+        };
+        /** Release keyframes — spring overshoots slightly then resolves to rest. */
+        readonly elasticRelease: {
+            readonly '0%': {
+                readonly transform: "scale(0.98)";
+            };
+            readonly '50%': {
+                readonly transform: "scale(1.005)";
+            };
+            readonly '100%': {
+                readonly transform: "scale(1)";
+            };
+        };
+        /** Lift — subtle elevation shift on hover, element has mass. */
+        readonly liftUp: {
+            readonly from: {
+                readonly transform: "translateY(0)";
+            };
+            readonly to: {
+                readonly transform: "translateY(-1px)";
+            };
+        };
+        /** Glow pulse — ambient glow to indicate active state. */
+        readonly glowPulse: {
+            readonly '0%, 100%': {
+                readonly boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)";
+            };
+            readonly '50%': {
+                readonly boxShadow: "0 0 12px 2px color-mix(in srgb, var(--point) 20%, transparent)";
+            };
+        };
+        readonly shimmer: {
+            readonly '0%': {
+                readonly backgroundPosition: "-200% 0";
+            };
+            readonly '100%': {
+                readonly backgroundPosition: "200% 0";
+            };
+        };
+        readonly gradientShimmer: {
+            readonly '0%': {
+                readonly backgroundPosition: "0% 50%";
+            };
+            readonly '50%': {
+                readonly backgroundPosition: "100% 50%";
+            };
+            readonly '100%': {
+                readonly backgroundPosition: "0% 50%";
+            };
+        };
+        /** Gradient glow — soft glow for decorative emphasis. */
+        readonly gradientGlow: {
+            readonly '0%, 100%': {
+                readonly boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)";
+            };
+            readonly '50%': {
+                readonly boxShadow: "0 0 16px 3px color-mix(in srgb, var(--point) 15%, transparent)";
+            };
+        };
+        /** Spotlight pulse — radial glow that breathes gently. */
+        readonly spotlightPulse: {
+            readonly '0%, 100%': {
+                readonly opacity: "0";
+            };
+            readonly '50%': {
+                readonly opacity: "1";
+            };
+        };
+        readonly spin: {
+            readonly from: {
+                readonly transform: "rotate(0deg)";
+            };
+            readonly to: {
+                readonly transform: "rotate(360deg)";
+            };
+        };
+        readonly pulse: {
+            readonly '0%, 100%': {
+                readonly opacity: "1";
+            };
+            readonly '50%': {
+                readonly opacity: "0.5";
+            };
+        };
+        readonly bounce: {
+            readonly '0%, 100%': {
+                readonly transform: "translateY(0)";
+            };
+            readonly '50%': {
+                readonly transform: "translateY(-2px)";
+            };
+        };
+        /** Float — gentle hovering motion with spring-like rhythm. */
+        readonly float: {
+            readonly '0%, 100%': {
+                readonly transform: "translateY(0)";
+            };
+            readonly '50%': {
+                readonly transform: "translateY(-2px)";
+            };
+        };
+    };
+    /** Glow animation configuration for border glow effects. */
+    readonly glow: {
+        /** Rotation speed in seconds for the border glow sweep. */
+        readonly rotationSpeed: {
+            readonly idle: 3;
+            readonly focused: 1.5;
+        };
+        /** Blur radius in px applied to the glow trail. */
+        readonly blur: {
+            readonly idle: 8;
+            readonly focused: 16;
+        };
+        /** Opacity of the glow sweep. */
+        readonly opacity: {
+            readonly idle: 0.3;
+            readonly focused: 0.6;
+        };
+        /** Conic gradient color stop percentages. */
+        readonly spread: {
+            readonly transparent: 25;
+            readonly start: 40;
+            readonly peak: 50;
+            readonly end: 60;
+            readonly fadeOut: 75;
+        };
+    };
+    /** Layout morphing spring config — for FLIP transitions between components. */
+    readonly morph: {
+        /** Spring config for morph transitions — references tacSpring.default. */
+        readonly spring: {
+            readonly type: "spring";
+            readonly stiffness: 300;
+            readonly damping: 35;
+            readonly mass: 1;
+        };
+        /** Faster variant for small elements. */
+        readonly springFast: {
+            readonly type: "spring";
+            readonly stiffness: 450;
+            readonly damping: 35;
+            readonly mass: 0.8;
+        };
+    };
+};
+/** Standalone export of Tac spring presets for direct consumption in packages/web. */
+declare const tacSpring: {
+    readonly default: {
+        readonly type: "spring";
+        readonly stiffness: 300;
+        readonly damping: 35;
+        readonly mass: 1;
+    };
+    readonly light: {
+        readonly type: "spring";
+        readonly stiffness: 350;
+        readonly damping: 35;
+        readonly mass: 0.5;
+    };
+    readonly heavy: {
+        readonly type: "spring";
+        readonly stiffness: 250;
+        readonly damping: 38;
+        readonly mass: 1.5;
+    };
+    readonly magnetic: {
+        readonly type: "spring";
+        readonly stiffness: 400;
+        readonly damping: 40;
+        readonly mass: 0.8;
+    };
+    readonly entrance: {
+        readonly type: "spring";
+        readonly stiffness: 220;
+        readonly damping: 32;
+        readonly mass: 1.2;
+    };
+};
+/** Platform-agnostic spring configs — usable by both Framer Motion and reanimated.
+ *  Merges motion.spring + motion.tacSpring presets without the `type` field. */
+declare const springConfigs: {
+    readonly default: {
+        readonly stiffness: 300;
+        readonly damping: 35;
+        readonly mass: 1;
+    };
+    readonly snappy: {
+        readonly stiffness: 260;
+        readonly damping: 32;
+        readonly mass: 1;
+    };
+    readonly gentle: {
+        readonly stiffness: 180;
+        readonly damping: 30;
+        readonly mass: 1;
+    };
+    readonly bouncy: {
+        readonly stiffness: 260;
+        readonly damping: 30;
+        readonly mass: 1;
+    };
+    readonly magnetic: {
+        readonly stiffness: 400;
+        readonly damping: 40;
+        readonly mass: 0.8;
+    };
+    readonly entrance: {
+        readonly stiffness: 180;
+        readonly damping: 28;
+        readonly mass: 0.9;
+    };
+    readonly light: {
+        readonly stiffness: 350;
+        readonly damping: 35;
+        readonly mass: 0.5;
+    };
+    readonly heavy: {
+        readonly stiffness: 250;
+        readonly damping: 38;
+        readonly mass: 1.5;
+    };
+    readonly elastic: {
+        readonly stiffness: 220;
+        readonly damping: 28;
+        readonly mass: 0.8;
+    };
+    readonly slow: {
+        readonly stiffness: 140;
+        readonly damping: 28;
+        readonly mass: 1;
+    };
+};
+
+export { component as c, motion as m, springConfigs as s, tacSpring as t };

package/dist/native/index.d.mts

@@ -0,0 +1,31 @@
+import { ThemeMode, TacTheme } from '@tac-ui/shared';
+export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-DrXQxG6N.mjs';
+
+/**
+ * Native shadow objects for React Native (shadow style + elevation).
+ * React Native cannot use CSS box-shadow strings.
+ */
+
+interface NativeShadow {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+declare const nativeShadows: Record<ThemeMode, Record<string, NativeShadow>>;
+
+/**
+ * Build a complete TacTheme object for React Native consumption.
+ * Same shape as web's buildTheme() but without CSS variable indirection.
+ */
+declare function buildNativeTheme(mode: ThemeMode): TacTheme;
+/** Pre-built light theme */
+declare const lightTheme: TacTheme;
+/** Pre-built dark theme */
+declare const darkTheme: TacTheme;
+
+export { type NativeShadow, buildNativeTheme, darkTheme, lightTheme, nativeShadows };