@komensal/ui 0.1.0 → 0.2.1

package/src/components/toast/toast.tsx

@@ -1,106 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,28 +0,0 @@
-{
-  "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

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

package/src/styles/index.css

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

package/src/types/password.ts

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

package/src/utils/styles.ts

@@ -1,19 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

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