tekivex-ui 2.0.2 → 2.2.0

package/src/hooks/index.ts

@@ -91,7 +91,7 @@ export function useEscapeKey(handler: () => void, active = true): void {
   handlerRef.current = handler;
 
   useEffect(() => {
-    if (!active) return;
+    if (!active || typeof document === 'undefined') return;
     const listener = (e: KeyboardEvent) => {
       if (e.key === 'Escape') handlerRef.current();
     };

package/src/i18n/I18nProvider.tsx

@@ -0,0 +1,36 @@
+import { useMemo, type ReactNode } from 'react';
+import { I18nContext, LOCALES, isRTL, enUS, type LocaleCode, type LocaleStrings, type Direction } from './index';
+
+export interface I18nProviderProps {
+  locale?: LocaleCode;
+  direction?: Direction;
+  strings?: Partial<LocaleStrings>;
+  children: ReactNode;
+}
+
+export function I18nProvider({
+  locale = 'en-US',
+  direction,
+  strings: overrides,
+  children,
+}: I18nProviderProps) {
+  const value = useMemo(() => {
+    const base = LOCALES[locale] ?? enUS;
+    const merged = overrides ? { ...base, ...overrides } : base;
+    const dir = direction ?? (isRTL(locale) ? 'rtl' : 'ltr');
+
+    return {
+      locale,
+      direction: dir,
+      strings: merged,
+    };
+  }, [locale, direction, overrides]);
+
+  return (
+    <I18nContext.Provider value={value}>
+      <div dir={value.direction} style={{ direction: value.direction }}>
+        {children}
+      </div>
+    </I18nContext.Provider>
+  );
+}

package/src/i18n/index.ts

@@ -0,0 +1,237 @@
+import { createContext, useContext } from 'react';
+
+// ── Direction ───────────────────────────────────────────────────────────────
+
+export type Direction = 'ltr' | 'rtl';
+
+// ── Locale strings ──────────────────────────────────────────────────────────
+
+export interface LocaleStrings {
+  // Common
+  close: string;
+  cancel: string;
+  confirm: string;
+  save: string;
+  delete: string;
+  search: string;
+  loading: string;
+  noResults: string;
+  required: string;
+
+  // Pagination
+  previous: string;
+  next: string;
+  pageOf: (page: number, total: number) => string;
+
+  // Select
+  selectPlaceholder: string;
+  clearSelection: string;
+
+  // DatePicker
+  selectDate: string;
+  today: string;
+
+  // FileUpload
+  dropFiles: string;
+  browse: string;
+
+  // Table
+  noData: string;
+  sortAscending: string;
+  sortDescending: string;
+}
+
+// ── Default English locale ──────────────────────────────────────────────────
+
+export const enUS: LocaleStrings = {
+  close: 'Close',
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  save: 'Save',
+  delete: 'Delete',
+  search: 'Search',
+  loading: 'Loading...',
+  noResults: 'No results found',
+  required: 'Required',
+  previous: 'Previous',
+  next: 'Next',
+  pageOf: (page, total) => `Page ${page} of ${total}`,
+  selectPlaceholder: 'Select...',
+  clearSelection: 'Clear selection',
+  selectDate: 'Select a date',
+  today: 'Today',
+  dropFiles: 'Drop files here or',
+  browse: 'Browse',
+  noData: 'No data available',
+  sortAscending: 'Sort ascending',
+  sortDescending: 'Sort descending',
+};
+
+// ── Additional locales ──────────────────────────────────────────────────────
+
+export const esES: LocaleStrings = {
+  close: 'Cerrar',
+  cancel: 'Cancelar',
+  confirm: 'Confirmar',
+  save: 'Guardar',
+  delete: 'Eliminar',
+  search: 'Buscar',
+  loading: 'Cargando...',
+  noResults: 'No se encontraron resultados',
+  required: 'Requerido',
+  previous: 'Anterior',
+  next: 'Siguiente',
+  pageOf: (page, total) => `Página ${page} de ${total}`,
+  selectPlaceholder: 'Seleccionar...',
+  clearSelection: 'Limpiar selección',
+  selectDate: 'Seleccionar fecha',
+  today: 'Hoy',
+  dropFiles: 'Suelte archivos aquí o',
+  browse: 'Explorar',
+  noData: 'No hay datos disponibles',
+  sortAscending: 'Orden ascendente',
+  sortDescending: 'Orden descendente',
+};
+
+export const arSA: LocaleStrings = {
+  close: 'إغلاق',
+  cancel: 'إلغاء',
+  confirm: 'تأكيد',
+  save: 'حفظ',
+  delete: 'حذف',
+  search: 'بحث',
+  loading: '...جارٍ التحميل',
+  noResults: 'لم يتم العثور على نتائج',
+  required: 'مطلوب',
+  previous: 'السابق',
+  next: 'التالي',
+  pageOf: (page, total) => `صفحة ${page} من ${total}`,
+  selectPlaceholder: '...اختر',
+  clearSelection: 'مسح الاختيار',
+  selectDate: 'اختر تاريخ',
+  today: 'اليوم',
+  dropFiles: 'أفلت الملفات هنا أو',
+  browse: 'تصفح',
+  noData: 'لا توجد بيانات',
+  sortAscending: 'ترتيب تصاعدي',
+  sortDescending: 'ترتيب تنازلي',
+};
+
+export const frFR: LocaleStrings = {
+  close: 'Fermer',
+  cancel: 'Annuler',
+  confirm: 'Confirmer',
+  save: 'Enregistrer',
+  delete: 'Supprimer',
+  search: 'Rechercher',
+  loading: 'Chargement...',
+  noResults: 'Aucun résultat trouvé',
+  required: 'Obligatoire',
+  previous: 'Précédent',
+  next: 'Suivant',
+  pageOf: (page, total) => `Page ${page} sur ${total}`,
+  selectPlaceholder: 'Sélectionner...',
+  clearSelection: 'Effacer la sélection',
+  selectDate: 'Sélectionner une date',
+  today: "Aujourd'hui",
+  dropFiles: 'Déposez les fichiers ici ou',
+  browse: 'Parcourir',
+  noData: 'Aucune donnée disponible',
+  sortAscending: 'Tri croissant',
+  sortDescending: 'Tri décroissant',
+};
+
+export const deDE: LocaleStrings = {
+  close: 'Schließen',
+  cancel: 'Abbrechen',
+  confirm: 'Bestätigen',
+  save: 'Speichern',
+  delete: 'Löschen',
+  search: 'Suchen',
+  loading: 'Wird geladen...',
+  noResults: 'Keine Ergebnisse gefunden',
+  required: 'Erforderlich',
+  previous: 'Zurück',
+  next: 'Weiter',
+  pageOf: (page, total) => `Seite ${page} von ${total}`,
+  selectPlaceholder: 'Auswählen...',
+  clearSelection: 'Auswahl löschen',
+  selectDate: 'Datum auswählen',
+  today: 'Heute',
+  dropFiles: 'Dateien hier ablegen oder',
+  browse: 'Durchsuchen',
+  noData: 'Keine Daten verfügbar',
+  sortAscending: 'Aufsteigend sortieren',
+  sortDescending: 'Absteigend sortieren',
+};
+
+export const jaJP: LocaleStrings = {
+  close: '閉じる',
+  cancel: 'キャンセル',
+  confirm: '確認',
+  save: '保存',
+  delete: '削除',
+  search: '検索',
+  loading: '読み込み中...',
+  noResults: '結果が見つかりません',
+  required: '必須',
+  previous: '前へ',
+  next: '次へ',
+  pageOf: (page, total) => `${total}ページ中${page}ページ`,
+  selectPlaceholder: '選択...',
+  clearSelection: '選択解除',
+  selectDate: '日付を選択',
+  today: '今日',
+  dropFiles: 'ファイルをドロップまたは',
+  browse: '参照',
+  noData: 'データなし',
+  sortAscending: '昇順',
+  sortDescending: '降順',
+};
+
+// ── Locale map ──────────────────────────────────────────────────────────────
+
+export const LOCALES = {
+  'en-US': enUS,
+  'es-ES': esES,
+  'ar-SA': arSA,
+  'fr-FR': frFR,
+  'de-DE': deDE,
+  'ja-JP': jaJP,
+} as const;
+
+export type LocaleCode = keyof typeof LOCALES;
+
+// ── RTL languages ───────────────────────────────────────────────────────────
+
+const RTL_LOCALES = new Set<string>(['ar-SA', 'he-IL', 'fa-IR', 'ur-PK']);
+
+export function isRTL(locale: string): boolean {
+  return RTL_LOCALES.has(locale);
+}
+
+// ── Context ─────────────────────────────────────────────────────────────────
+
+export interface I18nContextValue {
+  locale: LocaleCode;
+  direction: Direction;
+  strings: LocaleStrings;
+}
+
+export const I18nContext = createContext<I18nContextValue>({
+  locale: 'en-US',
+  direction: 'ltr',
+  strings: enUS,
+});
+
+export function useI18n(): I18nContextValue {
+  return useContext(I18nContext);
+}
+
+export function useLocale(): LocaleStrings {
+  return useContext(I18nContext).strings;
+}
+
+export function useDirection(): Direction {
+  return useContext(I18nContext).direction;
+}

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;

package/dist/tests/TkxButton.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=TkxButton.test.d.ts.map

package/dist/tests/TkxButton.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TkxButton.test.d.ts","sourceRoot":"","sources":["../../tests/TkxButton.test.tsx"],"names":[],"mappings":""}

package/dist/tests/a11y/components.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=components.test.d.ts.map

package/dist/tests/a11y/components.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.test.d.ts","sourceRoot":"","sources":["../../../tests/a11y/components.test.tsx"],"names":[],"mappings":""}

package/dist/tests/quantum.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=quantum.test.d.ts.map

package/dist/tests/quantum.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"quantum.test.d.ts","sourceRoot":"","sources":["../../tests/quantum.test.ts"],"names":[],"mappings":""}

package/dist/tests/security.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=security.test.d.ts.map

package/dist/tests/security.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"security.test.d.ts","sourceRoot":"","sources":["../../tests/security.test.ts"],"names":[],"mappings":""}

package/dist/tests/setup.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=setup.d.ts.map

package/dist/tests/setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../tests/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/tests/tkx.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=tkx.test.d.ts.map

package/dist/tests/tkx.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tkx.test.d.ts","sourceRoot":"","sources":["../../tests/tkx.test.ts"],"names":[],"mappings":""}

package/dist/tests/wcag.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=wcag.test.d.ts.map

package/dist/tests/wcag.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wcag.test.d.ts","sourceRoot":"","sources":["../../tests/wcag.test.ts"],"names":[],"mappings":""}