@beryl-ui/react 2.1.2 → 2.2.1

package/README.md

@@ -7,85 +7,87 @@
   <img alt="License" src="https://img.shields.io/github/license/Robson16/beryl-ui?color=10B981&label=license">
 </p>
 
-Biblioteca de componentes React profissionais do **beryl-ui**, construídos com `styled-components` e `Radix UI` para máxima performance e acessibilidade.
+Professional React component library from **beryl-ui**, built with `styled-components` and `Radix UI` for maximum performance and accessibility.
 
-## ✨ Componentes Incluídos
+## ✨ Included Components
 
-*   **Avatar**: Imagem de exibição com fallback.
-*   **Button**: Botão para ações diversas com variantes.
-*   **Checkbox**: Caixa de seleção.
-*   **Heading**: Título para seções.
-*   **MultiStep**: Indicador de progresso para formulários de múltiplos passos.
-*   **Text**: Componente para textos em geral.
-*   **TextArea**: Campo de texto de múltiplas linhas.
-*   **TextInput**: Campo de entrada de texto.
+*   **Avatar**: Display image with fallback.
+*   **Button**: Button for various actions with variants.
+*   **Checkbox**: Selection box.
+*   **Heading**: Title for sections.
+*   **MultiStep**: Progress indicator for multi-step forms.
+*   **Text**: Component for general text.
+*   **TextArea**: Multi-line text field.
+*   **TextInput**: Text input field.
+*   **Toast**: Feedback message for the user (requires `ToastProvider`).
+*   **Tooltip**: Contextual text hints displayed on hover, focus, or touch (optional `TooltipProvider` for global control).
 
-> Para uma documentação interativa e exemplos de uso de cada componente, visite nosso **Storybook de documentação**.
+> For interactive documentation and usage examples for each component, visit our [**Storybook online**](https://robson16.github.io/beryl-ui/).
 
-## 🚀 Instalação
+## 🚀 Installation
 
-Para usar os componentes React em seu projeto, instale o pacote via npm, yarn ou pnpm:
+To use the React components in your project, install the package via npm, yarn, or pnpm:
 
 ```bash
 npm install @beryl-ui/react styled-components
-# ou
+# or
 yarn add @beryl-ui/react styled-components
-# ou
+# or
 pnpm add @beryl-ui/react styled-components
 ```
 
-## ⚙️ Configuração
+## ⚙️ Configuration
 
-Para que os componentes funcionem corretamente com o tema padrão, você precisa envolver sua aplicação com o `ThemeProvider` do `styled-components` e aplicar os estilos globais.
+For the components to work correctly with the default theme, you need to wrap your application with the `ThemeProvider` from `styled-components` and apply the global styles.
 
 ```tsx
-// Em seu arquivo principal (ex: App.tsx)
-import { globalStyles } from '@beryl-ui/react/styles' // Importe os estilos globais
+// In your main file (e.g: App.tsx)
+import { globalStyles } from '@beryl-ui/react/styles' // Import global styles
 import { ThemeProvider } from 'styled-components'
-import { defaultTheme } from '@beryl-ui/react/styles' // Importe o tema padrão
+import { defaultTheme } from '@beryl-ui/react/styles' // Import the default theme
 
-globalStyles() // Aplique os estilos globais
+globalStyles() // Apply global styles
 
 export function App() {
   return (
     <ThemeProvider theme={defaultTheme}>
-      {/* ... seus componentes e rotas que usarão o design system ... */}
+      {/* ... your components and routes that will use the design system ... */}
     </ThemeProvider>
   )
 }
 ```
 
-## 💡 Uso Básico
+## 💡 Basic Usage
 
-Exemplo de como usar um componente `Button`:
+Example of how to use a `Button` component:
 
 ```tsx
 import { Button } from '@beryl-ui/react'
 
 function MyComponent() {
   return (
-    <Button onClick={() => alert('Clicado!')}>
-      Clique aqui
+    <Button onClick={() => alert('Clicked!')}>
+      Click here
     </Button>
   )
 }
 ```
 
-## 🛠️ Desenvolvimento Local (para contribuidores)
+## 🛠️ Local Development (for contributors)
 
-Se você está contribuindo para este pacote especificamente dentro do monorepo:
+If you are contributing to this package specifically within the monorepo:
 
-1.  **Navegue até a pasta do pacote:**
+1.  **Navigate to the package folder:**
     ```bash
     cd packages/react
     ```
-2.  **Execute o modo de desenvolvimento:**
-    Para compilar o pacote em modo `watch` e ver as alterações em tempo real (geralmente usado em conjunto com o Storybook do monorepo):
+2.  **Run development mode:**
+    To compile the package in `watch` mode and see changes in real-time (usually used in conjunction with the monorepo's Storybook):
     ```bash
     npm run dev
     ```
-    (Este script `dev` é definido no `package.json` de `packages/react` e usa `tsup` para observar as mudanças).
+    (This `dev` script is defined in the `package.json` of `packages/react` and uses `tsup` to watch for changes).
 
-## 📄 Licença
+## 📄 License
 
-Este pacote está sob a licença MIT. Veja o arquivo LICENSE.md na raiz do repositório para mais detalhes.
+This package is under the MIT license. See the LICENSE.md file in the root of the repository for more details.

package/dist/index.d.mts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ElementType } from 'react';
+import { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import * as Avatar$1 from '@radix-ui/react-avatar';
 import * as Checkbox$1 from '@radix-ui/react-checkbox';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 
 declare const AvatarImage: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Avatar$1.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & {
     ref?: ((instance: HTMLImageElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLImageElement> | null | undefined;
@@ -27,19 +28,16 @@ declare namespace Box {
     var displayName: string;
 }
 
-interface ButtonProps$1 {
-    variant?: 'primary' | 'secondary' | 'tertiary';
-    size?: 'sm' | 'md';
+interface ButtonContainerProps {
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "sm" | "md";
 }
-declare const ButtonContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps$1>> & string;
 
-interface ButtonProps extends ComponentProps<typeof ButtonContainer> {
+interface ButtonProps extends ComponentProps<"button">, ButtonContainerProps {
     as?: ElementType;
+    children?: ReactElement;
 }
-declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace Button {
-    var displayName: string;
-}
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const CheckboxContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
@@ -53,17 +51,14 @@ declare namespace Checkbox {
 }
 
 interface HeadingContainerProps {
-    size?: 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    size?: "sm" | "md" | "lg" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
 }
-declare const HeadingContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, HeadingContainerProps>> & string;
 
-interface HeadingProps extends ComponentProps<typeof HeadingContainer> {
+interface HeadingProps extends ComponentProps<"h2">, HeadingContainerProps {
     as?: ElementType;
+    children?: ReactNode;
 }
-declare function Heading(props: HeadingProps): react_jsx_runtime.JSX.Element;
-declare namespace Heading {
-    var displayName: string;
-}
+declare const Heading: react.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 
 interface MultiStepProps {
     size: number;
@@ -75,17 +70,14 @@ declare namespace MultiStep {
 }
 
 interface TextContainerProps {
-    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
 }
-declare const TextContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextContainerProps>> & string;
 
-interface TextProps extends ComponentProps<typeof TextContainer> {
+interface TextProps extends ComponentProps<"p">, TextContainerProps {
     as?: ElementType;
+    children?: ReactNode;
 }
-declare function Text(props: TextProps): react_jsx_runtime.JSX.Element;
-declare namespace Text {
-    var displayName: string;
-}
+declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
 declare const TextAreaContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
 
@@ -95,11 +87,37 @@ declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref
 
 declare const Input: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 
-interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'prefix'> {
+interface TextInputProps extends Omit<ComponentProps<typeof Input>, "prefix"> {
     prefix?: string;
 }
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
+interface ToastData {
+    id: string;
+    title: string;
+    description?: string;
+}
+type ToastProps = Omit<ToastData, "id">;
+interface ToastContextData {
+    showToast: (props: ToastProps) => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+}
+declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+declare const useToast: () => ToastContextData;
+
+interface TooltipProps extends Omit<ComponentProps<typeof RadixTooltip.Root>, "children"> {
+    children: ReactNode;
+    content: string | ReactNode;
+    contentProps?: Omit<ComponentProps<typeof RadixTooltip.Content>, "ref">;
+}
+declare function Tooltip({ children, content, contentProps, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
+
 declare const theme: {
     colors: {
         white: string;
@@ -130,23 +148,23 @@ declare const theme: {
         md: string;
         lg: string;
         xl: string;
-        '2xl': string;
-        '4xl': string;
-        '5xl': string;
-        '6xl': string;
-        '7xl': string;
-        '8xl': string;
-        '9xl': string;
+        "2xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
     };
     fontWeights: {
         thin: string;
-        'extra-light': string;
+        "extra-light": string;
         light: string;
         regular: string;
         medium: string;
-        'semi-bold': string;
+        "semi-bold": string;
         bold: string;
-        'extra-bold': string;
+        "extra-bold": string;
         black: string;
     };
     fonts: {
@@ -186,4 +204,4 @@ declare const theme: {
     };
 };
 
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, MultiStep, type MultiStepProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, theme };
+export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, MultiStep, type MultiStepProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, type ToastProps, ToastProvider, Tooltip, type TooltipProps, TooltipProvider, theme, useToast };

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ElementType } from 'react';
+import { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import * as Avatar$1 from '@radix-ui/react-avatar';
 import * as Checkbox$1 from '@radix-ui/react-checkbox';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 
 declare const AvatarImage: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Avatar$1.AvatarImageProps & react.RefAttributes<HTMLImageElement>, "ref"> & {
     ref?: ((instance: HTMLImageElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLImageElement> | null | undefined;
@@ -27,19 +28,16 @@ declare namespace Box {
     var displayName: string;
 }
 
-interface ButtonProps$1 {
-    variant?: 'primary' | 'secondary' | 'tertiary';
-    size?: 'sm' | 'md';
+interface ButtonContainerProps {
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "sm" | "md";
 }
-declare const ButtonContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps$1>> & string;
 
-interface ButtonProps extends ComponentProps<typeof ButtonContainer> {
+interface ButtonProps extends ComponentProps<"button">, ButtonContainerProps {
     as?: ElementType;
+    children?: ReactElement;
 }
-declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace Button {
-    var displayName: string;
-}
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const CheckboxContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
@@ -53,17 +51,14 @@ declare namespace Checkbox {
 }
 
 interface HeadingContainerProps {
-    size?: 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    size?: "sm" | "md" | "lg" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
 }
-declare const HeadingContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, HeadingContainerProps>> & string;
 
-interface HeadingProps extends ComponentProps<typeof HeadingContainer> {
+interface HeadingProps extends ComponentProps<"h2">, HeadingContainerProps {
     as?: ElementType;
+    children?: ReactNode;
 }
-declare function Heading(props: HeadingProps): react_jsx_runtime.JSX.Element;
-declare namespace Heading {
-    var displayName: string;
-}
+declare const Heading: react.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 
 interface MultiStepProps {
     size: number;
@@ -75,17 +70,14 @@ declare namespace MultiStep {
 }
 
 interface TextContainerProps {
-    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
 }
-declare const TextContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextContainerProps>> & string;
 
-interface TextProps extends ComponentProps<typeof TextContainer> {
+interface TextProps extends ComponentProps<"p">, TextContainerProps {
     as?: ElementType;
+    children?: ReactNode;
 }
-declare function Text(props: TextProps): react_jsx_runtime.JSX.Element;
-declare namespace Text {
-    var displayName: string;
-}
+declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
 declare const TextAreaContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
 
@@ -95,11 +87,37 @@ declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref
 
 declare const Input: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 
-interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'prefix'> {
+interface TextInputProps extends Omit<ComponentProps<typeof Input>, "prefix"> {
     prefix?: string;
 }
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
+interface ToastData {
+    id: string;
+    title: string;
+    description?: string;
+}
+type ToastProps = Omit<ToastData, "id">;
+interface ToastContextData {
+    showToast: (props: ToastProps) => void;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+}
+declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+declare const useToast: () => ToastContextData;
+
+interface TooltipProps extends Omit<ComponentProps<typeof RadixTooltip.Root>, "children"> {
+    children: ReactNode;
+    content: string | ReactNode;
+    contentProps?: Omit<ComponentProps<typeof RadixTooltip.Content>, "ref">;
+}
+declare function Tooltip({ children, content, contentProps, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
+
 declare const theme: {
     colors: {
         white: string;
@@ -130,23 +148,23 @@ declare const theme: {
         md: string;
         lg: string;
         xl: string;
-        '2xl': string;
-        '4xl': string;
-        '5xl': string;
-        '6xl': string;
-        '7xl': string;
-        '8xl': string;
-        '9xl': string;
+        "2xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
     };
     fontWeights: {
         thin: string;
-        'extra-light': string;
+        "extra-light": string;
         light: string;
         regular: string;
         medium: string;
-        'semi-bold': string;
+        "semi-bold": string;
         bold: string;
-        'extra-bold': string;
+        "extra-bold": string;
         black: string;
     };
     fonts: {
@@ -186,4 +204,4 @@ declare const theme: {
     };
 };
 
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, MultiStep, type MultiStepProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, theme };
+export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, MultiStep, type MultiStepProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, type ToastProps, ToastProvider, Tooltip, type TooltipProps, TooltipProvider, theme, useToast };

package/dist/index.js

@@ -68,7 +68,11 @@ __export(index_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextInput: () => TextInput,
-  theme: () => theme
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip2,
+  TooltipProvider: () => TooltipProvider,
+  theme: () => theme,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -132,6 +136,9 @@ function Box(props) {
 }
 Box.displayName = "Box";
 
+// src/components/Button/index.tsx
+var import_react = require("react");
+
 // src/components/Button/styles.ts
 var import_styled_components3 = require("styled-components");
 var ButtonContainer = import_styled_components3.styled.button`
@@ -227,9 +234,11 @@ var ButtonContainer = import_styled_components3.styled.button`
 
 // src/components/Button/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function Button(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContainer, __spreadValues({}, props));
-}
+var Button = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonContainer, __spreadValues({ ref }, props));
+  }
+);
 Button.displayName = "Button";
 
 // src/components/Checkbox/index.tsx
@@ -254,11 +263,11 @@ var CheckboxContainer = (0, import_styled_components4.styled)(Checkbox.Root)`
   border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
 
   &:focus,
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     border: 2px solid ${({ theme: theme2 }) => theme2.colors.emerald300};
   }
 
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     background-color: ${({ theme: theme2 }) => theme2.colors.emerald300};
   }
 `;
@@ -275,11 +284,11 @@ var CheckboxIndicator = (0, import_styled_components4.styled)(Checkbox.Indicator
   width: ${({ theme: theme2 }) => theme2.space[4]};
   height: ${({ theme: theme2 }) => theme2.space[4]};
 
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     animation: ${slideIn} 200ms ease-out;
   }
 
-  &[data-state='unchecked'] {
+  &[data-state="unchecked"] {
     animation: ${slideOut} 200ms ease-out;
   }
 `;
@@ -291,6 +300,9 @@ function Checkbox2(props) {
 }
 Checkbox2.displayName = "Checkbox";
 
+// src/components/Heading/index.tsx
+var import_react2 = require("react");
+
 // src/components/Heading/styles.ts
 var import_styled_components5 = require("styled-components");
 var sizeVariants = {
@@ -330,14 +342,19 @@ var HeadingContainer = import_styled_components5.styled.h2`
 
 // src/components/Heading/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Heading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeadingContainer, __spreadValues({}, props));
-}
+var Heading = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeadingContainer, __spreadValues({ ref }, props));
+  }
+);
 Heading.displayName = "Heading";
 
 // src/components/MultiStep/styles.ts
 var import_styled_components7 = require("styled-components");
 
+// src/components/Text/index.tsx
+var import_react3 = require("react");
+
 // src/components/Text/styles.ts
 var import_styled_components6 = require("styled-components");
 var TextContainer = import_styled_components6.styled.p`
@@ -351,9 +368,11 @@ var TextContainer = import_styled_components6.styled.p`
 
 // src/components/Text/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Text(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextContainer, __spreadValues({}, props));
-}
+var Text = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TextContainer, __spreadValues({ ref }, props));
+  }
+);
 Text.displayName = "Text";
 
 // src/components/MultiStep/styles.ts
@@ -395,7 +414,7 @@ function MultiStep({ size, currentStep = 1 }) {
 MultiStep.displayName = "MultiStep";
 
 // src/components/TextArea/index.tsx
-var import_react = require("react");
+var import_react4 = require("react");
 
 // src/components/TextArea/styles.ts
 var import_styled_components8 = require("styled-components");
@@ -429,13 +448,13 @@ var TextAreaContainer = import_styled_components8.styled.textarea`
 
 // src/components/TextArea/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var TextArea = (0, import_react.forwardRef)((props, ref) => {
+var TextArea = (0, import_react4.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextAreaContainer, __spreadValues({ ref }, props));
 });
 TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
-var import_react2 = require("react");
+var import_react5 = require("react");
 
 // src/components/TextInput/styles.ts
 var import_styled_components9 = require("styled-components");
@@ -494,7 +513,7 @@ var Input = import_styled_components9.styled.input`
 
 // src/components/TextInput/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var TextInput = (0, import_react2.forwardRef)(
+var TextInput = (0, import_react5.forwardRef)(
   (_a, ref) => {
     var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TextInputContainer, { children: [
@@ -505,6 +524,187 @@ var TextInput = (0, import_react2.forwardRef)(
 );
 TextInput.displayName = "TextInput";
 
+// src/components/Toast/index.tsx
+var RadixToast = __toESM(require("@radix-ui/react-toast"));
+var import_phosphor_react3 = require("phosphor-react");
+var import_react6 = require("react");
+
+// src/components/Toast/styles.ts
+var Toast = __toESM(require("@radix-ui/react-toast"));
+var import_styled_components10 = require("styled-components");
+var VIEWPORT_PADDING = 32;
+var hide = import_styled_components10.keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+var slideIn2 = import_styled_components10.keyframes`
+  from { transform: translateX(calc(100% + ${VIEWPORT_PADDING}px)); }
+  to { transform: translateX(0); }
+`;
+var swipeOut = import_styled_components10.keyframes`
+  from { transform: translateX(var(--radix-toast-swipe-end-x)); }
+  to { transform: translateX(calc(100% + ${VIEWPORT_PADDING}px)); }
+`;
+var ToastViewport = (0, import_styled_components10.styled)(Toast.Viewport)`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: ${VIEWPORT_PADDING}px;
+  gap: 10px;
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 999999;
+  outline: none;
+`;
+var ToastRoot = (0, import_styled_components10.styled)(Toast.Root)`
+  display: grid;
+  grid-template-areas: "title action" "description action";
+  grid-template-columns: auto max-content;
+  column-gap: ${({ theme: theme2 }) => theme2.space[5]};
+  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[5]}`};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.gray600};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray800};
+
+  &[data-state="open"] {
+    animation: ${slideIn2} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation: ${hide} 100ms ease-in;
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe="end"] {
+    animation: ${swipeOut} 100ms ease-out;
+  }
+`;
+var ToastTitle = (0, import_styled_components10.styled)(Toast.Title)`
+  grid-area: title;
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.xl};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights.base};
+  color: ${({ theme: theme2 }) => theme2.colors.white};
+`;
+var ToastDescription = (0, import_styled_components10.styled)(Toast.Description)`
+  grid-area: description;
+  margin-top: ${({ theme: theme2 }) => theme2.space[1]};
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights.base};
+  color: ${({ theme: theme2 }) => theme2.colors.gray200};
+`;
+var ToastClose = (0, import_styled_components10.styled)(Toast.Close)`
+  grid-area: action;
+  all: unset;
+  width: ${({ theme: theme2 }) => theme2.space[5]};
+  height: ${({ theme: theme2 }) => theme2.space[5]};
+  color: ${({ theme: theme2 }) => theme2.colors.gray200};
+  cursor: pointer;
+`;
+
+// src/components/Toast/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ToastContext = (0, import_react6.createContext)({});
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = (0, import_react6.useState)([]);
+  function showToast({ title, description }) {
+    const newToast = {
+      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      title,
+      description
+    };
+    setToasts((prev) => [...prev, newToast]);
+  }
+  function handleOpenChange(open, toastId) {
+    if (!open) {
+      setToasts((prev) => prev.filter((toast) => toast.id !== toastId));
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastContext.Provider, { value: { showToast }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixToast.Provider, { swipeDirection: "right", children: [
+    children,
+    toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      ToastRoot,
+      {
+        onOpenChange: (open) => handleOpenChange(open, toast.id),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastTitle, { children: toast.title }),
+            toast.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastDescription, { children: toast.description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_phosphor_react3.X, { weight: "light", size: 20 }) })
+        ]
+      },
+      toast.id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastViewport, {})
+  ] }) });
+}
+var useToast = () => {
+  const context = (0, import_react6.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+// src/components/Tooltip/index.tsx
+var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"));
+
+// src/components/Tooltip/styles.ts
+var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
+var import_styled_components11 = require("styled-components");
+var TooltipContent = (0, import_styled_components11.styled)(Tooltip.Content)`
+  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[4]}`};
+  background: ${({ theme: theme2 }) => theme2.colors.gray900};
+  color: ${({ theme: theme2 }) => theme2.colors.gray100};
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.medium};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  user-select: none;
+  box-shadow: 4px 16px 24px rgba(0, 0, 0, 0.25);
+`;
+var TooltipArrow = (0, import_styled_components11.styled)(Tooltip.Arrow)`
+  fill: ${({ theme: theme2 }) => theme2.colors.gray900};
+`;
+
+// src/components/Tooltip/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Tooltip2(_a) {
+  var _b = _a, {
+    children,
+    content,
+    contentProps
+  } = _b, props = __objRest(_b, [
+    "children",
+    "content",
+    "contentProps"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(RadixTooltip.Root, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TooltipContent, __spreadProps(__spreadValues({ sideOffset: 5 }, contentProps), { children: [
+      content,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipArrow, {})
+    ] })) })
+  ] }));
+}
+var TooltipProvider = RadixTooltip.Provider;
+Tooltip2.displayName = "Tooltip";
+
 // src/styles/theme.ts
 var import_tokens = require("@beryl-ui/tokens");
 var theme = {
@@ -527,5 +727,9 @@ var theme = {
   Text,
   TextArea,
   TextInput,
-  theme
+  ToastProvider,
+  Tooltip,
+  TooltipProvider,
+  theme,
+  useToast
 });

package/dist/index.mjs

@@ -90,6 +90,9 @@ function Box(props) {
 }
 Box.displayName = "Box";
 
+// src/components/Button/index.tsx
+import { forwardRef } from "react";
+
 // src/components/Button/styles.ts
 import { css, styled as styled3 } from "styled-components";
 var ButtonContainer = styled3.button`
@@ -185,9 +188,11 @@ var ButtonContainer = styled3.button`
 
 // src/components/Button/index.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function Button(props) {
-  return /* @__PURE__ */ jsx3(ButtonContainer, __spreadValues({}, props));
-}
+var Button = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx3(ButtonContainer, __spreadValues({ ref }, props));
+  }
+);
 Button.displayName = "Button";
 
 // src/components/Checkbox/index.tsx
@@ -212,11 +217,11 @@ var CheckboxContainer = styled4(Checkbox.Root)`
   border: 2px solid ${({ theme: theme2 }) => theme2.colors.gray900};
 
   &:focus,
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     border: 2px solid ${({ theme: theme2 }) => theme2.colors.emerald300};
   }
 
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     background-color: ${({ theme: theme2 }) => theme2.colors.emerald300};
   }
 `;
@@ -233,11 +238,11 @@ var CheckboxIndicator = styled4(Checkbox.Indicator)`
   width: ${({ theme: theme2 }) => theme2.space[4]};
   height: ${({ theme: theme2 }) => theme2.space[4]};
 
-  &[data-state='checked'] {
+  &[data-state="checked"] {
     animation: ${slideIn} 200ms ease-out;
   }
 
-  &[data-state='unchecked'] {
+  &[data-state="unchecked"] {
     animation: ${slideOut} 200ms ease-out;
   }
 `;
@@ -249,6 +254,9 @@ function Checkbox2(props) {
 }
 Checkbox2.displayName = "Checkbox";
 
+// src/components/Heading/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+
 // src/components/Heading/styles.ts
 import { css as css2, styled as styled5 } from "styled-components";
 var sizeVariants = {
@@ -288,14 +296,19 @@ var HeadingContainer = styled5.h2`
 
 // src/components/Heading/index.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-function Heading(props) {
-  return /* @__PURE__ */ jsx5(HeadingContainer, __spreadValues({}, props));
-}
+var Heading = forwardRef2(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx5(HeadingContainer, __spreadValues({ ref }, props));
+  }
+);
 Heading.displayName = "Heading";
 
 // src/components/MultiStep/styles.ts
 import { styled as styled7 } from "styled-components";
 
+// src/components/Text/index.tsx
+import { forwardRef as forwardRef3 } from "react";
+
 // src/components/Text/styles.ts
 import { styled as styled6 } from "styled-components";
 var TextContainer = styled6.p`
@@ -309,9 +322,11 @@ var TextContainer = styled6.p`
 
 // src/components/Text/index.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-function Text(props) {
-  return /* @__PURE__ */ jsx6(TextContainer, __spreadValues({}, props));
-}
+var Text = forwardRef3(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx6(TextContainer, __spreadValues({ ref }, props));
+  }
+);
 Text.displayName = "Text";
 
 // src/components/MultiStep/styles.ts
@@ -353,7 +368,7 @@ function MultiStep({ size, currentStep = 1 }) {
 MultiStep.displayName = "MultiStep";
 
 // src/components/TextArea/index.tsx
-import { forwardRef } from "react";
+import { forwardRef as forwardRef4 } from "react";
 
 // src/components/TextArea/styles.ts
 import { styled as styled8 } from "styled-components";
@@ -387,13 +402,13 @@ var TextAreaContainer = styled8.textarea`
 
 // src/components/TextArea/index.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var TextArea = forwardRef((props, ref) => {
+var TextArea = forwardRef4((props, ref) => {
   return /* @__PURE__ */ jsx8(TextAreaContainer, __spreadValues({ ref }, props));
 });
 TextArea.displayName = "TextArea";
 
 // src/components/TextInput/index.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/TextInput/styles.ts
 import { styled as styled9 } from "styled-components";
@@ -452,7 +467,7 @@ var Input = styled9.input`
 
 // src/components/TextInput/index.tsx
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
-var TextInput = forwardRef2(
+var TextInput = forwardRef5(
   (_a, ref) => {
     var _b = _a, { prefix } = _b, props = __objRest(_b, ["prefix"]);
     return /* @__PURE__ */ jsxs3(TextInputContainer, { children: [
@@ -463,6 +478,187 @@ var TextInput = forwardRef2(
 );
 TextInput.displayName = "TextInput";
 
+// src/components/Toast/index.tsx
+import * as RadixToast from "@radix-ui/react-toast";
+import { X } from "phosphor-react";
+import { createContext, useContext, useState } from "react";
+
+// src/components/Toast/styles.ts
+import * as Toast from "@radix-ui/react-toast";
+import { keyframes as keyframes2, styled as styled10 } from "styled-components";
+var VIEWPORT_PADDING = 32;
+var hide = keyframes2`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+var slideIn2 = keyframes2`
+  from { transform: translateX(calc(100% + ${VIEWPORT_PADDING}px)); }
+  to { transform: translateX(0); }
+`;
+var swipeOut = keyframes2`
+  from { transform: translateX(var(--radix-toast-swipe-end-x)); }
+  to { transform: translateX(calc(100% + ${VIEWPORT_PADDING}px)); }
+`;
+var ToastViewport = styled10(Toast.Viewport)`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: ${VIEWPORT_PADDING}px;
+  gap: 10px;
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 999999;
+  outline: none;
+`;
+var ToastRoot = styled10(Toast.Root)`
+  display: grid;
+  grid-template-areas: "title action" "description action";
+  grid-template-columns: auto max-content;
+  column-gap: ${({ theme: theme2 }) => theme2.space[5]};
+  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[5]}`};
+  border: 1px solid ${({ theme: theme2 }) => theme2.colors.gray600};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  background-color: ${({ theme: theme2 }) => theme2.colors.gray800};
+
+  &[data-state="open"] {
+    animation: ${slideIn2} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation: ${hide} 100ms ease-in;
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe="end"] {
+    animation: ${swipeOut} 100ms ease-out;
+  }
+`;
+var ToastTitle = styled10(Toast.Title)`
+  grid-area: title;
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.xl};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights.base};
+  color: ${({ theme: theme2 }) => theme2.colors.white};
+`;
+var ToastDescription = styled10(Toast.Description)`
+  grid-area: description;
+  margin-top: ${({ theme: theme2 }) => theme2.space[1]};
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  line-height: ${({ theme: theme2 }) => theme2.lineHeights.base};
+  color: ${({ theme: theme2 }) => theme2.colors.gray200};
+`;
+var ToastClose = styled10(Toast.Close)`
+  grid-area: action;
+  all: unset;
+  width: ${({ theme: theme2 }) => theme2.space[5]};
+  height: ${({ theme: theme2 }) => theme2.space[5]};
+  color: ${({ theme: theme2 }) => theme2.colors.gray200};
+  cursor: pointer;
+`;
+
+// src/components/Toast/index.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var ToastContext = createContext({});
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  function showToast({ title, description }) {
+    const newToast = {
+      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      title,
+      description
+    };
+    setToasts((prev) => [...prev, newToast]);
+  }
+  function handleOpenChange(open, toastId) {
+    if (!open) {
+      setToasts((prev) => prev.filter((toast) => toast.id !== toastId));
+    }
+  }
+  return /* @__PURE__ */ jsx10(ToastContext.Provider, { value: { showToast }, children: /* @__PURE__ */ jsxs4(RadixToast.Provider, { swipeDirection: "right", children: [
+    children,
+    toasts.map((toast) => /* @__PURE__ */ jsxs4(
+      ToastRoot,
+      {
+        onOpenChange: (open) => handleOpenChange(open, toast.id),
+        children: [
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx10(ToastTitle, { children: toast.title }),
+            toast.description && /* @__PURE__ */ jsx10(ToastDescription, { children: toast.description })
+          ] }),
+          /* @__PURE__ */ jsx10(ToastClose, { asChild: true, children: /* @__PURE__ */ jsx10(X, { weight: "light", size: 20 }) })
+        ]
+      },
+      toast.id
+    )),
+    /* @__PURE__ */ jsx10(ToastViewport, {})
+  ] }) });
+}
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+// src/components/Tooltip/index.tsx
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+// src/components/Tooltip/styles.ts
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { styled as styled11 } from "styled-components";
+var TooltipContent = styled11(Tooltip.Content)`
+  padding: ${({ theme: theme2 }) => `${theme2.space[3]} ${theme2.space[4]}`};
+  background: ${({ theme: theme2 }) => theme2.colors.gray900};
+  color: ${({ theme: theme2 }) => theme2.colors.gray100};
+  font-family: ${({ theme: theme2 }) => theme2.fonts.default};
+  font-size: ${({ theme: theme2 }) => theme2.fontSizes.sm};
+  font-weight: ${({ theme: theme2 }) => theme2.fontWeights.medium};
+  border-radius: ${({ theme: theme2 }) => theme2.radii.sm};
+  user-select: none;
+  box-shadow: 4px 16px 24px rgba(0, 0, 0, 0.25);
+`;
+var TooltipArrow = styled11(Tooltip.Arrow)`
+  fill: ${({ theme: theme2 }) => theme2.colors.gray900};
+`;
+
+// src/components/Tooltip/index.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function Tooltip2(_a) {
+  var _b = _a, {
+    children,
+    content,
+    contentProps
+  } = _b, props = __objRest(_b, [
+    "children",
+    "content",
+    "contentProps"
+  ]);
+  return /* @__PURE__ */ jsxs5(RadixTooltip.Root, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx11(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx11(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs5(TooltipContent, __spreadProps(__spreadValues({ sideOffset: 5 }, contentProps), { children: [
+      content,
+      /* @__PURE__ */ jsx11(TooltipArrow, {})
+    ] })) })
+  ] }));
+}
+var TooltipProvider = RadixTooltip.Provider;
+Tooltip2.displayName = "Tooltip";
+
 // src/styles/theme.ts
 import {
   colors,
@@ -492,5 +688,9 @@ export {
   Text,
   TextArea,
   TextInput,
-  theme
+  ToastProvider,
+  Tooltip2 as Tooltip,
+  TooltipProvider,
+  theme,
+  useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beryl-ui/react",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "description": "React components for the beryl-ui Design System.",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -34,9 +34,9 @@
     "lint": "eslint src --ext .ts,.tsx --fix"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "styled-components": "^6.3.6"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "styled-components": "^6.0.0"
   },
   "devDependencies": {
     "@beryl-ui/eslint-config": "*",
@@ -53,6 +53,8 @@
     "@beryl-ui/tokens": "*",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "phosphor-react": "^1.4.1"
   }
 }