@komensal/ui 0.1.0

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@komensal/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles/index.css",
+    "./locales": "./src/locales/index.ts"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@vis.gl/react-google-maps": "^1.8.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.575.0",
+    "react-hook-form": "^7.71.1",
+    "react-i18next": "^16.5.4",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/google.maps": "^3.64.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "~5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/alert.tsx

@@ -0,0 +1,45 @@
+import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '../utils'
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant
+}
+
+type AlertVariant = 'error' | 'info' | 'success' | 'warning'
+
+const variantStyles: Record<AlertVariant, { container: string; icon: string }> = {
+  error: { container: 'bg-destructive-subtle text-destructive', icon: 'text-destructive' },
+  info: { container: 'bg-info-subtle text-info', icon: 'text-info' },
+  success: { container: 'bg-success-subtle text-success', icon: 'text-success' },
+  warning: { container: 'bg-warning-subtle text-warning', icon: 'text-warning' }
+}
+
+const variantIcons: Record<AlertVariant, React.ComponentType<{ className?: string }>> = {
+  error: AlertCircle,
+  info: Info,
+  success: CheckCircle2,
+  warning: TriangleAlert
+}
+
+export const Alert = ({ children, className, variant = 'error', ...props }: AlertProps) => {
+  const styles = variantStyles[variant]
+  const Icon = variantIcons[variant]
+
+  return (
+    <div
+      aria-live='polite'
+      className={cn(
+        'flex items-center justify-center gap-2 rounded-[10px] px-4 py-3 text-sm',
+        styles.container,
+        className
+      )}
+      role='alert'
+      {...props}
+    >
+      <Icon className={cn('h-5 w-5 shrink-0', styles.icon)} />
+      <span>{children}</span>
+    </div>
+  )
+}

package/src/components/auth-header.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '../utils'
+
+interface AuthHeaderProps {
+  children?: ReactNode
+  logoAlt: string
+  mobileClassName?: string
+}
+
+export const AuthHeader = ({ children, logoAlt, mobileClassName }: AuthHeaderProps) => {
+  return (
+    <>
+      <div className={cn('flex min-h-0 shrink flex-col lg:hidden', mobileClassName)}>
+        <div className='flex justify-center py-2'>
+          <img alt={logoAlt} className='h-11 md:h-12' src='/logotipo_color.svg' />
+        </div>
+        {children}
+      </div>
+
+      <div className='absolute hidden p-10 lg:flex'>
+        <img alt={logoAlt} className='h-12.5 w-12.5' src='/logo_color.svg' />
+      </div>
+    </>
+  )
+}

package/src/components/button.tsx

@@ -0,0 +1,121 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '../utils'
+import { Spinner } from './spinner'
+import { Tooltip } from './tooltip'
+
+const buttonVariants = cva(
+  'w-full inline-flex items-center justify-center gap-[10px] whitespace-nowrap rounded-[12px] border border-transparent text-base font-semibold transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-inactive disabled:text-inactive-text disabled:border-transparent cursor-pointer',
+  {
+    defaultVariants: {
+      hoverStyle: 'none',
+      size: 'default',
+      variant: 'primary'
+    },
+    variants: {
+      hoverStyle: {
+        highlight: `
+          hover:bg-brand-subtle hover:border-primary hover:text-primary
+        `,
+        none: '',
+        shine: `
+          relative overflow-hidden
+          hover:-translate-y-[1px] hover:shadow-lg
+          before:content-[''] before:absolute before:top-0 before:left-[-100%]
+          before:w-full before:h-full
+          before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent)]
+          before:transition-all before:duration-300
+          hover:before:left-[100%]
+        `
+      },
+      size: {
+        default: 'h-14 px-4',
+        icon: 'h-12 w-12 p-0',
+        lg: 'h-14 px-12',
+        sm: 'h-9 px-3 text-sm'
+      },
+      variant: {
+        destructive: 'bg-destructive text-inverse hover:bg-destructive/90',
+        ghost: 'bg-transparent border border-border text-foreground hover:bg-hover',
+        invisible: 'bg-transparent rounded-none',
+        link: 'text-muted underline-offset-4 hover:underline text-sm font-normal disabled:bg-transparent',
+        outline: 'bg-surface border border-primary text-primary hover:bg-brand-subtle',
+        primary: 'bg-primary text-inverse hover:bg-primary-hover active:bg-primary-dark',
+        tertiary: 'bg-subtle border border-border text-foreground hover:bg-hover',
+        underline: 'text-primary underline'
+      }
+    }
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  childrenClassName?: string
+  hoverStyle?: 'highlight' | 'none' | 'shine'
+  icon?: React.ReactNode
+  iconLeft?: React.ReactNode
+  iconRight?: React.ReactNode
+  isLoading?: boolean
+  sideTooltip?: 'bottom' | 'left' | 'right' | 'top'
+  tooltip?: string
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      asChild = false,
+      children,
+      childrenClassName,
+      className,
+      disabled,
+      hoverStyle,
+      icon,
+      iconLeft,
+      iconRight,
+      isLoading = false,
+      sideTooltip,
+      size,
+      tooltip,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'button'
+
+    const buttonNode = (
+      <Comp
+        className={cn(buttonVariants({ hoverStyle, size, variant }), isLoading && 'relative opacity-40', className)}
+        disabled={disabled === true || isLoading}
+        ref={ref}
+        {...props}
+      >
+        {iconLeft}
+        {icon}
+        <span className={cn('flex w-full items-center justify-center gap-2', childrenClassName)}>{children}</span>
+        {iconRight}
+        {isLoading && (
+          <div className='absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm'>
+            <Spinner size='sm' />
+          </div>
+        )}
+      </Comp>
+    )
+
+    return tooltip ? (
+      <Tooltip childrenClassName='flex items-center justify-center' message={tooltip} sideTooltip={sideTooltip}>
+        {buttonNode}
+      </Tooltip>
+    ) : (
+      buttonNode
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Button, buttonVariants }

package/src/components/command.tsx

@@ -0,0 +1,125 @@
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { Command as CommandPrimitive } from 'cmdk'
+import * as React from 'react'
+
+import { cn } from '../utils'
+import { Dialog, DialogContent } from './dialog'
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    className={cn('bg-surface text-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className)}
+    ref={ref}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+type CommandDialogProps = DialogProps
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className='overflow-hidden p-0'>
+        <Command className='**:[[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3'>
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
+    <MagnifyingGlassIcon className='mr-2 h-4 w-4 shrink-0 opacity-50' />
+    <CommandPrimitive.Input
+      className={cn(
+        'placeholder:text-placeholder flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List className={cn('max-h-75 overflow-x-hidden overflow-y-auto', className)} ref={ref} {...props} />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty className='py-6 text-center text-sm' ref={ref} {...props} />)
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    className={cn(
+      'text-foreground **:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator className={cn('bg-border -mx-1 h-px', className)} ref={ref} {...props} />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    className={cn(
+      'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('text-muted ml-auto text-xs tracking-widest', className)} {...props} />
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+}

package/src/components/dialog.tsx

@@ -0,0 +1,118 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { cn } from '../utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & { isAbsolute?: boolean }
+>(({ className, isAbsolute = false, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/10 z-60 backdrop-blur-xs',
+      isAbsolute ? 'absolute inset-0' : 'fixed inset-0',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  container?: HTMLElement | null
+  isAbsolute?: boolean
+  isCloseIcon?: boolean
+  overlayClassName?: string
+}
+
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+  ({ children, className, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
+    const { t } = useTranslation('ui')
+
+    return (
+      <DialogPortal container={container}>
+        <DialogOverlay className={overlayClassName} isAbsolute={isAbsolute} />
+
+        <DialogPrimitive.Content
+          className={cn(
+            'bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] z-70 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 rounded-2xl p-6 px-0 shadow-lg duration-200 outline-none lg:px-0',
+            isAbsolute ? 'absolute top-[50%] left-[50%]' : 'fixed top-[50%] left-[50%]',
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+          {isCloseIcon && (
+            <DialogPrimitive.Close className='data-[state=open]:text-muted ring-offset-surface focus:ring-ring data-[state=open]:bg-hover border-border bg-border absolute top-11 right-8 flex h-8 w-8 min-w-8 cursor-pointer items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'>
+              <Cross2Icon className='text-body hover:text-primary-dark h-4 w-4' />
+              <span className='sr-only'>{t('dialog.close')}</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    )
+  }
+)
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse justify-center rounded-2xl sm:flex-row sm:space-x-2', className)}
+    {...props}
+  />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
+    ref={ref}
+    {...props}
+  >
+    <span>{props.children}</span>
+  </DialogPrimitive.Title>
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description className={cn('text-muted text-sm', className)} ref={ref} {...props}>
+    <span>{props.children}</span>
+  </DialogPrimitive.Description>
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+}

package/src/components/form-fields/index.ts

@@ -0,0 +1,5 @@
+export * from './input-field'
+export * from './label-field'
+export * from './map-picker-field'
+export * from './otp-field'
+export * from './select-field'

package/src/components/form-fields/input-field.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react'
+import { Control, FieldValues, Path } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { FaRegEye, FaRegEyeSlash } from 'react-icons/fa6'
+import { RxCross2 } from 'react-icons/rx'
+
+import { cn } from '../../utils'
+import { FormControl, FormField, FormItem, FormMessage } from '../form'
+import { Input } from '../input'
+import { LabelField } from './label-field'
+
+interface InputFieldProps<T extends FieldValues = FieldValues> {
+  control: Control<T>
+  disabled?: boolean
+  inputClassName?: string
+  isClearable?: boolean
+  label?: string
+  labelClassName?: string
+  mainClassName?: string
+  name: Path<T>
+  onClear?: () => void
+  placeholder?: string
+  type?: string
+  visualRequired?: boolean
+}
+
+export const InputField = <T extends FieldValues = FieldValues>({
+  control,
+  disabled,
+  inputClassName,
+  isClearable,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  onClear,
+  placeholder,
+  type = 'text',
+  visualRequired
+}: InputFieldProps<T>) => {
+  const { t } = useTranslation('ui')
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev)
+  }
+
+  const isPassword = type === 'password'
+  const inputType = isPassword ? (isPasswordVisible ? 'text' : 'password') : type === 'plate' ? 'text' : type
+
+  const isPlate = type === 'plate'
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => {
+        const hasError = !!fieldState.error
+
+        return (
+          <FormItem className={cn('flex flex-col', mainClassName)}>
+            <LabelField
+              label={label}
+              labelClassName={cn(labelClassName, hasError && 'text-destructive')}
+              name={name}
+              visualRequired={visualRequired}
+            />
+            <FormControl>
+              <div className='relative'>
+                <Input
+                  {...field}
+                  autoComplete={isPassword ? 'current-password' : undefined}
+                  className={cn(
+                    inputClassName,
+                    isPlate && 'uppercase',
+                    hasError && 'border-destructive',
+                    isPassword && 'pr-10 [&::-ms-reveal]:hidden'
+                  )}
+                  data-no-password-toggle
+                  disabled={disabled}
+                  maxLength={isPlate ? 6 : undefined}
+                  min={type === 'number' ? 0 : undefined}
+                  onChange={(e) => {
+                    let value = e.target.value
+
+                    if (isPlate) {
+                      value = value
+                        .toUpperCase()
+                        .replace(/[^A-Z0-9]/g, '')
+                        .slice(0, 6)
+                    }
+
+                    field.onChange(value)
+                  }}
+                  placeholder={placeholder}
+                  type={inputType}
+                  value={field.value ?? ''}
+                />
+
+                <div className='absolute inset-y-0 right-0 flex items-center space-x-2 pr-2'>
+                  {field.value && isClearable && (
+                    <button
+                      className='focus:outline-none'
+                      onClick={onClear}
+                      title={t('inputField.clear')}
+                      type='button'
+                    >
+                      <RxCross2 size={18} />
+                    </button>
+                  )}
+
+                  {type === 'password' && (
+                    <button
+                      className='focus:outline-none'
+                      onClick={togglePasswordVisibility}
+                      title={isPasswordVisible ? t('inputField.hidePassword') : t('inputField.showPassword')}
+                      type='button'
+                    >
+                      {isPasswordVisible ? <FaRegEye size={18} /> : <FaRegEyeSlash size={20} />}
+                    </button>
+                  )}
+                </div>
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )
+      }}
+    />
+  )
+}

package/src/components/form-fields/label-field.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../../utils'
+import { Label } from '../label'
+
+interface LabelFieldProps {
+  label?: string
+  labelClassName?: string
+  name: string
+  visualRequired?: boolean
+}
+
+export const LabelField = ({ label, labelClassName, name, visualRequired }: LabelFieldProps) => {
+  return (
+    <Label
+      className={cn('text-body mb-2 text-start text-sm leading-none font-normal tracking-normal', labelClassName)}
+      htmlFor={name}
+    >
+      <span>{label}</span> {visualRequired && <span className='text-destructive'> *</span>}
+    </Label>
+  )
+}