@flowtomic/ui 0.1.14 → 0.2.0

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

@@ -1,6 +1,62 @@
+/**
+ * # InputOTP Component
+ *
+ * O componente `InputOTP` é um campo de entrada usado para códigos de verificação
+ * (One-Time Password). Fornece uma interface visual com slots individuais para cada dígito.
+ *
+ * ## Características Principais
+ *
+ * - **Slots Visuais**: Cada dígito é exibido em um slot individual
+ * - **Auto-foco**: Foco automático entre slots
+ * - **Validação**: Suporte a validação de formato
+ * - **Acessível**: Estrutura semântica para acessibilidade
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ *
+ * ## Componentes
+ *
+ * - **InputOTP**: Container principal do OTP
+ * - **InputOTPGroup**: Agrupa slots
+ * - **InputOTPSlot**: Slot individual para dígito
+ * - **InputOTPSeparator**: Separador visual entre grupos
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot } from "@flowtomic/ui/components/atoms/forms/input-otp";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <InputOTP maxLength={6}>
+ *       <InputOTPGroup>
+ *         <InputOTPSlot index={0} />
+ *         <InputOTPSlot index={1} />
+ *         <InputOTPSlot index={2} />
+ *         <InputOTPSlot index={3} />
+ *         <InputOTPSlot index={4} />
+ *         <InputOTPSlot index={5} />
+ *       </InputOTPGroup>
+ *     </InputOTP>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente entre slots
+ *
+ * @see [input-otp](https://github.com/guilhermerodz/input-otp) para mais detalhes
+ */
 import { OTPInput } from "input-otp";
 import * as React from "react";
+/**
+ * Props do componente InputOTP.
+ *
+ * @property {string} [containerClassName] - Classes CSS para o container
+ */
 export type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
+    /** Classes CSS para o container */
     containerClassName?: string;
 };
 declare function InputOTP({ className, containerClassName, maxLength, ...props }: InputOTPProps): import("react/jsx-runtime").JSX.Element;
@@ -13,7 +69,13 @@ declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): imp
 declare namespace InputOTPGroup {
     var displayName: string;
 }
+/**
+ * Props do componente InputOTPSlot.
+ *
+ * @property {number} index - Índice do slot (0-based)
+ */
 export interface InputOTPSlotProps extends React.ComponentProps<"div"> {
+    /** Índice do slot (0-based) */
     index: number;
 }
 declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/input-otp/input-otp.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAUtF;kBAVQ,QAAQ;;;AAcjB,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAE1E,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAIjE;kBAJQ,aAAa;;;AAQtB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAsBtE;kBAtBQ,YAAY;;;AA0BrB,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAE9E,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAa9D;kBAbQ,iBAAiB;;;AAiB1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/input-otp/input-otp.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAClE,mCAAmC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAUtF;kBAVQ,QAAQ;;;AAcjB,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAE1E,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAIjE;kBAJQ,aAAa;;;AAQtB;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAsBtE;kBAtBQ,YAAY;;;AA0BrB,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAE9E,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAa9D;kBAbQ,iBAAiB;;;AAiB1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,4 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * # InputOTP Component
+ *
+ * O componente `InputOTP` é um campo de entrada usado para códigos de verificação
+ * (One-Time Password). Fornece uma interface visual com slots individuais para cada dígito.
+ *
+ * ## Características Principais
+ *
+ * - **Slots Visuais**: Cada dígito é exibido em um slot individual
+ * - **Auto-foco**: Foco automático entre slots
+ * - **Validação**: Suporte a validação de formato
+ * - **Acessível**: Estrutura semântica para acessibilidade
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ *
+ * ## Componentes
+ *
+ * - **InputOTP**: Container principal do OTP
+ * - **InputOTPGroup**: Agrupa slots
+ * - **InputOTPSlot**: Slot individual para dígito
+ * - **InputOTPSeparator**: Separador visual entre grupos
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { InputOTP, InputOTPGroup, InputOTPSlot } from "@flowtomic/ui/components/atoms/forms/input-otp";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <InputOTP maxLength={6}>
+ *       <InputOTPGroup>
+ *         <InputOTPSlot index={0} />
+ *         <InputOTPSlot index={1} />
+ *         <InputOTPSlot index={2} />
+ *         <InputOTPSlot index={3} />
+ *         <InputOTPSlot index={4} />
+ *         <InputOTPSlot index={5} />
+ *       </InputOTPGroup>
+ *     </InputOTP>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente entre slots
+ *
+ * @see [input-otp](https://github.com/guilhermerodz/input-otp) para mais detalhes
+ */
 import { OTPInput, OTPInputContext } from "input-otp";
 import { MinusIcon } from "lucide-react";
 import * as React from "react";

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

@@ -1,7 +1,61 @@
+/**
+ * # Label Component
+ *
+ * O componente `Label` é usado para associar texto descritivo a controles de formulário.
+ * É baseado em Radix UI para garantir acessibilidade completa e associação correta com inputs.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Associação Automática**: Associa-se automaticamente a controles via htmlFor/id
+ * - **Estados Visuais**: Responde a estados disabled dos controles associados
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Label } from "@flowtomic/ui/components/atoms/forms/label";
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <Label htmlFor="email">E-mail</Label>
+ *       <Input id="email" type="email" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Associa-se automaticamente a controles via htmlFor/id
+ * - Suporta leitores de tela
+ * - Responde visualmente a estados disabled dos controles
+ *
+ * @see [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) para mais detalhes
+ */
 import * as LabelPrimitive from "@radix-ui/react-label";
 import type * as React from "react";
+/**
+ * Props do componente Label.
+ * @see LabelPrimitive.Root para props disponíveis (htmlFor, etc.)
+ */
 export interface LabelProps extends React.ComponentProps<typeof LabelPrimitive.Root> {
 }
+/**
+ * Componente Label para associar texto a controles de formulário.
+ *
+ * @component
+ * @param {LabelProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Label renderizado
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">E-mail</Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
 declare function Label({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Label {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;CAAG;AAEvF,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAWjD;kBAXQ,KAAK;;;AAed,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/label/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;CAAG;AAEvF;;;;;;;;;;;;GAYG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAWjD;kBAXQ,KAAK;;;AAed,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,6 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # Label Component
+ *
+ * O componente `Label` é usado para associar texto descritivo a controles de formulário.
+ * É baseado em Radix UI para garantir acessibilidade completa e associação correta com inputs.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Associação Automática**: Associa-se automaticamente a controles via htmlFor/id
+ * - **Estados Visuais**: Responde a estados disabled dos controles associados
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Label } from "@flowtomic/ui/components/atoms/forms/label";
+ * import { Input } from "@flowtomic/ui/components/atoms/forms/input";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <Label htmlFor="email">E-mail</Label>
+ *       <Input id="email" type="email" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Associa-se automaticamente a controles via htmlFor/id
+ * - Suporta leitores de tela
+ * - Responde visualmente a estados disabled dos controles
+ *
+ * @see [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) para mais detalhes
+ */
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cn } from "@/lib/utils";
+/**
+ * Componente Label para associar texto a controles de formulário.
+ *
+ * @component
+ * @param {LabelProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Label renderizado
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">E-mail</Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
 function Label({ className, ...props }) {
     return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
 }

package/dist/components/atoms/forms/radio-group/radio-group.d.ts

@@ -1,5 +1,52 @@
+/**
+ * # RadioGroup Component
+ *
+ * O componente `RadioGroup` é um grupo de botões de opção usado para permitir que o usuário
+ * selecione uma opção 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
+ * - **Seleção Única**: Apenas uma opção pode ser selecionada por vez
+ * - **Composição**: RadioGroup + RadioGroupItem para flexibilidade
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from "@flowtomic/ui/components/atoms/forms/radio-group";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <RadioGroup defaultValue="option1">
+ *       <div className="flex items-center gap-2">
+ *         <RadioGroupItem value="option1" id="option1" />
+ *         <label htmlFor="option1">Opção 1</label>
+ *       </div>
+ *       <div className="flex items-center gap-2">
+ *         <RadioGroupItem value="option2" id="option2" />
+ *         <label htmlFor="option2">Opção 2</label>
+ *       </div>
+ *     </RadioGroup>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (setas, Tab)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) para mais detalhes
+ */
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import type * as React from "react";
+/**
+ * Props do componente RadioGroup.
+ * @see RadioGroupPrimitive.Root para props disponíveis (value, onValueChange, defaultValue, etc.)
+ */
 export interface RadioGroupProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
 }
 declare function RadioGroup({ className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/forms/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAEnE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;CAAG;AAEjG,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAQ3D;kBARQ,UAAU;;;AAYnB,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;CAAG;AAElE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAkBnE;kBAlBQ,cAAc;;;AAsBvB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAEnE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;CAAG;AAEjG,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAQ3D;kBARQ,UAAU;;;AAYnB,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;CAAG;AAElE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAkBnE;kBAlBQ,cAAc;;;AAsBvB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/atoms/forms/radio-group/radio-group.js

@@ -1,4 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # RadioGroup Component
+ *
+ * O componente `RadioGroup` é um grupo de botões de opção usado para permitir que o usuário
+ * selecione uma opção 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
+ * - **Seleção Única**: Apenas uma opção pode ser selecionada por vez
+ * - **Composição**: RadioGroup + RadioGroupItem para flexibilidade
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { RadioGroup, RadioGroupItem } from "@flowtomic/ui/components/atoms/forms/radio-group";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <RadioGroup defaultValue="option1">
+ *       <div className="flex items-center gap-2">
+ *         <RadioGroupItem value="option1" id="option1" />
+ *         <label htmlFor="option1">Opção 1</label>
+ *       </div>
+ *       <div className="flex items-center gap-2">
+ *         <RadioGroupItem value="option2" id="option2" />
+ *         <label htmlFor="option2">Opção 2</label>
+ *       </div>
+ *     </RadioGroup>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (setas, Tab)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) para mais detalhes
+ */
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { CircleIcon } from "lucide-react";
 import { cn } from "@/lib/utils";

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

@@ -1,5 +1,67 @@
+/**
+ * # Select Component
+ *
+ * O componente `Select` é um controle de seleção usado para permitir que o usuário escolha
+ * uma opção de uma lista de opções. É baseado em Radix UI para garantir acessibilidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ * - **Animações**: Transições suaves de abertura/fechamento
+ * - **Busca**: Suporta busca/filtro de opções (via Radix UI)
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Componentes
+ *
+ * - **Select**: Container raiz do select
+ * - **SelectTrigger**: Elemento que dispara o select
+ * - **SelectValue**: Exibe o valor selecionado
+ * - **SelectContent**: Conteúdo do dropdown
+ * - **SelectItem**: Item individual da lista
+ * - **SelectLabel**: Label/separador de seção
+ * - **SelectGroup**: Agrupa itens relacionados
+ * - **SelectSeparator**: Separador visual
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@flowtomic/ui/components/atoms/forms/select";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Select>
+ *       <SelectTrigger>
+ *         <SelectValue placeholder="Selecione..." />
+ *       </SelectTrigger>
+ *       <SelectContent>
+ *         <SelectItem value="option1">Opção 1</SelectItem>
+ *         <SelectItem value="option2">Opção 2</SelectItem>
+ *         <SelectItem value="option3">Opção 3</SelectItem>
+ *       </SelectContent>
+ *     </Select>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (setas, Enter, Esc)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select) para mais detalhes
+ */
 import * as SelectPrimitive from "@radix-ui/react-select";
 import type * as React from "react";
+/**
+ * Componente Select (Root) para seleção de opções.
+ *
+ * @component
+ * @param {React.ComponentProps<typeof SelectPrimitive.Root>} props - Props do componente
+ * @returns {JSX.Element} Elemento Select renderizado
+ */
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA6BtD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAU7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAU/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/select/select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA6BtD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAU7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAU/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}

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

@@ -1,7 +1,69 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * # Select Component
+ *
+ * O componente `Select` é um controle de seleção usado para permitir que o usuário escolha
+ * uma opção de uma lista de opções. É baseado em Radix UI para garantir acessibilidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ * - **Animações**: Transições suaves de abertura/fechamento
+ * - **Busca**: Suporta busca/filtro de opções (via Radix UI)
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Componentes
+ *
+ * - **Select**: Container raiz do select
+ * - **SelectTrigger**: Elemento que dispara o select
+ * - **SelectValue**: Exibe o valor selecionado
+ * - **SelectContent**: Conteúdo do dropdown
+ * - **SelectItem**: Item individual da lista
+ * - **SelectLabel**: Label/separador de seção
+ * - **SelectGroup**: Agrupa itens relacionados
+ * - **SelectSeparator**: Separador visual
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@flowtomic/ui/components/atoms/forms/select";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Select>
+ *       <SelectTrigger>
+ *         <SelectValue placeholder="Selecione..." />
+ *       </SelectTrigger>
+ *       <SelectContent>
+ *         <SelectItem value="option1">Opção 1</SelectItem>
+ *         <SelectItem value="option2">Opção 2</SelectItem>
+ *         <SelectItem value="option3">Opção 3</SelectItem>
+ *       </SelectContent>
+ *     </Select>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (setas, Enter, Esc)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Select](https://www.radix-ui.com/primitives/docs/components/select) para mais detalhes
+ */
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+/**
+ * Componente Select (Root) para seleção de opções.
+ *
+ * @component
+ * @param {React.ComponentProps<typeof SelectPrimitive.Root>} props - Props do componente
+ * @returns {JSX.Element} Elemento Select renderizado
+ */
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }

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

@@ -1,7 +1,67 @@
+/**
+ * # Slider Component
+ *
+ * O componente `Slider` é um controle deslizante usado para selecionar um valor ou intervalo
+ * de valores dentro de um range. É baseado em Radix UI para garantir acessibilidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Range**: Suporta valores únicos ou intervalos
+ * - **Orientação**: Suporta horizontal e vertical
+ * - **Customizável**: Valores min/max configuráveis
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Slider } from "@flowtomic/ui/components/atoms/forms/slider";
+ *
+ * function MyComponent() {
+ *   const [value, setValue] = React.useState([50]);
+ *
+ *   return (
+ *     <Slider
+ *       value={value}
+ *       onValueChange={setValue}
+ *       min={0}
+ *       max={100}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Intervalo
+ *
+ * ```tsx
+ * <Slider
+ *   defaultValue={[20, 80]}
+ *   min={0}
+ *   max={100}
+ * />
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (setas, Home, End)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Slider](https://www.radix-ui.com/primitives/docs/components/slider) para mais detalhes
+ */
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
+/**
+ * Props do componente Slider.
+ *
+ * @property {number} [min=0] - Valor mínimo do slider
+ * @property {number} [max=100] - Valor máximo do slider
+ */
 export interface SliderProps extends React.ComponentProps<typeof SliderPrimitive.Root> {
+    /** Valor mínimo do slider */
     min?: number;
+    /** Valor máximo do slider */
     max?: number;
 }
 declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAO,EAAE,GAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA8C5F;kBA9CQ,MAAM;;;AAkDf,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/slider/slider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;GAKG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACpF,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAO,EAAE,GAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA+C5F;kBA/CQ,MAAM;;;AAmDf,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -1,11 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * # Slider Component
+ *
+ * O componente `Slider` é um controle deslizante usado para selecionar um valor ou intervalo
+ * de valores dentro de um range. É baseado em Radix UI para garantir acessibilidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Range**: Suporta valores únicos ou intervalos
+ * - **Orientação**: Suporta horizontal e vertical
+ * - **Customizável**: Valores min/max configuráveis
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Slider } from "@flowtomic/ui/components/atoms/forms/slider";
+ *
+ * function MyComponent() {
+ *   const [value, setValue] = React.useState([50]);
+ *
+ *   return (
+ *     <Slider
+ *       value={value}
+ *       onValueChange={setValue}
+ *       min={0}
+ *       max={100}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Intervalo
+ *
+ * ```tsx
+ * <Slider
+ *   defaultValue={[20, 80]}
+ *   min={0}
+ *   max={100}
+ * />
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (setas, Home, End)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Slider](https://www.radix-ui.com/primitives/docs/components/slider) para mais detalhes
+ */
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
     const _values = React.useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);
     const thumbKeys = React.useMemo(() => _values.map((val, idx) => `slider-thumb-${val}-${idx}`), [_values]);
-    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), _values.map((_val, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, thumbKeys[index])))] }));
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), _values.map((_val, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": props["aria-label"], className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, thumbKeys[index])))] }));
 }
 Slider.displayName = "Slider";
 export { Slider };