analytica-frontend-lib 1.0.15 → 1.0.17

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
+import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, InputHTMLAttributes, HTMLAttributes, TdHTMLAttributes } from 'react';
 
 /**
  * Button component props interface
@@ -184,6 +184,76 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
+/**
+ * CheckBox size variants
+ */
+type CheckBoxSize = 'small' | 'medium' | 'large';
+/**
+ * CheckBox visual state
+ */
+type CheckBoxState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
+/**
+ * CheckBox component props interface
+ */
+type CheckBoxProps = {
+    /** Label text to display next to the checkbox */
+    label?: ReactNode;
+    /** Size variant of the checkbox */
+    size?: CheckBoxSize;
+    /** Visual state of the checkbox */
+    state?: CheckBoxState;
+    /** Indeterminate state for partial selections */
+    indeterminate?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>;
+/**
+ * CheckBox component for Analytica Ensino platforms
+ *
+ * A checkbox component with essential states, sizes and themes.
+ * Uses the Analytica Ensino Design System colors from styles.css with automatic
+ * light/dark mode support. Includes Text component integration for consistent typography.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox
+ * <CheckBox label="Option" />
+ *
+ * // Small size
+ * <CheckBox size="small" label="Small option" />
+ *
+ * // Invalid state
+ * <CheckBox state="invalid" label="Required field" />
+ *
+ * // Disabled state
+ * <CheckBox disabled label="Disabled option" />
+ * ```
+ */
+declare const CheckBox: react.ForwardRefExoticComponent<{
+    /** Label text to display next to the checkbox */
+    label?: ReactNode;
+    /** Size variant of the checkbox */
+    size?: CheckBoxSize;
+    /** Visual state of the checkbox */
+    state?: CheckBoxState;
+    /** Indeterminate state for partial selections */
+    indeterminate?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label CSS classes */
+    labelClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & react.RefAttributes<HTMLInputElement>>;
+
 type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
 interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     state?: TableRowState;
@@ -275,4 +345,77 @@ declare const NavButton: react.ForwardRefExoticComponent<{
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, DropdownMenu, DropdownMenuTrigger, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
+/**
+ * IconButton component props interface
+ */
+type IconButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: 'sm' | 'md';
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconButton component for Analytica Ensino platforms
+ *
+ * Um botão compacto apenas com ícone, ideal para menus dropdown,
+ * barras de ferramentas e ações secundárias.
+ * Oferece dois tamanhos com estilo consistente.
+ * Estado ativo permanece até ser clicado novamente ou outro botão ser ativado.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param size - Tamanho do botão (sm, md)
+ * @param active - Estado ativo/selecionado do botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button compacto estilizado apenas com ícone
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   icon={<MoreVerticalIcon />}
+ *   size="sm"
+ *   onClick={() => openMenu()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Botão ativo em uma barra de ferramentas - permanece ativo até outro clique
+ * <IconButton
+ *   icon={<BoldIcon />}
+ *   active={isBold}
+ *   onClick={toggleBold}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para controle programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * <IconButton
+ *   ref={buttonRef}
+ *   icon={<EditIcon />}
+ *   size="md"
+ *   onClick={() => startEditing()}
+ * />
+ * ```
+ */
+declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Tamanho do botão */
+    size?: "sm" | "md";
+    /** Estado de seleção/ativo do botão - permanece ativo até ser clicado novamente ou outro botão ser ativado */
+    active?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, CheckBox, type CheckBoxProps, DropdownMenu, DropdownMenuTrigger, IconButton, type IconButtonProps, IconRoundedButton, MenuContent, MenuItem, MenuLabel, MenuSeparator, NavButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };

package/dist/index.js

@@ -21,8 +21,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  CheckBox: () => CheckBox,
   DropdownMenu: () => DropdownMenu,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  IconButton: () => IconButton,
   IconRoundedButton: () => IconRoundedButton,
   MenuContent: () => MenuContent,
   MenuItem: () => MenuItem,
@@ -250,25 +252,192 @@ var Text = ({
   );
 };
 
-// src/components/Table/Table.tsx
+// src/components/CheckBox/CheckBox.tsx
 var import_react2 = require("react");
+var import_phosphor_react = require("phosphor-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Table = (0, import_react2.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var SIZE_CLASSES2 = {
+  small: {
+    checkbox: "w-4 h-4",
+    // 16px x 16px
+    textSize: "sm",
+    spacing: "gap-1.5",
+    // 6px
+    borderWidth: "border-2",
+    iconSize: 14,
+    // pixels for Phosphor icons
+    labelHeight: "h-[21px]"
+  },
+  medium: {
+    checkbox: "w-5 h-5",
+    // 20px x 20px
+    textSize: "md",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-2",
+    iconSize: 16,
+    // pixels for Phosphor icons
+    labelHeight: "h-6"
+  },
+  large: {
+    checkbox: "w-6 h-6",
+    // 24px x 24px
+    textSize: "lg",
+    spacing: "gap-2",
+    // 8px
+    borderWidth: "border-[3px]",
+    // 3px border
+    iconSize: 20,
+    // pixels for Phosphor icons
+    labelHeight: "h-[27px]"
+  }
+};
+var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
+var STATE_CLASSES = {
+  default: {
+    unchecked: "border-border-400 bg-background hover:border-border-500",
+    checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
+  },
+  hovered: {
+    unchecked: "border-border-500 bg-background",
+    checked: "border-primary-800 bg-primary-800 text-text"
+  },
+  focused: {
+    unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
+    checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
+  },
+  invalid: {
+    unchecked: "border-error-700 bg-background hover:border-error-600",
+    checked: "border-error-700 bg-primary-950 text-text"
+  },
+  disabled: {
+    unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
+    checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
+  }
+};
+var CheckBox = (0, import_react2.forwardRef)(
+  ({
+    label,
+    size = "medium",
+    state = "default",
+    indeterminate = false,
+    errorMessage,
+    helperText,
+    className = "",
+    labelClassName = "",
+    checked: checkedProp,
+    disabled,
+    id,
+    onChange,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react2.useId)();
+    const inputId = id ?? `checkbox-${generatedId}`;
+    const [internalChecked, setInternalChecked] = (0, import_react2.useState)(false);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = (event) => {
+      if (!isControlled) {
+        setInternalChecked(event.target.checked);
+      }
+      onChange?.(event);
+    };
+    const currentState = disabled ? "disabled" : state;
+    const sizeClasses = SIZE_CLASSES2[size];
+    const checkVariant = checked || indeterminate ? "checked" : "unchecked";
+    const stylingClasses = STATE_CLASSES[currentState][checkVariant];
+    const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
+    const checkboxClasses = `${BASE_CHECKBOX_CLASSES} ${sizeClasses.checkbox} ${borderWidthClass} ${stylingClasses} ${className}`;
+    const renderIcon = () => {
+      if (indeterminate) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_phosphor_react.Minus,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      if (checked) {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_phosphor_react.Check,
+          {
+            size: sizeClasses.iconSize,
+            weight: "bold",
+            color: "currentColor"
+          }
+        );
+      }
+      return null;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: `flex flex-row items-center ${sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                id: inputId,
+                checked,
+                disabled,
+                onChange: handleChange,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  Text,
+                  {
+                    as: "label",
+                    htmlFor: inputId,
+                    size: sizeClasses.textSize,
+                    weight: "normal",
+                    color: "black",
+                    className: `cursor-pointer select-none leading-[150%] flex items-center font-roboto ${labelClassName}`,
+                    children: label
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
+      helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperText })
+    ] });
+  }
+);
+CheckBox.displayName = "CheckBox";
+
+// src/components/Table/Table.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Table = (0, import_react3.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "table",
     {
       ref,
       className: `w-full caption-bottom text-sm ${className ?? ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("caption", { className: "sr-only", children: "My Table" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("caption", { className: "sr-only", children: "My Table" }),
         children
       ]
     }
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var TableHeader = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "thead",
   {
     ref,
@@ -277,7 +446,7 @@ var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) =
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var TableBody = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "tbody",
   {
     ref,
@@ -286,7 +455,7 @@ var TableBody = (0, import_react2.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var TableFooter = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "tfoot",
   {
     ref,
@@ -301,9 +470,9 @@ var VARIANT_STATES_ROW = {
   invalid: "border-b-2 border-indicator-error",
   disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
 };
-var TableRow = (0, import_react2.forwardRef)(
+var TableRow = (0, import_react3.forwardRef)(
   ({ state = "default", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "tr",
       {
         ref,
@@ -320,7 +489,7 @@ var TableRow = (0, import_react2.forwardRef)(
   }
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var TableHead = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "th",
   {
     ref,
@@ -329,7 +498,7 @@ var TableHead = (0, import_react2.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var TableCell = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "td",
   {
     ref,
@@ -338,7 +507,7 @@ var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var TableCaption = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "caption",
   {
     ref,
@@ -349,23 +518,23 @@ var TableCaption = (0, import_react2.forwardRef)(({ className, ...props }, ref)
 TableCaption.displayName = "TableCaption";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react3 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var DropdownMenuContext = (0, import_react3.createContext)(
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DropdownMenuContext = (0, import_react4.createContext)(
   void 0
 );
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react3.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
-  const setOpen = (0, import_react3.useCallback)(
+  const setOpen = (0, import_react4.useCallback)(
     (newOpen) => {
       if (onOpenChange) onOpenChange(newOpen);
       if (!isControlled) setInternalOpen(newOpen);
     },
     [isControlled, onOpenChange]
   );
-  const menuRef = (0, import_react3.useRef)(null);
+  const menuRef = (0, import_react4.useRef)(null);
   const handleEscape = (event) => {
     if (event.key === "Escape") {
       setOpen(false);
@@ -376,7 +545,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       setOpen(false);
     }
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleEscape);
@@ -386,18 +555,18 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleEscape);
     };
   }, [currentOpen]);
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react4.useMemo)(
     () => ({ open: currentOpen, setOpen }),
     [currentOpen, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative", ref: menuRef, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative", ref: menuRef, children }) });
 };
-var DropdownMenuTrigger = (0, import_react3.forwardRef)(({ className, children, onClick, ...props }, ref) => {
-  const context = (0, import_react3.useContext)(DropdownMenuContext);
+var DropdownMenuTrigger = (0, import_react4.forwardRef)(({ className, children, onClick, ...props }, ref) => {
+  const context = (0, import_react4.useContext)(DropdownMenuContext);
   if (!context)
     throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
   const { open, setOpen } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       ref,
@@ -429,7 +598,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = (0, import_react3.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var MenuLabel = (0, import_react4.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "fieldset",
   {
     ref,
@@ -439,7 +608,7 @@ var MenuLabel = (0, import_react3.forwardRef)(({ className, inset, ...props }, r
   }
 ));
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = (0, import_react3.forwardRef)(
+var MenuContent = (0, import_react4.forwardRef)(
   ({
     className,
     align = "start",
@@ -448,9 +617,9 @@ var MenuContent = (0, import_react3.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const { open } = (0, import_react3.useContext)(DropdownMenuContext);
-    const [isVisible, setIsVisible] = (0, import_react3.useState)(open);
-    (0, import_react3.useEffect)(() => {
+    const { open } = (0, import_react4.useContext)(DropdownMenuContext);
+    const [isVisible, setIsVisible] = (0, import_react4.useState)(open);
+    (0, import_react4.useEffect)(() => {
       if (open) {
         setIsVisible(true);
       } else {
@@ -464,7 +633,7 @@ var MenuContent = (0, import_react3.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         ref,
@@ -488,7 +657,7 @@ var MenuContent = (0, import_react3.forwardRef)(
   }
 );
 MenuContent.displayName = "MenuContent";
-var MenuItem = (0, import_react3.forwardRef)(
+var MenuItem = (0, import_react4.forwardRef)(
   ({
     className,
     inset,
@@ -509,7 +678,7 @@ var MenuItem = (0, import_react3.forwardRef)(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         ref,
@@ -538,7 +707,7 @@ var MenuItem = (0, import_react3.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react3.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var MenuSeparator = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "div",
   {
     ref,
@@ -549,9 +718,9 @@ var MenuSeparator = (0, import_react3.forwardRef)(({ className, ...props }, ref)
 MenuSeparator.displayName = "MenuSeparator";
 
 // src/components/NavButton/NavButton.tsx
-var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var NavButton = (0, import_react4.forwardRef)(
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var NavButton = (0, import_react5.forwardRef)(
   ({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
     const baseClasses = [
       "flex",
@@ -578,7 +747,7 @@ var NavButton = (0, import_react4.forwardRef)(
     ];
     const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
     const allClasses = [...baseClasses, ...stateClasses].join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         ref,
@@ -588,19 +757,73 @@ var NavButton = (0, import_react4.forwardRef)(
         "aria-pressed": selected,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-nowrap", children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap", children: label })
         ]
       }
     );
   }
 );
 NavButton.displayName = "NavButton";
+
+// src/components/IconButton/IconButton.tsx
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var IconButton = (0, import_react6.forwardRef)(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `${allClasses} ${className}`,
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  CheckBox,
   DropdownMenu,
   DropdownMenuTrigger,
+  IconButton,
   IconRoundedButton,
   MenuContent,
   MenuItem,