@titan-design/react-ui 0.1.0 → 0.2.5

package/src/utils/form.ts

@@ -0,0 +1,188 @@
+/**
+ * Form utility functions for consistent form field handling
+ */
+
+import React from 'react'
+
+export interface FieldState {
+  /** Whether the field has been touched */
+  touched: boolean
+  /** Whether the field has an error */
+  hasError: boolean
+  /** Error message if any */
+  errorMessage?: string
+  /** Whether the field is required */
+  isRequired?: boolean
+}
+
+export interface FieldWrapperProps {
+  /** Field label */
+  label?: string
+  /** Helper text */
+  helperText?: string
+  /** Error message */
+  errorMessage?: string
+  /** Whether the field is required */
+  isRequired?: boolean
+  /** Whether the field is disabled */
+  isDisabled?: boolean
+  /** Whether to show error state */
+  isInvalid?: boolean
+}
+
+/**
+ * Get validation state props from field state
+ */
+export function getFieldValidationProps(state: FieldState): {
+  isInvalid: boolean
+  errorMessage?: string
+} {
+  return {
+    isInvalid: state.touched && state.hasError,
+    errorMessage: state.touched && state.hasError ? state.errorMessage : undefined,
+  }
+}
+
+/**
+ * Create a field ID from label text
+ */
+export function createFieldId(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+/**
+ * Get aria attributes for form field
+ */
+export function getFieldAriaProps(props: FieldWrapperProps & { id: string }): {
+  'aria-invalid'?: boolean
+  'aria-required'?: boolean
+  'aria-describedby'?: string
+} {
+  const describedBy: string[] = []
+
+  if (props.helperText) {
+    describedBy.push(`${props.id}-helper`)
+  }
+
+  if (props.isInvalid && props.errorMessage) {
+    describedBy.push(`${props.id}-error`)
+  }
+
+  return {
+    'aria-invalid': props.isInvalid || undefined,
+    'aria-required': props.isRequired || undefined,
+    'aria-describedby': describedBy.length > 0 ? describedBy.join(' ') : undefined,
+  }
+}
+
+/**
+ * Validate email format
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * Validate minimum length
+ */
+export function hasMinLength(value: string, minLength: number): boolean {
+  return value.length >= minLength
+}
+
+/**
+ * Validate maximum length
+ */
+export function hasMaxLength(value: string, maxLength: number): boolean {
+  return value.length <= maxLength
+}
+
+/**
+ * Check if value is empty (null, undefined, or empty string)
+ */
+export function isEmpty(value: unknown): boolean {
+  if (value === null || value === undefined) return true
+  if (typeof value === 'string') return value.trim() === ''
+  if (Array.isArray(value)) return value.length === 0
+  return false
+}
+
+/**
+ * Common validation rules
+ */
+export const validationRules = {
+  required: (value: unknown) => {
+    if (isEmpty(value)) {
+      return 'This field is required'
+    }
+    return undefined
+  },
+
+  email: (value: string) => {
+    if (value && !isValidEmail(value)) {
+      return 'Please enter a valid email address'
+    }
+    return undefined
+  },
+
+  minLength: (min: number) => (value: string) => {
+    if (value && !hasMinLength(value, min)) {
+      return `Must be at least ${min} characters`
+    }
+    return undefined
+  },
+
+  maxLength: (max: number) => (value: string) => {
+    if (value && !hasMaxLength(value, max)) {
+      return `Must be no more than ${max} characters`
+    }
+    return undefined
+  },
+
+  pattern: (regex: RegExp, message: string) => (value: string) => {
+    if (value && !regex.test(value)) {
+      return message
+    }
+    return undefined
+  },
+
+  match: (otherValue: string, fieldName: string) => (value: string) => {
+    if (value !== otherValue) {
+      return `Must match ${fieldName}`
+    }
+    return undefined
+  },
+}
+
+/**
+ * Compose multiple validation functions
+ */
+export function composeValidators(
+  ...validators: Array<(value: any) => string | undefined>
+) {
+  return (value: any): string | undefined => {
+    for (const validator of validators) {
+      const error = validator(value)
+      if (error) return error
+    }
+    return undefined
+  }
+}
+
+/**
+ * Type for form values
+ */
+export type FormValues = Record<string, unknown>
+
+/**
+ * Type for form errors
+ */
+export type FormErrors<T extends FormValues> = Partial<Record<keyof T, string>>
+
+/**
+ * Type for form touched state
+ */
+export type FormTouched<T extends FormValues> = Partial<Record<keyof T, boolean>>

package/src/utils/index.ts

@@ -0,0 +1,29 @@
+export { cn } from './cn'
+export {
+  getStatusColor,
+  getResultColor,
+  getContrastText,
+  getLuminance,
+  alpha,
+  lighten,
+  darken,
+} from './colors'
+export type { StatusType, ResultType } from './colors'
+export {
+  getFieldValidationProps,
+  createFieldId,
+  getFieldAriaProps,
+  isValidEmail,
+  hasMinLength,
+  hasMaxLength,
+  isEmpty,
+  validationRules,
+  composeValidators,
+} from './form'
+export type {
+  FieldState,
+  FieldWrapperProps,
+  FormValues,
+  FormErrors,
+  FormTouched,
+} from './form'

package/src/utils/useTheme.ts

@@ -0,0 +1,72 @@
+import { useSyncExternalStore } from 'react'
+
+/**
+ * Utility function to detect the current theme.
+ * Checks for the 'light' class on the html element (set by Storybook's theme addon).
+ * 
+ * NOTE: This function reads the theme at call time. For reactive theme detection
+ * that re-renders when the theme changes, use the `useTheme` hook instead.
+ * 
+ * @returns 'light' if light theme is active, 'dark' otherwise
+ */
+export function getTheme(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'dark'
+  return document.documentElement.classList.contains('light') ? 'light' : 'dark'
+}
+
+// Subscribers for theme changes
+let listeners: Array<() => void> = []
+
+function subscribe(listener: () => void) {
+  listeners = [...listeners, listener]
+  
+  // Set up MutationObserver to watch for class changes on html element
+  if (typeof document !== 'undefined' && listeners.length === 1) {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          // Notify all listeners when class changes
+          listeners.forEach(l => l())
+        }
+      }
+    })
+    
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+    
+    // Store observer for cleanup
+    ;(subscribe as any)._observer = observer
+  }
+  
+  return () => {
+    listeners = listeners.filter(l => l !== listener)
+    
+    // Clean up observer when no more listeners
+    if (listeners.length === 0 && (subscribe as any)._observer) {
+      ;(subscribe as any)._observer.disconnect()
+      ;(subscribe as any)._observer = null
+    }
+  }
+}
+
+function getSnapshot(): 'light' | 'dark' {
+  return getTheme()
+}
+
+function getServerSnapshot(): 'light' | 'dark' {
+  return 'dark'
+}
+
+/**
+ * React hook for reactive theme detection.
+ * Automatically re-renders when the theme changes (via class changes on html element).
+ * 
+ * Uses useSyncExternalStore for proper React 18 concurrent mode support.
+ * 
+ * @returns 'light' if light theme is active, 'dark' otherwise
+ */
+export function useTheme(): 'light' | 'dark' {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/web-jsx/jsx-dev-runtime.ts

@@ -0,0 +1,28 @@
+/**
+ * Development-mode custom JSX runtime for titan-design's web distribution.
+ * See jsx-runtime-web.ts for details on the $$css conversion approach.
+ */
+import { jsxDEV as reactJsxDEV, Fragment } from 'react/jsx-dev-runtime'
+import type { StyleProp } from 'react-native'
+
+type JsxDevFn = typeof reactJsxDEV
+
+function wrapJsxDev(fn: JsxDevFn): JsxDevFn {
+  return function (type, props: Record<string, any>, ...rest) {
+    if (props && typeof props.className === 'string' && props.className) {
+      const cn = props.className
+      const cssStyle = { $$css: true, [cn]: cn } as unknown as StyleProp<any>
+      const existing = props.style
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle,
+      }
+      delete props.className
+    }
+    return fn(type, props, ...rest)
+  } as JsxDevFn
+}
+
+const jsxDEV = wrapJsxDev(reactJsxDEV)
+
+export { jsxDEV, Fragment }

package/src/web-jsx/jsx-runtime.ts

@@ -0,0 +1,41 @@
+/**
+ * Custom JSX runtime for titan-design's web distribution.
+ *
+ * Converts className props to $$css style objects at build time,
+ * eliminating the need for NativeWind's runtime interopComponents
+ * Map lookup. RNW's styleq recognizes $$css objects and applies
+ * their values as CSS class names on DOM elements.
+ *
+ * This file is NOT used by source builds (specimen, storybook,
+ * native Metro). It is only inlined into the dist by tsup via
+ * an esbuild onResolve plugin.
+ */
+import {
+  jsx as reactJsx,
+  jsxs as reactJsxs,
+  Fragment,
+} from 'react/jsx-runtime'
+import type { StyleProp } from 'react-native'
+
+type JsxFn = typeof reactJsx
+
+function wrapJsx(fn: JsxFn): JsxFn {
+  return function (type, props: Record<string, any>, ...rest) {
+    if (props && typeof props.className === 'string' && props.className) {
+      const cn = props.className
+      const cssStyle = { $$css: true, [cn]: cn } as unknown as StyleProp<any>
+      const existing = props.style
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle,
+      }
+      delete props.className
+    }
+    return fn(type, props, ...rest)
+  } as JsxFn
+}
+
+const jsx = wrapJsx(reactJsx)
+const jsxs = wrapJsx(reactJsxs)
+
+export { jsx, jsxs, Fragment }

package/tailwind.config.js

@@ -160,9 +160,10 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
-        body: ['Nunito Sans', 'sans-serif'],
-        heading: ['Space Grotesk', 'sans-serif'],
+        sans: ['var(--font-family-sans)', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+        body: ['var(--font-family-body)', 'sans-serif'],
+        heading: ['var(--font-family-heading)', 'sans-serif'],
+        mono: ['var(--font-family-mono)', 'monospace'],
       },
       fontSize: {
         xs: ['0.75rem', { lineHeight: '1rem' }],
@@ -181,6 +182,16 @@ module.exports = {
         md: '0px 4px 6px rgba(100, 116, 139, 0.12)',
         lg: '0px 10px 15px rgba(100, 116, 139, 0.12)',
         xl: '0px 20px 25px rgba(100, 116, 139, 0.12)',
+        // Glow shadows (colored radial glow for emphasis)
+        'glow-primary': '0 0 20px 2px rgba(var(--color-brand-primary-rgb, 255, 121, 0), 0.4)',
+        'glow-secondary': '0 0 20px 2px rgba(var(--color-brand-secondary-rgb, 64, 109, 135), 0.4)',
+        'glow-success': '0 0 20px 2px rgba(var(--color-status-success-rgb, 20, 184, 166), 0.35)',
+        'glow-error': '0 0 20px 2px rgba(var(--color-status-error-rgb, 209, 67, 67), 0.4)',
+        'glow-warning': '0 0 20px 2px rgba(var(--color-status-warning-rgb, 255, 176, 32), 0.35)',
+        'glow-info': '0 0 20px 2px rgba(var(--color-status-info-rgb, 33, 150, 243), 0.35)',
+        'glow-sm': '0 0 12px 0px',
+        'glow-md': '0 0 20px 2px',
+        'glow-lg': '0 0 30px 4px',
       },
       borderRadius: {
         DEFAULT: '8px',
@@ -189,6 +200,45 @@ module.exports = {
         lg: '12px',
         xl: '16px',
       },
+      transitionTimingFunction: {
+        'out': 'cubic-bezier(0.22, 1, 0.36, 1)',
+        'in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+        'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+      },
+      transitionDuration: {
+        'fast': '150ms',
+        'normal': '250ms',
+        'slow': '400ms',
+      },
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-down': {
+          '0%': { opacity: '0', transform: 'translateY(-8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-up': {
+          '0%': { opacity: '0', transform: 'translateY(100%)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'scale-in': {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 250ms cubic-bezier(0.22, 1, 0.36, 1)',
+        'slide-down': 'slide-down 250ms cubic-bezier(0.22, 1, 0.36, 1)',
+        'slide-up': 'slide-up 400ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+        'scale-in': 'scale-in 200ms cubic-bezier(0.22, 1, 0.36, 1)',
+        shimmer: 'shimmer 2s linear infinite',
+      },
     },
   },
   plugins: [],