@flowtomic/ui 0.1.14 → 0.2.0

package/dist/components/atoms/forms/checkbox/checkbox.d.ts

@@ -1,14 +1,72 @@
 /**
- * Checkbox Component - Flowtomic UI
+ * # Checkbox Component
  *
- * Componente Checkbox próprio do design-system baseado em Radix UI
- * Implementação direta sem dependência de componentes externos
+ * O componente `Checkbox` é um controle de seleção usado para permitir que o usuário selecione
+ * uma ou mais opções de um conjunto. É baseado em Radix UI para garantir acessibilidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Estados Visuais**: Suporta estados checked, unchecked e disabled
+ * - **Indicador Visual**: Exibe ícone de check quando selecionado
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Checkbox } from "@flowtomic/ui/components/atoms/forms/checkbox";
+ *
+ * function MyComponent() {
+ *   const [checked, setChecked] = React.useState(false);
+ *
+ *   return (
+ *     <Checkbox
+ *       checked={checked}
+ *       onCheckedChange={setChecked}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Label
+ *
+ * ```tsx
+ * <div className="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <label htmlFor="terms">Aceito os termos</label>
+ * </div>
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Espaço)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) para mais detalhes
  */
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
+/**
+ * Props do componente Checkbox.
+ * @see CheckboxPrimitive.Root para props disponíveis (checked, onCheckedChange, disabled, etc.)
+ */
 export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 /**
- * Checkbox - Componente de checkbox
+ * Componente Checkbox para seleção de opções.
+ *
+ * @component
+ * @param {CheckboxProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Checkbox renderizado
+ *
+ * @example
+ * ```tsx
+ * <Checkbox checked={checked} onCheckedChange={setChecked} />
+ * <Checkbox defaultChecked />
+ * <Checkbox disabled />
+ * ```
  */
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/components/atoms/forms/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAE1F;;GAEG;AACH,QAAA,MAAM,QAAQ,iKAsBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAE9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAE1F;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,QAAQ,iKAsBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/atoms/forms/checkbox/checkbox.js

@@ -1,16 +1,70 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Checkbox Component - Flowtomic UI
+ * # Checkbox Component
  *
- * Componente Checkbox próprio do design-system baseado em Radix UI
- * Implementação direta sem dependência de componentes externos
+ * O componente `Checkbox` é um controle de seleção usado para permitir que o usuário selecione
+ * uma ou mais opções de um conjunto. É baseado em Radix UI para garantir acessibilidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Estados Visuais**: Suporta estados checked, unchecked e disabled
+ * - **Indicador Visual**: Exibe ícone de check quando selecionado
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Checkbox } from "@flowtomic/ui/components/atoms/forms/checkbox";
+ *
+ * function MyComponent() {
+ *   const [checked, setChecked] = React.useState(false);
+ *
+ *   return (
+ *     <Checkbox
+ *       checked={checked}
+ *       onCheckedChange={setChecked}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Label
+ *
+ * ```tsx
+ * <div className="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <label htmlFor="terms">Aceito os termos</label>
+ * </div>
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Espaço)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) para mais detalhes
  */
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 /**
- * Checkbox - Componente de checkbox
+ * Componente Checkbox para seleção de opções.
+ *
+ * @component
+ * @param {CheckboxProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Checkbox renderizado
+ *
+ * @example
+ * ```tsx
+ * <Checkbox checked={checked} onCheckedChange={setChecked} />
+ * <Checkbox defaultChecked />
+ * <Checkbox disabled />
+ * ```
  */
 const Checkbox = React.forwardRef(({ className, ...props }, ref) => {
     return (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(Check, { className: "h-4 w-4" }) }) }));

package/dist/components/atoms/forms/field/field.d.ts

@@ -1,12 +1,68 @@
+/**
+ * # Field Component
+ *
+ * O componente `Field` é um sistema de composição para campos de formulário que fornece
+ * estrutura consistente para labels, descrições, erros e conteúdo. Suporta múltiplas
+ * orientações (vertical, horizontal, responsive) e composição flexível.
+ *
+ * ## Características Principais
+ *
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ * - **Orientação**: Suporta vertical, horizontal e responsive
+ * - **Validação**: Integração com mensagens de erro
+ * - **Acessível**: Estrutura semântica para acessibilidade
+ *
+ * ## Componentes
+ *
+ * - **Field**: Container principal do campo
+ * - **FieldLabel**: Label do campo
+ * - **FieldDescription**: Descrição/ajuda do campo
+ * - **FieldError**: Mensagens de erro
+ * - **FieldContent**: Container para o controle
+ * - **FieldGroup**: Agrupa múltiplos campos
+ * - **FieldSet**: Fieldset semântico
+ * - **FieldLegend**: Legend do fieldset
+ * - **FieldSeparator**: Separador visual
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Field, FieldLabel, FieldContent, FieldDescription } from "@flowtomic/ui/components/atoms/forms/field";
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Field>
+ *       <FieldLabel htmlFor="email">E-mail</FieldLabel>
+ *       <FieldContent>
+ *         <Input id="email" />
+ *         <FieldDescription>Digite seu e-mail</FieldDescription>
+ *       </FieldContent>
+ *     </Field>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Input Component](../input/input.tsx) para exemplos de uso
+ */
 import { type VariantProps } from "class-variance-authority";
 import { Label } from "../label/label";
+/**
+ * Props do componente FieldSet.
+ */
 export interface FieldSetProps extends React.ComponentProps<"fieldset"> {
 }
 declare function FieldSet({ className, ...props }: FieldSetProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldSet {
     var displayName: string;
 }
+/**
+ * Props do componente FieldLegend.
+ *
+ * @property {'legend' | 'label'} [variant='legend'] - Variante visual do legend
+ */
 export interface FieldLegendProps extends React.ComponentProps<"legend"> {
+    /** Variante visual do legend */
     variant?: "legend" | "label";
 }
 declare function FieldLegend({ className, variant, ...props }: FieldLegendProps): import("react/jsx-runtime").JSX.Element;
@@ -22,6 +78,11 @@ declare namespace FieldGroup {
 declare const fieldVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props do componente Field.
+ *
+ * @property {'vertical' | 'horizontal' | 'responsive'} [orientation='vertical'] - Orientação do campo
+ */
 export interface FieldProps extends React.ComponentProps<"div">, VariantProps<typeof fieldVariants> {
 }
 declare function Field({ className, orientation, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
@@ -59,7 +120,13 @@ declare function FieldSeparator({ children, className, ...props }: FieldSeparato
 declare namespace FieldSeparator {
     var displayName: string;
 }
+/**
+ * Props do componente FieldError.
+ *
+ * @property {Array<{ message?: string } | undefined>} [errors] - Array de erros a exibir
+ */
 export interface FieldErrorProps extends React.ComponentProps<"div"> {
+    /** Array de erros a exibir */
     errors?: Array<{
         message?: string;
     } | undefined>;

package/dist/components/atoms/forms/field/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;CAAG;AAE1E,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAYvD;kBAZQ,QAAQ;;;AAgBjB,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACtE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAcjF;kBAdQ,WAAW;;;AAkBpB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEvE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW3D;kBAXQ,UAAU;;;AAenB,QAAA,MAAM,aAAa;;8EAmBjB,CAAC;AAEH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAW3E;kBAXQ,KAAK;;;AAed,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEzE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQ/D;kBARQ,YAAY;;;AAYrB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC;CAAG;AAE9E,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAa3D;kBAbQ,UAAU;;;AAiBnB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEvE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAW3D;kBAXQ,UAAU;;;AAenB,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;CAAG;AAE3E,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAavE;kBAbQ,gBAAgB;;;AAiBzB,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAsB7E;kBAtBQ,cAAc;;;AA0BvB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAClD;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,kDAwC7E;kBAxCQ,UAAU;;;AA4CnB,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/field/field.tsx"],"names":[],"mappings":"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"}

package/dist/components/atoms/forms/field/field.js

@@ -1,4 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * # Field Component
+ *
+ * O componente `Field` é um sistema de composição para campos de formulário que fornece
+ * estrutura consistente para labels, descrições, erros e conteúdo. Suporta múltiplas
+ * orientações (vertical, horizontal, responsive) e composição flexível.
+ *
+ * ## Características Principais
+ *
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ * - **Orientação**: Suporta vertical, horizontal e responsive
+ * - **Validação**: Integração com mensagens de erro
+ * - **Acessível**: Estrutura semântica para acessibilidade
+ *
+ * ## Componentes
+ *
+ * - **Field**: Container principal do campo
+ * - **FieldLabel**: Label do campo
+ * - **FieldDescription**: Descrição/ajuda do campo
+ * - **FieldError**: Mensagens de erro
+ * - **FieldContent**: Container para o controle
+ * - **FieldGroup**: Agrupa múltiplos campos
+ * - **FieldSet**: Fieldset semântico
+ * - **FieldLegend**: Legend do fieldset
+ * - **FieldSeparator**: Separador visual
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Field, FieldLabel, FieldContent, FieldDescription } from "@flowtomic/ui/components/atoms/forms/field";
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Field>
+ *       <FieldLabel htmlFor="email">E-mail</FieldLabel>
+ *       <FieldContent>
+ *         <Input id="email" />
+ *         <FieldDescription>Digite seu e-mail</FieldDescription>
+ *       </FieldContent>
+ *     </Field>
+ *   );
+ * }
+ * ```
+ *
+ * @see [Input Component](../input/input.tsx) para exemplos de uso
+ */
 import { cva } from "class-variance-authority";
 import { useMemo } from "react";
 import { cn } from "@/lib/utils";

package/dist/components/atoms/forms/form/form.d.ts

@@ -1,7 +1,67 @@
+/**
+ * # Form Component
+ *
+ * O componente `Form` é um sistema de composição para formulários baseado em React Hook Form.
+ * Fornece integração completa com validação, gerenciamento de estado e acessibilidade.
+ *
+ * ## Características Principais
+ *
+ * - **React Hook Form**: Integração completa com React Hook Form
+ * - **Validação**: Suporte a validação via Zod ou outras bibliotecas
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ * - **Acessível**: Estrutura semântica e mensagens de erro acessíveis
+ *
+ * ## Componentes
+ *
+ * - **Form**: Provider do formulário (FormProvider)
+ * - **FormField**: Campo controlado do formulário
+ * - **FormItem**: Container de item do formulário
+ * - **FormLabel**: Label do campo
+ * - **FormControl**: Controle do campo
+ * - **FormDescription**: Descrição do campo
+ * - **FormMessage**: Mensagem de erro/validação
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { useForm } from "react-hook-form";
+ * import { zodResolver } from "@hookform/resolvers/zod";
+ * import { Form, FormField, FormItem, FormLabel, FormControl } from "@flowtomic/ui/components/atoms/forms/form";
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   const form = useForm({
+ *     resolver: zodResolver(schema),
+ *   });
+ *
+ *   return (
+ *     <Form {...form}>
+ *       <FormField
+ *         control={form.control}
+ *         name="email"
+ *         render={({ field }) => (
+ *           <FormItem>
+ *             <FormLabel>E-mail</FormLabel>
+ *             <FormControl>
+ *               <Input {...field} />
+ *             </FormControl>
+ *           </FormItem>
+ *         )}
+ *       />
+ *     </Form>
+ *   );
+ * }
+ * ```
+ *
+ * @see [React Hook Form](https://react-hook-form.com/) para mais detalhes
+ */
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+/**
+ * Componente Form (FormProvider) para gerenciamento de formulários.
+ */
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 export type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ControllerProps<TFieldValues, TName>;
 declare const FormField: {

package/dist/components/atoms/forms/form/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EAIjB,MAAM,iBAAiB,CAAC;AAIzB,QAAA,MAAM,IAAI,4MAAe,CAAC;AAW1B,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AAEzC,QAAA,MAAM,SAAS;KACb,YAAY,SAAS,WAAW,gBAChC,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,0CAGpC,cAAc,CAAC,YAAY,EAAE,KAAK,CAAC;;CAMrC,CAAC;AAIF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAErE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQvD;kBARQ,QAAQ;;;AAYjB,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;CAAG;AAE3F,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAYzD;kBAZQ,SAAS;;;AAgBlB,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;CAAG;AAE9E,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAYlD;kBAZQ,WAAW;;;AAgBpB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;CAAG;AAE1E,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAWrE;kBAXQ,eAAe;;;AAexB,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,kDAkB7D;kBAlBQ,WAAW;;;AAsBpB,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACT,YAAY,GACb,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/form/form.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAEH,OAAO,KAAK,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EAIjB,MAAM,iBAAiB,CAAC;AAIzB;;GAEG;AACH,QAAA,MAAM,IAAI,4MAAe,CAAC;AAW1B,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AAEzC,QAAA,MAAM,SAAS;KACb,YAAY,SAAS,WAAW,gBAChC,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,0CAGpC,cAAc,CAAC,YAAY,EAAE,KAAK,CAAC;;CAMrC,CAAC;AAIF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAErE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQvD;kBARQ,QAAQ;;;AAYjB,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;CAAG;AAE3F,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAYzD;kBAZQ,SAAS;;;AAgBlB,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;CAAG;AAE9E,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAYlD;kBAZQ,WAAW;;;AAgBpB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;CAAG;AAE1E,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAWrE;kBAXQ,eAAe;;;AAexB,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,kDAkB7D;kBAlBQ,WAAW;;;AAsBpB,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACT,YAAY,GACb,CAAC"}

package/dist/components/atoms/forms/form/form.js

@@ -4,6 +4,9 @@ import * as React from "react";
 import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
 import { cn } from "@/lib/utils";
 import { Label } from "../label/label";
+/**
+ * Componente Form (FormProvider) para gerenciamento de formulários.
+ */
 const Form = FormProvider;
 const FormFieldContext = React.createContext({});
 const FormField = ({ ...props }) => {

package/dist/components/atoms/forms/input/input.d.ts

@@ -1,14 +1,113 @@
+/**
+ * # Input Component
+ *
+ * O componente `Input` é um campo de entrada de texto usado para coletar dados do usuário.
+ * Ele fornece uma interface consistente e acessível para entrada de texto com suporte a
+ * labels, mensagens de erro e texto de ajuda.
+ *
+ * ## Características Principais
+ *
+ * - **Variantes Visuais**: Suporta variantes (default, error, success) para feedback visual
+ * - **Tamanhos Flexíveis**: Três tamanhos disponíveis (default, sm, lg)
+ * - **Labels e Helpers**: Suporta label opcional e texto de ajuda
+ * - **Validação Visual**: Exibe mensagens de erro com estilo destrutivo
+ * - **Acessível**: Suporta labels associados e navegação por teclado
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante padrão com borda normal
+ * - **`error`**: Variante para estados de erro (borda vermelha)
+ * - **`success`**: Variante para estados de sucesso (borda verde)
+ *
+ * ## Tamanhos
+ *
+ * - **`default`**: Tamanho padrão (h-10)
+ * - **`sm`**: Tamanho pequeno (h-9)
+ * - **`lg`**: Tamanho grande (h-11)
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Input
+ *       label="Nome"
+ *       placeholder="Digite seu nome"
+ *       helperText="Este campo é obrigatório"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Validação
+ *
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   error="Email inválido"
+ *   variant="error"
+ * />
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Label associado automaticamente via htmlFor/id
+ * - Suporta aria-* attributes para melhor acessibilidade
+ * - Mensagens de erro são exibidas como texto acessível
+ * - Suporta navegação por teclado
+ *
+ * @see [Label Component](../label/label.tsx) para labels customizados
+ */
 import { type VariantProps } from "class-variance-authority";
 import React from "react";
+/**
+ * Variantes de estilo do Input usando class-variance-authority.
+ * Define as classes CSS para diferentes variantes e tamanhos.
+ */
 declare const inputVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
-    variant?: "default" | "success" | "error" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props do componente Input.
+ *
+ * @interface InputProps
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">}
+ * @extends {VariantProps<typeof inputVariants>}
+ *
+ * @property {string} [label] - Label opcional exibido acima do input
+ * @property {string} [error] - Mensagem de erro exibida abaixo do input
+ * @property {string} [helperText] - Texto de ajuda exibido abaixo do input (quando não há erro)
+ * @property {'default' | 'error' | 'success'} [variant='default'] - Variante visual do input
+ * @property {'default' | 'sm' | 'lg'} [size='default'] - Tamanho do input
+ * @property {string} [className] - Classes CSS adicionais
+ */
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /** Label opcional exibido acima do input */
     label?: string;
+    /** Mensagem de erro exibida abaixo do input */
     error?: string;
+    /** Texto de ajuda exibido abaixo do input (quando não há erro) */
     helperText?: string;
 }
+/**
+ * Componente Input para entrada de texto.
+ *
+ * @component
+ * @param {InputProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Input renderizado
+ *
+ * @example
+ * ```tsx
+ * <Input label="Nome" placeholder="Digite seu nome" />
+ * <Input label="Email" type="email" error="Email inválido" variant="error" />
+ * <Input label="Senha" type="password" helperText="Mínimo 8 caracteres" />
+ * ```
+ */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input, inputVariants };
 //# sourceMappingURL=input.d.ts.map

package/dist/components/atoms/forms/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,aAAa;;;8EAoBlB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,qFA0BV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/input/input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,QAAA,MAAM,aAAa;;;8EAoBlB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,KAAK,qFA0BV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/atoms/forms/input/input.js

@@ -1,7 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * # Input Component
+ *
+ * O componente `Input` é um campo de entrada de texto usado para coletar dados do usuário.
+ * Ele fornece uma interface consistente e acessível para entrada de texto com suporte a
+ * labels, mensagens de erro e texto de ajuda.
+ *
+ * ## Características Principais
+ *
+ * - **Variantes Visuais**: Suporta variantes (default, error, success) para feedback visual
+ * - **Tamanhos Flexíveis**: Três tamanhos disponíveis (default, sm, lg)
+ * - **Labels e Helpers**: Suporta label opcional e texto de ajuda
+ * - **Validação Visual**: Exibe mensagens de erro com estilo destrutivo
+ * - **Acessível**: Suporta labels associados e navegação por teclado
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante padrão com borda normal
+ * - **`error`**: Variante para estados de erro (borda vermelha)
+ * - **`success`**: Variante para estados de sucesso (borda verde)
+ *
+ * ## Tamanhos
+ *
+ * - **`default`**: Tamanho padrão (h-10)
+ * - **`sm`**: Tamanho pequeno (h-9)
+ * - **`lg`**: Tamanho grande (h-11)
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Input
+ *       label="Nome"
+ *       placeholder="Digite seu nome"
+ *       helperText="Este campo é obrigatório"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Validação
+ *
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   error="Email inválido"
+ *   variant="error"
+ * />
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Label associado automaticamente via htmlFor/id
+ * - Suporta aria-* attributes para melhor acessibilidade
+ * - Mensagens de erro são exibidas como texto acessível
+ * - Suporta navegação por teclado
+ *
+ * @see [Label Component](../label/label.tsx) para labels customizados
+ */
 import { cva } from "class-variance-authority";
 import React from "react";
 import { cn } from "@/lib/utils";
+/**
+ * Variantes de estilo do Input usando class-variance-authority.
+ * Define as classes CSS para diferentes variantes e tamanhos.
+ */
 const inputVariants = cva("flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         size: {
@@ -20,6 +88,20 @@ const inputVariants = cva("flex w-full rounded-md border border-input bg-transpa
         variant: "default",
     },
 });
+/**
+ * Componente Input para entrada de texto.
+ *
+ * @component
+ * @param {InputProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Input renderizado
+ *
+ * @example
+ * ```tsx
+ * <Input label="Nome" placeholder="Digite seu nome" />
+ * <Input label="Email" type="email" error="Email inválido" variant="error" />
+ * <Input label="Senha" type="password" helperText="Mínimo 8 caracteres" />
+ * ```
+ */
 const Input = React.forwardRef(({ className, size, variant, label, error, helperText, id, ...props }, ref) => {
     const generatedId = React.useId();
     const inputId = id || generatedId;