@flowtomic/ui 0.1.14 → 0.2.0

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

@@ -1,7 +1,74 @@
+/**
+ * # Switch Component
+ *
+ * O componente `Switch` é um controle de alternância usado para ativar ou desativar
+ * uma opção. É 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
+ * - **Animações**: Transições suaves entre estados
+ * - **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 { Switch } from "@flowtomic/ui/components/atoms/forms/switch";
+ *
+ * function MyComponent() {
+ *   const [enabled, setEnabled] = React.useState(false);
+ *
+ *   return (
+ *     <Switch
+ *       checked={enabled}
+ *       onCheckedChange={setEnabled}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Label
+ *
+ * ```tsx
+ * <div className="flex items-center gap-2">
+ *   <Switch id="notifications" />
+ *   <label htmlFor="notifications">Notificações</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 Switch](https://www.radix-ui.com/primitives/docs/components/switch) para mais detalhes
+ */
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import type * as React from "react";
+/**
+ * Props do componente Switch.
+ * @see SwitchPrimitive.Root para props disponíveis (checked, onCheckedChange, disabled, etc.)
+ */
 export interface SwitchProps extends React.ComponentProps<typeof SwitchPrimitive.Root> {
 }
+/**
+ * Componente Switch para alternância de opções.
+ *
+ * @component
+ * @param {SwitchProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Switch renderizado
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * <Switch defaultChecked />
+ * <Switch disabled />
+ * ```
+ */
 declare function Switch({ className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Switch {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;CAAG;AAEzF,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAkBnD;kBAlBQ,MAAM;;;AAsBf,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/switch/switch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;CAAG;AAEzF;;;;;;;;;;;;;GAaG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAkBnD;kBAlBQ,MAAM;;;AAsBf,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -1,6 +1,69 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # Switch Component
+ *
+ * O componente `Switch` é um controle de alternância usado para ativar ou desativar
+ * uma opção. É 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
+ * - **Animações**: Transições suaves entre estados
+ * - **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 { Switch } from "@flowtomic/ui/components/atoms/forms/switch";
+ *
+ * function MyComponent() {
+ *   const [enabled, setEnabled] = React.useState(false);
+ *
+ *   return (
+ *     <Switch
+ *       checked={enabled}
+ *       onCheckedChange={setEnabled}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Label
+ *
+ * ```tsx
+ * <div className="flex items-center gap-2">
+ *   <Switch id="notifications" />
+ *   <label htmlFor="notifications">Notificações</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 Switch](https://www.radix-ui.com/primitives/docs/components/switch) para mais detalhes
+ */
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "@/lib/utils";
+/**
+ * Componente Switch para alternância de opções.
+ *
+ * @component
+ * @param {SwitchProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Switch renderizado
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * <Switch defaultChecked />
+ * <Switch disabled />
+ * ```
+ */
 function Switch({ className, ...props }) {
     return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0") }) }));
 }

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

@@ -1,6 +1,72 @@
+/**
+ * # Textarea Component
+ *
+ * O componente `Textarea` é um campo de entrada de texto multilinha usado para coletar
+ * textos mais longos do usuário. Fornece uma interface consistente e acessível para
+ * entrada de texto multilinha.
+ *
+ * ## Características Principais
+ *
+ * - **Multilinha**: Suporta entrada de texto em múltiplas linhas
+ * - **Auto-resize**: Suporta redimensionamento automático via CSS (field-sizing-content)
+ * - **Acessível**: Suporta labels associados e navegação por teclado
+ * - **Validação Visual**: Suporta estados de erro via aria-invalid
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Textarea } from "@flowtomic/ui/components/atoms/forms/textarea";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Textarea
+ *       placeholder="Digite sua mensagem..."
+ *       rows={4}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Com Validação
+ *
+ * ```tsx
+ * <Textarea
+ *   placeholder="Mensagem"
+ *   aria-invalid="true"
+ *   aria-describedby="error-message"
+ * />
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta labels associados via htmlFor/id
+ * - Suporta aria-invalid para estados de erro
+ * - Suporta aria-describedby para mensagens de erro
+ * - Suporta navegação por teclado
+ *
+ * @see [Input Component](../input/input.tsx) para campo de entrada de linha única
+ */
 import type * as React from "react";
+/**
+ * Props do componente Textarea.
+ * Estende todas as props HTML padrão de textarea.
+ */
 export interface TextareaProps extends React.ComponentProps<"textarea"> {
 }
+/**
+ * Componente Textarea para entrada de texto multilinha.
+ *
+ * @component
+ * @param {TextareaProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Textarea renderizado
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Digite sua mensagem..." rows={4} />
+ * <Textarea aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
 declare function Textarea({ className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Textarea {
     var displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;CAAG;AAE1E,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAWvD;kBAXQ,QAAQ;;;AAejB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/textarea/textarea.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;CAAG;AAE1E;;;;;;;;;;;;GAYG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAWvD;kBAXQ,QAAQ;;;AAejB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -1,5 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@/lib/utils";
+/**
+ * Componente Textarea para entrada de texto multilinha.
+ *
+ * @component
+ * @param {TextareaProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Textarea renderizado
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Digite sua mensagem..." rows={4} />
+ * <Textarea aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
 function Textarea({ className, ...props }) {
     return (_jsx("textarea", { "data-slot": "textarea", className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ...props }));
 }

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

@@ -1,10 +1,74 @@
+/**
+ * # Toggle Component
+ *
+ * O componente `Toggle` é um botão de alternância usado para ativar ou desativar
+ * uma opção. Diferente do Switch, o Toggle mantém estado visual quando pressionado.
+ * É 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 on, off e disabled
+ * - **Variantes**: Suporta default e outline
+ * - **Tamanhos**: Suporta default, sm e lg
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante padrão sem borda
+ * - **`outline`**: Variante com borda
+ *
+ * ## Tamanhos
+ *
+ * - **`default`**: Tamanho padrão (h-9)
+ * - **`sm`**: Tamanho pequeno (h-8)
+ * - **`lg`**: Tamanho grande (h-10)
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Toggle } from "@flowtomic/ui/components/atoms/forms/toggle";
+ *
+ * function MyComponent() {
+ *   const [pressed, setPressed] = React.useState(false);
+ *
+ *   return (
+ *     <Toggle
+ *       pressed={pressed}
+ *       onPressedChange={setPressed}
+ *     >
+ *       Toggle
+ *     </Toggle>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Espaço, Enter)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Toggle](https://www.radix-ui.com/primitives/docs/components/toggle) para mais detalhes
+ * @see [Switch Component](../switch/switch.tsx) para alternativa com estado visual diferente
+ */
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
+/**
+ * Variantes de estilo do Toggle usando class-variance-authority.
+ */
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "outline" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props do componente Toggle.
+ *
+ * @property {'default' | 'outline'} [variant='default'] - Variante visual do toggle
+ * @property {'default' | 'sm' | 'lg'} [size='default'] - Tamanho do toggle
+ */
 export interface ToggleProps extends React.ComponentProps<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
 }
 declare function Toggle({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EACvD,YAAY,CAAC,OAAO,cAAc,CAAC;CAAG;AAE1C,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQlE;kBARQ,MAAM;;;AAYf,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/toggle/toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAEH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;GAEG;AACH,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EACvD,YAAY,CAAC,OAAO,cAAc,CAAC;CAAG;AAE1C,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQlE;kBARQ,MAAM;;;AAYf,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,7 +1,65 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # Toggle Component
+ *
+ * O componente `Toggle` é um botão de alternância usado para ativar ou desativar
+ * uma opção. Diferente do Switch, o Toggle mantém estado visual quando pressionado.
+ * É 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 on, off e disabled
+ * - **Variantes**: Suporta default e outline
+ * - **Tamanhos**: Suporta default, sm e lg
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante padrão sem borda
+ * - **`outline`**: Variante com borda
+ *
+ * ## Tamanhos
+ *
+ * - **`default`**: Tamanho padrão (h-9)
+ * - **`sm`**: Tamanho pequeno (h-8)
+ * - **`lg`**: Tamanho grande (h-10)
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Toggle } from "@flowtomic/ui/components/atoms/forms/toggle";
+ *
+ * function MyComponent() {
+ *   const [pressed, setPressed] = React.useState(false);
+ *
+ *   return (
+ *     <Toggle
+ *       pressed={pressed}
+ *       onPressedChange={setPressed}
+ *     >
+ *       Toggle
+ *     </Toggle>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Espaço, Enter)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Toggle](https://www.radix-ui.com/primitives/docs/components/toggle) para mais detalhes
+ * @see [Switch Component](../switch/switch.tsx) para alternativa com estado visual diferente
+ */
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+/**
+ * Variantes de estilo do Toggle usando class-variance-authority.
+ */
 const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
     variants: {
         variant: {

package/dist/components/atoms/index.d.ts

@@ -11,6 +11,4 @@ export * from "./feedback";
 export * from "./forms";
 export * from "./layout";
 export * from "./navigation";
-export type { WidgetResizeHandleProps } from "./widget-resize-handle";
-export { WidgetResizeHandle } from "./widget-resize-handle";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,cAAc,QAAQ,CAAC;AAEvB,cAAc,gBAAgB,CAAC;AAE/B,cAAc,WAAW,CAAC;AAE1B,cAAc,YAAY,CAAC;AAE3B,cAAc,SAAS,CAAC;AAExB,cAAc,UAAU,CAAC;AAEzB,cAAc,cAAc,CAAC;AAE7B,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,cAAc,WAAW,CAAC;AAE1B,cAAc,aAAa,CAAC;AAE5B,cAAc,QAAQ,CAAC;AAEvB,cAAc,gBAAgB,CAAC;AAE/B,cAAc,WAAW,CAAC;AAE1B,cAAc,YAAY,CAAC;AAE3B,cAAc,SAAS,CAAC;AAExB,cAAc,UAAU,CAAC;AAEzB,cAAc,cAAc,CAAC"}

package/dist/components/atoms/index.js

@@ -20,4 +20,3 @@ export * from "./forms";
 export * from "./layout";
 // Navigation
 export * from "./navigation";
-export { WidgetResizeHandle } from "./widget-resize-handle";

package/dist/components/atoms/layout/accordion/accordion.d.ts

@@ -1,24 +1,108 @@
+/**
+ * # Accordion Component
+ *
+ * O componente `Accordion` é usado para exibir conteúdo colapsável em seçõ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
+ * - **Modos**: Suporta single (apenas um item aberto) ou multiple (múltiplos itens abertos)
+ * - **Composição**: Accordion + AccordionItem + AccordionTrigger + AccordionContent
+ * - **Animações**: Animações suaves de abertura/fechamento
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@flowtomic/ui/components/atoms/layout/accordion";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Accordion type="single" collapsible>
+ *       <AccordionItem value="item-1">
+ *         <AccordionTrigger>Item 1</AccordionTrigger>
+ *         <AccordionContent>Conteúdo do item 1</AccordionContent>
+ *       </AccordionItem>
+ *     </Accordion>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Enter, Espaço, setas)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion) para mais detalhes
+ */
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import type * as React from "react";
+/**
+ * Props do componente Accordion.
+ */
 export type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;
+/**
+ * Accordion - Container principal do accordion.
+ *
+ * Componente usado para gerenciar o estado do accordion.
+ *
+ * @param {AccordionProps} props - Props do componente
+ * @returns {JSX.Element} Componente Accordion
+ */
 declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var displayName: string;
 }
+/**
+ * Props do componente AccordionItem.
+ */
 export interface AccordionItemProps extends React.ComponentProps<typeof AccordionPrimitive.Item> {
 }
+/**
+ * AccordionItem - Item individual do accordion.
+ *
+ * Componente usado para agrupar trigger e content de um item.
+ *
+ * @param {AccordionItemProps} props - Props do componente
+ * @returns {JSX.Element} Componente AccordionItem
+ */
 declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionItem {
     var displayName: string;
 }
+/**
+ * Props do componente AccordionTrigger.
+ */
 export interface AccordionTriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {
 }
+/**
+ * AccordionTrigger - Trigger do accordion item.
+ *
+ * Componente usado como trigger para abrir/fechar o item.
+ *
+ * @param {AccordionTriggerProps} props - Props do componente
+ * @returns {JSX.Element} Componente AccordionTrigger
+ */
 declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionTrigger {
     var displayName: string;
 }
+/**
+ * Props do componente AccordionContent.
+ */
 export interface AccordionContentProps extends React.ComponentProps<typeof AccordionPrimitive.Content> {
 }
+/**
+ * AccordionContent - Conteúdo do accordion item.
+ *
+ * Componente usado para exibir o conteúdo do item quando aberto.
+ *
+ * @param {AccordionContentProps} props - Props do componente
+ * @returns {JSX.Element} Componente AccordionContent
+ */
 declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionContent {
     var displayName: string;

package/dist/components/atoms/layout/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;AAElF,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAEvC;kBAFQ,SAAS;;;AAMlB,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;CAAG;AAEnG,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQjE;kBARQ,aAAa;;;AAYtB,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;CAAG;AAEpE,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAgBjF;kBAhBQ,gBAAgB;;;AAoBzB,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;CAAG;AAEpE,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAUjF;kBAVQ,gBAAgB;;;AAczB,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/accordion/accordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;AAElF;;;;;;;GAOG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAEvC;kBAFQ,SAAS;;;AAMlB;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;CAAG;AAEnG;;;;;;;GAOG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQjE;kBARQ,aAAa;;;AAYtB;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;CAAG;AAEpE;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAgBjF;kBAhBQ,gBAAgB;;;AAoBzB;;GAEG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;CAAG;AAEpE;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAUjF;kBAVQ,gBAAgB;;;AAczB,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/atoms/layout/accordion/accordion.js

@@ -1,19 +1,91 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * # Accordion Component
+ *
+ * O componente `Accordion` é usado para exibir conteúdo colapsável em seçõ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
+ * - **Modos**: Suporta single (apenas um item aberto) ou multiple (múltiplos itens abertos)
+ * - **Composição**: Accordion + AccordionItem + AccordionTrigger + AccordionContent
+ * - **Animações**: Animações suaves de abertura/fechamento
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@flowtomic/ui/components/atoms/layout/accordion";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Accordion type="single" collapsible>
+ *       <AccordionItem value="item-1">
+ *         <AccordionTrigger>Item 1</AccordionTrigger>
+ *         <AccordionContent>Conteúdo do item 1</AccordionContent>
+ *       </AccordionItem>
+ *     </Accordion>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Enter, Espaço, setas)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion) para mais detalhes
+ */
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+/**
+ * Accordion - Container principal do accordion.
+ *
+ * Componente usado para gerenciar o estado do accordion.
+ *
+ * @param {AccordionProps} props - Props do componente
+ * @returns {JSX.Element} Componente Accordion
+ */
 function Accordion(props) {
     return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
 }
 Accordion.displayName = "Accordion";
+/**
+ * AccordionItem - Item individual do accordion.
+ *
+ * Componente usado para agrupar trigger e content de um item.
+ *
+ * @param {AccordionItemProps} props - Props do componente
+ * @returns {JSX.Element} Componente AccordionItem
+ */
 function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b last:border-b-0", className), ...props }));
 }
 AccordionItem.displayName = "AccordionItem";
+/**
+ * AccordionTrigger - Trigger do accordion item.
+ *
+ * Componente usado como trigger para abrir/fechar o item.
+ *
+ * @param {AccordionTriggerProps} props - Props do componente
+ * @returns {JSX.Element} Componente AccordionTrigger
+ */
 function AccordionTrigger({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
 }
 AccordionTrigger.displayName = "AccordionTrigger";
+/**
+ * AccordionContent - Conteúdo do accordion item.
+ *
+ * Componente usado para exibir o conteúdo do item quando aberto.
+ *
+ * @param {AccordionContentProps} props - Props do componente
+ * @returns {JSX.Element} Componente AccordionContent
+ */
 function AccordionContent({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn("pt-0 pb-4", className), children: children }) }));
 }