@flowtomic/ui 0.1.14 → 0.2.0

package/dist/components/atoms/layout/aspect-ratio/aspect-ratio.d.ts

@@ -1,7 +1,61 @@
+/**
+ * # AspectRatio Component
+ *
+ * O componente `AspectRatio` é usado para manter uma proporção específica
+ * de largura para altura em um elemento. É útil para imagens, vídeos e outros
+ * elementos que precisam manter proporções consistentes.
+ *
+ * ## Características Principais
+ *
+ * - **Proporção Fixa**: Mantém proporção específica independente do conteúdo
+ * - **Responsivo**: Ajusta automaticamente ao tamanho do container
+ * - **Acessível**: Baseado em Radix UI
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { AspectRatio } from "@flowtomic/ui/components/atoms/layout/aspect-ratio";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <AspectRatio ratio={16 / 9}>
+ *       <img src="image.jpg" alt="Imagem" />
+ *     </AspectRatio>
+ *   );
+ * }
+ * ```
+ *
+ * ## Proporções Comuns
+ *
+ * - **16:9**: Vídeos widescreen (padrão YouTube)
+ * - **4:3**: Vídeos tradicionais
+ * - **1:1**: Quadrado (Instagram)
+ * - **21:9**: Ultra-wide
+ *
+ * ## Acessibilidade
+ *
+ * - Baseado em Radix UI para acessibilidade
+ * - Mantém estrutura semântica do conteúdo
+ *
+ * @see [Radix UI Aspect Ratio](https://www.radix-ui.com/primitives/docs/components/aspect-ratio) para mais detalhes
+ */
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 import type * as React from "react";
+/**
+ * Props do componente AspectRatio.
+ *
+ * @property {number} ratio - Proporção de largura para altura (ex: 16/9, 4/3, 1/1)
+ */
 export interface AspectRatioProps extends React.ComponentProps<typeof AspectRatioPrimitive.Root> {
 }
+/**
+ * AspectRatio - Container com proporção fixa.
+ *
+ * Componente usado para manter uma proporção específica de largura para altura.
+ *
+ * @param {AspectRatioProps} props - Props do componente
+ * @returns {JSX.Element} Componente AspectRatio
+ */
 declare function AspectRatio({ ...props }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AspectRatio {
     var displayName: string;

package/dist/components/atoms/layout/aspect-ratio/aspect-ratio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/aspect-ratio/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;CAAG;AAEnG,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;kBAFQ,WAAW;;;AAMpB,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/aspect-ratio/aspect-ratio.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;CAAG;AAEnG;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;kBAFQ,WAAW;;;AAMpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/atoms/layout/aspect-ratio/aspect-ratio.js

@@ -1,5 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # AspectRatio Component
+ *
+ * O componente `AspectRatio` é usado para manter uma proporção específica
+ * de largura para altura em um elemento. É útil para imagens, vídeos e outros
+ * elementos que precisam manter proporções consistentes.
+ *
+ * ## Características Principais
+ *
+ * - **Proporção Fixa**: Mantém proporção específica independente do conteúdo
+ * - **Responsivo**: Ajusta automaticamente ao tamanho do container
+ * - **Acessível**: Baseado em Radix UI
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { AspectRatio } from "@flowtomic/ui/components/atoms/layout/aspect-ratio";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <AspectRatio ratio={16 / 9}>
+ *       <img src="image.jpg" alt="Imagem" />
+ *     </AspectRatio>
+ *   );
+ * }
+ * ```
+ *
+ * ## Proporções Comuns
+ *
+ * - **16:9**: Vídeos widescreen (padrão YouTube)
+ * - **4:3**: Vídeos tradicionais
+ * - **1:1**: Quadrado (Instagram)
+ * - **21:9**: Ultra-wide
+ *
+ * ## Acessibilidade
+ *
+ * - Baseado em Radix UI para acessibilidade
+ * - Mantém estrutura semântica do conteúdo
+ *
+ * @see [Radix UI Aspect Ratio](https://www.radix-ui.com/primitives/docs/components/aspect-ratio) para mais detalhes
+ */
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+/**
+ * AspectRatio - Container com proporção fixa.
+ *
+ * Componente usado para manter uma proporção específica de largura para altura.
+ *
+ * @param {AspectRatioProps} props - Props do componente
+ * @returns {JSX.Element} Componente AspectRatio
+ */
 function AspectRatio({ ...props }) {
     return _jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
 }

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

@@ -1,7 +1,43 @@
 /**
- * Collapsible Component - Flowtomic UI
+ * # Collapsible Component
  *
- * Componente Collapsible baseado em Radix UI
+ * O componente `Collapsible` é usado para exibir conteúdo que pode ser
+ * expandido ou colapsado. É 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**: Collapsible + CollapsibleTrigger + CollapsibleContent
+ * - **Animações**: Animações suaves de abertura/fechamento
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@flowtomic/ui/components/atoms/layout/collapsible";
+ *
+ * function MyComponent() {
+ *   const [open, setOpen] = React.useState(false);
+ *
+ *   return (
+ *     <Collapsible open={open} onOpenChange={setOpen}>
+ *       <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *       <CollapsibleContent>
+ *         Conteúdo colapsável
+ *       </CollapsibleContent>
+ *     </Collapsible>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Enter, Espaço)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Collapsible](https://www.radix-ui.com/primitives/docs/components/collapsible) para mais detalhes
  */
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as React from "react";
@@ -9,15 +45,21 @@ export type CollapsibleProps = React.ComponentPropsWithoutRef<typeof Collapsible
 export type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
 export type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
 /**
- * Collapsible - Container principal do collapsible
+ * Collapsible - Container principal do collapsible.
+ *
+ * Componente usado para gerenciar o estado do collapsible.
  */
 declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * CollapsibleTrigger - Trigger do collapsible
+ * CollapsibleTrigger - Trigger do collapsible.
+ *
+ * Componente usado como trigger para abrir/fechar o collapsible.
  */
 declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 /**
- * CollapsibleContent - Conteúdo do collapsible
+ * CollapsibleContent - Conteúdo do collapsible.
+ *
+ * Componente usado para exibir o conteúdo quando o collapsible está aberto.
  */
 declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC;AAChG,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAClE,OAAO,oBAAoB,CAAC,OAAO,CACpC,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAClE,OAAO,oBAAoB,CAAC,OAAO,CACpC,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,WAAW,8GAA4B,CAAC;AAG9C;;GAEG;AACH,QAAA,MAAM,kBAAkB,wHAA+B,CAAC;AAGxD;;GAEG;AACH,QAAA,MAAM,kBAAkB,wKAYtB,CAAC;AAGH,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC;AAChG,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAClE,OAAO,oBAAoB,CAAC,OAAO,CACpC,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAClE,OAAO,oBAAoB,CAAC,OAAO,CACpC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,WAAW,8GAA4B,CAAC;AAG9C;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wHAA+B,CAAC;AAGxD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAYtB,CAAC;AAGH,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -1,24 +1,66 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Collapsible Component - Flowtomic UI
+ * # Collapsible Component
  *
- * Componente Collapsible baseado em Radix UI
+ * O componente `Collapsible` é usado para exibir conteúdo que pode ser
+ * expandido ou colapsado. É 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**: Collapsible + CollapsibleTrigger + CollapsibleContent
+ * - **Animações**: Animações suaves de abertura/fechamento
+ * - **Foco Gerenciado**: Foco e navegação por teclado gerenciados automaticamente
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@flowtomic/ui/components/atoms/layout/collapsible";
+ *
+ * function MyComponent() {
+ *   const [open, setOpen] = React.useState(false);
+ *
+ *   return (
+ *     <Collapsible open={open} onOpenChange={setOpen}>
+ *       <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *       <CollapsibleContent>
+ *         Conteúdo colapsável
+ *       </CollapsibleContent>
+ *     </Collapsible>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Enter, Espaço)
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ *
+ * @see [Radix UI Collapsible](https://www.radix-ui.com/primitives/docs/components/collapsible) para mais detalhes
  */
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 /**
- * Collapsible - Container principal do collapsible
+ * Collapsible - Container principal do collapsible.
+ *
+ * Componente usado para gerenciar o estado do collapsible.
  */
 const Collapsible = CollapsiblePrimitive.Root;
 Collapsible.displayName = "Collapsible";
 /**
- * CollapsibleTrigger - Trigger do collapsible
+ * CollapsibleTrigger - Trigger do collapsible.
+ *
+ * Componente usado como trigger para abrir/fechar o collapsible.
  */
 const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
 CollapsibleTrigger.displayName = "CollapsibleTrigger";
 /**
- * CollapsibleContent - Conteúdo do collapsible
+ * CollapsibleContent - Conteúdo do collapsible.
+ *
+ * Componente usado para exibir o conteúdo quando o collapsible está aberto.
  */
 const CollapsibleContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(CollapsiblePrimitive.Content, { ref: ref, className: cn("overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", className), ...props })));
 CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;

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

@@ -1,3 +1,58 @@
+/**
+ * # Drawer Component
+ *
+ * O componente `Drawer` é usado para exibir conteúdo em um painel deslizante
+ * que aparece da borda da tela. É baseado em Vaul para garantir acessibilidade
+ * e gestos de arrastar.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Vaul com suporte completo a leitores de tela
+ * - **Direções**: Suporta abertura de qualquer lado (top, bottom, left, right)
+ * - **Gestos**: Suporta arrastar para fechar (drag to dismiss)
+ * - **Composição**: Múltiplos sub-componentes para flexibilidade
+ * - **Overlay**: Overlay escuro por padrão
+ *
+ * ## Componentes
+ *
+ * - **Drawer**: Container principal
+ * - **DrawerTrigger**: Trigger para abrir o drawer
+ * - **DrawerContent**: Conteúdo do drawer
+ * - **DrawerHeader**: Cabeçalho do drawer
+ * - **DrawerFooter**: Rodapé do drawer
+ * - **DrawerTitle**: Título do drawer
+ * - **DrawerDescription**: Descrição do drawer
+ * - **DrawerClose**: Botão de fechar
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle } from "@flowtomic/ui/components/atoms/layout/drawer";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Drawer>
+ *       <DrawerTrigger>Open Drawer</DrawerTrigger>
+ *       <DrawerContent>
+ *         <DrawerHeader>
+ *           <DrawerTitle>Drawer Title</DrawerTitle>
+ *         </DrawerHeader>
+ *       </DrawerContent>
+ *     </Drawer>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado (Tab, Escape)
+ * - Segue padrões WAI-ARIA
+ * - Suporta leitores de tela
+ * - Foco gerenciado automaticamente
+ * - Foco retorna ao trigger quando fechado
+ *
+ * @see [Vaul Documentation](https://vaul.emilkowal.ski/) para mais detalhes
+ */
 import type * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAGjD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAE5E,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAEjC;kBAFQ,MAAM;;;AAMf,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAE/C;kBAFQ,aAAa;;;AAMtB,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAE7C;kBAFQ,YAAY;;;AAMrB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAE3C;kBAFQ,WAAW;;;AAMpB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;kBAXQ,aAAa;;;AAetB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAqB3E;kBArBQ,aAAa;;;AAyBtB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEzE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;kBAXQ,YAAY;;;AAerB,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,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;kBARQ,WAAW;;;AAYpB,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAC;AAE9F,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;kBARQ,iBAAiB;;;AAY1B,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/drawer/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAGjD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAE5E,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAEjC;kBAFQ,MAAM;;;AAMf,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAE/C;kBAFQ,aAAa;;;AAMtB,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC;AAEpF,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAE7C;kBAFQ,YAAY;;;AAMrB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAE3C;kBAFQ,WAAW;;;AAMpB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;kBAXQ,aAAa;;;AAetB,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAEtF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAqB3E;kBArBQ,aAAa;;;AAyBtB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;CAAG;AAEzE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;kBAXQ,YAAY;;;AAerB,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,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;kBARQ,WAAW;;;AAYpB,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAC;AAE9F,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;kBARQ,iBAAiB;;;AAY1B,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}

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

@@ -13,4 +13,6 @@ export type { SidebarContentProps, SidebarFooterProps, SidebarGroupContentProps,
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarSeparator, SidebarTrigger, useSidebar, } from "./sidebar";
 export type { ToggleGroupItemProps, ToggleGroupProps } from "./toggle-group";
 export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+export type { WidgetResizeHandleProps } from "./widget-resize-handle";
+export { WidgetResizeHandle } from "./widget-resize-handle";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,GACtB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC3F,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACV,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACnF,YAAY,EACV,qBAAqB,EACrB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1E,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,GACtB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC3F,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACV,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACnF,YAAY,EACV,qBAAqB,EACrB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1E,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC9D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -6,3 +6,4 @@ export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizabl
 export { ScrollArea, ScrollAreaViewport, ScrollBar } from "./scroll-area";
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarSeparator, SidebarTrigger, useSidebar, } from "./sidebar";
 export { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+export { WidgetResizeHandle } from "./widget-resize-handle";

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

@@ -1,9 +1,84 @@
+/**
+ * # Resizable Component
+ *
+ * O componente `Resizable` é usado para criar painéis redimensionáveis que
+ * podem ser ajustados pelo usuário arrastando as bordas. É baseado em
+ * react-resizable-panels para funcionalidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Redimensionável**: Painéis podem ser redimensionados arrastando
+ * - **Orientação**: Suporta horizontal e vertical
+ * - **Handle**: Handle visual para indicar área redimensionável
+ * - **Composição**: ResizablePanelGroup + ResizablePanel + ResizableHandle
+ *
+ * ## Componentes
+ *
+ * - **ResizablePanelGroup**: Container principal que agrupa painéis
+ * - **ResizablePanel**: Painel individual redimensionável
+ * - **ResizableHandle**: Handle para redimensionar entre painéis
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@flowtomic/ui/components/atoms/layout/resizable";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ResizablePanelGroup direction="horizontal">
+ *       <ResizablePanel defaultSize={50}>Painel 1</ResizablePanel>
+ *       <ResizableHandle />
+ *       <ResizablePanel defaultSize={50}>Painel 2</ResizablePanel>
+ *     </ResizablePanelGroup>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado
+ * - Handle acessível com foco
+ * - Suporta leitores de tela
+ *
+ * @see [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) para mais detalhes
+ */
 import type * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
+/**
+ * ResizablePanelGroup - Container principal que agrupa painéis redimensionáveis.
+ *
+ * Componente usado para agrupar múltiplos painéis redimensionáveis.
+ *
+ * @param {React.ComponentProps<typeof ResizablePrimitive.PanelGroup>} props - Props do componente
+ * @returns {JSX.Element} Componente ResizablePanelGroup
+ */
 declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): import("react/jsx-runtime").JSX.Element;
+/**
+ * ResizablePanel - Painel individual redimensionável.
+ *
+ * Componente usado para representar um painel que pode ser redimensionado.
+ *
+ * @param {React.ComponentProps<typeof ResizablePrimitive.Panel>} props - Props do componente
+ * @returns {JSX.Element} Componente ResizablePanel
+ */
 declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
-declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+/**
+ * Props do componente ResizableHandle.
+ *
+ * @property {boolean} [withHandle=false] - Se deve exibir handle visual
+ */
+interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+    /** Se deve exibir handle visual */
     withHandle?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}
+/**
+ * ResizableHandle - Handle para redimensionar entre painéis.
+ *
+ * Componente usado para criar uma área redimensionável entre dois painéis.
+ *
+ * @param {ResizableHandleProps} props - Props do componente
+ * @returns {JSX.Element} Componente ResizableHandle
+ */
+declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
 //# sourceMappingURL=resizable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/resizable/resizable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,2CAQ5D;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAE1F;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/resizable/resizable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAGH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D;;;;;;;GAOG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,2CAQ5D;AAED;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAE1F;AAED;;;;GAIG;AACH,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC;IACzE,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAiBjF;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

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

@@ -1,13 +1,81 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # Resizable Component
+ *
+ * O componente `Resizable` é usado para criar painéis redimensionáveis que
+ * podem ser ajustados pelo usuário arrastando as bordas. É baseado em
+ * react-resizable-panels para funcionalidade completa.
+ *
+ * ## Características Principais
+ *
+ * - **Redimensionável**: Painéis podem ser redimensionados arrastando
+ * - **Orientação**: Suporta horizontal e vertical
+ * - **Handle**: Handle visual para indicar área redimensionável
+ * - **Composição**: ResizablePanelGroup + ResizablePanel + ResizableHandle
+ *
+ * ## Componentes
+ *
+ * - **ResizablePanelGroup**: Container principal que agrupa painéis
+ * - **ResizablePanel**: Painel individual redimensionável
+ * - **ResizableHandle**: Handle para redimensionar entre painéis
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@flowtomic/ui/components/atoms/layout/resizable";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ResizablePanelGroup direction="horizontal">
+ *       <ResizablePanel defaultSize={50}>Painel 1</ResizablePanel>
+ *       <ResizableHandle />
+ *       <ResizablePanel defaultSize={50}>Painel 2</ResizablePanel>
+ *     </ResizablePanelGroup>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado
+ * - Handle acessível com foco
+ * - Suporta leitores de tela
+ *
+ * @see [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) para mais detalhes
+ */
 import { GripVerticalIcon } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "@/lib/utils";
+/**
+ * ResizablePanelGroup - Container principal que agrupa painéis redimensionáveis.
+ *
+ * Componente usado para agrupar múltiplos painéis redimensionáveis.
+ *
+ * @param {React.ComponentProps<typeof ResizablePrimitive.PanelGroup>} props - Props do componente
+ * @returns {JSX.Element} Componente ResizablePanelGroup
+ */
 function ResizablePanelGroup({ className, ...props }) {
     return (_jsx(ResizablePrimitive.PanelGroup, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className), ...props }));
 }
+/**
+ * ResizablePanel - Painel individual redimensionável.
+ *
+ * Componente usado para representar um painel que pode ser redimensionado.
+ *
+ * @param {React.ComponentProps<typeof ResizablePrimitive.Panel>} props - Props do componente
+ * @returns {JSX.Element} Componente ResizablePanel
+ */
 function ResizablePanel({ ...props }) {
     return _jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
+/**
+ * ResizableHandle - Handle para redimensionar entre painéis.
+ *
+ * Componente usado para criar uma área redimensionável entre dois painéis.
+ *
+ * @param {ResizableHandleProps} props - Props do componente
+ * @returns {JSX.Element} Componente ResizableHandle
+ */
 function ResizableHandle({ withHandle, className, ...props }) {
     return (_jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90", className), ...props, children: withHandle && (_jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: _jsx(GripVerticalIcon, { className: "size-2.5" }) })) }));
 }

package/dist/components/atoms/layout/scroll-area/scroll-area.d.ts

@@ -1,7 +1,39 @@
 /**
- * ScrollArea Component - Flowtomic UI
+ * # ScrollArea Component
  *
- * Componente ScrollArea baseado em Radix UI
+ * O componente `ScrollArea` é usado para criar uma área de scroll customizada
+ * com scrollbars estilizadas. É baseado em Radix UI para garantir acessibilidade.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Scrollbars Customizadas**: Scrollbars estilizadas e customizáveis
+ * - **Orientação**: Suporta scroll vertical e horizontal
+ * - **Wheel Support**: Suporte aprimorado para scroll com roda do mouse
+ * - **Composição**: ScrollArea + ScrollAreaViewport + ScrollBar
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { ScrollArea } from "@flowtomic/ui/components/atoms/layout/scroll-area";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ScrollArea className="h-[200px] w-[350px]">
+ *       <div>Conteúdo longo que precisa de scroll</div>
+ *     </ScrollArea>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Scrollbars acessíveis
+ *
+ * @see [Radix UI Scroll Area](https://www.radix-ui.com/primitives/docs/components/scroll-area) para mais detalhes
  */
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";

package/dist/components/atoms/layout/scroll-area/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAC9F,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAClE,OAAO,mBAAmB,CAAC,QAAQ,CACpC,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,CACnE,OAAO,mBAAmB,CAAC,mBAAmB,CAC/C,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC;AACpG,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAChE,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH;;GAEG;AACH,QAAA,MAAM,kBAAkB,uKAkEtB,CAAC;AAGH;;GAEG;AACH,QAAA,MAAM,UAAU,+JAcd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/layout/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAC9F,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAClE,OAAO,mBAAmB,CAAC,QAAQ,CACpC,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,CACnE,OAAO,mBAAmB,CAAC,mBAAmB,CAC/C,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC;AACpG,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAChE,OAAO,mBAAmB,CAAC,MAAM,CAClC,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH;;GAEG;AACH,QAAA,MAAM,kBAAkB,uKAkEtB,CAAC;AAGH;;GAEG;AACH,QAAA,MAAM,UAAU,+JAed,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/atoms/layout/scroll-area/scroll-area.js

@@ -1,8 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * ScrollArea Component - Flowtomic UI
+ * # ScrollArea Component
  *
- * Componente ScrollArea baseado em Radix UI
+ * O componente `ScrollArea` é usado para criar uma área de scroll customizada
+ * com scrollbars estilizadas. É baseado em Radix UI para garantir acessibilidade.
+ *
+ * ## Características Principais
+ *
+ * - **Acessível**: Baseado em Radix UI com suporte completo a leitores de tela
+ * - **Scrollbars Customizadas**: Scrollbars estilizadas e customizáveis
+ * - **Orientação**: Suporta scroll vertical e horizontal
+ * - **Wheel Support**: Suporte aprimorado para scroll com roda do mouse
+ * - **Composição**: ScrollArea + ScrollAreaViewport + ScrollBar
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { ScrollArea } from "@flowtomic/ui/components/atoms/layout/scroll-area";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ScrollArea className="h-[200px] w-[350px]">
+ *       <div>Conteúdo longo que precisa de scroll</div>
+ *     </ScrollArea>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Suporta navegação por teclado
+ * - Segue padrões WAI-ARIA via Radix UI
+ * - Suporta leitores de tela
+ * - Scrollbars acessíveis
+ *
+ * @see [Radix UI Scroll Area](https://www.radix-ui.com/primitives/docs/components/scroll-area) para mais detalhes
  */
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
@@ -68,6 +100,6 @@ ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
 /**
  * ScrollArea - Container principal do scroll area
  */
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaViewport, { children: children }), _jsx(ScrollBar, {}), _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaViewport, { children: children }), _jsx(ScrollBar, {}), _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(ScrollAreaPrimitive.Corner, {})] })));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 export { ScrollArea, ScrollAreaViewport, ScrollBar };