squarex-ui-component-lib 1.0.3 → 1.0.5

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

@@ -0,0 +1,23 @@
+/**
+ * Core Breakpoint Tokens
+ * Responsive design breakpoints
+ * @layer tokens/core
+ */
+export declare const breakpoints: {
+    readonly mobile: 375;
+    readonly tablet: 768;
+    readonly desktop: 1200;
+    readonly wide: 1440;
+};
+/**
+ * Media query helpers
+ */
+export declare const mediaQueries: {
+    readonly mobile: "@media (min-width: 375px)";
+    readonly tablet: "@media (min-width: 768px)";
+    readonly desktop: "@media (min-width: 1200px)";
+    readonly wide: "@media (min-width: 1440px)";
+};
+export type BreakpointToken = typeof breakpoints;
+export type MediaQueryToken = typeof mediaQueries;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/tokens/core/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,186 @@
+/**
+ * Core Color Tokens (Primitives)
+ * These are the base color values - do not use directly in components
+ * @layer tokens/core
+ */
+export declare const colors: {
+    readonly gray: {
+        readonly 50: "#f6f6f6";
+        readonly 100: "#ededed";
+        readonly 150: "#e4e4e4";
+        readonly 200: "#dbdbdb";
+        readonly 300: "#cacaca";
+        readonly 400: "#b8b8b8";
+        readonly 500: "#a6a6a6";
+        readonly 600: "#858585";
+        readonly 700: "#646464";
+        readonly 800: "#424242";
+        readonly 900: "#323232";
+        readonly 950: "#212121";
+        readonly 1000: "#111111";
+    };
+    readonly purple: {
+        readonly 50: "#f3eef9";
+        readonly 100: "#e7dcf2";
+        readonly 150: "#dbcbec";
+        readonly 200: "#cfb9e5";
+        readonly 300: "#b897d9";
+        readonly 400: "#a074cc";
+        readonly 500: "#8851bf";
+        readonly 600: "#6d4199";
+        readonly 700: "#523173";
+        readonly 800: "#36204c";
+        readonly 900: "#291839";
+        readonly 950: "#1b1026";
+        readonly 1000: "#0e0813";
+    };
+    readonly violet: {
+        readonly 50: "#eceaf9";
+        readonly 100: "#dad6f2";
+        readonly 150: "#c7c1ec";
+        readonly 200: "#b4ade5";
+        readonly 300: "#8f84d9";
+        readonly 400: "#695bcc";
+        readonly 500: "#4432bf";
+        readonly 600: "#362899";
+        readonly 700: "#291e73";
+        readonly 800: "#1b144c";
+        readonly 900: "#140f39";
+        readonly 950: "#0e0a26";
+        readonly 1000: "#070513";
+    };
+    readonly red: {
+        readonly 50: "#fde9e9";
+        readonly 100: "#fbd3d2";
+        readonly 150: "#f9bdbc";
+        readonly 200: "#f7a7a5";
+        readonly 300: "#f47a79";
+        readonly 400: "#f04e4c";
+        readonly 500: "#ec221f";
+        readonly 600: "#bd1b19";
+        readonly 700: "#8e1413";
+        readonly 800: "#5e0e0c";
+        readonly 900: "#470a09";
+        readonly 950: "#2f0706";
+        readonly 1000: "#180303";
+    };
+    readonly green: {
+        readonly 50: "#e7f7ef";
+        readonly 100: "#d0efde";
+        readonly 150: "#b8e7ce";
+        readonly 200: "#a1dfbe";
+        readonly 300: "#72ce9d";
+        readonly 400: "#43be7d";
+        readonly 500: "#14ae5c";
+        readonly 600: "#108b4a";
+        readonly 700: "#0c6837";
+        readonly 800: "#084625";
+        readonly 900: "#06341c";
+        readonly 950: "#042312";
+        readonly 1000: "#021109";
+    };
+    readonly yellow: {
+        readonly 50: "#fefae6";
+        readonly 100: "#fef4ce";
+        readonly 150: "#fdefb5";
+        readonly 200: "#fdea9d";
+        readonly 300: "#fcdf6c";
+        readonly 400: "#fbd53b";
+        readonly 500: "#faca0a";
+        readonly 600: "#c8a208";
+        readonly 700: "#967906";
+        readonly 800: "#645104";
+        readonly 900: "#4b3d03";
+        readonly 950: "#322802";
+        readonly 1000: "#191401";
+    };
+    readonly blue: {
+        readonly 50: "#e7f3fe";
+        readonly 100: "#cee8fd";
+        readonly 150: "#b6ddfc";
+        readonly 200: "#9ed1fb";
+        readonly 300: "#6dbaf9";
+        readonly 400: "#3da3f7";
+        readonly 500: "#0c8cf5";
+        readonly 600: "#0a70c4";
+        readonly 700: "#075493";
+        readonly 800: "#053862";
+        readonly 900: "#042a4a";
+        readonly 950: "#021c31";
+        readonly 1000: "#010e19";
+    };
+    readonly slate: {
+        readonly 50: "#f1f3f4";
+        readonly 100: "#e4e6ea";
+        readonly 150: "#d6dadf";
+        readonly 200: "#c8ced4";
+        readonly 300: "#adb5bf";
+        readonly 400: "#919da9";
+        readonly 500: "#768494";
+        readonly 600: "#5e6a76";
+        readonly 700: "#474f59";
+        readonly 800: "#2f353b";
+        readonly 900: "#23282c";
+        readonly 950: "#181a1e";
+        readonly 1000: "#0c0d0f";
+    };
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+};
+/**
+ * Alpha/Transparency colors
+ */
+export declare const alphas: {
+    readonly white: {
+        readonly 50: "rgba(255, 255, 255, 0.04)";
+        readonly 100: "rgba(255, 255, 255, 0.08)";
+        readonly 150: "rgba(255, 255, 255, 0.15)";
+        readonly 200: "rgba(255, 255, 255, 0.20)";
+        readonly 300: "rgba(255, 255, 255, 0.30)";
+        readonly 350: "rgba(255, 255, 255, 0.35)";
+        readonly 400: "rgba(255, 255, 255, 0.40)";
+        readonly 500: "rgba(255, 255, 255, 0.50)";
+        readonly 600: "rgba(255, 255, 255, 0.60)";
+        readonly 700: "rgba(255, 255, 255, 0.70)";
+        readonly 800: "rgba(255, 255, 255, 0.80)";
+    };
+    readonly black: {
+        readonly 100: "rgba(12, 12, 13, 0.05)";
+        readonly 200: "rgba(12, 12, 13, 0.10)";
+        readonly 300: "rgba(12, 12, 13, 0.20)";
+        readonly 400: "rgba(12, 12, 13, 0.40)";
+        readonly 500: "rgba(12, 12, 13, 0.70)";
+        readonly 600: "rgba(12, 12, 13, 0.80)";
+        readonly 700: "rgba(12, 12, 13, 0.85)";
+        readonly 800: "rgba(12, 12, 13, 0.90)";
+        readonly 900: "rgba(12, 12, 13, 0.95)";
+        readonly 1000: "rgba(12, 12, 13, 1.00)";
+    };
+    readonly purple: {
+        readonly 100: "rgba(136, 81, 191, 0.08)";
+        readonly 200: "rgba(136, 81, 191, 0.16)";
+    };
+    readonly violet: {
+        readonly 100: "rgba(68, 50, 191, 0.08)";
+        readonly 200: "rgba(68, 50, 191, 0.16)";
+    };
+    readonly slate: {
+        readonly 100: "rgba(118, 132, 148, 0.08)";
+        readonly 200: "rgba(118, 132, 148, 0.16)";
+    };
+    readonly green: {
+        readonly 100: "rgba(20, 174, 92, 0.08)";
+        readonly 200: "rgba(20, 174, 92, 0.16)";
+    };
+    readonly red: {
+        readonly 100: "rgba(236, 34, 31, 0.08)";
+        readonly 200: "rgba(236, 34, 31, 0.16)";
+    };
+    readonly yellow: {
+        readonly 100: "rgba(229, 160, 0, 0.08)";
+        readonly 200: "rgba(229, 160, 0, 0.16)";
+    };
+};
+export type ColorToken = typeof colors;
+export type AlphaToken = typeof alphas;
+//# sourceMappingURL=colors.d.ts.map

package/dist/tokens/core/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/colors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIT,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDT,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC;AACvC,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * Core Design Tokens
+ *
+ * These are primitive tokens that should NOT be used directly in components.
+ * Instead, use semantic tokens from the semantic layer.
+ *
+ * @example
+ * // ❌ Don't do this in components:
+ * import { colors } from '@/tokens/core';
+ * color: colors.purple[500]
+ *
+ * // ✅ Do this instead:
+ * import { tokens } from '@/tokens';
+ * color: tokens.color.background.brand.default
+ */
+export * from './colors';
+export * from './typography';
+export * from './spacing';
+export * from './breakpoints';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

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

@@ -0,0 +1,105 @@
+/**
+ * Core Spacing Tokens
+ * Spacing, sizing, radius, and other dimensional values
+ * @layer tokens/core
+ */
+/**
+ * Spacing scale (in pixels)
+ * Used for margins, paddings, gaps
+ */
+export declare const space: {
+    readonly 0: 0;
+    readonly 50: 2;
+    readonly 100: 4;
+    readonly 150: 6;
+    readonly 200: 8;
+    readonly 300: 12;
+    readonly 400: 16;
+    readonly 500: 20;
+    readonly 600: 24;
+    readonly 800: 32;
+    readonly 1200: 48;
+    readonly 1600: 64;
+    readonly 2400: 96;
+    readonly 4000: 160;
+    readonly '-100': -4;
+    readonly '-200': -8;
+    readonly '-300': -12;
+    readonly '-400': -16;
+    readonly '-600': -24;
+};
+/**
+ * Border radius values
+ */
+export declare const radius: {
+    readonly none: 0;
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly full: 9999;
+};
+/**
+ * Border width values
+ */
+export declare const borderWidth: {
+    readonly none: 0;
+    readonly thin: 1;
+    readonly medium: 1.5;
+    readonly thick: 2;
+};
+/**
+ * Z-index/depth values
+ */
+export declare const depth: {
+    readonly 0: 0;
+    readonly 25: 1;
+    readonly 100: 4;
+    readonly 200: 8;
+    readonly 400: 16;
+    readonly 800: 32;
+    readonly 1200: 48;
+    readonly '-25': -1;
+    readonly '-100': -4;
+    readonly '-200': -8;
+    readonly '-400': -16;
+    readonly '-800': -32;
+    readonly '-1200': -48;
+};
+/**
+ * Icon sizes
+ */
+export declare const iconSize: {
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 40;
+};
+/**
+ * Blur values for backdrop filters
+ */
+export declare const blur: {
+    readonly none: 0;
+    readonly soft: 2;
+    readonly light: 4;
+    readonly medium: 8;
+    readonly heavy: 12;
+    readonly intense: 24;
+};
+/**
+ * Shadow elevation values (for box-shadow y-offset)
+ */
+export declare const elevation: {
+    readonly xs: 1;
+    readonly sm: 2;
+    readonly md: 4;
+    readonly lg: 8;
+    readonly xl: 16;
+};
+export type SpaceToken = typeof space;
+export type RadiusToken = typeof radius;
+export type BorderWidthToken = typeof borderWidth;
+export type DepthToken = typeof depth;
+export type IconSizeToken = typeof iconSize;
+export type BlurToken = typeof blur;
+export type ElevationToken = typeof elevation;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/tokens/core/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/spacing.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;CAqBR,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAeR,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;CAIX,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,KAAK,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC;AACxC,MAAM,MAAM,gBAAgB,GAAG,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,KAAK,CAAC;AACtC,MAAM,MAAM,aAAa,GAAG,OAAO,QAAQ,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC;AACpC,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC"}

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

@@ -0,0 +1,52 @@
+/**
+ * Core Typography Tokens
+ * Font families, weights, and type scales
+ * @layer tokens/core
+ */
+export declare const fontFamily: {
+    readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+    readonly mono: "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+};
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+export declare const fontStyle: {
+    readonly normal: "normal";
+    readonly italic: "italic";
+};
+/**
+ * Type scale - using a modular scale
+ * Base size: 16px (1rem)
+ */
+export declare const fontSize: {
+    readonly scale01: 11;
+    readonly scale02: 12;
+    readonly scale03: 13;
+    readonly scale04: 14;
+    readonly scale05: 16;
+    readonly scale06: 18;
+    readonly scale07: 20;
+    readonly scale08: 24;
+    readonly scale09: 28;
+    readonly scale10: 32;
+    readonly scale11: 40;
+};
+export declare const lineHeight: {
+    readonly tight: 1.25;
+    readonly normal: 1.5;
+    readonly relaxed: 1.75;
+};
+export declare const letterSpacing: {
+    readonly tight: "-0.01em";
+    readonly normal: "0";
+    readonly wide: "0.01em";
+};
+export type FontFamilyToken = typeof fontFamily;
+export type FontWeightToken = typeof fontWeight;
+export type FontSizeToken = typeof fontSize;
+export type LineHeightToken = typeof lineHeight;
+export type LetterSpacingToken = typeof letterSpacing;
+//# sourceMappingURL=typography.d.ts.map

package/dist/tokens/core/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/typography.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,eAAO,MAAM,SAAS;;;CAGZ,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAYX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,aAAa,GAAG,OAAO,QAAQ,CAAC;AAC5C,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,kBAAkB,GAAG,OAAO,aAAa,CAAC"}