@flowtomic/ui 0.1.14 → 0.2.0

package/dist/components/_reference/shadcn-ai/prompt-input.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Button } from '@repo/shadcn-ui/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/shadcn-ui/components/ui/select';
+import { Textarea } from '@repo/shadcn-ui/components/ui/textarea';
+import type { ChatStatus } from 'ai';
+import type { ComponentProps, HTMLAttributes } from 'react';
+export type PromptInputProps = HTMLAttributes<HTMLFormElement>;
+export declare const PromptInput: ({ className, ...props }: PromptInputProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {
+    minHeight?: number;
+    maxHeight?: number;
+};
+export declare const PromptInputTextarea: ({ onChange, className, placeholder, minHeight, maxHeight, ...props }: PromptInputTextareaProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>;
+export declare const PromptInputToolbar: ({ className, ...props }: PromptInputToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+export declare const PromptInputTools: ({ className, ...props }: PromptInputToolsProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputButtonProps = ComponentProps<typeof Button>;
+export declare const PromptInputButton: ({ variant, className, size, ...props }: PromptInputButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputSubmitProps = ComponentProps<typeof Button> & {
+    status?: ChatStatus;
+};
+export declare const PromptInputSubmit: ({ className, variant, size, status, children, ...props }: PromptInputSubmitProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputModelSelectProps = ComponentProps<typeof Select>;
+export declare const PromptInputModelSelect: (props: PromptInputModelSelectProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputModelSelectTriggerProps = ComponentProps<typeof SelectTrigger>;
+export declare const PromptInputModelSelectTrigger: ({ className, ...props }: PromptInputModelSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputModelSelectContentProps = ComponentProps<typeof SelectContent>;
+export declare const PromptInputModelSelectContent: ({ className, ...props }: PromptInputModelSelectContentProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>;
+export declare const PromptInputModelSelectItem: ({ className, ...props }: PromptInputModelSelectItemProps) => import("react/jsx-runtime").JSX.Element;
+export type PromptInputModelSelectValueProps = ComponentProps<typeof SelectValue>;
+export declare const PromptInputModelSelectValue: ({ className, ...props }: PromptInputModelSelectValueProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=prompt-input.d.ts.map

package/dist/components/_reference/shadcn-ai/prompt-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../../../../src/components/_reference/shadcn-ai/prompt-input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,EACZ,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAErC,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EAEf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE/D,eAAO,MAAM,WAAW,GAAI,yBAAyB,gBAAgB,4CAQpE,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,sEAOjC,wBAAwB,4CAkC1B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAErE,eAAO,MAAM,kBAAkB,GAAI,yBAGhC,uBAAuB,4CAKzB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnE,eAAO,MAAM,gBAAgB,GAAI,yBAG9B,qBAAqB,4CASvB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEnE,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAkBxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACnE,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,0DAO/B,sBAAsB,4CAsBxB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,sBAAsB,GAAI,OAAO,2BAA2B,4CAExE,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAC7D,OAAO,aAAa,CACrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,yBAG3C,kCAAkC,4CASpC,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAC7D,OAAO,aAAa,CACrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,yBAG3C,kCAAkC,4CAEpC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEhF,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAEjC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAC3D,OAAO,WAAW,CACnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yBAGzC,gCAAgC,4CAElC,CAAC"}

package/dist/components/_reference/shadcn-ai/prompt-input.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@repo/shadcn-ui/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@repo/shadcn-ui/components/ui/select';
+import { Textarea } from '@repo/shadcn-ui/components/ui/textarea';
+import { cn } from '@repo/shadcn-ui/lib/utils';
+import { Loader2Icon, SendIcon, SquareIcon, XIcon } from 'lucide-react';
+import { Children } from 'react';
+export const PromptInput = ({ className, ...props }) => (_jsx("form", { className: cn('w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm', className), ...props }));
+export const PromptInputTextarea = ({ onChange, className, placeholder = 'What would you like to know?', minHeight = 48, maxHeight = 164, ...props }) => {
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (e.shiftKey) {
+                // Allow newline
+                return;
+            }
+            // Submit on Enter (without Shift)
+            e.preventDefault();
+            const form = e.currentTarget.form;
+            if (form) {
+                form.requestSubmit();
+            }
+        }
+    };
+    return (_jsx(Textarea, { className: cn('w-full resize-none rounded-none border-none p-3 shadow-none outline-none ring-0', 'field-sizing-content max-h-[6lh] bg-transparent dark:bg-transparent', 'focus-visible:ring-0', className), name: "message", onChange: (e) => {
+            onChange?.(e);
+        }, onKeyDown: handleKeyDown, placeholder: placeholder, ...props }));
+};
+export const PromptInputToolbar = ({ className, ...props }) => (_jsx("div", { className: cn('flex items-center justify-between p-1', className), ...props }));
+export const PromptInputTools = ({ className, ...props }) => (_jsx("div", { className: cn('flex items-center gap-1', '[&_button:first-child]:rounded-bl-xl', className), ...props }));
+export const PromptInputButton = ({ variant = 'ghost', className, size, ...props }) => {
+    const newSize = (size ?? Children.count(props.children) > 1) ? 'default' : 'icon';
+    return (_jsx(Button, { className: cn('shrink-0 gap-1.5 rounded-lg', variant === 'ghost' && 'text-muted-foreground', newSize === 'default' && 'px-3', className), size: newSize, type: "button", variant: variant, ...props }));
+};
+export const PromptInputSubmit = ({ className, variant = 'default', size = 'icon', status, children, ...props }) => {
+    let Icon = _jsx(SendIcon, { className: "size-4" });
+    if (status === 'submitted') {
+        Icon = _jsx(Loader2Icon, { className: "size-4 animate-spin" });
+    }
+    else if (status === 'streaming') {
+        Icon = _jsx(SquareIcon, { className: "size-4" });
+    }
+    else if (status === 'error') {
+        Icon = _jsx(XIcon, { className: "size-4" });
+    }
+    return (_jsx(Button, { className: cn('gap-1.5 rounded-lg', className), size: size, type: "submit", variant: variant, ...props, children: children ?? Icon }));
+};
+export const PromptInputModelSelect = (props) => (_jsx(Select, { ...props }));
+export const PromptInputModelSelectTrigger = ({ className, ...props }) => (_jsx(SelectTrigger, { className: cn('border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors', 'hover:bg-accent hover:text-foreground [&[aria-expanded="true"]]:bg-accent [&[aria-expanded="true"]]:text-foreground', className), ...props }));
+export const PromptInputModelSelectContent = ({ className, ...props }) => (_jsx(SelectContent, { className: cn(className), ...props }));
+export const PromptInputModelSelectItem = ({ className, ...props }) => (_jsx(SelectItem, { className: cn(className), ...props }));
+export const PromptInputModelSelectValue = ({ className, ...props }) => (_jsx(SelectValue, { className: cn(className), ...props }));

package/dist/components/atoms/actions/badge/badge.d.ts

@@ -1,12 +1,108 @@
+/**
+ * # Badge Component
+ *
+ * O componente `Badge` é um elemento visual usado para destacar informações concisas como status,
+ * métricas, contadores ou rótulos. Ele fornece uma forma consistente de exibir informações
+ * secundárias de forma não intrusiva.
+ *
+ * ## Características Principais
+ *
+ * - **Variantes Semânticas**: Suporta múltiplas variantes (default, secondary, destructive, outline, success, warning, info)
+ * - **Tamanhos Flexíveis**: Três tamanhos disponíveis (sm, md, lg)
+ * - **Não Interativo**: Badge é puramente visual, não possui interação por padrão
+ * - **Acessível**: Suporta foco via teclado quando necessário
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante primária com cor de tema
+ * - **`secondary`**: Variante secundária com cor neutra
+ * - **`destructive`**: Variante para ações destrutivas ou erros
+ * - **`outline`**: Variante com borda e fundo transparente
+ * - **`success`**: Variante para sucesso ou confirmação (verde)
+ * - **`warning`**: Variante para avisos (amarelo)
+ * - **`info`**: Variante para informações (azul)
+ *
+ * ## Tamanhos
+ *
+ * - **`sm`**: Tamanho pequeno (px-2 py-0.5 text-xs)
+ * - **`md`**: Tamanho médio (px-2.5 py-0.5 text-xs) - padrão
+ * - **`lg`**: Tamanho grande (px-3 py-1 text-sm)
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Badge } from "@flowtomic/ui/components/atoms/actions/badge";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <Badge>Novo</Badge>
+ *       <Badge variant="success">Ativo</Badge>
+ *       <Badge variant="destructive" size="sm">Erro</Badge>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Casos de Uso
+ *
+ * - **Status**: Exibir status de itens (ativo, inativo, pendente)
+ * - **Contadores**: Mostrar contadores ou números (notificações, itens)
+ * - **Métricas**: Exibir métricas com ícones (tendências, percentuais)
+ * - **Rótulos**: Rotular categorias ou tags
+ *
+ * ## Acessibilidade
+ *
+ * - Badge é renderizado como `<div>`, não possui role semântico por padrão
+ * - Para uso em contexto interativo, considere usar `Button` com variante apropriada
+ * - Suporta foco via teclado quando necessário (via tabIndex)
+ * - Use `aria-label` ou `aria-labelledby` quando o conteúdo não for auto-descritivo
+ *
+ * @see [Button Component](../button/button.tsx) para versão interativa
+ */
 import { type VariantProps } from "class-variance-authority";
 import React from "react";
+/**
+ * Variantes de estilo do Badge usando class-variance-authority.
+ * Define as classes CSS para diferentes variantes e tamanhos.
+ */
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "info" | "warning" | null | undefined;
+    variant?: "outline" | "default" | "destructive" | "secondary" | "success" | "info" | "warning" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props do componente Badge.
+ *
+ * @interface BadgeProps
+ * @extends {React.HTMLAttributes<HTMLDivElement>}
+ * @extends {VariantProps<typeof badgeVariants>}
+ *
+ * @property {React.ReactNode} children - Conteúdo do badge (texto, ícones, etc.)
+ * @property {'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'} variant - Variante visual do badge
+ * @property {'sm' | 'md' | 'lg'} size - Tamanho do badge
+ * @property {string} className - Classes CSS adicionais
+ */
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /** Conteúdo do badge (texto, ícones, etc.) */
     children: React.ReactNode;
 }
+/**
+ * Componente Badge para destacar informações concisas.
+ *
+ * @component
+ * @param {BadgeProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Badge renderizado
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Ativo</Badge>
+ * <Badge variant="destructive" size="sm">Erro</Badge>
+ * <Badge variant="info">
+ *   <Icon /> 5
+ * </Badge>
+ * ```
+ */
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
 export { Badge, badgeVariants };
 //# sourceMappingURL=badge.d.ts.map

package/dist/components/atoms/actions/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/actions/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,aAAa;;;8EA0BlB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,KAAK,mFAQV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/actions/badge/badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,QAAA,MAAM,aAAa;;;8EA0BlB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK,mFAQV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/atoms/actions/badge/badge.js

@@ -1,7 +1,74 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # Badge Component
+ *
+ * O componente `Badge` é um elemento visual usado para destacar informações concisas como status,
+ * métricas, contadores ou rótulos. Ele fornece uma forma consistente de exibir informações
+ * secundárias de forma não intrusiva.
+ *
+ * ## Características Principais
+ *
+ * - **Variantes Semânticas**: Suporta múltiplas variantes (default, secondary, destructive, outline, success, warning, info)
+ * - **Tamanhos Flexíveis**: Três tamanhos disponíveis (sm, md, lg)
+ * - **Não Interativo**: Badge é puramente visual, não possui interação por padrão
+ * - **Acessível**: Suporta foco via teclado quando necessário
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante primária com cor de tema
+ * - **`secondary`**: Variante secundária com cor neutra
+ * - **`destructive`**: Variante para ações destrutivas ou erros
+ * - **`outline`**: Variante com borda e fundo transparente
+ * - **`success`**: Variante para sucesso ou confirmação (verde)
+ * - **`warning`**: Variante para avisos (amarelo)
+ * - **`info`**: Variante para informações (azul)
+ *
+ * ## Tamanhos
+ *
+ * - **`sm`**: Tamanho pequeno (px-2 py-0.5 text-xs)
+ * - **`md`**: Tamanho médio (px-2.5 py-0.5 text-xs) - padrão
+ * - **`lg`**: Tamanho grande (px-3 py-1 text-sm)
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Badge } from "@flowtomic/ui/components/atoms/actions/badge";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <Badge>Novo</Badge>
+ *       <Badge variant="success">Ativo</Badge>
+ *       <Badge variant="destructive" size="sm">Erro</Badge>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Casos de Uso
+ *
+ * - **Status**: Exibir status de itens (ativo, inativo, pendente)
+ * - **Contadores**: Mostrar contadores ou números (notificações, itens)
+ * - **Métricas**: Exibir métricas com ícones (tendências, percentuais)
+ * - **Rótulos**: Rotular categorias ou tags
+ *
+ * ## Acessibilidade
+ *
+ * - Badge é renderizado como `<div>`, não possui role semântico por padrão
+ * - Para uso em contexto interativo, considere usar `Button` com variante apropriada
+ * - Suporta foco via teclado quando necessário (via tabIndex)
+ * - Use `aria-label` ou `aria-labelledby` quando o conteúdo não for auto-descritivo
+ *
+ * @see [Button Component](../button/button.tsx) para versão interativa
+ */
 import { cva } from "class-variance-authority";
 import React from "react";
 import { cn } from "@/lib/utils";
+/**
+ * Variantes de estilo do Badge usando class-variance-authority.
+ * Define as classes CSS para diferentes variantes e tamanhos.
+ */
 const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
     variants: {
         variant: {
@@ -24,6 +91,22 @@ const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 p
         size: "md",
     },
 });
+/**
+ * Componente Badge para destacar informações concisas.
+ *
+ * @component
+ * @param {BadgeProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Badge renderizado
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Ativo</Badge>
+ * <Badge variant="destructive" size="sm">Erro</Badge>
+ * <Badge variant="info">
+ *   <Icon /> 5
+ * </Badge>
+ * ```
+ */
 const Badge = React.forwardRef(({ className, variant, size, children, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn(badgeVariants({ variant, size }), className), ...props, children: children }));
 });

package/dist/components/atoms/actions/button/button.d.ts

@@ -1,15 +1,148 @@
+/**
+ * # Button Component
+ *
+ * O componente `Button` é um elemento interativo usado para acionar ações ou eventos dentro da interface do usuário.
+ * Ele fornece uma forma consistente e acessível de criar botões com múltiplas variantes de estilo e tamanhos.
+ *
+ * ## Características Principais
+ *
+ * - **Variantes Semânticas**: Suporta múltiplas variantes (default, destructive, outline, secondary, ghost, link, success, info, natural)
+ * - **Tamanhos Flexíveis**: Múltiplos tamanhos incluindo opções para ícones (default, sm, lg, icon, icon-sm, icon-lg)
+ * - **Animações Opcionais**: Suporta animações sutis via Framer Motion quando `animated={true}`
+ * - **Composição**: Suporta composição via `asChild` usando Radix UI Slot
+ * - **Acessível**: Segue padrões WAI-ARIA e suporta navegação por teclado
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante primária com cor de tema e sombra
+ * - **`destructive`**: Variante para ações destrutivas ou perigosas
+ * - **`outline`**: Variante com borda e fundo transparente
+ * - **`secondary`**: Variante secundária com cor neutra
+ * - **`ghost`**: Variante sem fundo, apenas texto
+ * - **`link`**: Variante estilizada como link
+ * - **`success`**: Variante para ações de sucesso (verde)
+ * - **`info`**: Variante para informações (accent)
+ * - **`natural`**: Variante com estilo natural e borda
+ *
+ * ## Tamanhos
+ *
+ * - **`default`**: Tamanho padrão (h-9 px-4 py-2)
+ * - **`sm`**: Tamanho pequeno (h-8 px-3 text-xs)
+ * - **`lg`**: Tamanho grande (h-10 px-8)
+ * - **`icon`**: Tamanho para ícone (h-9 w-9)
+ * - **`icon-sm`**: Tamanho pequeno para ícone (size-8)
+ * - **`icon-lg`**: Tamanho grande para ícone (size-10)
+ *
+ * ## Props Especiais
+ *
+ * - **`asChild`**: Quando `true`, o Button não renderiza um elemento próprio, mas passa suas props para o primeiro filho usando Radix UI Slot
+ * - **`animated`**: Quando `true`, aplica animações sutis de hover e tap via Framer Motion
+ * - **`transition`**: Permite customizar a transição de animação quando `animated={true}`
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Button } from "@flowtomic/ui/components/atoms/actions/button";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <Button>Clique aqui</Button>
+ *       <Button variant="destructive">Excluir</Button>
+ *       <Button variant="outline" size="sm">Cancelar</Button>
+ *       <Button animated>Animado</Button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Composição com asChild
+ *
+ * ```tsx
+ * import { Button } from "@flowtomic/ui/components/atoms/actions/button";
+ * import { Link } from "react-router-dom";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Button asChild>
+ *       <Link to="/page">Navegar</Link>
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Renderizado como `<button>` por padrão, garantindo semântica correta
+ * - Suporta navegação por teclado (Tab, Enter, Espaço)
+ * - Suporta estados disabled com feedback visual
+ * - Suporta aria-* attributes para melhor acessibilidade
+ * - Quando `asChild={true}`, o elemento filho deve ser acessível
+ *
+ * @see [Radix UI Slot](https://www.radix-ui.com/primitives/docs/utilities/slot) para mais sobre composição
+ * @see [Framer Motion](https://www.framer.com/motion/) para mais sobre animações
+ */
 import { type VariantProps } from "class-variance-authority";
 import { type Transition } from "motion/react";
 import * as React from "react";
+/**
+ * Variantes de estilo do Button usando class-variance-authority.
+ * Define as classes CSS para diferentes variantes e tamanhos.
+ */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "info" | "natural" | null | undefined;
+    variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | "success" | "info" | "natural" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props do componente Button.
+ *
+ * @interface ButtonProps
+ * @extends {Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "transition">}
+ * @extends {VariantProps<typeof buttonVariants>}
+ *
+ * @property {boolean} [asChild=false] - Quando `true`, passa props para o primeiro filho usando Radix UI Slot
+ * @property {boolean} [animated=false] - Quando `true`, aplica animações sutis via Framer Motion
+ * @property {Transition} [transition] - Configuração de transição customizada para animações
+ * @property {'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'success' | 'info' | 'natural'} [variant='default'] - Variante visual do botão
+ * @property {'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'} [size='default'] - Tamanho do botão
+ * @property {string} [className] - Classes CSS adicionais
+ * @property {React.ReactNode} [children] - Conteúdo do botão (texto, ícones, etc.)
+ */
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "transition">, VariantProps<typeof buttonVariants> {
+    /**
+     * Quando `true`, o Button não renderiza um elemento próprio, mas passa suas props
+     * para o primeiro filho usando Radix UI Slot. Útil para composição com outros componentes.
+     */
     asChild?: boolean;
+    /**
+     * Quando `true`, aplica animações sutis de hover e tap via Framer Motion.
+     * As animações incluem scale no hover (1.02) e no tap (0.98).
+     */
     animated?: boolean;
+    /**
+     * Configuração de transição customizada para animações quando `animated={true}`.
+     * Se não fornecido, usa transição spring padrão.
+     */
     transition?: Transition;
 }
+/**
+ * Componente Button para acionar ações ou eventos.
+ *
+ * @component
+ * @param {ButtonProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Button renderizado
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default">Clique aqui</Button>
+ * <Button variant="destructive" size="sm">Excluir</Button>
+ * <Button animated>Animado</Button>
+ * <Button asChild>
+ *   <Link to="/page">Navegar</Link>
+ * </Button>
+ * ```
+ */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/atoms/actions/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/actions/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,cAAc;;;8EA+BnB,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,EACvE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,uFA6BX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/actions/button/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AAGH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,QAAA,MAAM,cAAc;;;8EA+BnB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,EACvE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,uFA6BX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/atoms/actions/button/button.js

@@ -1,9 +1,98 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * # Button Component
+ *
+ * O componente `Button` é um elemento interativo usado para acionar ações ou eventos dentro da interface do usuário.
+ * Ele fornece uma forma consistente e acessível de criar botões com múltiplas variantes de estilo e tamanhos.
+ *
+ * ## Características Principais
+ *
+ * - **Variantes Semânticas**: Suporta múltiplas variantes (default, destructive, outline, secondary, ghost, link, success, info, natural)
+ * - **Tamanhos Flexíveis**: Múltiplos tamanhos incluindo opções para ícones (default, sm, lg, icon, icon-sm, icon-lg)
+ * - **Animações Opcionais**: Suporta animações sutis via Framer Motion quando `animated={true}`
+ * - **Composição**: Suporta composição via `asChild` usando Radix UI Slot
+ * - **Acessível**: Segue padrões WAI-ARIA e suporta navegação por teclado
+ * - **Customizável**: Pode ser estilizado via className e props HTML padrão
+ *
+ * ## Variantes
+ *
+ * - **`default`**: Variante primária com cor de tema e sombra
+ * - **`destructive`**: Variante para ações destrutivas ou perigosas
+ * - **`outline`**: Variante com borda e fundo transparente
+ * - **`secondary`**: Variante secundária com cor neutra
+ * - **`ghost`**: Variante sem fundo, apenas texto
+ * - **`link`**: Variante estilizada como link
+ * - **`success`**: Variante para ações de sucesso (verde)
+ * - **`info`**: Variante para informações (accent)
+ * - **`natural`**: Variante com estilo natural e borda
+ *
+ * ## Tamanhos
+ *
+ * - **`default`**: Tamanho padrão (h-9 px-4 py-2)
+ * - **`sm`**: Tamanho pequeno (h-8 px-3 text-xs)
+ * - **`lg`**: Tamanho grande (h-10 px-8)
+ * - **`icon`**: Tamanho para ícone (h-9 w-9)
+ * - **`icon-sm`**: Tamanho pequeno para ícone (size-8)
+ * - **`icon-lg`**: Tamanho grande para ícone (size-10)
+ *
+ * ## Props Especiais
+ *
+ * - **`asChild`**: Quando `true`, o Button não renderiza um elemento próprio, mas passa suas props para o primeiro filho usando Radix UI Slot
+ * - **`animated`**: Quando `true`, aplica animações sutis de hover e tap via Framer Motion
+ * - **`transition`**: Permite customizar a transição de animação quando `animated={true}`
+ *
+ * ## Uso Básico
+ *
+ * ```tsx
+ * import { Button } from "@flowtomic/ui/components/atoms/actions/button";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <div>
+ *       <Button>Clique aqui</Button>
+ *       <Button variant="destructive">Excluir</Button>
+ *       <Button variant="outline" size="sm">Cancelar</Button>
+ *       <Button animated>Animado</Button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Composição com asChild
+ *
+ * ```tsx
+ * import { Button } from "@flowtomic/ui/components/atoms/actions/button";
+ * import { Link } from "react-router-dom";
+ *
+ * function MyComponent() {
+ *   return (
+ *     <Button asChild>
+ *       <Link to="/page">Navegar</Link>
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * ## Acessibilidade
+ *
+ * - Renderizado como `<button>` por padrão, garantindo semântica correta
+ * - Suporta navegação por teclado (Tab, Enter, Espaço)
+ * - Suporta estados disabled com feedback visual
+ * - Suporta aria-* attributes para melhor acessibilidade
+ * - Quando `asChild={true}`, o elemento filho deve ser acessível
+ *
+ * @see [Radix UI Slot](https://www.radix-ui.com/primitives/docs/utilities/slot) para mais sobre composição
+ * @see [Framer Motion](https://www.framer.com/motion/) para mais sobre animações
+ */
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { motion } from "motion/react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
+/**
+ * Variantes de estilo do Button usando class-variance-authority.
+ * Define as classes CSS para diferentes variantes e tamanhos.
+ */
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
     variants: {
         variant: {
@@ -31,6 +120,23 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
         size: "default",
     },
 });
+/**
+ * Componente Button para acionar ações ou eventos.
+ *
+ * @component
+ * @param {ButtonProps} props - Props do componente
+ * @returns {JSX.Element} Elemento Button renderizado
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default">Clique aqui</Button>
+ * <Button variant="destructive" size="sm">Excluir</Button>
+ * <Button animated>Animado</Button>
+ * <Button asChild>
+ *   <Link to="/page">Navegar</Link>
+ * </Button>
+ * ```
+ */
 const Button = React.forwardRef(({ className, variant, size, asChild = false, animated = false, transition, ...props }, ref) => {
     const baseClassName = cn(buttonVariants({ variant, size, className }));
     if (animated && !asChild) {