nexa-ui-kit 0.6.0

package/src/services/FloatingOverlay.ts

@@ -0,0 +1,133 @@
+export type FloatingPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right'
+export type FloatingAlign = 'start' | 'center' | 'end'
+
+export type FloatingResult = {
+  style: Record<string, string | number>
+  placement: Exclude<FloatingPlacement, 'auto'>
+}
+
+type ComputeOptions = {
+  placement?: FloatingPlacement
+  align?: FloatingAlign
+  gap?: number
+  margin?: number
+  matchWidth?: boolean
+  minWidth?: number
+  maxWidth?: number
+  zIndex?: number
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+
+export const computeFloatingOverlay = (anchorEl: HTMLElement, popupEl: HTMLElement, options: ComputeOptions = {}): FloatingResult => {
+  const rect = anchorEl.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  const margin = options.margin ?? 8
+  const gap = options.gap ?? 6
+  const align = options.align ?? 'start'
+  const maxWidth = options.maxWidth ?? viewportWidth - margin * 2
+
+  const popupWidth = popupEl.offsetWidth || popupEl.getBoundingClientRect().width || 0
+  const popupHeight = popupEl.offsetHeight || popupEl.getBoundingClientRect().height || 0
+
+  const desiredWidth = options.matchWidth ? rect.width : popupWidth
+  const width = clamp(
+    Math.ceil(desiredWidth),
+    options.minWidth ?? 240,
+    Math.max(options.minWidth ?? 240, Math.min(maxWidth, viewportWidth - margin * 2)),
+  )
+
+  let placement: Exclude<FloatingPlacement, 'auto'> = 'bottom'
+  const desiredPlacement = options.placement ?? 'auto'
+
+  if (desiredPlacement === 'top' || desiredPlacement === 'bottom' || desiredPlacement === 'left' || desiredPlacement === 'right') {
+    placement = desiredPlacement
+  } else {
+    const spaceBelow = viewportHeight - rect.bottom
+    const spaceAbove = rect.top
+    const fitsBottom = spaceBelow >= popupHeight + margin
+    const fitsTop = spaceAbove >= popupHeight + margin
+    if (!fitsBottom && fitsTop) placement = 'top'
+    else if (!fitsTop && fitsBottom) placement = 'bottom'
+    else placement = spaceBelow >= spaceAbove ? 'bottom' : 'top'
+  }
+
+  let left = rect.left
+  let top = rect.bottom + gap
+
+  if (placement === 'top' || placement === 'bottom') {
+    if (align === 'center') {
+      left = rect.left + rect.width / 2 - width / 2
+    } else if (align === 'end') {
+      left = rect.right - width
+    } else {
+      left = rect.left
+    }
+    left = clamp(left, margin, viewportWidth - width - margin)
+
+    top = placement === 'top' ? rect.top - gap - popupHeight : rect.bottom + gap
+    top = clamp(top, margin, viewportHeight - popupHeight - margin)
+  } else {
+    left = placement === 'left' ? rect.left - gap - width : rect.right + gap
+    left = clamp(left, margin, viewportWidth - width - margin)
+
+    if (align === 'center') {
+      top = rect.top + rect.height / 2 - popupHeight / 2
+    } else if (align === 'end') {
+      top = rect.bottom - popupHeight
+    } else {
+      top = rect.top
+    }
+    top = clamp(top, margin, viewportHeight - popupHeight - margin)
+  }
+
+  const style: Record<string, string | number> = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    width: `${Math.round(width)}px`,
+    zIndex: options.zIndex ?? 9999,
+  }
+
+  return { style, placement }
+}
+
+type TrackOptions = ComputeOptions & {
+  isOpen: () => boolean
+  getAnchor: () => HTMLElement | null
+  getPopup: () => HTMLElement | null
+  onUpdate: (result: FloatingResult) => void
+  isEventInside?: (event: Event) => boolean
+  onOutside?: (event: Event) => void
+}
+
+export const trackFloatingOverlay = (options: TrackOptions): (() => void) => {
+  const update = () => {
+    if (!options.isOpen()) return
+    const anchor = options.getAnchor()
+    const popup = options.getPopup()
+    if (!anchor || !popup) return
+    options.onUpdate(computeFloatingOverlay(anchor, popup, options))
+  }
+
+  const onScrollOrResize = () => update()
+  const onPointerDown = (e: Event) => {
+    if (!options.isOpen()) return
+    if (options.isEventInside && options.isEventInside(e)) return
+    options.onOutside?.(e)
+  }
+
+  update()
+  requestAnimationFrame(update)
+  window.addEventListener('resize', onScrollOrResize)
+  window.addEventListener('scroll', onScrollOrResize, true)
+  document.addEventListener('mousedown', onPointerDown)
+
+  return () => {
+    window.removeEventListener('resize', onScrollOrResize)
+    window.removeEventListener('scroll', onScrollOrResize, true)
+    document.removeEventListener('mousedown', onPointerDown)
+  }
+}

package/src/services/FormValidation.ts

@@ -0,0 +1,44 @@
+export type FormRule = (value: any, values: Record<string, any>) => string | null | undefined | Promise<string | null | undefined>
+
+export const required = (message: string = 'Required'): FormRule => (value) => {
+  if (value === null || value === undefined) return message
+  if (typeof value === 'string' && value.trim() === '') return message
+  if (Array.isArray(value) && value.length === 0) return message
+  return null
+}
+
+export const minLength = (length: number, message?: string): FormRule => (value) => {
+  const str = value === null || value === undefined ? '' : String(value)
+  if (str.length < length) return message || `Must be at least ${length} characters`
+  return null
+}
+
+export const maxLength = (length: number, message?: string): FormRule => (value) => {
+  const str = value === null || value === undefined ? '' : String(value)
+  if (str.length > length) return message || `Must be at most ${length} characters`
+  return null
+}
+
+export const pattern = (re: RegExp, message: string = 'Invalid format'): FormRule => (value) => {
+  const str = value === null || value === undefined ? '' : String(value)
+  if (!re.test(str)) return message
+  return null
+}
+
+export const email = (message: string = 'Invalid email'): FormRule => (value) => {
+  const str = value === null || value === undefined ? '' : String(value).trim()
+  if (!str) return null
+  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!re.test(str)) return message
+  return null
+}
+
+export const sameAs = (otherField: string, message?: string): FormRule => (value, values) => {
+  if (value !== values[otherField]) return message || `Must match ${otherField}`
+  return null
+}
+
+export const asyncRule = (rule: FormRule, delayMs: number = 0): FormRule => async (value, values) => {
+  if (delayMs > 0) await new Promise(r => setTimeout(r, delayMs))
+  return rule(value, values)
+}

package/src/services/ToastService.ts

@@ -0,0 +1,41 @@
+import { signal } from 'nexa-framework'
+
+export type ToastType = 'success' | 'info' | 'warning' | 'error'
+
+export interface Toast {
+  id: number
+  message: string
+  type: ToastType
+  duration?: number
+}
+
+const toasts = signal<Toast[]>([])
+let nextId = 1
+
+export const useToast = () => {
+  const add = (message: string, type: ToastType = 'info', duration: number = 3000) => {
+    const id = nextId++
+    const toast: Toast = { id, message, type, duration }
+    toasts.value = [...toasts.value, toast]
+    
+    if (duration > 0) {
+      setTimeout(() => remove(id), duration)
+    }
+    
+    return id
+  }
+
+  const remove = (id: number) => {
+    toasts.value = toasts.value.filter((t: any) => t.id !== id)
+  }
+
+  return {
+    toasts,
+    add,
+    remove,
+    success: (msg: string, dur?: number) => add(msg, 'success', dur),
+    error: (msg: string, dur?: number) => add(msg, 'error', dur),
+    info: (msg: string, dur?: number) => add(msg, 'info', dur),
+    warning: (msg: string, dur?: number) => add(msg, 'warning', dur)
+  }
+}

package/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.nexa' {
+  import { type Component } from 'nexa-framework'
+  const component: Component
+  export default component
+}

package/src/styles/theme.ts

@@ -0,0 +1,146 @@
+let installed = false
+
+export function installTheme(): void {
+  if (installed) return
+  installed = true
+
+  const tokenCSS = `
+:root {
+  --n-color-primary: #3b82f6;
+  --n-color-primary-hover: #2563eb;
+  --n-color-primary-active: #1d4ed8;
+  --n-color-primary-light: rgba(59, 130, 246, 0.12);
+  --n-color-primary-glow: rgba(59, 130, 246, 0.3);
+  --n-color-success: #10b981;
+  --n-color-success-hover: #059669;
+  --n-color-success-light: rgba(16, 185, 129, 0.12);
+  --n-color-warning: #f59e0b;
+  --n-color-warning-hover: #d97706;
+  --n-color-warning-light: rgba(245, 158, 11, 0.12);
+  --n-color-danger: #ef4444;
+  --n-color-danger-hover: #dc2626;
+  --n-color-danger-light: rgba(239, 68, 68, 0.12);
+  --n-color-info: #06b6d4;
+  --n-color-info-hover: #0891b2;
+  --n-color-info-light: rgba(6, 182, 212, 0.12);
+  --n-color-surface: #0f172a;
+  --n-color-surface-alt: #1e293b;
+  --n-color-surface-hover: #334155;
+  --n-color-surface-elevated: #1e293b;
+  --n-color-bg: #020617;
+  --n-color-bg-alt: #0f172a;
+  --n-color-text: #f8fafc;
+  --n-color-text-secondary: #94a3b8;
+  --n-color-text-muted: #64748b;
+  --n-color-text-inverse: #0f172a;
+  --n-color-border: rgba(255, 255, 255, 0.08);
+  --n-color-border-hover: rgba(255, 255, 255, 0.15);
+  --n-color-border-active: rgba(255, 255, 255, 0.25);
+  --n-color-overlay: rgba(2, 6, 17, 0.7);
+  --n-color-glass: rgba(255, 255, 255, 0.04);
+  --n-color-glass-border: rgba(255, 255, 255, 0.08);
+  --n-color-glass-hover: rgba(255, 255, 255, 0.08);
+  --n-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --n-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --n-text-xs: 0.75rem;
+  --n-text-sm: 0.875rem;
+  --n-text-base: 1rem;
+  --n-text-lg: 1.125rem;
+  --n-text-xl: 1.25rem;
+  --n-text-2xl: 1.5rem;
+  --n-text-3xl: 2rem;
+  --n-weight-normal: 400;
+  --n-weight-medium: 500;
+  --n-weight-semibold: 600;
+  --n-weight-bold: 700;
+  --n-weight-extrabold: 800;
+  --n-leading-tight: 1.25;
+  --n-leading-normal: 1.5;
+  --n-leading-relaxed: 1.75;
+  --n-tracking-tight: -0.025em;
+  --n-tracking-normal: 0;
+  --n-tracking-wide: 0.05em;
+  --n-space-1: 0.25rem;
+  --n-space-2: 0.5rem;
+  --n-space-3: 0.75rem;
+  --n-space-4: 1rem;
+  --n-space-5: 1.25rem;
+  --n-space-6: 1.5rem;
+  --n-space-8: 2rem;
+  --n-space-10: 2.5rem;
+  --n-space-12: 3rem;
+  --n-space-16: 4rem;
+  --n-radius-sm: 6px;
+  --n-radius-md: 10px;
+  --n-radius-lg: 14px;
+  --n-radius-xl: 20px;
+  --n-radius-2xl: 28px;
+  --n-radius-full: 9999px;
+  --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+  --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
+  --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.3);
+  --n-transition-fast: 0.15s ease;
+  --n-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --n-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  --n-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --n-z-dropdown: 100;
+  --n-z-sticky: 200;
+  --n-z-overlay: 500;
+  --n-z-modal: 2000;
+  --n-z-toast: 3000;
+  --n-z-tooltip: 1000;
+}
+[data-theme="light"] {
+  --n-color-primary: #2563eb;
+  --n-color-primary-hover: #1d4ed8;
+  --n-color-primary-active: #1e40af;
+  --n-color-primary-light: rgba(37, 99, 235, 0.08);
+  --n-color-primary-glow: rgba(37, 99, 235, 0.2);
+  --n-color-success: #059669;
+  --n-color-success-light: rgba(5, 150, 105, 0.08);
+  --n-color-warning: #d97706;
+  --n-color-warning-light: rgba(217, 119, 6, 0.08);
+  --n-color-danger: #dc2626;
+  --n-color-danger-light: rgba(220, 38, 38, 0.08);
+  --n-color-info: #0891b2;
+  --n-color-info-light: rgba(8, 145, 178, 0.08);
+  --n-color-surface: #ffffff;
+  --n-color-surface-alt: #f8fafc;
+  --n-color-surface-hover: #f1f5f9;
+  --n-color-surface-elevated: #ffffff;
+  --n-color-bg: #f8fafc;
+  --n-color-bg-alt: #f1f5f9;
+  --n-color-text: #0f172a;
+  --n-color-text-secondary: #475569;
+  --n-color-text-muted: #94a3b8;
+  --n-color-text-inverse: #f8fafc;
+  --n-color-border: rgba(0, 0, 0, 0.08);
+  --n-color-border-hover: rgba(0, 0, 0, 0.15);
+  --n-color-border-active: rgba(0, 0, 0, 0.25);
+  --n-color-overlay: rgba(15, 23, 42, 0.5);
+  --n-color-glass: rgba(255, 255, 255, 0.6);
+  --n-color-glass-border: rgba(0, 0, 0, 0.06);
+  --n-color-glass-hover: rgba(255, 255, 255, 0.8);
+  --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
+  --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
+  --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
+  --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.2);
+  --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.2);
+}
+`
+
+  if (typeof document !== 'undefined') {
+    const styleId = 'nexa-ui-tokens'
+    let el = document.getElementById(styleId) as HTMLStyleElement
+    if (!el) {
+      el = document.createElement('style')
+      el.id = styleId
+      document.head.appendChild(el)
+    }
+    el.textContent = tokenCSS
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,170 @@
+:root {
+  /* ─── Color Palette ─── */
+  --n-color-primary: #3b82f6;
+  --n-color-primary-hover: #2563eb;
+  --n-color-primary-active: #1d4ed8;
+  --n-color-primary-light: rgba(59, 130, 246, 0.12);
+  --n-color-primary-glow: rgba(59, 130, 246, 0.3);
+
+  --n-color-success: #10b981;
+  --n-color-success-hover: #059669;
+  --n-color-success-light: rgba(16, 185, 129, 0.12);
+
+  --n-color-warning: #f59e0b;
+  --n-color-warning-hover: #d97706;
+  --n-color-warning-light: rgba(245, 158, 11, 0.12);
+
+  --n-color-danger: #ef4444;
+  --n-color-danger-hover: #dc2626;
+  --n-color-danger-light: rgba(239, 68, 68, 0.12);
+
+  --n-color-info: #06b6d4;
+  --n-color-info-hover: #0891b2;
+  --n-color-info-light: rgba(6, 182, 212, 0.12);
+
+  --n-color-surface: #0f172a;
+  --n-color-surface-alt: #1e293b;
+  --n-color-surface-hover: #334155;
+  --n-color-surface-elevated: #1e293b;
+
+  --n-color-bg: #020617;
+  --n-color-bg-alt: #0f172a;
+
+  --n-color-text: #f8fafc;
+  --n-color-text-secondary: #94a3b8;
+  --n-color-text-muted: #64748b;
+  --n-color-text-inverse: #0f172a;
+
+  --n-color-border: rgba(255, 255, 255, 0.08);
+  --n-color-border-hover: rgba(255, 255, 255, 0.15);
+  --n-color-border-active: rgba(255, 255, 255, 0.25);
+
+  --n-color-overlay: rgba(2, 6, 17, 0.7);
+  --n-color-glass: rgba(255, 255, 255, 0.04);
+  --n-color-glass-border: rgba(255, 255, 255, 0.08);
+  --n-color-glass-hover: rgba(255, 255, 255, 0.08);
+
+  /* ─── Typography ─── */
+  --n-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --n-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  --n-text-xs: 0.75rem;
+  --n-text-sm: 0.875rem;
+  --n-text-base: 1rem;
+  --n-text-lg: 1.125rem;
+  --n-text-xl: 1.25rem;
+  --n-text-2xl: 1.5rem;
+  --n-text-3xl: 2rem;
+
+  --n-weight-normal: 400;
+  --n-weight-medium: 500;
+  --n-weight-semibold: 600;
+  --n-weight-bold: 700;
+  --n-weight-extrabold: 800;
+
+  --n-leading-tight: 1.25;
+  --n-leading-normal: 1.5;
+  --n-leading-relaxed: 1.75;
+
+  --n-tracking-tight: -0.025em;
+  --n-tracking-normal: 0;
+  --n-tracking-wide: 0.05em;
+
+  /* ─── Spacing (4px base) ─── */
+  --n-space-1: 0.25rem;
+  --n-space-2: 0.5rem;
+  --n-space-3: 0.75rem;
+  --n-space-4: 1rem;
+  --n-space-5: 1.25rem;
+  --n-space-6: 1.5rem;
+  --n-space-8: 2rem;
+  --n-space-10: 2.5rem;
+  --n-space-12: 3rem;
+  --n-space-16: 4rem;
+
+  /* ─── Border Radius ─── */
+  --n-radius-sm: 6px;
+  --n-radius-md: 10px;
+  --n-radius-lg: 14px;
+  --n-radius-xl: 20px;
+  --n-radius-2xl: 28px;
+  --n-radius-full: 9999px;
+
+  /* ─── Shadows ─── */
+  --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+  --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
+  --n-shadow-glow-success: 0 4px 15px -3px rgba(16, 185, 129, 0.3);
+  --n-shadow-glow-warning: 0 4px 15px -3px rgba(245, 158, 11, 0.3);
+  --n-shadow-glow-info: 0 4px 15px -3px rgba(6, 182, 212, 0.3);
+  --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.3);
+
+  /* ─── Transitions ─── */
+  --n-transition-fast: 0.15s ease;
+  --n-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --n-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  --n-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* ─── Z-Index Scale ─── */
+  --n-z-dropdown: 100;
+  --n-z-sticky: 200;
+  --n-z-overlay: 500;
+  --n-z-modal: 2000;
+  --n-z-toast: 3000;
+  --n-z-tooltip: 1000;
+}
+
+/* ─── Light Theme ─── */
+[data-theme="light"] {
+  --n-color-primary: #2563eb;
+  --n-color-primary-hover: #1d4ed8;
+  --n-color-primary-active: #1e40af;
+  --n-color-primary-light: rgba(37, 99, 235, 0.08);
+  --n-color-primary-glow: rgba(37, 99, 235, 0.2);
+
+  --n-color-success: #059669;
+  --n-color-success-light: rgba(5, 150, 105, 0.08);
+
+  --n-color-warning: #d97706;
+  --n-color-warning-light: rgba(217, 119, 6, 0.08);
+
+  --n-color-danger: #dc2626;
+  --n-color-danger-light: rgba(220, 38, 38, 0.08);
+
+  --n-color-info: #0891b2;
+  --n-color-info-light: rgba(8, 145, 178, 0.08);
+
+  --n-color-surface: #ffffff;
+  --n-color-surface-alt: #f8fafc;
+  --n-color-surface-hover: #f1f5f9;
+  --n-color-surface-elevated: #ffffff;
+
+  --n-color-bg: #f8fafc;
+  --n-color-bg-alt: #f1f5f9;
+
+  --n-color-text: #0f172a;
+  --n-color-text-secondary: #475569;
+  --n-color-text-muted: #94a3b8;
+  --n-color-text-inverse: #f8fafc;
+
+  --n-color-border: rgba(0, 0, 0, 0.08);
+  --n-color-border-hover: rgba(0, 0, 0, 0.15);
+  --n-color-border-active: rgba(0, 0, 0, 0.25);
+
+  --n-color-overlay: rgba(15, 23, 42, 0.5);
+  --n-color-glass: rgba(255, 255, 255, 0.6);
+  --n-color-glass-border: rgba(0, 0, 0, 0.06);
+  --n-color-glass-hover: rgba(255, 255, 255, 0.8);
+
+  --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
+  --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
+  --n-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
+  --n-shadow-glow-primary: 0 4px 15px -3px rgba(37, 99, 235, 0.2);
+  --n-shadow-glow-success: 0 4px 15px -3px rgba(5, 150, 105, 0.2);
+  --n-shadow-glow-warning: 0 4px 15px -3px rgba(217, 119, 6, 0.2);
+  --n-shadow-glow-info: 0 4px 15px -3px rgba(8, 145, 178, 0.2);
+  --n-shadow-glow-danger: 0 4px 15px -3px rgba(220, 38, 38, 0.2);
+}