@tempots/beatui 0.0.2

package/dist/types/tokens/base-colors.d.ts

@@ -0,0 +1,288 @@
+export declare const colors: {
+    readonly red: {
+        readonly 50: "oklch(0.971 0.013 17.38)";
+        readonly 100: "oklch(0.936 0.032 17.717)";
+        readonly 200: "oklch(0.885 0.062 18.334)";
+        readonly 300: "oklch(0.808 0.114 19.571)";
+        readonly 400: "oklch(0.704 0.191 22.216)";
+        readonly 500: "oklch(0.637 0.237 25.331)";
+        readonly 600: "oklch(0.577 0.245 27.325)";
+        readonly 700: "oklch(0.505 0.213 27.518)";
+        readonly 800: "oklch(0.444 0.177 26.899)";
+        readonly 900: "oklch(0.396 0.141 25.723)";
+        readonly 950: "oklch(0.258 0.092 26.042)";
+    };
+    readonly orange: {
+        readonly 50: "oklch(0.98 0.016 73.684)";
+        readonly 100: "oklch(0.954 0.038 75.164)";
+        readonly 200: "oklch(0.901 0.076 70.697)";
+        readonly 300: "oklch(0.837 0.128 66.29)";
+        readonly 400: "oklch(0.75 0.183 55.934)";
+        readonly 500: "oklch(0.705 0.213 47.604)";
+        readonly 600: "oklch(0.646 0.222 41.116)";
+        readonly 700: "oklch(0.553 0.195 38.402)";
+        readonly 800: "oklch(0.47 0.157 37.304)";
+        readonly 900: "oklch(0.408 0.123 38.172)";
+        readonly 950: "oklch(0.266 0.079 36.259)";
+    };
+    readonly amber: {
+        readonly 50: "oklch(0.987 0.022 95.277)";
+        readonly 100: "oklch(0.962 0.059 95.617)";
+        readonly 200: "oklch(0.924 0.12 95.746)";
+        readonly 300: "oklch(0.879 0.169 91.605)";
+        readonly 400: "oklch(0.828 0.189 84.429)";
+        readonly 500: "oklch(0.769 0.188 70.08)";
+        readonly 600: "oklch(0.666 0.179 58.318)";
+        readonly 700: "oklch(0.555 0.163 48.998)";
+        readonly 800: "oklch(0.473 0.137 46.201)";
+        readonly 900: "oklch(0.414 0.112 45.904)";
+        readonly 950: "oklch(0.279 0.077 45.635)";
+    };
+    readonly yellow: {
+        readonly 50: "oklch(0.987 0.026 102.212)";
+        readonly 100: "oklch(0.973 0.071 103.193)";
+        readonly 200: "oklch(0.945 0.129 101.54)";
+        readonly 300: "oklch(0.905 0.182 98.111)";
+        readonly 400: "oklch(0.852 0.199 91.936)";
+        readonly 500: "oklch(0.795 0.184 86.047)";
+        readonly 600: "oklch(0.681 0.162 75.834)";
+        readonly 700: "oklch(0.554 0.135 66.442)";
+        readonly 800: "oklch(0.476 0.114 61.907)";
+        readonly 900: "oklch(0.421 0.095 57.708)";
+        readonly 950: "oklch(0.286 0.066 53.813)";
+    };
+    readonly lime: {
+        readonly 50: "oklch(0.986 0.031 120.757)";
+        readonly 100: "oklch(0.967 0.067 122.328)";
+        readonly 200: "oklch(0.938 0.127 124.321)";
+        readonly 300: "oklch(0.897 0.196 126.665)";
+        readonly 400: "oklch(0.841 0.238 128.85)";
+        readonly 500: "oklch(0.768 0.233 130.85)";
+        readonly 600: "oklch(0.648 0.2 131.684)";
+        readonly 700: "oklch(0.532 0.157 131.589)";
+        readonly 800: "oklch(0.453 0.124 130.933)";
+        readonly 900: "oklch(0.405 0.101 131.063)";
+        readonly 950: "oklch(0.274 0.072 132.109)";
+    };
+    readonly green: {
+        readonly 50: "oklch(0.982 0.018 155.826)";
+        readonly 100: "oklch(0.962 0.044 156.743)";
+        readonly 200: "oklch(0.925 0.084 155.995)";
+        readonly 300: "oklch(0.871 0.15 154.449)";
+        readonly 400: "oklch(0.792 0.209 151.711)";
+        readonly 500: "oklch(0.723 0.219 149.579)";
+        readonly 600: "oklch(0.627 0.194 149.214)";
+        readonly 700: "oklch(0.527 0.154 150.069)";
+        readonly 800: "oklch(0.448 0.119 151.328)";
+        readonly 900: "oklch(0.393 0.095 152.535)";
+        readonly 950: "oklch(0.266 0.065 152.934)";
+    };
+    readonly emerald: {
+        readonly 50: "oklch(0.979 0.021 166.113)";
+        readonly 100: "oklch(0.95 0.052 163.051)";
+        readonly 200: "oklch(0.905 0.093 164.15)";
+        readonly 300: "oklch(0.845 0.143 164.978)";
+        readonly 400: "oklch(0.765 0.177 163.223)";
+        readonly 500: "oklch(0.696 0.17 162.48)";
+        readonly 600: "oklch(0.596 0.145 163.225)";
+        readonly 700: "oklch(0.508 0.118 165.612)";
+        readonly 800: "oklch(0.432 0.095 166.913)";
+        readonly 900: "oklch(0.378 0.077 168.94)";
+        readonly 950: "oklch(0.262 0.051 172.552)";
+    };
+    readonly teal: {
+        readonly 50: "oklch(0.984 0.014 180.72)";
+        readonly 100: "oklch(0.953 0.051 180.801)";
+        readonly 200: "oklch(0.91 0.096 180.426)";
+        readonly 300: "oklch(0.855 0.138 181.071)";
+        readonly 400: "oklch(0.777 0.152 181.912)";
+        readonly 500: "oklch(0.704 0.14 182.503)";
+        readonly 600: "oklch(0.6 0.118 184.704)";
+        readonly 700: "oklch(0.511 0.096 186.391)";
+        readonly 800: "oklch(0.437 0.078 188.216)";
+        readonly 900: "oklch(0.386 0.063 188.416)";
+        readonly 950: "oklch(0.277 0.046 192.524)";
+    };
+    readonly cyan: {
+        readonly 50: "oklch(0.984 0.019 200.873)";
+        readonly 100: "oklch(0.956 0.045 203.388)";
+        readonly 200: "oklch(0.917 0.08 205.041)";
+        readonly 300: "oklch(0.865 0.127 207.078)";
+        readonly 400: "oklch(0.789 0.154 211.53)";
+        readonly 500: "oklch(0.715 0.143 215.221)";
+        readonly 600: "oklch(0.609 0.126 221.723)";
+        readonly 700: "oklch(0.52 0.105 223.128)";
+        readonly 800: "oklch(0.45 0.085 224.283)";
+        readonly 900: "oklch(0.398 0.07 227.392)";
+        readonly 950: "oklch(0.302 0.056 229.695)";
+    };
+    readonly sky: {
+        readonly 50: "oklch(0.977 0.013 236.62)";
+        readonly 100: "oklch(0.951 0.026 236.824)";
+        readonly 200: "oklch(0.901 0.058 230.902)";
+        readonly 300: "oklch(0.828 0.111 230.318)";
+        readonly 400: "oklch(0.746 0.16 232.661)";
+        readonly 500: "oklch(0.685 0.169 237.323)";
+        readonly 600: "oklch(0.588 0.158 241.966)";
+        readonly 700: "oklch(0.5 0.134 242.749)";
+        readonly 800: "oklch(0.443 0.11 240.79)";
+        readonly 900: "oklch(0.391 0.09 240.876)";
+        readonly 950: "oklch(0.293 0.066 243.157)";
+    };
+    readonly blue: {
+        readonly 50: "oklch(0.97 0.014 254.604)";
+        readonly 100: "oklch(0.932 0.032 255.585)";
+        readonly 200: "oklch(0.882 0.059 254.128)";
+        readonly 300: "oklch(0.809 0.105 251.813)";
+        readonly 400: "oklch(0.707 0.165 254.624)";
+        readonly 500: "oklch(0.623 0.214 259.815)";
+        readonly 600: "oklch(0.546 0.245 262.881)";
+        readonly 700: "oklch(0.488 0.243 264.376)";
+        readonly 800: "oklch(0.424 0.199 265.638)";
+        readonly 900: "oklch(0.379 0.146 265.522)";
+        readonly 950: "oklch(0.282 0.091 267.935)";
+    };
+    readonly indigo: {
+        readonly 50: "oklch(0.962 0.018 272.314)";
+        readonly 100: "oklch(0.93 0.034 272.788)";
+        readonly 200: "oklch(0.87 0.065 274.039)";
+        readonly 300: "oklch(0.785 0.115 274.713)";
+        readonly 400: "oklch(0.673 0.182 276.935)";
+        readonly 500: "oklch(0.585 0.233 277.117)";
+        readonly 600: "oklch(0.511 0.262 276.966)";
+        readonly 700: "oklch(0.457 0.24 277.023)";
+        readonly 800: "oklch(0.398 0.195 277.366)";
+        readonly 900: "oklch(0.359 0.144 278.697)";
+        readonly 950: "oklch(0.257 0.09 281.288)";
+    };
+    readonly violet: {
+        readonly 50: "oklch(0.969 0.016 293.756)";
+        readonly 100: "oklch(0.943 0.029 294.588)";
+        readonly 200: "oklch(0.894 0.057 293.283)";
+        readonly 300: "oklch(0.811 0.111 293.571)";
+        readonly 400: "oklch(0.702 0.183 293.541)";
+        readonly 500: "oklch(0.606 0.25 292.717)";
+        readonly 600: "oklch(0.541 0.281 293.009)";
+        readonly 700: "oklch(0.491 0.27 292.581)";
+        readonly 800: "oklch(0.432 0.232 292.759)";
+        readonly 900: "oklch(0.38 0.189 293.745)";
+        readonly 950: "oklch(0.283 0.141 291.089)";
+    };
+    readonly purple: {
+        readonly 50: "oklch(0.977 0.014 308.299)";
+        readonly 100: "oklch(0.946 0.033 307.174)";
+        readonly 200: "oklch(0.902 0.063 306.703)";
+        readonly 300: "oklch(0.827 0.119 306.383)";
+        readonly 400: "oklch(0.714 0.203 305.504)";
+        readonly 500: "oklch(0.627 0.265 303.9)";
+        readonly 600: "oklch(0.558 0.288 302.321)";
+        readonly 700: "oklch(0.496 0.265 301.924)";
+        readonly 800: "oklch(0.438 0.218 303.724)";
+        readonly 900: "oklch(0.381 0.176 304.987)";
+        readonly 950: "oklch(0.291 0.149 302.717)";
+    };
+    readonly fuchsia: {
+        readonly 50: "oklch(0.977 0.017 320.058)";
+        readonly 100: "oklch(0.952 0.037 318.852)";
+        readonly 200: "oklch(0.903 0.076 319.62)";
+        readonly 300: "oklch(0.833 0.145 321.434)";
+        readonly 400: "oklch(0.74 0.238 322.16)";
+        readonly 500: "oklch(0.667 0.295 322.15)";
+        readonly 600: "oklch(0.591 0.293 322.896)";
+        readonly 700: "oklch(0.518 0.253 323.949)";
+        readonly 800: "oklch(0.452 0.211 324.591)";
+        readonly 900: "oklch(0.401 0.17 325.612)";
+        readonly 950: "oklch(0.293 0.136 325.661)";
+    };
+    readonly pink: {
+        readonly 50: "oklch(0.971 0.014 343.198)";
+        readonly 100: "oklch(0.948 0.028 342.258)";
+        readonly 200: "oklch(0.899 0.061 343.231)";
+        readonly 300: "oklch(0.823 0.12 346.018)";
+        readonly 400: "oklch(0.718 0.202 349.761)";
+        readonly 500: "oklch(0.656 0.241 354.308)";
+        readonly 600: "oklch(0.592 0.249 0.584)";
+        readonly 700: "oklch(0.525 0.223 3.958)";
+        readonly 800: "oklch(0.459 0.187 3.815)";
+        readonly 900: "oklch(0.408 0.153 2.432)";
+        readonly 950: "oklch(0.284 0.109 3.907)";
+    };
+    readonly rose: {
+        readonly 50: "oklch(0.969 0.015 12.422)";
+        readonly 100: "oklch(0.941 0.03 12.58)";
+        readonly 200: "oklch(0.892 0.058 10.001)";
+        readonly 300: "oklch(0.81 0.117 11.638)";
+        readonly 400: "oklch(0.712 0.194 13.428)";
+        readonly 500: "oklch(0.645 0.246 16.439)";
+        readonly 600: "oklch(0.586 0.253 17.585)";
+        readonly 700: "oklch(0.514 0.222 16.935)";
+        readonly 800: "oklch(0.455 0.188 13.697)";
+        readonly 900: "oklch(0.41 0.159 10.272)";
+        readonly 950: "oklch(0.271 0.105 12.094)";
+    };
+    readonly slate: {
+        readonly 50: "oklch(0.984 0.003 247.858)";
+        readonly 100: "oklch(0.968 0.007 247.896)";
+        readonly 200: "oklch(0.929 0.013 255.508)";
+        readonly 300: "oklch(0.869 0.022 252.894)";
+        readonly 400: "oklch(0.704 0.04 256.788)";
+        readonly 500: "oklch(0.554 0.046 257.417)";
+        readonly 600: "oklch(0.446 0.043 257.281)";
+        readonly 700: "oklch(0.372 0.044 257.287)";
+        readonly 800: "oklch(0.279 0.041 260.031)";
+        readonly 900: "oklch(0.208 0.042 265.755)";
+        readonly 950: "oklch(0.129 0.042 264.695)";
+    };
+    readonly gray: {
+        readonly 50: "oklch(0.985 0.002 247.839)";
+        readonly 100: "oklch(0.967 0.003 264.542)";
+        readonly 200: "oklch(0.928 0.006 264.531)";
+        readonly 300: "oklch(0.872 0.01 258.338)";
+        readonly 400: "oklch(0.707 0.022 261.325)";
+        readonly 500: "oklch(0.551 0.027 264.364)";
+        readonly 600: "oklch(0.446 0.03 256.802)";
+        readonly 700: "oklch(0.373 0.034 259.733)";
+        readonly 800: "oklch(0.278 0.033 256.848)";
+        readonly 900: "oklch(0.21 0.034 264.665)";
+        readonly 950: "oklch(0.13 0.028 261.692)";
+    };
+    readonly zinc: {
+        readonly 50: "oklch(0.985 0 0)";
+        readonly 100: "oklch(0.967 0.001 286.375)";
+        readonly 200: "oklch(0.92 0.004 286.32)";
+        readonly 300: "oklch(0.871 0.006 286.286)";
+        readonly 400: "oklch(0.705 0.015 286.067)";
+        readonly 500: "oklch(0.552 0.016 285.938)";
+        readonly 600: "oklch(0.442 0.017 285.786)";
+        readonly 700: "oklch(0.37 0.013 285.805)";
+        readonly 800: "oklch(0.274 0.006 286.033)";
+        readonly 900: "oklch(0.21 0.006 285.885)";
+        readonly 950: "oklch(0.141 0.005 285.823)";
+    };
+    readonly neutral: {
+        readonly 50: "oklch(0.985 0 0)";
+        readonly 100: "oklch(0.97 0 0)";
+        readonly 200: "oklch(0.922 0 0)";
+        readonly 300: "oklch(0.87 0 0)";
+        readonly 400: "oklch(0.708 0 0)";
+        readonly 500: "oklch(0.556 0 0)";
+        readonly 600: "oklch(0.439 0 0)";
+        readonly 700: "oklch(0.371 0 0)";
+        readonly 800: "oklch(0.269 0 0)";
+        readonly 900: "oklch(0.205 0 0)";
+        readonly 950: "oklch(0.145 0 0)";
+    };
+    readonly stone: {
+        readonly 50: "oklch(0.985 0.001 106.423)";
+        readonly 100: "oklch(0.97 0.001 106.424)";
+        readonly 200: "oklch(0.923 0.003 48.717)";
+        readonly 300: "oklch(0.869 0.005 56.366)";
+        readonly 400: "oklch(0.709 0.01 56.259)";
+        readonly 500: "oklch(0.553 0.013 58.071)";
+        readonly 600: "oklch(0.444 0.011 73.639)";
+        readonly 700: "oklch(0.374 0.01 67.558)";
+        readonly 800: "oklch(0.268 0.007 34.298)";
+        readonly 900: "oklch(0.216 0.006 56.043)";
+        readonly 950: "oklch(0.147 0.004 49.25)";
+    };
+};

package/dist/types/tokens/breakpoints.d.ts

@@ -0,0 +1,12 @@
+export declare const breakpoints: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly '2xl': "96rem";
+};
+export type BreakpointName = keyof typeof breakpoints;
+export declare function getBreakpointVarName(size: BreakpointName): string;
+export declare function getBreakpointVar(size: BreakpointName): string;
+export declare function getBreakpointMediaQuery(size: BreakpointName): string;
+export declare function generateBreakpointVariables(): Record<string, string>;

package/dist/types/tokens/colors.d.ts

@@ -0,0 +1,28 @@
+import { colors } from './base-colors';
+export type ColorName = keyof typeof colors;
+export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export declare const colorShades: ColorShade[];
+export type SemanticColorName = 'primary' | 'secondary' | 'base' | 'success' | 'warning' | 'error' | 'info';
+export type ThemeColorName = ColorName | SemanticColorName;
+export declare const semanticColorNames: readonly ["primary", "secondary", "base", "success", "warning", "error", "info"];
+export declare const themeColorNames: ("primary" | "secondary" | "base" | "success" | "warning" | "error" | "info" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone")[];
+export declare const semanticColors: Record<SemanticColorName, ColorName>;
+export type BackgroundColorName = 'background' | 'surface' | 'subtle' | 'elevated' | 'raised' | 'overlay';
+export declare const bgColors: {
+    light: Record<BackgroundColorName, [ThemeColorName, ColorShade]>;
+    dark: Record<BackgroundColorName, [ThemeColorName, ColorShade]>;
+};
+export type TextColorName = 'normal' | 'muted' | 'inverted';
+export declare const textColors: {
+    light: Record<TextColorName, [ThemeColorName, ColorShade]>;
+    dark: Record<TextColorName, [ThemeColorName, ColorShade]>;
+};
+export type BorderColorName = 'border' | 'divider' | 'inverted';
+export declare const borderColors: {
+    light: Record<BorderColorName, [ThemeColorName, ColorShade]>;
+    dark: Record<BorderColorName, [ThemeColorName, ColorShade]>;
+};
+export declare function normalizeColorName(color: ThemeColorName): ThemeColorName;
+export declare function getColorVarName(color: ThemeColorName, shade: ColorShade): `--color-${ThemeColorName}-${ColorShade}`;
+export declare function getColorVar(color: ThemeColorName, shade: ColorShade): string;
+export declare function generateColorVariables(): Record<string, string>;

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

@@ -0,0 +1,6 @@
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+export * from './breakpoints';
+export declare function generateAllTokenVariables(): Record<string, string>;
+export declare function getTokenValue(tokenName: string, element?: HTMLElement): string;

package/dist/types/tokens/radius.d.ts

@@ -0,0 +1,14 @@
+export declare const radius: {
+    readonly none: "0";
+    readonly xs: "calc(var(--spacing-base) / 2)";
+    readonly sm: "var(--spacing-base)";
+    readonly md: "calc(var(--spacing-base) * 1.5)";
+    readonly lg: "calc(var(--spacing-base) * 2)";
+    readonly xl: "calc(var(--spacing-base) * 3)";
+    readonly full: "9999px";
+};
+export type RadiusName = keyof typeof radius;
+export declare function getRadiusVarName(size: RadiusName): string;
+export declare function getRadiusVar(size: RadiusName): string;
+export declare function getRadiusMediaQuery(size: RadiusName): string;
+export declare function generateRadiusVariables(): Record<string, string>;

package/dist/types/tokens/spacing.d.ts

@@ -0,0 +1,18 @@
+export declare const baseSpacing = "0.25rem";
+export declare const spacing: {
+    readonly none: "0";
+    readonly px: "1px";
+    readonly base: "0.25rem";
+    readonly xs: "calc(var(--spacing-base) / 2)";
+    readonly sm: "var(--spacing-base)";
+    readonly md: "calc(var(--spacing-base) * 1.5)";
+    readonly lg: "calc(var(--spacing-base) * 2)";
+    readonly xl: "calc(var(--spacing-base) * 3)";
+    readonly '2xl': "calc(var(--spacing-base) * 4)";
+    readonly '3xl': "calc(var(--spacing-base) * 6)";
+    readonly full: "9999px";
+};
+export type SpacingName = keyof typeof spacing;
+export declare function getSpacingVarName(size: SpacingName): string;
+export declare function getSpacingVar(size: SpacingName): string;
+export declare function generateSpacingVariables(): Record<string, string>;

package/dist/types/tokens/typography.d.ts

@@ -0,0 +1,89 @@
+export declare const fontSize: {
+    readonly xs: readonly ["0.75rem", {
+        readonly lineHeight: "1rem";
+    }];
+    readonly sm: readonly ["0.875rem", {
+        readonly lineHeight: "1.25rem";
+    }];
+    readonly base: readonly ["1rem", {
+        readonly lineHeight: "1.5rem";
+    }];
+    readonly lg: readonly ["1.125rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly xl: readonly ["1.25rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly '2xl': readonly ["1.5rem", {
+        readonly lineHeight: "2rem";
+    }];
+    readonly '3xl': readonly ["1.875rem", {
+        readonly lineHeight: "2.25rem";
+    }];
+    readonly '4xl': readonly ["2.25rem", {
+        readonly lineHeight: "2.5rem";
+    }];
+    readonly '5xl': readonly ["3rem", {
+        readonly lineHeight: "1";
+    }];
+    readonly '6xl': readonly ["3.75rem", {
+        readonly lineHeight: "1";
+    }];
+    readonly '7xl': readonly ["4.5rem", {
+        readonly lineHeight: "1";
+    }];
+    readonly '8xl': readonly ["6rem", {
+        readonly lineHeight: "1";
+    }];
+    readonly '9xl': readonly ["8rem", {
+        readonly lineHeight: "1";
+    }];
+};
+export type FontSize = keyof typeof fontSize;
+export declare const fontWeight: {
+    readonly thin: "100";
+    readonly extralight: "200";
+    readonly light: "300";
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+    readonly extrabold: "800";
+    readonly black: "900";
+};
+export type FontWeight = keyof typeof fontWeight;
+export declare const lineHeight: {
+    readonly none: "1";
+    readonly tight: "1.25";
+    readonly snug: "1.375";
+    readonly normal: "1.5";
+    readonly relaxed: "1.625";
+    readonly loose: "2";
+};
+export type LineHeight = keyof typeof lineHeight;
+export declare const letterSpacing: {
+    readonly tighter: "-0.05em";
+    readonly tight: "-0.025em";
+    readonly normal: "0em";
+    readonly wide: "0.025em";
+    readonly wider: "0.05em";
+    readonly widest: "0.1em";
+};
+export type LetterSpacing = keyof typeof letterSpacing;
+export declare const fontFamily: {
+    readonly sans: readonly ["system-ui", "-apple-system", "BlinkMacSystemFont", "\"Segoe UI\"", "Roboto", "\"Helvetica Neue\"", "Arial", "\"Noto Sans\"", "sans-serif", "\"Apple Color Emoji\"", "\"Segoe UI Emoji\"", "\"Segoe UI Symbol\"", "\"Noto Color Emoji\""];
+    readonly serif: readonly ["ui-serif", "Georgia", "Cambria", "\"Times New Roman\"", "Times", "serif"];
+    readonly mono: readonly ["ui-monospace", "SFMono-Regular", "\"SF Mono\"", "Consolas", "\"Liberation Mono\"", "Menlo", "monospace"];
+};
+export type FontFamily = keyof typeof fontFamily;
+export declare function getFontSizeVarName(size: FontSize): string;
+export declare function getFontSizeVar(size: FontSize): string;
+export declare function getFontWeightVarName(weight: FontWeight): string;
+export declare function getFontWeightVar(weight: FontWeight): string;
+export declare function getLineHeightVarName(height: LineHeight): string;
+export declare function getLineHeightVar(height: LineHeight): string;
+export declare function getLetterSpacingVarName(spacing: LetterSpacing): string;
+export declare function getLetterSpacingVar(spacing: LetterSpacing): string;
+export declare function getFontFamilyVarName(family: FontFamily): string;
+export declare function getFontFamilyVar(family: FontFamily): string;
+export declare function generateTypographyVariables(): Record<string, string>;

package/dist/types/utils/delay-signal.d.ts

@@ -0,0 +1,2 @@
+import { Signal } from '@tempots/dom';
+export declare function delaySignal<T>(signal: Signal<T>, delay?: number, predicate?: (v: T) => boolean): import("@tempots/dom").Prop<T>;

package/dist/types/utils/use-animated-toggle.d.ts

@@ -0,0 +1,51 @@
+import { type Signal } from '@tempots/dom';
+export type ToggleStatus = 'closed' | 'start-opening' | 'opening' | 'open' | 'closing';
+export type AnimatedToggleOptions = {
+    initialStatus?: Exclude<ToggleStatus, 'start-opening'>;
+    openedAfter: (cb: () => void) => () => void;
+    closedAfter: (cb: () => void) => () => void;
+};
+export declare function useAnimatedToggle({ initialStatus, openedAfter, closedAfter, }: AnimatedToggleOptions): {
+    status: Signal<ToggleStatus>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    setOpen: (v: boolean) => void;
+    isOpen: import("@tempots/dom").Computed<boolean>;
+    displayOpen: import("@tempots/dom").Computed<boolean>;
+    dispose: () => void;
+    onClosed: (fn: () => void) => () => void;
+};
+export type TimedToggleOptions = {
+    initialStatus?: Exclude<ToggleStatus, 'start-opening'>;
+    openDuration?: number;
+    closeDuration?: number;
+    duration?: number;
+};
+export declare function useTimedToggle({ initialStatus, duration, openDuration, closeDuration, }?: TimedToggleOptions): {
+    status: Signal<ToggleStatus>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    setOpen: (v: boolean) => void;
+    isOpen: import("@tempots/dom").Computed<boolean>;
+    displayOpen: import("@tempots/dom").Computed<boolean>;
+    dispose: () => void;
+    onClosed: (fn: () => void) => () => void;
+};
+export type AnimatedElementToggleOptions = {
+    initialStatus?: Exclude<ToggleStatus, 'start-opening'>;
+    element?: HTMLElement;
+};
+export declare function useAnimatedElementToggle({ initialStatus, element, }?: AnimatedElementToggleOptions): {
+    status: Signal<ToggleStatus>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    setOpen: (v: boolean) => void;
+    isOpen: import("@tempots/dom").Computed<boolean>;
+    displayOpen: import("@tempots/dom").Computed<boolean>;
+    dispose: () => void;
+    onClosed: (fn: () => void) => () => void;
+    setElement: (value: HTMLElement) => void;
+};

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@tempots/beatui",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "default": "./dist/index.es.js"
+    },
+    "./css": "./dist/beatui.css",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "ui",
+    "components",
+    "typescript",
+    "beatui",
+    "design-system",
+    "css-layers",
+    "tempo-ts"
+  ],
+  "author": "Franco Ponticelli <franco.ponticelli@gmail.com>",
+  "license": "MIT",
+  "description": "BeatUI - Modern TypeScript UI component library built with @tempots/dom, featuring layered CSS architecture and design tokens",
+  "homepage": "https://github.com/fponticelli/beatui#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fponticelli/beatui.git",
+    "directory": "packages/beatui"
+  },
+  "bugs": {
+    "url": "https://github.com/fponticelli/beatui/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@tempots/dom": ">=26.11.0",
+    "@tempots/std": ">=0.18.0",
+    "@tempots/ui": ">=3.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@tempots/dom": {
+      "optional": false
+    },
+    "@tempots/std": {
+      "optional": false
+    },
+    "@tempots/ui": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.52.0",
+    "@storybook/html-vite": "9.0.4",
+    "@testing-library/dom": "10.4.0",
+    "@types/node": "22.15.18",
+    "@typescript-eslint/eslint-plugin": "8.32.1",
+    "@typescript-eslint/parser": "8.32.1",
+    "eslint": "9.27.0",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-plugin-prettier": "5.4.0",
+    "eslint-plugin-storybook": "9.0.4",
+    "jsdom": "26.1.0",
+    "prettier": "3.5.3",
+    "start-server-and-test": "^2.0.12",
+    "storybook": "9.0.4",
+    "tsx": "^4.19.4",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.32.1",
+    "vite": "6.3.5",
+    "vitest": "3.1.3",
+    "zod": "^3.25.32"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ci": "PLAYWRIGHT_TEST_BASE_URL=http://localhost:6006 playwright test --project=chromium",
+    "test:all": "pnpm test && pnpm storybook:ci && pnpm test:e2e",
+    "storybook:ci": "start-server-and-test storybook http://localhost:6006 test:e2e:ci",
+    "lint": "eslint . --ext .ts",
+    "format": "prettier --write \"src/**/*.ts\" \"stories/**/*.ts\"",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "clean": "rm -rf dist storybook-static",
+    "release:patch": "pnpm run release:prepare && pnpm version patch && pnpm run release:publish",
+    "release:minor": "pnpm run release:prepare && pnpm version minor && pnpm run release:publish",
+    "release:major": "pnpm run release:prepare && pnpm version major && pnpm run release:publish",
+    "release:prerelease": "pnpm run release:prepare && pnpm version prerelease && pnpm run release:publish:next",
+    "release:prepare": "pnpm run clean && pnpm run build && pnpm run test",
+    "release:publish": "pnpm publish --no-git-checks",
+    "release:publish:next": "pnpm publish --tag next --no-git-checks",
+    "release:dry": "pnpm publish --dry-run --no-git-checks",
+    "version:show": "node -p \"'Current version: ' + require('./package.json').version\"",
+    "version:next:patch": "pnpm version patch --dry-run",
+    "version:next:minor": "pnpm version minor --dry-run",
+    "version:next:major": "pnpm version major --dry-run",
+    "version:next:prerelease": "pnpm version prerelease --dry-run",
+    "version:check": "pnpm version --help"
+  }
+}