masked-components-cli 1.5.0

package/templates/masked-input/MaskedInput/MaskedInput.styles.ts

@@ -0,0 +1,298 @@
+import { transitions } from '@/styles/animations'
+import { theme } from '@/styles/theme'
+import styled from 'styled-components'
+
+type props = {
+  $variant?: string
+  $hasToggle?: boolean
+  $radius?: number
+}
+
+/* ============================================================
+ * CONTAINER
+ * ============================================================ */
+
+export const MaskedInputContainer = styled.div<props>`
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  input,
+  textarea,
+  select,
+  button {
+    width: 100%;
+    padding: 12px;
+    border-radius: ${({ $radius }) => ($radius ? `${$radius}px` : '18px')};
+    border: 2px solid ${theme.colors.baseBlue.light20};
+    font-size: 1rem;
+    line-height: 1.4;
+    color: ${theme.colors.baseBlue.light30};
+    background-color: ${theme.colors.baseBlue.light02};
+    z-index: 2;
+    text-align: left;
+
+    ${transitions.slow}
+
+    ${({ $hasToggle }) => $hasToggle && `padding-right: 44px;`}
+
+    input.input-hidden {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    /* Hover */
+    &:hover {
+      border-color: ${theme.colors.baseBlue.base};
+    }
+
+    /* Focus */
+    &:focus {
+      outline: none;
+      background-color: ${theme.colors.baseBlue.light04};
+      border-color: ${theme.colors.baseBlue.light};
+      box-shadow: 0px 0px 10px 2px ${theme.colors.baseBlue.light};
+
+      &::placeholder {
+        color: ${theme.colors.baseBlue.light40};
+      }
+    }
+
+    /* Disabled */
+    &:disabled {
+      background-color: ${theme.colors.baseBlue.light20};
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    /* Error */
+    &.error {
+      border-color: ${theme.colors.baseRed.base};
+      background-color: ${theme.colors.baseRed.light02};
+      color: ${theme.colors.baseRed.light20};
+
+      &:focus {
+        box-shadow: 0 0 0 3px ${theme.colors.baseRed.light20};
+      }
+
+      &.error::placeholder {
+        color: ${theme.colors.baseRed.light20};
+      }
+    }
+
+    &::placeholder {
+      color: ${theme.colors.baseBlue.light40};
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    min-height: 44px;
+    padding: 0 12px;
+    line-height: 40px;
+  }
+
+  /* ===================== TEXTAREA ===================== */
+
+  textarea {
+    min-height: 96px;
+    width: 100%;
+    resize: none;
+    scrollbar-width: thin;
+    scrollbar-color: ${theme.colors.baseBlue.base} ${theme.colors.baseBlue.light20};
+  }
+`
+
+/* ============================================================
+ * SEARCH ICON
+ * ============================================================ */
+
+export const SearchIcon = styled.div`
+  position: absolute;
+  left: 12px;
+  top: 42px;
+  font-size: 1.3rem;
+  color: ${theme.colors.baseBlue.light30};
+  pointer-events: none;
+  z-index: 3;
+`
+
+/* ============================================================
+ * PASSWORD TOGGLE
+ * ============================================================ */
+
+export const PasswordToggle = styled.div`
+  position: absolute;
+  right: 12px;
+  top: 43px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 2;
+  color: ${theme.colors.baseBlue.light};
+
+  svg {
+    font-size: 1.5rem;
+  }
+`
+
+/* ============================================================
+ * FILE PREVIEW
+ * ============================================================ */
+
+export const PreviewImageDiv = styled.div`
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+  gap: 10px;
+
+  img {
+    border-radius: 10px;
+    object-fit: cover;
+    border: 2px solid ${theme.colors.baseBlue.light20};
+    background: ${theme.colors.baseBlue.light02};
+  }
+`
+
+/* ============================================================
+ * FILE BUTTON
+ * ============================================================ */
+
+export const FileTrigger = styled.button`
+  width: 100%;
+  height: 40px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  border-radius: 16px;
+  border: 2px solid ${theme.colors.baseBlue.light20};
+  color: ${theme.colors.baseBlue.light40};
+  background-color: ${theme.colors.baseBlue.light02};
+  font-size: 0.95rem;
+  font-weight: 500;
+
+  cursor: pointer;
+
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease;
+
+  &:hover {
+    border-color: ${theme.colors.baseBlue.base};
+    background: ${theme.colors.baseBlue.light};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px ${theme.colors.baseBlue.light20};
+  }
+`
+
+/* ============================================================
+ * ERROR
+ * ============================================================ */
+
+export const ErrorDiv = styled.div`
+  color: ${theme.colors.baseRed.light30};
+  font-size: 0.85rem;
+  font-weight: 500;
+  background-color: ${theme.colors.baseRed.light04};
+  padding: 6px 12px;
+  border-radius: 10px;
+`
+
+/* ============================================================
+ * LABEL
+ * ============================================================ */
+export const InputLabel = styled.label`
+  color: ${theme.colors.baseBlue.light30};
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  svg {
+    font-size: 20px;
+  }
+`
+
+/* ============================================================
+ * SELECT
+ * ============================================================ */
+export const SelectTrigger = styled.button`
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 16px;
+  color: ${theme.colors.baseBlue.light40};
+  background-color: ${theme.colors.baseBlue.light02};
+  border: 2px solid ${theme.colors.baseBlue.light20};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+`
+
+export const SelectDropdown = styled.div`
+  position: absolute;
+  top: 100%;
+  padding: 4px 4px 0px 4px;
+  left: 0;
+  width: 100%;
+  border-radius: 14px;
+  overflow: hidden;
+  background: ${theme.colors.baseBlue.base};
+  z-index: 5;
+`
+
+export const SelectOption = styled.div`
+  width: 100%;
+  padding: 8px;
+  border-radius: 14px;
+  margin-bottom: 4px;
+  background: ${theme.colors.baseBlue.dark20};
+  color: ${theme.colors.baseBlue.light50};
+  border: 2px solid ${theme.colors.baseBlue.light20};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-weight: 800;
+
+  &:hover {
+    background: ${theme.colors.baseBlue.light20};
+    color: ${theme.colors.baseBlue.base};
+    border-color: ${theme.colors.baseBlue.dark20};
+  }
+`
+
+/* ============================================================
+ * CURRENCY
+ * ============================================================ */
+export const CurrencyWrapper = styled.div`
+  position: relative;
+
+  span {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: 600;
+    color: ${theme.colors.baseBlue.light30};
+    pointer-events: none;
+  }
+
+  input {
+    padding-left: 44px;
+  }
+`

package/templates/masked-input/MaskedInput/MaskedInput.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { InputProps } from './MaskedInput.types'
+import { CurrencyInput } from './variants/CurrencyInput'
+import { FileInput } from './variants/FileInput'
+import { MaskedInput } from './variants/MaskedInput'
+import { PasswordInput } from './variants/PasswordInput'
+import { SearchInput } from './variants/SearchInput'
+import { SelectInput } from './variants/SelectInput'
+import { TextareaInput } from './variants/TextareaInput'
+import { TextInput } from './variants/TextInput'
+
+export function MInput(props: InputProps) {
+  switch (props.variant) {
+    case 'default':
+      return <TextInput {...props} />
+
+    case 'textarea':
+      return <TextareaInput {...props} />
+
+    case 'masked':
+      return <MaskedInput {...props} />
+
+    case 'password':
+      return <PasswordInput {...props} />
+
+    case 'select':
+      return <SelectInput {...props} />
+
+    case 'file':
+      return <FileInput {...props} />
+
+    case 'search':
+      return <SearchInput {...props} />
+
+    case 'currency':
+      return <CurrencyInput {...props} />
+
+    default:
+      return null
+  }
+}

package/templates/masked-input/MaskedInput/MaskedInput.types.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react'
+
+/* ================= BASE ================= */
+
+export type BaseProps<T> = {
+  name?: string
+  value?: T
+  onChange?: (value: T) => void
+  radius?: number
+
+  id?: string
+  className?: string
+  placeholder?: string
+
+  icon?: ReactNode
+  label?: string
+  helperText?: string
+
+  error?: string
+  touched?: boolean
+  showError?: boolean
+}
+
+/* ================= VARIANT MAP ================= */
+
+export type InputVariantMap = {
+  default: BaseProps<string> & {
+    type?: 'text' | 'email' | 'number'
+  }
+
+  textarea: BaseProps<string>
+
+  password: BaseProps<string>
+
+  masked: BaseProps<string> & {
+    mask: string
+  }
+
+  select: BaseProps<string> & {
+    options: { value: string; label: string }[]
+  }
+
+  file: BaseProps<string> & {
+    multiple?: boolean
+    fileMode?: 'local' | 'cloudinary'
+    previewMode?: 'normal' | 'replace'
+
+    uploadPreset?: string
+    cloudName?: string
+
+    onChange?: (files: File | File[] | string | string[]) => void
+    onFileChange?: (payload: { files: File[]; previews: string[] }) => void
+    onUploadingChange?: (uploading: boolean) => void
+
+    error?: string
+    touched?: boolean
+    showError?: boolean
+  }
+
+  search: BaseProps<string> & {
+    placeholder?: string
+    onSearch?: (value: string) => void
+  }
+
+  currency: BaseProps<string> & {
+    currencyConfig?: {
+      locale?: string
+      currency?: string
+      symbol?: string
+      symbolPosition?: 'prefix' | 'suffix'
+    }
+  }
+}
+
+/* ================= UNION AUTOMÁTICA ================= */
+
+export type InputProps = {
+  [K in keyof InputVariantMap]: { variant: K } & InputVariantMap[K]
+}[keyof InputVariantMap]

package/templates/masked-input/MaskedInput/formikVariants/FormikCurrencyInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { CurrencyInput } from '../variants/CurrencyInput'
+
+type Props = { name: string } & InputVariantMap['currency']
+
+export function FormikCurrencyInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <CurrencyInput {...props} variant="currency" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikFileInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { FileInput } from '../variants/FileInput'
+
+type Props = { name: string } & InputVariantMap['file']
+
+export function FormikFileInput({ name, ...props }: Props) {
+  const [, , helpers] = useField(name)
+
+  return <FileInput {...props} variant="file" onChange={helpers.setValue} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikMaskedTextInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { MaskedInput } from '../variants/MaskedInput'
+
+type Props = { name: string } & InputVariantMap['masked']
+
+export function FormikMaskedTextInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <MaskedInput {...props} variant="masked" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikPasswordInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { PasswordInput } from '../variants/PasswordInput'
+
+type Props = { name: string } & InputVariantMap['password']
+
+export function FormikPasswordInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <PasswordInput {...props} variant="password" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikSearchInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { SearchInput } from '../variants/SearchInput'
+
+type Props = { name: string } & InputVariantMap['search']
+
+export function FormikSearchInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <SearchInput {...props} variant="search" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikSelectInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { SelectInput } from '../variants/SelectInput'
+
+type Props = { name: string } & InputVariantMap['select']
+
+export function FormikSelectInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <SelectInput {...props} variant="select" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikTextInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { TextInput } from '../variants/TextInput'
+
+type Props = { name: string } & InputVariantMap['default']
+
+export function FormikTextInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <TextInput {...props} variant="default" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/formikVariants/FormikTextareaInput.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useField } from 'formik'
+import { InputVariantMap } from '../MaskedInput.types'
+import { TextareaInput } from '../variants/TextareaInput'
+
+type Props = { name: string } & InputVariantMap['textarea']
+
+export function FormikTextareaInput({ name, ...props }: Props) {
+  const [field, meta, helpers] = useField(name)
+
+  return <TextareaInput {...props} variant="textarea" value={field.value} onChange={helpers.setValue} error={meta.error} touched={meta.touched} />
+}

package/templates/masked-input/MaskedInput/variants/CurrencyInput.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  CurrencyWrapper,
+  ErrorDiv,
+  InputLabel,
+  MaskedInputContainer,
+} from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'currency' } & InputVariantMap['currency']
+
+export function CurrencyInput(props: Props) {
+  const hasError = props.touched && Boolean(props.error)
+
+  /* ============================================================
+   * CONFIGURAÇÕES DE FORMATAÇÃO DE MOEDA
+   * ============================================================ */
+  const {
+    currencyConfig: {
+      symbol = 'R$',
+      locale = 'pt-BR',
+      currency = 'BRL',
+    } = {},
+  } = props
+
+  /* ============================================================
+   * ESTADO INTERNO (EM CENTAVOS)
+   * Inicializa UMA VEZ a partir do value
+   * ============================================================ */
+  const [cents, setCents] = useState(() =>
+    Math.round(Number(props.value ?? 0) * 100)
+  )
+
+  /* ============================================================
+   * FORMATADOR
+   * ============================================================ */
+  function formatCurrencyFromCents(value: number) {
+    return new Intl.NumberFormat(locale, {
+      currency,
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value / 100)
+  }
+
+  /* ============================================================
+   * INPUT LOGIC (direita → esquerda)
+   * ============================================================ */
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key >= '0' && e.key <= '9') {
+      e.preventDefault()
+      setCents(prev => prev * 10 + Number(e.key))
+      return
+    }
+
+    if (e.key === 'Backspace') {
+      e.preventDefault()
+      setCents(prev => Math.floor(prev / 10))
+    }
+  }
+
+  /* ============================================================
+   * EMITE VALOR FINAL (ex: "54.85")
+   * ============================================================ */
+  function handleBlur() {
+    props.onChange?.((cents / 100).toFixed(2))
+  }
+
+  return (
+    <MaskedInputContainer $variant="currency" $radius={props.radius} data-error={hasError}>
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <CurrencyWrapper>
+        <span>{symbol}</span>
+
+        <input
+          id={props.id}
+          inputMode="numeric"
+          value={formatCurrencyFromCents(cents)}
+          placeholder="0,00"
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          readOnly
+          className={hasError ? 'error' : ''}
+          aria-invalid={hasError ? 'true' : undefined}
+          aria-describedby={hasError ? `${props.id}-error` : undefined}
+        />
+      </CurrencyWrapper>
+
+      {props.showError && hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}