tekivex-ui 2.1.0 → 2.2.0

package/src/components/TkxTypography.tsx

@@ -0,0 +1,263 @@
+import {
+  useState,
+  useCallback,
+  type ReactNode,
+  type CSSProperties,
+  createElement,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+
+// ── Interfaces ──────────────────────────────────────────────────────────────
+
+export type TypographyType = 'default' | 'secondary' | 'success' | 'warning' | 'danger';
+
+export interface TkxTitleProps {
+  level?: 1 | 2 | 3 | 4 | 5;
+  children: ReactNode;
+  copyable?: boolean;
+  type?: TypographyType;
+  style?: CSSProperties;
+}
+
+export interface TkxTextProps {
+  children: ReactNode;
+  type?: TypographyType;
+  strong?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  delete?: boolean;
+  code?: boolean;
+  mark?: boolean;
+  copyable?: boolean;
+  style?: CSSProperties;
+}
+
+export interface TkxParagraphProps {
+  children: ReactNode;
+  type?: 'default' | 'secondary';
+  copyable?: boolean;
+  ellipsis?: boolean | { rows?: number };
+  style?: CSSProperties;
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function getTextContent(node: ReactNode): string {
+  if (typeof node === 'string') return node;
+  if (typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).join('');
+  if (node && typeof node === 'object' && 'props' in node) {
+    return getTextContent((node as { props: { children?: ReactNode } }).props.children);
+  }
+  return '';
+}
+
+// ── CopyButton ──────────────────────────────────────────────────────────────
+
+function CopyButton({ text }: { text: string }) {
+  const theme = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [text]);
+
+  return createElement(
+    'button',
+    {
+      type: 'button' as const,
+      onClick: handleCopy,
+      'aria-label': copied ? 'Copied' : 'Copy to clipboard',
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        marginLeft: '4px',
+        padding: '2px 6px',
+        border: 'none',
+        background: 'transparent',
+        color: copied ? theme.success : theme.textMuted,
+        cursor: 'pointer',
+        fontSize: '0.8em',
+        borderRadius: '4px',
+        transition: 'color 0.2s',
+      },
+    },
+    copied ? 'Copied!' : '\u2398',
+  );
+}
+
+// ── Color Map ───────────────────────────────────────────────────────────────
+
+function useTypeColor(type: TypographyType = 'default') {
+  const theme = useTheme();
+  const map: Record<TypographyType, string> = {
+    default: theme.text,
+    secondary: theme.textMuted,
+    success: theme.success,
+    warning: theme.warning,
+    danger: theme.danger,
+  };
+  return map[type];
+}
+
+// ── Title Sizes ─────────────────────────────────────────────────────────────
+
+const TITLE_SIZES: Record<number, { fontSize: string; lineHeight: string; fontWeight: number }> = {
+  1: { fontSize: '2.25rem', lineHeight: '1.2', fontWeight: 700 },
+  2: { fontSize: '1.875rem', lineHeight: '1.25', fontWeight: 700 },
+  3: { fontSize: '1.5rem', lineHeight: '1.3', fontWeight: 600 },
+  4: { fontSize: '1.25rem', lineHeight: '1.35', fontWeight: 600 },
+  5: { fontSize: '1rem', lineHeight: '1.4', fontWeight: 600 },
+};
+
+// ── TkxTitle ────────────────────────────────────────────────────────────────
+
+export function TkxTitle({
+  level = 1,
+  children,
+  copyable = false,
+  type = 'default',
+  style,
+}: TkxTitleProps) {
+  const color = useTypeColor(type);
+  const theme = useTheme();
+  const sizeConfig = TITLE_SIZES[level];
+  const tag = `h${level}` as keyof JSX.IntrinsicElements;
+
+  const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
+  const textContent = getTextContent(children);
+
+  return createElement(
+    tag,
+    {
+      style: {
+        color,
+        fontSize: sizeConfig.fontSize,
+        lineHeight: sizeConfig.lineHeight,
+        fontWeight: sizeConfig.fontWeight,
+        margin: '0 0 0.5em 0',
+        fontFamily: 'inherit',
+        ...style,
+      },
+    },
+    safeChildren,
+    copyable && createElement(CopyButton, { text: textContent }),
+  );
+}
+
+// ── TkxText ─────────────────────────────────────────────────────────────────
+
+export function TkxText({
+  children,
+  type = 'default',
+  strong = false,
+  italic = false,
+  underline = false,
+  delete: strikethrough = false,
+  code = false,
+  mark = false,
+  copyable = false,
+  style,
+}: TkxTextProps) {
+  const color = useTypeColor(type);
+  const theme = useTheme();
+  const textContent = getTextContent(children);
+  const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
+
+  const decorations: string[] = [];
+  if (underline) decorations.push('underline');
+  if (strikethrough) decorations.push('line-through');
+
+  let content: ReactNode = safeChildren;
+
+  if (code) {
+    content = createElement(
+      'code',
+      {
+        style: {
+          padding: '0.15em 0.4em',
+          fontSize: '0.875em',
+          backgroundColor: theme.surfaceAlt,
+          border: `1px solid ${theme.border}`,
+          borderRadius: '4px',
+          fontFamily: 'monospace',
+        },
+      },
+      content,
+    );
+  }
+
+  if (mark) {
+    content = createElement(
+      'mark',
+      {
+        style: {
+          backgroundColor: `${theme.warning}33`,
+          color,
+          padding: '0 2px',
+          borderRadius: '2px',
+        },
+      },
+      content,
+    );
+  }
+
+  return createElement(
+    'span',
+    {
+      style: {
+        color,
+        fontWeight: strong ? 600 : 'inherit',
+        fontStyle: italic ? 'italic' : 'normal',
+        textDecoration: decorations.length > 0 ? decorations.join(' ') : 'none',
+        ...style,
+      },
+    },
+    content,
+    copyable && createElement(CopyButton, { text: textContent }),
+  );
+}
+
+// ── TkxParagraph ────────────────────────────────────────────────────────────
+
+export function TkxParagraph({
+  children,
+  type = 'default',
+  copyable = false,
+  ellipsis = false,
+  style,
+}: TkxParagraphProps) {
+  const theme = useTheme();
+  const color = type === 'secondary' ? theme.textMuted : theme.text;
+  const textContent = getTextContent(children);
+  const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
+
+  const ellipsisStyle: CSSProperties = {};
+  if (ellipsis) {
+    const rows = typeof ellipsis === 'object' ? (ellipsis.rows ?? 3) : 3;
+    ellipsisStyle.display = '-webkit-box';
+    ellipsisStyle.WebkitLineClamp = rows;
+    ellipsisStyle.WebkitBoxOrient = 'vertical';
+    ellipsisStyle.overflow = 'hidden';
+  }
+
+  return createElement(
+    'div',
+    {
+      style: {
+        color,
+        fontSize: '1rem',
+        lineHeight: '1.6',
+        margin: '0 0 1em 0',
+        ...ellipsisStyle,
+        ...style,
+      },
+    },
+    safeChildren,
+    copyable && createElement(CopyButton, { text: textContent }),
+  );
+}

package/src/components/index.ts

@@ -51,3 +51,10 @@ export * from './TkxSnackbar';
 export * from './TkxDataGrid';
 export * from './TkxMasonry';
 export * from './TkxRichTextDisplay';
+export * from './TkxForm';
+export * from './TkxLayout';
+export * from './TkxConfigProvider';
+export * from './TkxTypography';
+export * from './TkxSpin';
+export * from './TkxEmpty';
+export * from './TkxStatistic';

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;