@sigep/react 1.1.2 → 1.1.4

package/dist/index.mjs

@@ -12,9 +12,9 @@ var avatar = tv({
       xl: "h-16 w-16 text-lg"
     },
     variant: {
-      primary: "bg-blue-600 text-white",
-      secondary: "bg-gray-200 text-gray-700",
-      outline: "bg-white text-blue-600 ring-2 ring-blue-600 ring-offset-2"
+      primary: "bg-blue-500 text-white",
+      secondary: "bg-gray-200 text-gray-600",
+      outline: "bg-white text-blue-500 ring-2 ring-blue-500 ring-offset-2"
     }
   },
   defaultVariants: {
@@ -29,14 +29,22 @@ function getInitials(name) {
 }
 var Avatar = forwardRef(
   ({ name, src, alt, size, variant, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: avatar({ size, variant, className }), ...props, children: src ? /* @__PURE__ */ jsx(
-      "img",
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        src,
-        alt: alt || name || "avatar",
-        className: "h-full w-full object-cover"
+        ref,
+        className: avatar({ size, variant, className }),
+        ...props,
+        children: src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt || name || "avatar",
+            className: "h-full w-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("span", { children: name ? getInitials(name) : "?" })
       }
-    ) : /* @__PURE__ */ jsx("span", { children: name ? getInitials(name) : "?" }) });
+    );
   }
 );
 Avatar.displayName = "Avatar";
@@ -49,10 +57,10 @@ var button = tv2({
   base: "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     variant: {
-      primary: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-blue-600",
-      secondary: "border border-blue-600 text-blue-600 hover:bg-blue-50 focus-visible:outline-blue-600",
-      tertiary: "text-blue-600 hover:bg-blue-50 focus-visible:outline-blue-600",
-      danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600"
+      primary: "bg-blue-500 text-white hover:bg-blue-700 focus-visible:outline-blue-500",
+      secondary: "border border-blue-500 text-blue-500 hover:bg-blue-50 focus-visible:outline-blue-500",
+      tertiary: "text-blue-500 hover:bg-blue-50 focus-visible:outline-blue-500",
+      danger: "bg-red-500 text-white hover:bg-red-500/90 focus-visible:outline-red-500"
     },
     size: {
       sm: "h-9 px-3 text-sm",
@@ -115,7 +123,11 @@ var Card = forwardRef3(
 Card.displayName = "Card";
 
 // src/components/Modal/index.tsx
-import { forwardRef as forwardRef4, useEffect, useCallback } from "react";
+import {
+  forwardRef as forwardRef4,
+  useEffect,
+  useCallback
+} from "react";
 import { tv as tv4 } from "tailwind-variants";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var overlay = tv4({
@@ -169,7 +181,7 @@ var Modal = forwardRef4(
               "button",
               {
                 type: "button",
-                className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors",
+                className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-600 transition-colors",
                 onClick: onClose,
                 "aria-label": "Fechar",
                 children: "\u2715"
@@ -396,7 +408,7 @@ var wrapper = tv6({
   base: "flex w-full flex-col gap-1"
 });
 var labelStyle = tv6({
-  base: "text-xs text-gray-700 flex items-start gap-0.5"
+  base: "text-xs text-gray-600 flex items-start gap-0.5"
 });
 var containerStyle = tv6({
   base: "flex items-center w-full rounded-md border bg-white transition-colors",
@@ -423,13 +435,35 @@ var errorStyle = tv6({
   base: "text-xs text-red-500 mt-0.5"
 });
 var InputWrapper = forwardRef6(
-  ({ label, error, errorMessage, required, disabled, size, children, className, classContainer, htmlFor }, ref) => {
+  ({
+    label,
+    error,
+    errorMessage,
+    required,
+    disabled,
+    size,
+    children,
+    className,
+    classContainer,
+    htmlFor
+  }, ref) => {
     return /* @__PURE__ */ jsxs4("div", { ref, className: wrapper({ className }), children: [
       label && /* @__PURE__ */ jsxs4("label", { htmlFor, className: labelStyle(), children: [
         /* @__PURE__ */ jsx6("span", { children: label }),
         required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: containerStyle({ size, error: !!error, disabled: !!disabled, className: classContainer }), children }),
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: containerStyle({
+            size,
+            error: !!error,
+            disabled: !!disabled,
+            className: classContainer
+          }),
+          children
+        }
+      ),
       error && errorMessage && /* @__PURE__ */ jsx6("span", { className: errorStyle(), children: errorMessage })
     ] });
   }
@@ -964,7 +998,7 @@ var checkboxContainer = tv7({
   base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded border cursor-pointer transition-colors",
   variants: {
     checked: {
-      true: "bg-blue-600 border-blue-600",
+      true: "bg-blue-500 border-blue-500",
       false: "bg-white border-gray-300 hover:border-blue-500 hover:bg-blue-50"
     },
     disabled: {
@@ -978,10 +1012,34 @@ var checkboxContainer = tv7({
     checked: false
   }
 });
-var CheckIcon = () => /* @__PURE__ */ jsx16("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" }) });
+var CheckIcon = () => /* @__PURE__ */ jsx16(
+  "svg",
+  {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "white",
+    strokeWidth: "4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
 var IndeterminateIcon = () => /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-sm bg-gray-300" });
 var InputCheckbox = forwardRef16(
-  ({ label, checked = false, indeterminate = false, onChange, disabled, error, labelPosition = "right", className, name, required }, ref) => {
+  ({
+    label,
+    checked = false,
+    indeterminate = false,
+    onChange,
+    disabled,
+    error,
+    labelPosition = "right",
+    className,
+    name,
+    required
+  }, ref) => {
     function handleClick() {
       if (disabled) return;
       onChange?.(!checked);
@@ -995,7 +1053,11 @@ var InputCheckbox = forwardRef16(
         id: name,
         "aria-checked": indeterminate ? "mixed" : checked,
         "aria-required": required,
-        className: checkboxContainer({ checked: checked || indeterminate, disabled: !!disabled, error: !!error }),
+        className: checkboxContainer({
+          checked: checked || indeterminate,
+          disabled: !!disabled,
+          error: !!error
+        }),
         onClick: handleClick,
         disabled,
         children: [
@@ -1006,9 +1068,23 @@ var InputCheckbox = forwardRef16(
     );
     if (!label) return /* @__PURE__ */ jsx16("div", { className, children: box });
     return /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
-      labelPosition === "left" && /* @__PURE__ */ jsx16("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      labelPosition === "left" && /* @__PURE__ */ jsx16(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm text-gray-600 cursor-pointer select-none",
+          children: label
+        }
+      ),
       box,
-      labelPosition === "right" && /* @__PURE__ */ jsx16("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      labelPosition === "right" && /* @__PURE__ */ jsx16(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm text-gray-600 cursor-pointer select-none",
+          children: label
+        }
+      ),
       required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 text-[10px]", children: "*" })
     ] });
   }
@@ -1023,7 +1099,7 @@ var radioButton = tv8({
   base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded-full border cursor-pointer transition-colors",
   variants: {
     selected: {
-      true: "border-blue-600",
+      true: "border-blue-500",
       false: "border-gray-300 hover:border-blue-500 hover:bg-blue-50"
     },
     disabled: {
@@ -1038,48 +1114,70 @@ var radioButton = tv8({
   }
 });
 var InputRadio = forwardRef17(
-  ({ label, options, value, onChange, disabled, error, required, name, className, direction = "horizontal" }, ref) => {
-    return /* @__PURE__ */ jsxs10("div", { ref, className: `flex w-full flex-col gap-1 ${className ?? ""}`, children: [
-      label && /* @__PURE__ */ jsxs10("span", { className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
-        /* @__PURE__ */ jsx17("span", { children: label }),
-        required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
-      ] }),
-      /* @__PURE__ */ jsx17(
-        "div",
-        {
-          role: "radiogroup",
-          "aria-label": label,
-          className: `flex gap-3 ${direction === "vertical" ? "flex-col" : "items-center"}`,
-          children: options.map((option) => {
-            const isSelected = value === option.value;
-            const isDisabled = disabled || option.disabled;
-            return /* @__PURE__ */ jsxs10(
-              "label",
-              {
-                className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
-                children: [
-                  /* @__PURE__ */ jsx17(
-                    "button",
-                    {
-                      type: "button",
-                      role: "radio",
-                      "aria-checked": isSelected,
-                      className: radioButton({ selected: isSelected, disabled: !!isDisabled, error: !!error }),
-                      onClick: () => !isDisabled && onChange?.(option.value),
-                      disabled: isDisabled,
-                      children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-600" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx17("span", { className: "text-sm text-gray-700", children: option.label })
-                ]
-              },
-              String(option.value)
-            );
-          })
-        }
-      ),
-      error && /* @__PURE__ */ jsx17("span", { className: "text-xs text-red-500 mt-0.5", children: "Selecione uma op\xE7\xE3o" })
-    ] });
+  ({
+    label,
+    options,
+    value,
+    onChange,
+    disabled,
+    error,
+    required,
+    name,
+    className,
+    direction = "horizontal"
+  }, ref) => {
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: `flex w-full flex-col gap-1 ${className ?? ""}`,
+        children: [
+          label && /* @__PURE__ */ jsxs10("span", { className: "text-xs text-gray-600 flex items-start gap-0.5", children: [
+            /* @__PURE__ */ jsx17("span", { children: label }),
+            required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx17(
+            "div",
+            {
+              role: "radiogroup",
+              "aria-label": label,
+              className: `flex gap-3 ${direction === "vertical" ? "flex-col" : "items-center"}`,
+              children: options.map((option) => {
+                const isSelected = value === option.value;
+                const isDisabled = disabled || option.disabled;
+                return /* @__PURE__ */ jsxs10(
+                  "label",
+                  {
+                    className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsx17(
+                        "button",
+                        {
+                          type: "button",
+                          role: "radio",
+                          "aria-checked": isSelected,
+                          className: radioButton({
+                            selected: isSelected,
+                            disabled: !!isDisabled,
+                            error: !!error
+                          }),
+                          onClick: () => !isDisabled && onChange?.(option.value),
+                          disabled: isDisabled,
+                          children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-500" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx17("span", { className: "text-sm text-gray-600", children: option.label })
+                    ]
+                  },
+                  String(option.value)
+                );
+              })
+            }
+          ),
+          error && /* @__PURE__ */ jsx17("span", { className: "text-xs text-red-500 mt-0.5", children: "Selecione uma op\xE7\xE3o" })
+        ]
+      }
+    );
   }
 );
 InputRadio.displayName = "InputRadio";
@@ -1104,12 +1202,32 @@ var textareaStyle = tv9({
   }
 });
 var Textarea = forwardRef18(
-  ({ label, error, errorMessage, required, size, classInput, value, onChange, disabled, name, rows = 4, ...props }, ref) => {
+  ({
+    label,
+    error,
+    errorMessage,
+    required,
+    size,
+    classInput,
+    value,
+    onChange,
+    disabled,
+    name,
+    rows = 4,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-1", children: [
-      label && /* @__PURE__ */ jsxs11("label", { htmlFor: name, className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
-        /* @__PURE__ */ jsx18("span", { children: label }),
-        required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
-      ] }),
+      label && /* @__PURE__ */ jsxs11(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-xs text-gray-600 flex items-start gap-0.5",
+          children: [
+            /* @__PURE__ */ jsx18("span", { children: label }),
+            required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx18(
         "textarea",
         {
@@ -1121,7 +1239,11 @@ var Textarea = forwardRef18(
           onChange: (e) => onChange?.(e.target.value),
           disabled,
           "aria-invalid": !!error,
-          className: textareaStyle({ error: !!error, disabled: !!disabled, className: classInput }),
+          className: textareaStyle({
+            error: !!error,
+            disabled: !!disabled,
+            className: classInput
+          }),
           ...props
         }
       ),
@@ -1130,10 +1252,604 @@ var Textarea = forwardRef18(
   }
 );
 Textarea.displayName = "Textarea";
+
+// src/components/Accordion/index.tsx
+import { forwardRef as forwardRef19, useState as useState4, useId } from "react";
+import { tv as tv10 } from "tailwind-variants";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var accordion = tv10({
+  base: "divide-y divide-gray-200",
+  variants: {
+    variant: {
+      default: "border border-gray-200 rounded-lg",
+      separated: "space-y-2 divide-y-0",
+      flush: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var accordionItem = tv10({
+  base: "",
+  variants: {
+    variant: {
+      default: "",
+      separated: "border border-gray-200 rounded-lg overflow-hidden",
+      flush: "border-b border-gray-200 last:border-b-0"
+    }
+  }
+});
+var accordionTrigger = tv10({
+  base: "flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
+  variants: {
+    open: {
+      true: "",
+      false: ""
+    }
+  }
+});
+var accordionContent = tv10({
+  base: "overflow-hidden transition-all duration-200",
+  variants: {
+    open: {
+      true: "max-h-[2000px] opacity-100",
+      false: "max-h-0 opacity-0"
+    }
+  }
+});
+var Accordion = forwardRef19(
+  ({
+    variant = "default",
+    items,
+    type = "single",
+    defaultValue = [],
+    value,
+    onChange,
+    className,
+    ...props
+  }, ref) => {
+    const id = useId();
+    const [internalValue, setInternalValue] = useState4(defaultValue);
+    const openItems = value !== void 0 ? value : internalValue;
+    const handleToggle = (itemValue) => {
+      let next;
+      if (type === "single") {
+        next = openItems.includes(itemValue) ? [] : [itemValue];
+      } else {
+        next = openItems.includes(itemValue) ? openItems.filter((v) => v !== itemValue) : [...openItems, itemValue];
+      }
+      if (value === void 0) {
+        setInternalValue(next);
+      }
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsx19("div", { ref, className: accordion({ variant, className }), ...props, children: items.map((item) => {
+      const isOpen = openItems.includes(item.value);
+      return /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          className: accordionItem({ variant }),
+          children: [
+            /* @__PURE__ */ jsxs12(
+              "button",
+              {
+                type: "button",
+                id: `${id}-trigger-${item.value}`,
+                "aria-expanded": isOpen,
+                "aria-controls": `${id}-content-${item.value}`,
+                disabled: item.disabled,
+                className: accordionTrigger({ open: isOpen }),
+                onClick: () => handleToggle(item.value),
+                children: [
+                  item.trigger,
+                  /* @__PURE__ */ jsx19(
+                    "svg",
+                    {
+                      className: `h-4 w-4 flex-shrink-0 text-gray-500 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              "div",
+              {
+                id: `${id}-content-${item.value}`,
+                role: "region",
+                "aria-labelledby": `${id}-trigger-${item.value}`,
+                className: accordionContent({ open: isOpen }),
+                children: /* @__PURE__ */ jsx19("div", { className: "px-4 pb-3 text-sm text-gray-600", children: item.content })
+              }
+            )
+          ]
+        },
+        item.value
+      );
+    }) });
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/components/Alert/index.tsx
+import { forwardRef as forwardRef20 } from "react";
+import { tv as tv11 } from "tailwind-variants";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var alert = tv11({
+  base: "flex gap-3 rounded-lg border p-4 text-sm",
+  variants: {
+    variant: {
+      info: "bg-blue-50 border-blue-200 text-blue-800",
+      success: "bg-green-50 border-green-200 text-green-800",
+      warning: "bg-yellow-50 border-yellow-200 text-yellow-800",
+      danger: "bg-red-50 border-red-200 text-red-800"
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+});
+var iconMap = {
+  info: "\u2139",
+  success: "\u2713",
+  warning: "\u26A0",
+  danger: "\u2715"
+};
+var iconColorMap = {
+  info: "text-blue-500",
+  success: "text-green-500",
+  warning: "text-yellow-500",
+  danger: "text-red-500"
+};
+var Alert = forwardRef20(
+  ({ variant = "info", title, icon, onClose, className, children, ...props }, ref) => {
+    const resolvedIcon = icon !== void 0 ? icon : /* @__PURE__ */ jsx20("span", { className: `text-base font-bold flex-shrink-0 ${iconColorMap[variant || "info"]}`, children: iconMap[variant || "info"] });
+    return /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: alert({ variant, className }),
+        ...props,
+        children: [
+          resolvedIcon,
+          /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+            title && /* @__PURE__ */ jsx20("p", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ jsx20("div", { children })
+          ] }),
+          onClose && /* @__PURE__ */ jsx20(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity",
+              "aria-label": "Fechar alerta",
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// src/components/Badge/index.tsx
+import { forwardRef as forwardRef21 } from "react";
+import { tv as tv12 } from "tailwind-variants";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var badge = tv12({
+  base: "inline-flex items-center font-medium transition-colors",
+  variants: {
+    variant: {
+      primary: "bg-blue-50 text-blue-700 border border-blue-200",
+      success: "bg-green-50 text-green-700 border border-green-200",
+      danger: "bg-red-50 text-red-700 border border-red-200",
+      warning: "bg-yellow-50 text-yellow-700 border border-yellow-200",
+      neutral: "bg-gray-100 text-gray-700 border border-gray-200"
+    },
+    size: {
+      sm: "px-2 py-0.5 text-xs rounded",
+      md: "px-2.5 py-0.5 text-xs rounded-md",
+      lg: "px-3 py-1 text-sm rounded-md"
+    },
+    dot: {
+      true: "gap-1.5",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    dot: false
+  }
+});
+var dotColors = {
+  primary: "bg-blue-500",
+  success: "bg-green-500",
+  danger: "bg-red-500",
+  warning: "bg-yellow-500",
+  neutral: "bg-gray-500"
+};
+var Badge = forwardRef21(
+  ({ variant = "primary", size, dot, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs14(
+      "span",
+      {
+        ref,
+        className: badge({ variant, size, dot, className }),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsx21(
+            "span",
+            {
+              className: `inline-block h-1.5 w-1.5 rounded-full ${dotColors[variant || "primary"]}`
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Breadcrumb/index.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { tv as tv13 } from "tailwind-variants";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var breadcrumb = tv13({
+  base: "flex items-center text-sm",
+  variants: {
+    variant: {
+      default: "",
+      contained: "bg-gray-50 px-4 py-2 rounded-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var breadcrumbItem = tv13({
+  base: "transition-colors",
+  variants: {
+    active: {
+      true: "text-gray-900 font-medium",
+      false: "text-gray-500 hover:text-gray-700"
+    }
+  }
+});
+var defaultSeparator = /* @__PURE__ */ jsx22(
+  "svg",
+  {
+    className: "h-4 w-4 text-gray-400 flex-shrink-0",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    children: /* @__PURE__ */ jsx22("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+  }
+);
+var Breadcrumb = forwardRef22(
+  ({ variant, items, separator = defaultSeparator, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx22(
+      "nav",
+      {
+        ref,
+        "aria-label": "Breadcrumb",
+        className: breadcrumb({ variant, className }),
+        ...props,
+        children: /* @__PURE__ */ jsx22("ol", { className: "flex items-center gap-2", children: items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return /* @__PURE__ */ jsxs15("li", { className: "flex items-center gap-2", children: [
+            item.href || item.onClick ? /* @__PURE__ */ jsx22(
+              "a",
+              {
+                href: item.href,
+                onClick: item.onClick,
+                className: breadcrumbItem({ active: isLast }),
+                ...isLast && { "aria-current": "page" },
+                children: item.label
+              }
+            ) : /* @__PURE__ */ jsx22(
+              "span",
+              {
+                className: breadcrumbItem({ active: isLast }),
+                ...isLast && { "aria-current": "page" },
+                children: item.label
+              }
+            ),
+            !isLast && separator
+          ] }, index);
+        }) })
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+// src/components/Divider/index.tsx
+import { forwardRef as forwardRef23 } from "react";
+import { tv as tv14 } from "tailwind-variants";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var divider = tv14({
+  base: "",
+  variants: {
+    orientation: {
+      horizontal: "w-full flex items-center",
+      vertical: "h-full inline-flex flex-col items-center"
+    },
+    variant: {
+      solid: "",
+      dashed: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid"
+  }
+});
+var dividerLine = tv14({
+  base: "bg-gray-200 flex-1",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "w-px h-full"
+    },
+    variant: {
+      solid: "",
+      dashed: "bg-transparent border-gray-200 border-dashed"
+    }
+  },
+  compoundVariants: [
+    { orientation: "horizontal", variant: "dashed", className: "border-t h-0" },
+    { orientation: "vertical", variant: "dashed", className: "border-l w-0" }
+  ]
+});
+var Divider = forwardRef23(
+  ({ orientation = "horizontal", variant, label, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation || "horizontal",
+        className: divider({ orientation, variant, className }),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx23("div", { className: dividerLine({ orientation, variant }) }),
+          label && /* @__PURE__ */ jsxs16(Fragment2, { children: [
+            /* @__PURE__ */ jsx23(
+              "span",
+              {
+                className: `flex-shrink-0 text-xs text-gray-500 ${orientation === "horizontal" ? "px-3" : "py-2"}`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx23("div", { className: dividerLine({ orientation, variant }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+// src/components/Skeleton/index.tsx
+import { forwardRef as forwardRef24 } from "react";
+import { tv as tv15 } from "tailwind-variants";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var skeleton = tv15({
+  base: "animate-pulse bg-gray-200",
+  variants: {
+    variant: {
+      text: "rounded-md h-4 w-full",
+      circular: "rounded-full",
+      rectangular: "rounded-md"
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "circular", size: "sm", className: "h-8 w-8" },
+    { variant: "circular", size: "md", className: "h-10 w-10" },
+    { variant: "circular", size: "lg", className: "h-16 w-16" },
+    { variant: "text", size: "sm", className: "h-3" },
+    { variant: "text", size: "md", className: "h-4" },
+    { variant: "text", size: "lg", className: "h-5" }
+  ],
+  defaultVariants: {
+    variant: "text",
+    size: "md"
+  }
+});
+var Skeleton = forwardRef24(
+  ({ variant, size, width, height, lines = 1, className, style, ...props }, ref) => {
+    const customStyle = {
+      ...style,
+      ...width !== void 0 && { width },
+      ...height !== void 0 && { height }
+    };
+    if (lines > 1 && variant !== "circular") {
+      return /* @__PURE__ */ jsx24("div", { ref, className: "flex flex-col gap-2", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: skeleton({ variant, size, className }),
+          style: {
+            ...customStyle,
+            ...i === lines - 1 && { width: "75%" }
+          }
+        },
+        i
+      )) });
+    }
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        ref,
+        className: skeleton({ variant, size, className }),
+        style: customStyle,
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/Spinner/index.tsx
+import { forwardRef as forwardRef25 } from "react";
+import { tv as tv16 } from "tailwind-variants";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var spinner = tv16({
+  base: "inline-block animate-spin rounded-full border-solid border-current border-r-transparent",
+  variants: {
+    size: {
+      sm: "h-4 w-4 border-2",
+      md: "h-6 w-6 border-2",
+      lg: "h-8 w-8 border-[3px]",
+      xl: "h-12 w-12 border-4"
+    },
+    variant: {
+      primary: "text-blue-500",
+      secondary: "text-gray-400",
+      white: "text-white"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+});
+var Spinner = forwardRef25(
+  ({ size, variant, label = "Carregando...", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx25(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: spinner({ size, variant, className }),
+        ...props,
+        children: /* @__PURE__ */ jsx25("span", { className: "sr-only", children: label })
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/components/Tabs/index.tsx
+import { forwardRef as forwardRef26, useState as useState5, useId as useId2 } from "react";
+import { tv as tv17 } from "tailwind-variants";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+var tabs = tv17({
+  base: "",
+  variants: {
+    variant: {
+      line: "",
+      enclosed: "",
+      pill: ""
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+var tabList = tv17({
+  base: "flex",
+  variants: {
+    variant: {
+      line: "border-b border-gray-200 gap-0",
+      enclosed: "border-b border-gray-200 gap-0",
+      pill: "gap-1 bg-gray-100 p-1 rounded-lg"
+    }
+  }
+});
+var tabTrigger = tv17({
+  base: "inline-flex items-center justify-center gap-2 font-medium text-sm transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed",
+  variants: {
+    variant: {
+      line: "px-4 py-2.5 border-b-2 -mb-px text-gray-500 hover:text-gray-900 hover:border-gray-300",
+      enclosed: "px-4 py-2 border border-transparent rounded-t-md -mb-px text-gray-500 hover:text-gray-900",
+      pill: "px-3 py-1.5 rounded-md text-gray-600 hover:text-gray-900"
+    },
+    active: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "line", active: true, className: "text-blue-500 border-b-blue-500" },
+    { variant: "enclosed", active: true, className: "bg-white text-blue-500 border-gray-200 border-b-white" },
+    { variant: "pill", active: true, className: "bg-white text-blue-500 shadow-sm" }
+  ],
+  defaultVariants: {
+    variant: "line",
+    active: false
+  }
+});
+var Tabs = forwardRef26(
+  ({ variant = "line", items, defaultValue, value, onChange, className, ...props }, ref) => {
+    const id = useId2();
+    const [internalValue, setInternalValue] = useState5(
+      defaultValue || items[0]?.value || ""
+    );
+    const activeValue = value !== void 0 ? value : internalValue;
+    const handleChange = (val) => {
+      if (value === void 0) {
+        setInternalValue(val);
+      }
+      onChange?.(val);
+    };
+    const activeItem = items.find((item) => item.value === activeValue);
+    return /* @__PURE__ */ jsxs17("div", { ref, className: tabs({ variant, className }), ...props, children: [
+      /* @__PURE__ */ jsx26("div", { role: "tablist", className: tabList({ variant }), children: items.map((item) => /* @__PURE__ */ jsx26(
+        "button",
+        {
+          role: "tab",
+          type: "button",
+          id: `${id}-tab-${item.value}`,
+          "aria-selected": activeValue === item.value,
+          "aria-controls": `${id}-panel-${item.value}`,
+          disabled: item.disabled,
+          className: tabTrigger({
+            variant,
+            active: activeValue === item.value
+          }),
+          onClick: () => handleChange(item.value),
+          children: item.label
+        },
+        item.value
+      )) }),
+      activeItem && /* @__PURE__ */ jsx26(
+        "div",
+        {
+          role: "tabpanel",
+          id: `${id}-panel-${activeItem.value}`,
+          "aria-labelledby": `${id}-tab-${activeItem.value}`,
+          className: "py-4",
+          children: activeItem.content
+        }
+      )
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
 export {
+  Accordion,
+  Alert,
   Avatar,
+  Badge,
+  Breadcrumb,
   Button,
   Card,
+  Divider,
   InputCNPJ,
   InputCPF,
   InputCep,
@@ -1147,17 +1863,34 @@ export {
   InputString,
   InputWrapper,
   Modal,
+  Skeleton,
+  Spinner,
+  Tabs,
   Textarea,
   Tooltip,
+  accordion,
+  accordionContent,
+  accordionItem,
+  accordionTrigger,
+  alert,
   avatar,
+  badge,
+  breadcrumb,
+  breadcrumbItem,
   button,
   card,
+  divider,
   maskCEP,
   maskCNPJ,
   maskCPF,
   maskCurrency,
   maskPhone,
   modal,
+  skeleton,
+  spinner,
+  tabList,
+  tabTrigger,
+  tabs,
   tooltip,
   unmask,
   unmaskCurrency