@ponti-studios/ui 2.0.1 → 3.0.0

package/dist/styles/tokens/index.d.ts

@@ -0,0 +1,317 @@
+import foundations from "./generated/foundations.generated";
+import lightTokens from "./generated/light.colors.generated";
+type NormalizedSpacingKey<Key> = Key extends number ? `${Key}` : Key extends `${infer Whole}-${infer Fraction}` ? `${Whole}.${Fraction}` : Key;
+export type SpacingToken = NormalizedSpacingKey<keyof (typeof foundations)["spacing-scale"]>;
+export declare const colorTokenNames: Array<keyof typeof lightTokens>;
+export type ColorToken = keyof typeof lightTokens;
+export type ColorMode = "light" | "dark";
+export type ColorTheme = Readonly<Record<ColorToken, string>>;
+export declare const colorThemes: {
+    readonly light: {
+        background: string;
+        card: string;
+        secondary: string;
+        popover: string;
+        muted: string;
+        "text-primary": string;
+        "text-secondary": string;
+        tertiary: string;
+        primary: string;
+        accent: string;
+        destructive: string;
+        success: string;
+        warning: string;
+        "text-success": string;
+        "text-warning": string;
+        "success-foreground": string;
+        "warning-foreground": string;
+        "primary-foreground": string;
+        "accent-foreground": string;
+        "destructive-foreground": string;
+        "text-destructive": string;
+        "text-accent": string;
+        "border-default": string;
+        "control-border": string;
+        "focus-ring": string;
+        "chart-1": string;
+        "chart-2": string;
+        "chart-3": string;
+        "chart-4": string;
+        "chart-5": string;
+        "chart-positive": string;
+        "chart-negative": string;
+        "chart-neutral": string;
+        "overlay-scrim": string;
+    };
+    readonly dark: {
+        background: string;
+        card: string;
+        secondary: string;
+        popover: string;
+        muted: string;
+        "text-primary": string;
+        "text-secondary": string;
+        tertiary: string;
+        primary: string;
+        accent: string;
+        destructive: string;
+        success: string;
+        warning: string;
+        "text-success": string;
+        "text-warning": string;
+        "success-foreground": string;
+        "warning-foreground": string;
+        "primary-foreground": string;
+        "accent-foreground": string;
+        "destructive-foreground": string;
+        "text-destructive": string;
+        "text-accent": string;
+        "border-default": string;
+        "control-border": string;
+        "focus-ring": string;
+        "chart-1": string;
+        "chart-2": string;
+        "chart-3": string;
+        "chart-4": string;
+        "chart-5": string;
+        "chart-positive": string;
+        "chart-negative": string;
+        "chart-neutral": string;
+        "overlay-scrim": string;
+    };
+};
+export declare const spacing: Record<SpacingToken, number>;
+export declare const fontFamilies: Record<keyof typeof foundations.font, string>;
+export declare const textSizes: Record<keyof typeof foundations.text, number>;
+export declare const textLineHeights: {
+    xs: number;
+    sm: number;
+    base: number;
+    lg: number;
+    xl: number;
+    "2xl": number;
+    "3xl": number;
+    "4xl": number;
+    "5xl": number;
+    "6xl": number;
+    "7xl": number;
+    "8xl": number;
+    "9xl": number;
+};
+export declare const fontWeights: Record<keyof (typeof foundations)["font-weight"], string>;
+export declare const tracking: {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+};
+export declare const leading: {
+    tight: number;
+    snug: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+};
+export declare const radii: Record<keyof typeof foundations.radius, number>;
+export declare const shadows: {
+    "2xs": {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    xs: {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    sm: {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    md: {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    lg: {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    xl: {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    "2xl": {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+    none: {
+        color: string;
+        offsetX: {
+            value: number;
+            unit: string;
+        };
+        offsetY: {
+            value: number;
+            unit: string;
+        };
+        blur: {
+            value: number;
+            unit: string;
+        };
+        spread: {
+            value: number;
+            unit: string;
+        };
+    }[];
+};
+export declare const breakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+};
+export declare const containers: {
+    "3xs": string;
+    "2xs": string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+};
+export declare const zIndices: {
+    0: number;
+    10: number;
+    20: number;
+    30: number;
+    40: number;
+    50: number;
+    auto: string;
+};
+export declare const easing: Record<keyof typeof foundations.ease, string>;
+export declare const transitionDurations: Record<keyof typeof foundations.duration, number>;
+export declare const animations: {
+    spin: string;
+    ping: string;
+    pulse: string;
+    bounce: string;
+};
+export type RadiusToken = keyof typeof radii;
+export type TextSizeToken = keyof typeof textSizes;
+export type FontWeightToken = keyof typeof fontWeights;
+export type TrackingToken = keyof typeof tracking;
+export type LeadingToken = keyof typeof leading;
+export type ShadowToken = keyof typeof shadows;
+export {};

package/dist/styles/tokens/index.js

@@ -0,0 +1,14 @@
+import e from "./generated/dark.colors.generated.js";
+import t from "./generated/foundations.generated.js";
+import n from "./generated/light.colors.generated.js";
+//#region src/styles/tokens/index.ts
+var r = (e) => {
+	if (e.endsWith("rem")) return Number.parseFloat(e) * 16;
+	if (e.endsWith("px")) return Number.parseFloat(e);
+	throw Error(`Unsupported foundation dimension: ${e}`);
+}, i = (e) => Number.parseFloat(e), a = (e) => `cubic-bezier(${e.join(", ")})`, o = Object.keys(n), s = {
+	light: n,
+	dark: e
+}, c = Object.fromEntries(Object.entries(t["spacing-scale"]).map(([e, t]) => [e.replace("-", "."), r(t)])), l = Object.fromEntries(Object.entries(t.font).map(([e, t]) => [e, t.join(", ")])), u = Object.fromEntries(Object.entries(t.text).map(([e, t]) => [e, r(t)])), d = t["text-line-height"], f = Object.fromEntries(Object.entries(t["font-weight"]).map(([e, t]) => [e, String(t)])), p = t.tracking, m = t.leading, h = Object.fromEntries(Object.entries(t.radius).map(([e, t]) => [e, r(t)])), g = t.shadow, _ = t.breakpoint, v = t.container, y = t["z-index"], b = Object.fromEntries(Object.entries(t.ease).map(([e, t]) => [e, a(t)])), x = Object.fromEntries(Object.entries(t.duration).map(([e, t]) => [e, i(t)])), S = t.animate;
+//#endregion
+export { S as animations, _ as breakpoints, s as colorThemes, o as colorTokenNames, v as containers, b as easing, l as fontFamilies, f as fontWeights, m as leading, h as radii, g as shadows, c as spacing, d as textLineHeights, u as textSizes, p as tracking, x as transitionDurations, y as zIndices };