syntra-ui 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,176 @@
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export interface ColorScale {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+export interface GrayScale extends ColorScale {
+    25: string;
+}
+export interface SemanticColor {
+    default: string;
+    emphasis: string;
+    muted: string;
+    subtle: string;
+}
+export type ColorInput = string | Partial<ColorScale>;
+export interface SyntraColors {
+    primary: ColorScale;
+    gray: GrayScale;
+    red: ColorScale;
+    orange: ColorScale;
+    yellow: ColorScale;
+    green: ColorScale;
+    teal: ColorScale;
+    blue: ColorScale;
+    indigo: ColorScale;
+    purple: ColorScale;
+    pink: ColorScale;
+    background: SemanticColor;
+    foreground: SemanticColor;
+    border: SemanticColor;
+}
+export interface SyntraTypography {
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+    fontSize: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeight: {
+        tight: string;
+        normal: string;
+        relaxed: string;
+    };
+    letterSpacing: {
+        tight: string;
+        normal: string;
+        wide: string;
+    };
+}
+export interface SyntraSpacing {
+    px: string;
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+}
+export interface SyntraBorderRadius {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    full: string;
+}
+export interface SyntraShadows {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+export interface SyntraTransitions {
+    duration: {
+        fast: string;
+        normal: string;
+        slow: string;
+        slower: string;
+    };
+    easing: {
+        default: string;
+        in: string;
+        out: string;
+        inOut: string;
+        spring: string;
+    };
+}
+export interface SyntraTheme {
+    colors: SyntraColors;
+    typography: SyntraTypography;
+    spacing: SyntraSpacing;
+    borderRadius: SyntraBorderRadius;
+    shadows: SyntraShadows;
+    transitions: SyntraTransitions;
+}
+export type SyntraMode = 'light' | 'dark' | 'system';
+export type ResolvedMode = 'light' | 'dark';
+export interface SyntraColorsInput {
+    primary?: ColorInput;
+    gray?: ColorInput;
+    red?: ColorInput;
+    orange?: ColorInput;
+    yellow?: ColorInput;
+    green?: ColorInput;
+    teal?: ColorInput;
+    blue?: ColorInput;
+    indigo?: ColorInput;
+    purple?: ColorInput;
+    pink?: ColorInput;
+    background?: Partial<SemanticColor>;
+    foreground?: Partial<SemanticColor>;
+    border?: Partial<SemanticColor>;
+}
+export interface SyntraThemeInput {
+    colors?: SyntraColorsInput;
+    typography?: DeepPartial<SyntraTypography>;
+    spacing?: Partial<SyntraSpacing>;
+    borderRadius?: Partial<SyntraBorderRadius>;
+    shadows?: Partial<SyntraShadows>;
+    transitions?: DeepPartial<SyntraTransitions>;
+}
+export interface SyntraConfigInput {
+    theme?: SyntraThemeInput;
+    darkTheme?: SyntraThemeInput;
+    mode?: SyntraMode;
+    cssVarPrefix?: string;
+}
+export interface SyntraContextValue {
+    theme: SyntraTheme;
+    mode: SyntraMode;
+    resolvedMode: ResolvedMode;
+    setMode: (mode: SyntraMode) => void;
+    cssVarPrefix: string;
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+type ClassValue = string | number | boolean | null | undefined | ClassValue[];
+export declare function cn(...inputs: ClassValue[]): string;
+export {};

package/dist/utils/colorScale.d.ts

@@ -0,0 +1,10 @@
+import { ColorScale } from '../types';
+interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export declare function hexToHsl(hex: string): HSL;
+export declare function hslToHex(hsl: HSL): string;
+export declare function generateColorScale(hex: string): ColorScale;
+export {};

package/dist/utils/createSyntraTheme.d.ts

@@ -0,0 +1,2 @@
+import { SyntraTheme, SyntraThemeInput } from '../types';
+export declare function createSyntraTheme(input?: SyntraThemeInput, base?: 'light' | 'dark'): SyntraTheme;

package/dist/utils/deepMerge.d.ts

@@ -0,0 +1 @@
+export declare function deepMerge<T extends Record<string, unknown>>(target: T, ...sources: Partial<T>[]): T;

package/dist/utils/use-styles.d.ts

@@ -0,0 +1 @@
+export declare function useStyles(id: string, css: string): void;

package/dist/utils/use-syntra-context.d.ts

@@ -0,0 +1 @@
+export declare function useSyntraContext(): string;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "syntra-ui",
+  "version": "0.1.0",
+  "description": "A lightweight, themeable React UI component library with design tokens and CSS variables",
+  "license": "MIT",
+  "author": "sherzod-uralov",
+  "keywords": ["react", "ui", "components", "design-system", "css-variables", "themeable"],
+  "type": "module",
+  "main": "dist/syntra-ui.cjs",
+  "module": "dist/syntra-ui.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/syntra-ui.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/syntra-ui.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}