@liguelead/design-system 0.0.9 → 0.0.11

package/components/InputOpt/InputOpt.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { InputOptProps } from './InputOpt.types'
+import {
+  OptWrapper,
+  OptBox,
+  OtpSeparator,
+  OptHelperText,
+  OtpSeparatorContainer,
+} from './InputOpt.styles'
+
+import { 
+  isValidChar, 
+  sanitizeValue, 
+  createInitialState,
+  focusNext,
+  focusPrevious,
+  focusFirstEmpty
+} from './utils'
+
+const InputOpt: React.FC<InputOptProps> = ({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  autoFocus = true,
+  disabled = false,
+  placeholderChar = '',
+  name = 'otp',
+  className,
+  inputMode = 'numeric',
+  helperText,
+  error,
+  ...rest
+}) => {
+  const isControlled = value !== undefined
+  const [internal, setInternal] = useState<string[]>(() => createInitialState(value, length))
+  const refs = useRef<Array<HTMLInputElement | null>>([])
+
+  useEffect(() => {
+    if (!isControlled) return
+    const sanitized = sanitizeValue(value!, inputMode)
+    setInternal(createInitialState(sanitized, length))
+  }, [value, inputMode, isControlled, length])
+
+  useEffect(() => {
+    if (autoFocus && refs.current[0]) refs.current[0].focus()
+  }, [autoFocus])
+
+  const emitChange = (next: string[]) => {
+    const joined = next.join('')
+    onChange?.(joined)
+    if (joined.length === length && !next.includes('')) onComplete?.(joined)
+  }
+
+  const updateIndex = (index: number, char: string) => {
+    if (disabled || !isValidChar(char, inputMode)) return
+
+    const next = [...internal]
+    next[index] = char
+    if (!isControlled) setInternal(next)
+    emitChange(next)
+    focusNext(refs, index, length)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (disabled) return
+    const { key } = e
+
+    if (key === 'Backspace') {
+      e.preventDefault()
+      const next = [...internal]
+      next[index] = ''
+      if (!isControlled) setInternal(next)
+      emitChange(next)
+      focusPrevious(refs, index)
+      return
+    }
+
+    if (key === 'ArrowLeft') focusPrevious(refs, index)
+    if (key === 'ArrowRight') focusNext(refs, index, length)
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const char = e.target.value.slice(-1)
+    updateIndex(index, char)
+  }
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
+    if (disabled) return
+    e.preventDefault()
+    
+    const text = e.clipboardData.getData('text').trim()
+    if (!text) return
+
+    const valid = sanitizeValue(text, inputMode)
+    const next = [...internal]
+    
+    for (let j = 0; j < valid.length && index + j < length; j++) {
+      next[index + j] = valid[j]
+    }
+
+    if (!isControlled) setInternal(next)
+    emitChange(next)
+    focusFirstEmpty(refs, next, length)
+  }
+
+  return (
+    <>
+      <OptWrapper
+        className={`${className || ''} ${error ? 'error' : ''}`.trim()}
+        aria-disabled={disabled}
+        aria-invalid={!!error}
+        role="group"
+        data-error={!!error}
+      >
+        {Array.from({ length }).map((_, i) => (
+          <React.Fragment key={i}>
+            <OptBox
+              ref={el => (refs.current[i] = el)}
+              $disabled={disabled}
+              $error={!!error}
+              value={internal[i] || ''}
+              placeholder={placeholderChar}
+              onKeyDown={e => handleKeyDown(e, i)}
+              onPaste={e => handlePaste(e, i)}
+              onChange={e => handleChange(e, i)}
+              {...rest}
+              inputMode={inputMode}
+              pattern={inputMode === 'numeric' ? '[0-9]*' : undefined}
+              autoComplete="one-time-code"
+              aria-label={`Dígito ${i + 1} de ${length}`}
+              disabled={disabled}
+              maxLength={1}
+            />
+            {(i + 1) % 2 === 0 && i < length - 1 && (
+              <OtpSeparatorContainer>
+                <OtpSeparator>-</OtpSeparator>
+              </OtpSeparatorContainer>
+            )}
+          </React.Fragment>
+        ))}
+      </OptWrapper>
+
+      {helperText && (
+        <OptHelperText $error={!!error} aria-live="polite">
+          {helperText}
+        </OptHelperText>
+      )}
+    </>
+  )
+}
+
+export default InputOpt

package/components/InputOpt/InputOpt.types.ts

@@ -0,0 +1,14 @@
+export interface InputOptProps {
+  length?: number;
+  value?: string;
+  onChange?: (code: string) => void;
+  onComplete?: (code: string) => void;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  placeholderChar?: string;
+  name?: string;
+  className?: string;
+  inputMode?: 'numeric' | 'text';
+  helperText?: string;
+  error?: boolean;
+}

package/components/InputOpt/index.ts

@@ -0,0 +1 @@
+export { default } from './InputOpt'

package/components/InputOpt/utils/focusManagement.ts

@@ -0,0 +1,31 @@
+export const focusNext = (
+  refs: React.MutableRefObject<Array<HTMLInputElement | null>>,
+  currentIndex: number,
+  length: number
+) => {
+  if (currentIndex < length - 1) {
+    refs.current[currentIndex + 1]?.focus()
+  }
+}
+
+export const focusPrevious = (
+  refs: React.MutableRefObject<Array<HTMLInputElement | null>>,
+  currentIndex: number
+) => {
+  if (currentIndex > 0) {
+    refs.current[currentIndex - 1]?.focus()
+  }
+}
+
+export const focusFirstEmpty = (
+  refs: React.MutableRefObject<Array<HTMLInputElement | null>>,
+  values: string[],
+  length: number
+) => {
+  const firstEmpty = values.findIndex(c => c === '')
+  if (firstEmpty >= 0) {
+    refs.current[firstEmpty]?.focus()
+  } else {
+    refs.current[length - 1]?.blur()
+  }
+}

package/components/InputOpt/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './inputValidation'
+export * from './focusManagement'

package/components/InputOpt/utils/inputValidation.ts

@@ -0,0 +1,14 @@
+export const isValidChar = (char: string, inputMode: 'numeric' | 'text'): boolean => {
+  return inputMode === 'numeric' ? /^\d$/.test(char) : /^[0-9a-zA-Z]$/.test(char)
+}
+
+export const sanitizeValue = (value: string, inputMode: 'numeric' | 'text'): string => {
+  return inputMode === 'numeric' 
+    ? value.replace(/[^0-9]/g, '') 
+    : value.replace(/[^0-9a-zA-Z]/g, '')
+}
+
+export const createInitialState = (value: string | undefined, length: number): string[] => {
+  const chars = (value || '').split('').slice(0, length)
+  return [...chars, ...Array(Math.max(0, length - chars.length)).fill('')]
+}

package/components/LinkButton/LinkButton.size.ts

@@ -0,0 +1,39 @@
+import { 
+  fontSize, 
+  fontWeight, 
+  lineHeight, 
+  spacing, 
+  radius 
+} from '@liguelead/foundation'
+import { ButtonSizeTypes } from '../Button/Button.types'
+
+export const LinkButtonSizes = (size: ButtonSizeTypes) => {
+  const sizes = {
+    sm: `
+      padding: ${spacing.spacing0}px ${spacing.spacing4}px;
+      font-size: ${fontSize.fontSize12}px;
+      font-weight: ${fontWeight.fontWeight500};
+      line-height: ${lineHeight.lineHeight22}px;
+      gap: ${spacing.spacing8}px;
+      border-radius: ${radius.radius4}px;
+      `,
+    md: `
+      padding: ${spacing.spacing0}px ${spacing.spacing4}px;
+      font-size: ${fontSize.fontSize14}px;
+      font-weight: ${fontWeight.fontWeight500};
+      line-height: ${lineHeight.lineHeight22}px;
+      gap: ${spacing.spacing8}px;
+      border-radius: ${radius.radius4}px;
+    `,
+    lg: `
+      padding: ${spacing.spacing0}px ${spacing.spacing4}px;
+      font-size: ${fontSize.fontSize16}px;
+      font-weight: ${fontWeight.fontWeight500};
+      line-height: ${lineHeight.lineHeight24}px;
+      gap: ${spacing.spacing8}px;
+      border-radius: ${radius.radius4}px;
+    `
+  }
+
+  return sizes[size]
+}

package/components/LinkButton/LinkButton.style.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+import { parseColor } from '../../utils'
+import { StyledButtonProps } from '../Button/Button.styles'
+import { shadow } from '@liguelead/foundation'
+
+export const LinkAnchor = styled.a`
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+
+  color: ${({ theme }) => parseColor(theme.colors.primary)};
+
+  &:hover { 
+    text-decoration: underline; 
+    background-color: transparent;
+    color: ${({ theme }) => parseColor(theme.colors.primaryDark)};
+  }
+  
+  &:focus { 
+    outline: 2px solid ${({ theme }) => parseColor(theme.colors.primaryLight)}; 
+    outline-offset: 2px; 
+  }
+  
+  &[aria-disabled='true'] { 
+    opacity: .5;
+    pointer-events: none;
+  }
+`
+
+export const StyledLinkButton = styled.button<StyledButtonProps>`
+    position: relative;
+    display: flex;
+    outline: none !important;
+
+    width: ${({ $fluid }) => ($fluid ? '100%' : 'auto')};
+    ${({ $buttonSize }) => $buttonSize}
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s, box-shadow 0.3s;
+
+    &:focus {
+        box-shadow: ${shadow.focusShadow};
+    }
+`

package/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import { LinkAnchor, StyledLinkButton } from './LinkButton.style'
+import { RippleContainer } from '../Button/Button.styles'
+import { RippleInterface } from '../Button/Button.types'
+import { ButtonVariant } from '../Button/Button.appearance'
+import { LinkButtonSizes } from './LinkButton.size'
+import { LinkButtonProps } from './LinkButton.types'
+
+const LinkButton: React.FC<LinkButtonProps> = ({
+  href,
+  children,
+  disabled = false,
+  color = 'primary',
+  variant = 'ghost',
+  fluid = false,
+  leftIcon,
+  rightIcon,
+  onClick,
+  size = 'md',
+  ...rest
+}) => {
+  const [ripples, setRipples] = useState<RippleInterface[]>([])
+  const buttonVariant = ButtonVariant(color, variant)
+  const buttonSize = LinkButtonSizes(size)
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (disabled) {
+      e.preventDefault()
+      return
+    }
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    const newRipple: RippleInterface = {
+      id: `${Date.now()}-${Math.random()}`,
+      x,
+      y
+    }
+    setRipples(prev => [...prev, newRipple])
+    onClick?.(e)
+  }
+
+  return (
+    <StyledLinkButton
+      as={LinkAnchor}
+      href={href}
+      onClick={handleClick}
+      $variant={buttonVariant}
+      $buttonSize={buttonSize}
+      $fluid={fluid}
+      aria-disabled={disabled}
+      rel={rest.target === '_blank' ? 'noopener noreferrer' : rest.rel}
+      {...rest}
+    >
+      {leftIcon && <span className="link-btn__icon--left">{leftIcon}</span>}
+      <span className="link-btn__content">{children}</span>
+      {rightIcon && <span className="link-btn__icon--right">{rightIcon}</span>}
+      {ripples.map(r => (
+        <RippleContainer
+          key={r.id}
+          $variant={variant}
+          style={{
+            top: r.y - 10,
+            left: r.x - 10,
+            width: 20,
+            height: 20
+          }}
+          onAnimationEnd={() => setRipples(prev => prev.filter(x => x.id !== r.id))}
+        />
+      ))}
+    </StyledLinkButton>
+  )
+}
+
+export default LinkButton

package/components/LinkButton/LinkButton.types.ts

@@ -0,0 +1,11 @@
+export interface LinkButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string
+  children: React.ReactNode
+  disabled?: boolean
+  color?: string
+  variant?: 'ghost'
+  fluid?: boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  size?: 'sm' | 'md' | 'lg'
+}

package/components/LinkButton/index.ts

@@ -0,0 +1 @@
+export { default } from './LinkButton';

package/components/PageWrapper/PageWrapper.tsx

@@ -1,31 +1,31 @@
-import {parseColor} from '../../utils'
-import styled from 'styled-components'
-import {colorType} from 'types'
-import {spacing, SpacingInterface} from '@liguelead/foundation'
-
-type SpacingType = keyof SpacingInterface
-
-interface WrapperProps {
-    width?: string
-    bgColor?: colorType
-    padding?: SpacingType
-}
-
-const PageWrapper = styled.div.withConfig({
-    shouldForwardProp: prop => !['bgColor', 'width', 'padding'].includes(prop)
-})<WrapperProps>`
-    width: 100%;
-    height: 100%;
-    max-width: ${({width}) => width + 'px' || '100%'};
-    margin: 0 auto;
-    padding: ${({padding}) =>
-        padding ? spacing[padding] + 'px' : spacing.spacing16 + 'px'};
-    border-radius: 4px;
-    background: ${({bgColor, theme}) =>
-        bgColor
-            ? parseColor(theme.colors[bgColor])
-            : parseColor(theme.colors.white)};
-    border: 1px solid ${({theme}) => parseColor(theme.colors.neutral300)};
-`
-
-export default PageWrapper
+import {parseColor} from '../../utils'
+import styled from 'styled-components'
+import {colorType} from 'types'
+import {spacing, SpacingInterface} from '@liguelead/foundation'
+
+type SpacingType = keyof SpacingInterface
+
+interface WrapperProps {
+    width?: string
+    bgColor?: colorType
+    padding?: SpacingType
+}
+
+const PageWrapper = styled.div.withConfig({
+    shouldForwardProp: prop => !['bgColor', 'width', 'padding'].includes(prop)
+})<WrapperProps>`
+    width: 100%;
+    height: 100%;
+    max-width: ${({width}) => width + 'px' || '100%'};
+    margin: 0 auto;
+    padding: ${({padding}) =>
+        padding ? spacing[padding] + 'px' : spacing.spacing16 + 'px'};
+    border-radius: 4px;
+    background: ${({bgColor, theme}) =>
+        bgColor
+            ? parseColor(theme.colors[bgColor])
+            : parseColor(theme.colors.white)};
+    border: 1px solid ${({theme}) => parseColor(theme.colors.neutral300)};
+`
+
+export default PageWrapper

package/components/PageWrapper/index.ts

@@ -1 +1 @@
-export { default } from './PageWrapper'
+export { default } from './PageWrapper'

package/components/RadioButton/RadioButton.inputVariants.ts

@@ -0,0 +1,133 @@
+import { css } from 'styled-components'
+import { spacing, shadow } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+interface RadioInputVariantProps {
+  $error?: boolean
+  $variant?: 'default' | 'box'
+}
+
+export const RadioInputVariant = (variant: 'default' | 'box') => {
+  const variants = {
+    default: css<RadioInputVariantProps>`
+      appearance: none;
+      width: ${spacing.spacing16}px;
+      height: ${spacing.spacing16}px;
+      border: 1px solid ${({ theme, $error }) => 
+        $error ? parseColor(theme.colors.danger200) : parseColor(theme.colors.neutral400)};
+      border-radius: 50%;
+      background: ${({ theme }) => parseColor(theme.colors.white)};
+      position: relative;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-top: 2px;
+
+      &:checked {
+        border-color: ${({ theme, $error }) => 
+          $error ? parseColor(theme.colors.danger200) : parseColor(theme.colors.neutral300)};
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: ${({ theme, $error }) => 
+            $error ? parseColor(theme.colors.danger200) : parseColor(theme.colors.primary)};
+        }
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: ${({ theme, $error }) => 
+          $error
+            ? `0 0 0 3px ${parseColor(theme.colors.danger100)}40`
+            : `${shadow.focusShadow}`
+        };
+        border-color: ${({ theme, $error }) => 
+          $error 
+            ? parseColor(theme.colors.danger200) 
+            : parseColor(theme.colors.neutral700)
+        };
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+        background: ${({ theme }) => parseColor(theme.colors.neutral100)};
+        
+        &:checked::after {
+          background: ${({ theme }) => parseColor(theme.colors.neutral400)};
+        }
+      }
+    `,
+    
+    box: css<RadioInputVariantProps>`
+      appearance: none;
+      width: ${spacing.spacing16}px;
+      height: ${spacing.spacing16}px;
+      border: 1px solid ${({ theme, $error }) => 
+        $error ? parseColor(theme.colors.danger200) : parseColor(theme.colors.neutral400)};
+      border-radius: 50%;
+      background: ${({ theme }) => parseColor(theme.colors.white)};
+      position: relative;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-top: 2px;
+
+      &:checked {
+        border-color: ${({ theme, $error }) => 
+          $error ? parseColor(theme.colors.danger200) : 'transparent'};
+        background: ${({ theme, $error }) => 
+          $error ? parseColor(theme.colors.danger200) : parseColor(theme.colors.primary)};
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: ${({ theme }) => parseColor(theme.colors.white)};
+        }
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: ${({ theme, $error }) => 
+          $error
+            ? `0 0 0 3px ${parseColor(theme.colors.danger100)}40`
+            : `${shadow.focusShadow}`
+        };
+        border-color: ${({ theme, $error }) => 
+          $error 
+            ? parseColor(theme.colors.danger200) 
+            : parseColor(theme.colors.neutral700)
+        };
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+        background: ${({ theme }) => parseColor(theme.colors.neutral100)};
+        
+        &:checked {
+          background: ${({ theme }) => parseColor(theme.colors.neutral400)};
+          
+          &::after {
+            background: ${({ theme }) => parseColor(theme.colors.white)};
+          }
+        }
+      }
+    `
+  }
+
+  return variants[variant] || variants.default
+}

package/components/RadioButton/RadioButton.styles.ts

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    spacing
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { RadioButtonVariant } from './RadioButton.variants'
+import { RadioInputVariant } from './RadioButton.inputVariants'
+import { RadioWrapperProps } from './RadioButton.types'
+
+export const RadioWrapper = styled.label<RadioWrapperProps>`
+    display: flex;
+    align-items: flex-start;
+    gap: ${spacing.spacing12}px;
+    cursor: ${({ $disabled }) => $disabled ? 'not-allowed' : 'pointer'};
+    opacity: ${({ $disabled }) => $disabled ? 0.5 : 1};
+    transition: all 0.2s ease;
+
+    ${({ $variant = 'default' }) => RadioButtonVariant($variant)}
+`
+
+interface RadioInputProps {
+    $error?: boolean
+    $variant?: 'default' | 'box'
+}
+
+export const RadioInput = styled.input<RadioInputProps>`
+    ${({ $variant = 'default' }) => RadioInputVariant($variant)}
+`
+
+export const RadioContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing4}px;
+    flex: 1;
+`
+
+export const RadioContentWithIcon = styled.div`
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+`
+
+export const RadioIconWrapper = styled.div<{ $error?: boolean }>`
+    display: flex;
+    align-items: center;
+    margin-left: ${spacing.spacing8}px;
+    flex-shrink: 0;
+    
+    & svg {
+        width: 20px;
+        height: 20px;
+        color: ${({ theme, $error }) => 
+            $error ? parseColor(theme.colors.danger100) : parseColor(theme.colors.neutral700)};
+    }
+`
+
+export const RadioLabel = styled.span<{ $error?: boolean }>`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight500};
+    color: ${({ theme, $error }) => 
+        $error 
+          ? parseColor(theme.colors.danger100) 
+          : parseColor(theme.colors.textDark)};
+`
+
+export const RadioDescription = styled.span<{ $error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight16}px;
+    color: ${({ theme, $error }) => 
+        $error 
+          ? parseColor(theme.colors.danger100) 
+          : parseColor(theme.colors.textMedium)};
+`