tekivex-ui 2.1.0 → 2.3.0

package/src/engine/tkx.ts

@@ -660,6 +660,10 @@ function resolveUtility(u: string): Declarations | null {
   // ── CSS variable passthrough: [--my-var:value] ────────────────────────────
   if ((m = u.match(/^\[(--[a-zA-Z0-9-]+):(.+)]$/))) { return { [m[1]]: m[2] }; }
 
+  // ── Plugin utilities ─────────────────────────────────────────────────────
+  const pluginResult = resolvePluginUtility(u);
+  if (pluginResult) return pluginResult;
+
   return null;
 }
 
@@ -872,3 +876,61 @@ export function resetAtomicCSS(): void {
 export function cx(...classes: (string | false | null | undefined)[]): string {
   return classes.filter(Boolean).join(' ');
 }
+
+// ── Plugin System ────────────────────────────────────────────────────────────
+/**
+ * TKX Plugin API — extend the utility engine with custom utilities.
+ *
+ * @example
+ * ```tsx
+ * import { tkxPlugin, tkx } from '@tekivex/ui';
+ *
+ * // Register custom utilities
+ * tkxPlugin({
+ *   name: 'brand',
+ *   utilities: {
+ *     'brand-gradient': { background: 'linear-gradient(135deg, #667eea, #764ba2)' },
+ *     'brand-text': { color: '#667eea', fontWeight: '700' },
+ *     'card-shadow': { boxShadow: '0 8px 32px rgba(102, 126, 234, 0.15)' },
+ *     'glass': {
+ *       background: 'rgba(255, 255, 255, 0.05)',
+ *       backdropFilter: 'blur(12px)',
+ *       border: '1px solid rgba(255, 255, 255, 0.1)',
+ *     },
+ *   },
+ * });
+ *
+ * // Use them like any built-in utility
+ * const cls = tkx('brand-gradient p-6 rounded-xl card-shadow');
+ * ```
+ */
+
+export interface TkxPluginDef {
+  name: string;
+  utilities: Record<string, Record<string, string>>;
+}
+
+const pluginRegistry = new Map<string, Record<string, Record<string, string>>>();
+
+export function tkxPlugin(plugin: TkxPluginDef): void {
+  pluginRegistry.set(plugin.name, plugin.utilities);
+}
+
+export function tkxRemovePlugin(name: string): void {
+  pluginRegistry.delete(name);
+}
+
+export function tkxListPlugins(): string[] {
+  return Array.from(pluginRegistry.keys());
+}
+
+/**
+ * Resolve a plugin utility to CSS properties.
+ * Called internally by the TKX engine — but also exported for inspection.
+ */
+export function resolvePluginUtility(name: string): Record<string, string> | null {
+  for (const utilities of pluginRegistry.values()) {
+    if (utilities[name]) return utilities[name];
+  }
+  return null;
+}

package/src/themes/index.ts

@@ -109,3 +109,152 @@ export function ThemeProvider({ theme = quantumDark, children }: ThemeProviderPr
 export function useTheme(): ThemeTokens {
   return useContext(ThemeContext);
 }
+
+// ── Color Palette Generator ─────────────────────────────────────────────────
+// Generates 50-900 shades from a single hex color
+
+function hexToHSL(hex: string): [number, number, number] {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.slice(0, 2), 16) / 255;
+  const g = parseInt(clean.slice(2, 4), 16) / 255;
+  const b = parseInt(clean.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  s /= 100; l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+export interface ColorPalette {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+}
+
+export function generatePalette(hex: string): ColorPalette {
+  const [h, s] = hexToHSL(hex);
+  return {
+    50:  hslToHex(h, Math.min(s, 30), 96),
+    100: hslToHex(h, Math.min(s, 40), 90),
+    200: hslToHex(h, Math.min(s, 50), 80),
+    300: hslToHex(h, s, 70),
+    400: hslToHex(h, s, 60),
+    500: hex,
+    600: hslToHex(h, s, 45),
+    700: hslToHex(h, s, 35),
+    800: hslToHex(h, s, 25),
+    900: hslToHex(h, s, 15),
+  };
+}
+
+// ── Typography Scale ────────────────────────────────────────────────────────
+
+export const typography = {
+  xs:   { fontSize: '0.75rem',  lineHeight: '1rem' },
+  sm:   { fontSize: '0.875rem', lineHeight: '1.25rem' },
+  base: { fontSize: '1rem',     lineHeight: '1.5rem' },
+  lg:   { fontSize: '1.125rem', lineHeight: '1.75rem' },
+  xl:   { fontSize: '1.25rem',  lineHeight: '1.75rem' },
+  '2xl': { fontSize: '1.5rem',  lineHeight: '2rem' },
+  '3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },
+  '4xl': { fontSize: '2.25rem', lineHeight: '2.5rem' },
+  '5xl': { fontSize: '3rem',    lineHeight: '1.15' },
+} as const;
+
+// ── Spacing Scale ───────────────────────────────────────────────────────────
+
+export const spacing = {
+  0: '0px',
+  0.5: '2px',
+  1: '4px',
+  1.5: '6px',
+  2: '8px',
+  2.5: '10px',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  8: '32px',
+  10: '40px',
+  12: '48px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+} as const;
+
+// ── Breakpoints ─────────────────────────────────────────────────────────────
+
+export const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+// ── Shadows ─────────────────────────────────────────────────────────────────
+
+export const shadows = {
+  none: 'none',
+  xs: '0 1px 2px 0 rgba(0,0,0,0.05)',
+  sm: '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)',
+  md: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+  lg: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+  xl: '0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)',
+  '2xl': '0 25px 50px -12px rgba(0,0,0,0.25)',
+  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+} as const;
+
+// ── Z-Index Scale ───────────────────────────────────────────────────────────
+
+export const zIndex = {
+  hide: -1,
+  base: 0,
+  dropdown: 1000,
+  sticky: 1100,
+  fixed: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  tooltip: 1600,
+  toast: 1700,
+  max: 9999,
+} as const;
+
+// ── Radius ──────────────────────────────────────────────────────────────────
+
+export const radii = {
+  none: '0',
+  sm: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  '2xl': '16px',
+  full: '9999px',
+} as const;