@komensal/ui 0.1.0

package/src/components/toast/toast-provider.tsx

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+
+import { ToastOptions, ToastPosition, ToastType } from '../../types/toast'
+import { registerToastEmitter } from '../../utils/toast-emitter'
+import { Toast } from './toast'
+
+interface ToastItem extends ToastOptions {
+  id: string
+  type: ToastType
+}
+
+export function ToastProvider() {
+  const [toasts, setToasts] = useState<ToastItem[]>([])
+  const itemRefs = useRef(new Map<string, HTMLDivElement>())
+  const prevRects = useRef(new Map<string, DOMRect>())
+
+  const showToast = useCallback((type: ToastType, options: ToastOptions) => {
+    setToasts((prev) => [
+      ...prev,
+      {
+        duration: 2500,
+        id: crypto.randomUUID(),
+        position: 'top-right',
+        type,
+        ...options
+      }
+    ])
+  }, [])
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  useEffect(() => {
+    registerToastEmitter(showToast)
+    return () => registerToastEmitter(null)
+  }, [showToast])
+
+  const grouped = useMemo(() => {
+    return toasts.reduce<Partial<Record<ToastPosition, ToastItem[]>>>((acc, toast) => {
+      const pos = toast.position ?? 'top'
+      acc[pos] = [...(acc[pos] ?? []), toast]
+      return acc
+    }, {})
+  }, [toasts])
+
+  useLayoutEffect(() => {
+    const newRects = new Map<string, DOMRect>()
+
+    itemRefs.current.forEach((el, id) => {
+      newRects.set(id, el.getBoundingClientRect())
+    })
+
+    newRects.forEach((newRect, id) => {
+      const prevRect = prevRects.current.get(id)
+      const el = itemRefs.current.get(id)
+      if (!el || !prevRect) return
+
+      const dy = prevRect.top - newRect.top
+      if (dy === 0) return
+
+      el.style.transform = `translateY(${dy}px)`
+      el.style.transition = 'transform 0s'
+
+      requestAnimationFrame(() => {
+        el.style.transition = 'transform 200ms ease-out'
+        el.style.transform = ''
+      })
+    })
+
+    prevRects.current = newRects
+  }, [toasts])
+
+  const setItemRef = useCallback((id: string) => {
+    return (el: HTMLDivElement | null) => {
+      if (!el) {
+        itemRefs.current.delete(id)
+        prevRects.current.delete(id)
+        return
+      }
+      itemRefs.current.set(id, el)
+    }
+  }, [])
+
+  return (
+    <>
+      {Object.entries(grouped).map(([position, list]) => (
+        <div className={`fixed z-4000 ${getPositionClass(position as ToastPosition)}`} key={position}>
+          <div className='relative flex flex-col gap-3'>
+            {list.map((toast) => (
+              <div key={toast.id} ref={setItemRef(toast.id)}>
+                <Toast
+                  duration={toast.duration}
+                  id={toast.id}
+                  onClose={removeToast}
+                  subtitle={toast.subtitle}
+                  title={toast.title}
+                  type={toast.type}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </>
+  )
+}
+
+function getPositionClass(position: ToastPosition) {
+  const map: Record<ToastPosition, string> = {
+    bottom: 'bottom-6 left-1/2 -translate-x-1/2',
+    'bottom-left': 'bottom-6 left-6',
+    'bottom-right': 'bottom-6 right-6',
+    center: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+    'middle-bottom': 'bottom-20 left-1/2 -translate-x-1/2',
+    'middle-top': 'top-20 left-1/2 -translate-x-1/2',
+    top: 'top-6 left-1/2 -translate-x-1/2',
+    'top-left': 'top-6 left-6',
+    'top-right': 'top-6 right-6'
+  }
+
+  return map[position]
+}

package/src/components/toast/toast.tsx

@@ -0,0 +1,106 @@
+import { AlertTriangle, Check, X } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { IoDocumentLockOutline, IoInformationCircle } from 'react-icons/io5'
+
+import { ToastType } from '../../types/toast'
+
+interface ToastProps {
+  duration?: number
+  id: string
+  onClose: (id: string) => void
+  subtitle?: string
+  title: string
+  type: ToastType
+}
+
+const EXIT_ANIMATION_MS = 200
+
+export function Toast({ duration = 2500, id, onClose, subtitle, title, type }: ToastProps) {
+  const [leaving, setLeaving] = useState(false)
+  const startedAtRef = useRef<number>(Date.now())
+  const timeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null)
+  const exitRef = useRef<null | ReturnType<typeof setTimeout>>(null)
+
+  const Icon = useMemo(() => {
+    if (type === 'success') return Check
+    if (type === 'error') return X
+    if (type === 'warning') return AlertTriangle
+    if (type === 'info') return IoInformationCircle
+    return IoDocumentLockOutline
+  }, [type])
+
+  const styles = useMemo(() => {
+    if (type === 'success') {
+      return { border: 'border-success', icon: 'text-success', iconBorder: 'border-success' }
+    }
+    if (type === 'error') {
+      return { border: 'border-destructive', icon: 'text-destructive', iconBorder: 'border-destructive' }
+    }
+    if (type === 'warning') {
+      return { border: 'border-warning', icon: 'text-warning', iconBorder: 'border-warning' }
+    }
+    if (type === 'info') {
+      return { border: 'border-info', icon: 'text-info', iconBorder: 'border-info' }
+    }
+    return { border: 'border-wait', icon: 'text-wait', iconBorder: 'border-wait' }
+  }, [type])
+
+  useEffect(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    if (exitRef.current) clearTimeout(exitRef.current)
+
+    const elapsed = Date.now() - startedAtRef.current
+    const remaining = Math.max(0, duration - elapsed)
+
+    timeoutRef.current = setTimeout(() => {
+      setLeaving(true)
+      exitRef.current = setTimeout(() => onClose(id), EXIT_ANIMATION_MS)
+    }, remaining)
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      if (exitRef.current) clearTimeout(exitRef.current)
+    }
+  }, [id, duration, onClose])
+
+  return (
+    <div
+      aria-live='polite'
+      className={[
+        'relative',
+        leaving ? 'absolute top-0 right-0 left-0' : '',
+        'flex w-108.5 max-w-[calc(100vw-2rem)] items-center justify-between',
+        'min-h-16',
+        'bg-surface rounded-[10px] border-2',
+        'px-5 py-4.5',
+        'shadow-[0_4px_20px_rgba(0,0,0,0.05)]',
+        'transition-all duration-200 ease-out',
+        styles.border,
+        leaving ? 'translate-y-2 opacity-0' : 'translate-y-0 opacity-100'
+      ].join(' ')}
+      role='status'
+    >
+      <div className='min-w-0 pr-4'>
+        <h4 className={['text-[16px] leading-normal font-semibold', 'text-foreground', 'line-clamp-2'].join(' ')}>
+          {title}
+        </h4>
+      </div>
+
+      {subtitle ? (
+        <div className='shrink-0 pr-4 text-left'>
+          <div className={['max-w-28 text-[14px] leading-[19.5px] font-normal', 'text-body'].join(' ')}>{subtitle}</div>
+        </div>
+      ) : null}
+
+      <div
+        className={[
+          'shrink-0',
+          'flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2',
+          styles.iconBorder
+        ].join(' ')}
+      >
+        <Icon className={['h-5 w-5', styles.icon].join(' ')} />
+      </div>
+    </div>
+  )
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,56 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from 'react'
+
+import { cn } from '../utils'
+
+interface TooltipProps {
+  children: React.ReactNode
+  childrenClassName?: string
+  className?: string
+  message: string
+  sideTooltip?: 'bottom' | 'left' | 'right' | 'top'
+}
+
+const TooltipProvider = TooltipPrimitive.Provider
+const TooltipRoot = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      className={cn(
+        'bg-tooltip text-tooltip-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm font-semibold shadow-sm',
+        className
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  ({ children, childrenClassName, className, message, sideTooltip = 'top' }, ref) => {
+    return (
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger asChild>
+            <div className={cn('', childrenClassName)} ref={ref}>
+              {children}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent className={cn('', className)} side={sideTooltip}>
+            <p>{message}</p>
+          </TooltipContent>
+        </TooltipRoot>
+      </TooltipProvider>
+    )
+  }
+)
+
+Tooltip.displayName = 'Tooltip'

package/src/components/wrapper.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+import { cn } from '../utils'
+
+export interface WrapperProps {
+  children: ReactNode
+  className?: string
+}
+
+export const Wrapper = ({ children, className }: WrapperProps) => {
+  return <div className={cn('mx-auto h-full w-full', className)}>{children}</div>
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+export * from './components/alert'
+export * from './components/auth-header'
+export * from './components/button'
+export * from './components/command'
+export * from './components/dialog'
+export * from './components/form'
+export * from './components/form-fields'
+export * from './components/google-map-picker'
+export * from './components/input'
+export * from './components/label'
+export * from './components/loading'
+export * from './components/otp-input'
+export * from './components/password-checklist'
+export * from './components/popover'
+export * from './components/select'
+export * from './components/select-input'
+export * from './components/spinner'
+export * from './components/step-header'
+export * from './components/stepper'
+export * from './components/toast'
+export * from './components/tooltip'
+export * from './components/wrapper'
+
+export * from './types/toast'
+export * from './types/password'
+
+export { cn, inputBase, inputDisabled, inputFocus, inputPlaceholder, registerToastEmitter, toast } from './utils'

package/src/locales/es/ui.json

@@ -0,0 +1,28 @@
+{
+  "otpField": {
+    "description": "Se ha enviado un código OTP a tu correo . Revisa tu bandeja de entrada."
+  },
+  "inputField": {
+    "showPassword": "Mostrar contraseña",
+    "hidePassword": "Ocultar contraseña",
+    "clear": "Limpiar"
+  },
+  "dialog": {
+    "close": "Cerrar"
+  },
+  "selectInput": {
+    "placeholder": "Selecciona...",
+    "loading": "Cargando...",
+    "search": "Buscar...",
+    "noResults": "Sin resultados."
+  },
+  "passwordChecklist": {
+    "minLength": "Mínimo {{min}} caracteres",
+    "hasUpperAndLower": "Una mayúscula y minúscula",
+    "hasNumber": "Un número",
+    "hasSpecialChar": "Un carácter especial"
+  },
+  "spinner": {
+    "loading": "Cargando..."
+  }
+}

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+import uiEs from './es/ui.json'
+
+export const uiLocales = {
+  es: {
+    ui: uiEs
+  }
+}

package/src/styles/index.css

@@ -0,0 +1 @@
+@import './theme.css';

package/src/styles/theme.css

@@ -0,0 +1,105 @@
+/* ── Capa 1: Primitivos ────────────────────────────────────────────────────
+   Valores reales del design system. Solo esta capa cambia cuando
+   UI/UX entregue actualizaciones — los tokens semánticos no se tocan.
+─────────────────────────────────────────────────────────────────────────── */
+:root {
+  /* Brand — Naranja */
+  --brand-100: #fdf0ea;
+  --brand-200: #facdb4;
+  --brand-300: #f5a478;
+  --brand-400: #ec7a45;
+  --brand-500: #e25822;
+  --brand-600: #b84418;
+  --brand-700: #8a3011;
+
+  /* Neutral */
+  --neutral-0: #ffffff;
+  --neutral-50: #f9f8f7;
+  --neutral-100: #f2f0ee;
+  --neutral-200: #e4e1dc;
+  --neutral-300: #c8c3bb;
+  --neutral-400: #999999;
+  --neutral-500: #6b6560;
+  --neutral-600: #4a4540;
+  --neutral-900: #1e1e1e;
+  --neutral-950: #000000;
+
+  /* Feedback */
+  --success-500: #2d9b6f;
+  --success-100: #e8f7f1;
+  --warning-500: #d4820a;
+  --warning-100: #fef3e2;
+  --error-500: #d63b3b;
+  --error-100: #fdecec;
+  --info-500: #2f7ec4;
+  --info-100: #eaf3fb;
+}
+
+/* ── Capa 2: Semánticos ────────────────────────────────────────────────────
+   Los componentes solo conocen estos tokens, nunca los primitivos.
+   @theme inline genera las utilidades de Tailwind (bg-*, text-*, etc.)
+   Naming: sin prefijo bg-/text- porque Tailwind lo agrega en la clase.
+     bg-page, bg-surface, bg-subtle, bg-hover, bg-brand, bg-brand-subtle
+     text-primary → text-foreground (evita colisión con brand primary)
+─────────────────────────────────────────────────────────────────────────── */
+@theme {
+  /* ── Brand / Primary ── */
+  --color-primary: var(--brand-500); /* bg-brand, text-brand         */
+  --color-primary-hover: var(--brand-400); /* hover de botón primario      */
+  --color-primary-dark: var(--brand-600); /* pressed/active de botón      */
+  --color-brand-subtle: var(--brand-100); /* chips, tags de marca         */
+  --color-brand-200: var(--brand-200); /* active card background       */
+  --color-brand-border: var(--brand-300); /* bordes activos, focus ring   */
+
+  /* ── Surfaces ── */
+  --color-page: var(--neutral-0); /* bg-page    → fondo de página    */
+  --color-surface: var(--neutral-0); /* bg-surface → cards, modales     */
+  --color-subtle: var(--neutral-50); /* bg-subtle  → sidebars, alternas */
+  --color-hover: var(--neutral-100); /* bg-hover   → filas, list items  */
+
+  /* ── Text ── */
+  --color-foreground: var(--neutral-950); /* text-foreground → títulos, cuerpo     */
+  --color-title: var(--neutral-900); /* text-title      → titulos              */
+  --color-subtitle: var(--neutral-400); /* text-subtitle   → párrafos            */
+  --color-body: var(--neutral-600); /* text-body       → párrafos            */
+  --color-muted: var(--neutral-500); /* text-muted      → descripciones, meta */
+  --color-disabled: var(--neutral-300); /* text-disabled   → inputs off          */
+  --color-inverse: var(--neutral-0); /* text-inverse    → sobre fondos oscuros */
+
+  /* ── Estados de componentes interactivos ── */
+  --color-inactive: var(--neutral-200); /* bg disabled                  */
+  --color-inactive-text: var(--neutral-400); /* text disabled                */
+
+  /* ── Feedback ── */
+  --color-success: var(--success-500);
+  --color-success-subtle: var(--success-100);
+  --color-warning: var(--warning-500);
+  --color-warning-subtle: var(--warning-100);
+  --color-destructive: var(--error-500);
+  --color-destructive-subtle: var(--error-100);
+  --color-info: var(--info-500);
+  --color-info-subtle: var(--info-100);
+  --color-wait: var(--info-500);
+
+  /* ── UI Components ── */
+  --color-border: var(--neutral-300); /* bordes de inputs           */
+  --color-input: var(--neutral-0); /* fondo de inputs = blanco   */
+  --color-placeholder: var(--neutral-300); /* placeholder text           */
+  --color-icon-muted: var(--neutral-400); /* iconos inactivos           */
+  --color-tooltip: var(--neutral-900);
+  --color-tooltip-foreground: var(--neutral-0);
+
+  /* ── Spinner ── */
+  --color-spinner-light: var(--neutral-50);
+  --color-spinner-primary: var(--brand-500);
+  --color-spinner-secondary: var(--neutral-900);
+
+  /* ── Sistema ── */
+  --color-ring: var(--brand-300); /* focus outline — brand-300, 2px per spec */
+
+  /* ── Fuentes ──
+     DM Sans es la tipografía global (definida en global.css).
+     Poppins es excepción puntual — solo donde UX lo indique (p. ej. título del login).
+  */
+  --font-poppins: 'Poppins', sans-serif;
+}

package/src/types/password.ts

@@ -0,0 +1,12 @@
+export interface PasswordRule {
+  key: string
+  label: string
+  test: (value: string) => boolean
+}
+
+export interface PasswordRulesConfig {
+  hasNumber?: boolean
+  hasSpecialChar?: boolean
+  hasUpperAndLower?: boolean
+  minLength?: false | number
+}

package/src/types/toast.ts

@@ -0,0 +1,19 @@
+export interface ToastOptions {
+  duration?: number
+  position?: ToastPosition
+  subtitle?: string
+  title: string
+}
+
+export type ToastPosition =
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'center'
+  | 'middle-bottom'
+  | 'middle-top'
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+
+export type ToastType = 'error' | 'info' | 'success' | 'wait' | 'warning'

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { cn } from './cn'
+export { inputBase, inputDisabled, inputFocus, inputPlaceholder } from './styles'
+export { registerToastEmitter, toast } from './toast-emitter'

package/src/utils/styles.ts

@@ -0,0 +1,19 @@
+import { cn } from './cn'
+
+export const inputBase = cn(
+  'flex w-full !h-[50px] rounded-[10px] px-3 gap-[10px] text-base font-normal justify-between items-center',
+  'border border-border bg-surface text-foreground',
+  'transition-all duration-200 ease-in-out',
+  'placeholder:text-icon-muted placeholder:text-sm placeholder:font-normal placeholder:leading-none',
+  'disabled:cursor-not-allowed disabled:bg-inactive disabled:text-inactive-text disabled:border-inactive disabled:placeholder:text-inactive-text'
+)
+
+export const inputPlaceholder = cn('text-icon-muted text-sm font-normal leading-none')
+
+export const inputDisabled = cn('cursor-not-allowed opacity-50')
+
+export const inputFocus = cn(
+  'focus:outline-none focus-visible:outline-none',
+  'focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary',
+  'data-[state=open]:ring-2 data-[state=open]:ring-ring data-[state=open]:border-primary'
+)

package/src/utils/toast-emitter.ts

@@ -0,0 +1,37 @@
+import { ToastOptions, ToastType } from '../types/toast'
+
+type ToastEmitter = ((type: ToastType, options: ToastOptions) => void) | null
+
+let emitToast: ToastEmitter = null
+
+export const toast = {
+  error(options: string | ToastOptions) {
+    emit('error', options)
+  },
+  info(options: string | ToastOptions) {
+    emit('info', options)
+  },
+  success(options: string | ToastOptions) {
+    emit('success', options)
+  },
+  wait(options: string | ToastOptions) {
+    emit('wait', options)
+  },
+  warning(options: string | ToastOptions) {
+    emit('warning', options)
+  }
+}
+
+export function registerToastEmitter(fn: ToastEmitter) {
+  emitToast = fn
+}
+
+function emit(type: ToastType, options: string | ToastOptions) {
+  if (!emitToast) return
+
+  if (typeof options === 'string') {
+    emitToast(type, { title: options })
+  } else {
+    emitToast(type, options)
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+interface ImportMeta {
+  readonly env: Record<string, string | undefined>
+}