@jackbernnie/hiyf 0.1.0

package/dist/tokens/animations.d.ts

@@ -0,0 +1,126 @@
+export declare const animationDelays: readonly ["50", "100", "200", "400", "800"];
+export type AnimationDelay = (typeof animationDelays)[number];
+export type AnimationProperties = {
+    opacity?: number;
+    translateX?: number;
+    translateY?: number;
+    scale?: number;
+    rotate?: number;
+};
+export type AnimationEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+export type AnimationToken = {
+    from?: AnimationProperties;
+    to?: AnimationProperties;
+    duration: number;
+    delay?: number;
+    easing: AnimationEasing;
+    repeat?: number | 'infinite';
+    direction?: 'normal' | 'reverse' | 'alternate';
+};
+export declare const animations: {
+    readonly 'slide-up': {
+        readonly from: {
+            readonly opacity: 0;
+            readonly translateY: 12;
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly translateY: 0;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly 'slide-left': {
+        readonly from: {
+            readonly opacity: 0;
+            readonly translateX: 12;
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly translateX: 0;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly 'fade-in': {
+        readonly from: {
+            readonly opacity: 0;
+        };
+        readonly to: {
+            readonly opacity: 1;
+        };
+        readonly duration: 200;
+        readonly easing: "ease-out";
+    };
+    readonly 'fade-out': {
+        readonly from: {
+            readonly opacity: 1;
+        };
+        readonly to: {
+            readonly opacity: 0;
+        };
+        readonly duration: 150;
+        readonly easing: "ease-in";
+    };
+    readonly 'slide-down': {
+        readonly from: {
+            readonly opacity: 0;
+            readonly translateY: -12;
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly translateY: 0;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly 'slide-right': {
+        readonly from: {
+            readonly opacity: 0;
+            readonly translateX: -12;
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly translateX: 0;
+        };
+        readonly duration: 300;
+        readonly easing: "ease-out";
+    };
+    readonly 'scale-in': {
+        readonly from: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly duration: 200;
+        readonly easing: "ease-out";
+    };
+    readonly 'scale-out': {
+        readonly from: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly to: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly duration: 150;
+        readonly easing: "ease-in";
+    };
+    readonly pulse: {
+        readonly from: {
+            readonly opacity: 1;
+        };
+        readonly to: {
+            readonly opacity: 0.5;
+        };
+        readonly duration: 1500;
+        readonly easing: "ease-in-out";
+        readonly repeat: "infinite";
+        readonly direction: "alternate";
+    };
+};
+export type AnimationName = keyof typeof animations;

package/dist/tokens/animations.js

@@ -0,0 +1,61 @@
+const animationDelays = ["50", "100", "200", "400", "800"];
+const animations = {
+  "slide-up": {
+    from: { opacity: 0, translateY: 12 },
+    to: { opacity: 1, translateY: 0 },
+    duration: 300,
+    easing: "ease-out"
+  },
+  "slide-left": {
+    from: { opacity: 0, translateX: 12 },
+    to: { opacity: 1, translateX: 0 },
+    duration: 300,
+    easing: "ease-out"
+  },
+  "fade-in": {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+    duration: 200,
+    easing: "ease-out"
+  },
+  "fade-out": {
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+    duration: 150,
+    easing: "ease-in"
+  },
+  "slide-down": {
+    from: { opacity: 0, translateY: -12 },
+    to: { opacity: 1, translateY: 0 },
+    duration: 300,
+    easing: "ease-out"
+  },
+  "slide-right": {
+    from: { opacity: 0, translateX: -12 },
+    to: { opacity: 1, translateX: 0 },
+    duration: 300,
+    easing: "ease-out"
+  },
+  "scale-in": {
+    from: { opacity: 0, scale: 0.95 },
+    to: { opacity: 1, scale: 1 },
+    duration: 200,
+    easing: "ease-out"
+  },
+  "scale-out": {
+    from: { opacity: 1, scale: 1 },
+    to: { opacity: 0, scale: 0.95 },
+    duration: 150,
+    easing: "ease-in"
+  },
+  pulse: {
+    from: { opacity: 1 },
+    to: { opacity: 0.5 },
+    duration: 1500,
+    easing: "ease-in-out",
+    repeat: "infinite",
+    direction: "alternate"
+  }
+};
+
+export { animationDelays, animations };

package/dist/tokens/tokens.stylex.d.ts

@@ -0,0 +1,85 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const spacing: stylex.VarGroup<Readonly<{
+    none: string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+}>, symbol>;
+export declare const backgroundColors: stylex.VarGroup<Readonly<{
+    'background-primary': string;
+    'background-secondary': string;
+    'background-card': string;
+    'background-inverse': string;
+    'background-warning': string;
+    'background-success': string;
+    'background-danger': string;
+    'background-pending': string;
+    'background-card-raised': string;
+}>, symbol>;
+export declare const textColors: stylex.VarGroup<Readonly<{
+    'text-primary': string;
+    'text-secondary': string;
+    'text-tertiary': string;
+    'text-success': string;
+    'text-danger': string;
+    'text-warning': string;
+    'text-pending': string;
+}>, symbol>;
+export declare const borderColors: stylex.VarGroup<Readonly<{
+    'border-primary': string;
+    'border-secondary': string;
+    'border-warning': string;
+    'border-card': string;
+}>, symbol>;
+export declare const borderRadii: stylex.VarGroup<Readonly<{
+    none: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    full: string;
+}>, symbol>;
+export declare const shadows: stylex.VarGroup<Readonly<{
+    none: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+}>, symbol>;
+export declare const breakpoints: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const durations: stylex.VarGroup<Readonly<{
+    instant: string;
+    fast: string;
+    base: string;
+    slow: string;
+    slower: string;
+}>, symbol>;
+export declare const easings: {
+    standard: string;
+    decelerate: string;
+    accelerate: string;
+    spring: string;
+};
+type StyleXTokenKeys<T> = Exclude<keyof T, '__opaqueId' | '__tokens' | symbol | 'toString' | 'valueOf' | 'description'>;
+export type SpacingToken = StyleXTokenKeys<typeof spacing>;
+export type BackgroundColorToken = StyleXTokenKeys<typeof backgroundColors>;
+export type TextColorToken = StyleXTokenKeys<typeof textColors>;
+export type BorderColorToken = StyleXTokenKeys<typeof borderColors>;
+export type ColorToken = BackgroundColorToken | TextColorToken | BorderColorToken;
+export type BorderRadiusToken = StyleXTokenKeys<typeof borderRadii>;
+export type ShadowToken = StyleXTokenKeys<typeof shadows>;
+export type BreakpointKey = keyof typeof breakpoints;
+export type DurationToken = StyleXTokenKeys<typeof durations>;
+export type EasingToken = keyof typeof easings;
+export {};

package/dist/tokens/tokens.stylex.js

@@ -0,0 +1,81 @@
+const spacing = {
+  none: "var(--x1rar3os)",
+  xs: "var(--x1wxfz1x)",
+  s: "var(--x1wgg1jz)",
+  m: "var(--xchumnb)",
+  l: "var(--xxlrnop)",
+  xl: "var(--x7r7sef)",
+  "2xl": "var(--x1wjolhk)",
+  "3xl": "var(--xr1xmvj)",
+  "4xl": "var(--x14c7wq8)",
+  "5xl": "var(--x1apyyst)",
+  __varGroupHash__: "x3o8qo0"
+};
+const backgroundColors = {
+  "background-primary": "var(--xewqza3)",
+  "background-secondary": "var(--x1forjiq)",
+  "background-card": "var(--xxlbvr3)",
+  "background-inverse": "var(--xgll94b)",
+  "background-warning": "var(--x14qjew9)",
+  "background-success": "var(--x1orv1ku)",
+  "background-danger": "var(--x1cu0ldb)",
+  "background-pending": "var(--xndb461)",
+  "background-card-raised": "var(--x8h3i0x)",
+  __varGroupHash__: "xe1fndl"
+};
+const textColors = {
+  "text-primary": "var(--x1gf3f8t)",
+  "text-secondary": "var(--xqrwy3f)",
+  "text-tertiary": "var(--x13e1qfx)",
+  "text-success": "var(--x1osny8q)",
+  "text-danger": "var(--x1mixa3t)",
+  "text-warning": "var(--x1vkc7ih)",
+  "text-pending": "var(--xjx2sl)",
+  __varGroupHash__: "xe12k8q"
+};
+const borderColors = {
+  "border-primary": "var(--xb9t9qz)",
+  "border-secondary": "var(--xwpvn0g)",
+  "border-warning": "var(--x1t6ehjk)",
+  "border-card": "var(--x1gac5em)",
+  __varGroupHash__: "x1okhtjr"
+};
+const borderRadii = {
+  none: "var(--xp2820d)",
+  s: "var(--xiyndgr)",
+  m: "var(--x1c47loo)",
+  l: "var(--x1vzimgr)",
+  xl: "var(--x1uymohs)",
+  full: "var(--x6mqhnb)",
+  __varGroupHash__: "xgq2g6v"
+};
+const shadows = {
+  none: "var(--x1bpj6mm)",
+  s: "var(--xk4tqw9)",
+  m: "var(--x12cdk85)",
+  l: "var(--xssuu6)",
+  xl: "var(--x1lz7a6k)",
+  __varGroupHash__: "x1yvbn9g"
+};
+const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+const durations = {
+  instant: "var(--x1dulp5n)",
+  fast: "var(--x1cobr8s)",
+  base: "var(--xx13mrz)",
+  slow: "var(--x1x0p2eb)",
+  slower: "var(--xfeph44)",
+  __varGroupHash__: "xq51erv"
+};
+const easings = {
+  standard: "cubic-bezier(0.2, 0, 0, 1)",
+  decelerate: "cubic-bezier(0, 0, 0, 1)",
+  accelerate: "cubic-bezier(0.3, 0, 1, 1)",
+  spring: "cubic-bezier(0.5, 1.25, 0.4, 1)"
+};
+
+export { backgroundColors, borderColors, borderRadii, breakpoints, durations, easings, shadows, spacing, textColors };