@sigep/react 1.1.2 → 1.1.4

package/dist/index.js

@@ -20,9 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
+  Alert: () => Alert,
   Avatar: () => Avatar,
+  Badge: () => Badge,
+  Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   Card: () => Card,
+  Divider: () => Divider,
   InputCNPJ: () => InputCNPJ,
   InputCPF: () => InputCPF,
   InputCep: () => InputCep,
@@ -36,17 +41,34 @@ __export(index_exports, {
   InputString: () => InputString,
   InputWrapper: () => InputWrapper,
   Modal: () => Modal,
+  Skeleton: () => Skeleton,
+  Spinner: () => Spinner,
+  Tabs: () => Tabs,
   Textarea: () => Textarea,
   Tooltip: () => Tooltip,
+  accordion: () => accordion,
+  accordionContent: () => accordionContent,
+  accordionItem: () => accordionItem,
+  accordionTrigger: () => accordionTrigger,
+  alert: () => alert,
   avatar: () => avatar,
+  badge: () => badge,
+  breadcrumb: () => breadcrumb,
+  breadcrumbItem: () => breadcrumbItem,
   button: () => button,
   card: () => card,
+  divider: () => divider,
   maskCEP: () => maskCEP,
   maskCNPJ: () => maskCNPJ,
   maskCPF: () => maskCPF,
   maskCurrency: () => maskCurrency,
   maskPhone: () => maskPhone,
   modal: () => modal,
+  skeleton: () => skeleton,
+  spinner: () => spinner,
+  tabList: () => tabList,
+  tabTrigger: () => tabTrigger,
+  tabs: () => tabs,
   tooltip: () => tooltip,
   unmask: () => unmask,
   unmaskCurrency: () => unmaskCurrency
@@ -67,9 +89,9 @@ var avatar = (0, import_tailwind_variants.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: {
@@ -84,14 +106,22 @@ function getInitials(name) {
 }
 var Avatar = (0, import_react.forwardRef)(
   ({ name, src, alt, size, variant, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: avatar({ size, variant, className }), ...props, children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "img",
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
       {
-        src,
-        alt: alt || name || "avatar",
-        className: "h-full w-full object-cover"
+        ref,
+        className: avatar({ size, variant, className }),
+        ...props,
+        children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src,
+            alt: alt || name || "avatar",
+            className: "h-full w-full object-cover"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name ? getInitials(name) : "?" })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: name ? getInitials(name) : "?" }) });
+    );
   }
 );
 Avatar.displayName = "Avatar";
@@ -104,10 +134,10 @@ var button = (0, import_tailwind_variants2.tv)({
   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",
@@ -224,7 +254,7 @@ var Modal = (0, import_react4.forwardRef)(
               "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"
@@ -444,7 +474,7 @@ var wrapper = (0, import_tailwind_variants6.tv)({
   base: "flex w-full flex-col gap-1"
 });
 var labelStyle = (0, import_tailwind_variants6.tv)({
-  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 = (0, import_tailwind_variants6.tv)({
   base: "flex items-center w-full rounded-md border bg-white transition-colors",
@@ -471,13 +501,35 @@ var errorStyle = (0, import_tailwind_variants6.tv)({
   base: "text-xs text-red-500 mt-0.5"
 });
 var InputWrapper = (0, import_react6.forwardRef)(
-  ({ label, error, errorMessage, required, disabled, size, children, className, classContainer, htmlFor }, ref) => {
+  ({
+    label,
+    error,
+    errorMessage,
+    required,
+    disabled,
+    size,
+    children,
+    className,
+    classContainer,
+    htmlFor
+  }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: wrapper({ className }), children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { htmlFor, className: labelStyle(), children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label }),
         required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: containerStyle({ size, error: !!error, disabled: !!disabled, className: classContainer }), children }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          className: containerStyle({
+            size,
+            error: !!error,
+            disabled: !!disabled,
+            className: classContainer
+          }),
+          children
+        }
+      ),
       error && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: errorStyle(), children: errorMessage })
     ] });
   }
@@ -1012,7 +1064,7 @@ var checkboxContainer = (0, import_tailwind_variants7.tv)({
   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: {
@@ -1026,10 +1078,34 @@ var checkboxContainer = (0, import_tailwind_variants7.tv)({
     checked: false
   }
 });
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  "svg",
+  {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "white",
+    strokeWidth: "4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
 var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-2 h-2 rounded-sm bg-gray-300" });
 var InputCheckbox = (0, import_react16.forwardRef)(
-  ({ 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);
@@ -1043,7 +1119,11 @@ var InputCheckbox = (0, import_react16.forwardRef)(
         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: [
@@ -1054,9 +1134,23 @@ var InputCheckbox = (0, import_react16.forwardRef)(
     );
     if (!label) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className, children: box });
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
-      labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm text-gray-600 cursor-pointer select-none",
+          children: label
+        }
+      ),
       box,
-      labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm text-gray-600 cursor-pointer select-none",
+          children: label
+        }
+      ),
       required && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-red-500 text-[10px]", children: "*" })
     ] });
   }
@@ -1071,7 +1165,7 @@ var radioButton = (0, import_tailwind_variants8.tv)({
   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: {
@@ -1086,48 +1180,70 @@ var radioButton = (0, import_tailwind_variants8.tv)({
   }
 });
 var InputRadio = (0, import_react17.forwardRef)(
-  ({ label, options, value, onChange, disabled, error, required, name, className, direction = "horizontal" }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, className: `flex w-full flex-col gap-1 ${className ?? ""}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label }),
-        required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "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__ */ (0, import_jsx_runtime17.jsxs)(
-              "label",
-              {
-                className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    "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__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-600" })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm text-gray-700", children: option.label })
-                ]
-              },
-              String(option.value)
-            );
-          })
-        }
-      ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        ref,
+        className: `flex w-full flex-col gap-1 ${className ?? ""}`,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-xs text-gray-600 flex items-start gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label }),
+            required && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "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__ */ (0, import_jsx_runtime17.jsxs)(
+                  "label",
+                  {
+                    className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        "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__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-500" })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm text-gray-600", children: option.label })
+                    ]
+                  },
+                  String(option.value)
+                );
+              })
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xs text-red-500 mt-0.5", children: "Selecione uma op\xE7\xE3o" })
+        ]
+      }
+    );
   }
 );
 InputRadio.displayName = "InputRadio";
@@ -1152,12 +1268,32 @@ var textareaStyle = (0, import_tailwind_variants9.tv)({
   }
 });
 var Textarea = (0, import_react18.forwardRef)(
-  ({ 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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { htmlFor: name, className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label }),
-        required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
-      ] }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-xs text-gray-600 flex items-start gap-0.5",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label }),
+            required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+          ]
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "textarea",
         {
@@ -1169,7 +1305,11 @@ var Textarea = (0, import_react18.forwardRef)(
           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
         }
       ),
@@ -1178,11 +1318,605 @@ var Textarea = (0, import_react18.forwardRef)(
   }
 );
 Textarea.displayName = "Textarea";
+
+// src/components/Accordion/index.tsx
+var import_react19 = require("react");
+var import_tailwind_variants10 = require("tailwind-variants");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var accordion = (0, import_tailwind_variants10.tv)({
+  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 = (0, import_tailwind_variants10.tv)({
+  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 = (0, import_tailwind_variants10.tv)({
+  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 = (0, import_tailwind_variants10.tv)({
+  base: "overflow-hidden transition-all duration-200",
+  variants: {
+    open: {
+      true: "max-h-[2000px] opacity-100",
+      false: "max-h-0 opacity-0"
+    }
+  }
+});
+var Accordion = (0, import_react19.forwardRef)(
+  ({
+    variant = "default",
+    items,
+    type = "single",
+    defaultValue = [],
+    value,
+    onChange,
+    className,
+    ...props
+  }, ref) => {
+    const id = (0, import_react19.useId)();
+    const [internalValue, setInternalValue] = (0, import_react19.useState)(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__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: accordion({ variant, className }), ...props, children: items.map((item) => {
+      const isOpen = openItems.includes(item.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "div",
+        {
+          className: accordionItem({ variant }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+              "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__ */ (0, import_jsx_runtime19.jsx)(
+                    "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__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "div",
+              {
+                id: `${id}-content-${item.value}`,
+                role: "region",
+                "aria-labelledby": `${id}-trigger-${item.value}`,
+                className: accordionContent({ open: isOpen }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-4 pb-3 text-sm text-gray-600", children: item.content })
+              }
+            )
+          ]
+        },
+        item.value
+      );
+    }) });
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/components/Alert/index.tsx
+var import_react20 = require("react");
+var import_tailwind_variants11 = require("tailwind-variants");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var alert = (0, import_tailwind_variants11.tv)({
+  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 = (0, import_react20.forwardRef)(
+  ({ variant = "info", title, icon, onClose, className, children, ...props }, ref) => {
+    const resolvedIcon = icon !== void 0 ? icon : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `text-base font-bold flex-shrink-0 ${iconColorMap[variant || "info"]}`, children: iconMap[variant || "info"] });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: alert({ variant, className }),
+        ...props,
+        children: [
+          resolvedIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-semibold mb-1", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children })
+          ] }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "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
+var import_react21 = require("react");
+var import_tailwind_variants12 = require("tailwind-variants");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var badge = (0, import_tailwind_variants12.tv)({
+  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 = (0, import_react21.forwardRef)(
+  ({ variant = "primary", size, dot, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "span",
+      {
+        ref,
+        className: badge({ variant, size, dot, className }),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "span",
+            {
+              className: `inline-block h-1.5 w-1.5 rounded-full ${dotColors[variant || "primary"]}`
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Breadcrumb/index.tsx
+var import_react22 = require("react");
+var import_tailwind_variants13 = require("tailwind-variants");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var breadcrumb = (0, import_tailwind_variants13.tv)({
+  base: "flex items-center text-sm",
+  variants: {
+    variant: {
+      default: "",
+      contained: "bg-gray-50 px-4 py-2 rounded-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var breadcrumbItem = (0, import_tailwind_variants13.tv)({
+  base: "transition-colors",
+  variants: {
+    active: {
+      true: "text-gray-900 font-medium",
+      false: "text-gray-500 hover:text-gray-700"
+    }
+  }
+});
+var defaultSeparator = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  "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__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+  }
+);
+var Breadcrumb = (0, import_react22.forwardRef)(
+  ({ variant, items, separator = defaultSeparator, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "nav",
+      {
+        ref,
+        "aria-label": "Breadcrumb",
+        className: breadcrumb({ variant, className }),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ol", { className: "flex items-center gap-2", children: items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: "flex items-center gap-2", children: [
+            item.href || item.onClick ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "a",
+              {
+                href: item.href,
+                onClick: item.onClick,
+                className: breadcrumbItem({ active: isLast }),
+                ...isLast && { "aria-current": "page" },
+                children: item.label
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "span",
+              {
+                className: breadcrumbItem({ active: isLast }),
+                ...isLast && { "aria-current": "page" },
+                children: item.label
+              }
+            ),
+            !isLast && separator
+          ] }, index);
+        }) })
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+// src/components/Divider/index.tsx
+var import_react23 = require("react");
+var import_tailwind_variants14 = require("tailwind-variants");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var divider = (0, import_tailwind_variants14.tv)({
+  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 = (0, import_tailwind_variants14.tv)({
+  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 = (0, import_react23.forwardRef)(
+  ({ orientation = "horizontal", variant, label, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation || "horizontal",
+        className: divider({ orientation, variant, className }),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: dividerLine({ orientation, variant }) }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "span",
+              {
+                className: `flex-shrink-0 text-xs text-gray-500 ${orientation === "horizontal" ? "px-3" : "py-2"}`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: dividerLine({ orientation, variant }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+// src/components/Skeleton/index.tsx
+var import_react24 = require("react");
+var import_tailwind_variants15 = require("tailwind-variants");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var skeleton = (0, import_tailwind_variants15.tv)({
+  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 = (0, import_react24.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: "flex flex-col gap-2", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          className: skeleton({ variant, size, className }),
+          style: {
+            ...customStyle,
+            ...i === lines - 1 && { width: "75%" }
+          }
+        },
+        i
+      )) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        ref,
+        className: skeleton({ variant, size, className }),
+        style: customStyle,
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/Spinner/index.tsx
+var import_react25 = require("react");
+var import_tailwind_variants16 = require("tailwind-variants");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var spinner = (0, import_tailwind_variants16.tv)({
+  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 = (0, import_react25.forwardRef)(
+  ({ size, variant, label = "Carregando...", className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: spinner({ size, variant, className }),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: label })
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/components/Tabs/index.tsx
+var import_react26 = require("react");
+var import_tailwind_variants17 = require("tailwind-variants");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var tabs = (0, import_tailwind_variants17.tv)({
+  base: "",
+  variants: {
+    variant: {
+      line: "",
+      enclosed: "",
+      pill: ""
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+var tabList = (0, import_tailwind_variants17.tv)({
+  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 = (0, import_tailwind_variants17.tv)({
+  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 = (0, import_react26.forwardRef)(
+  ({ variant = "line", items, defaultValue, value, onChange, className, ...props }, ref) => {
+    const id = (0, import_react26.useId)();
+    const [internalValue, setInternalValue] = (0, import_react26.useState)(
+      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__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className: tabs({ variant, className }), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { role: "tablist", className: tabList({ variant }), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "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__ */ (0, import_jsx_runtime26.jsx)(
+        "div",
+        {
+          role: "tabpanel",
+          id: `${id}-panel-${activeItem.value}`,
+          "aria-labelledby": `${id}-tab-${activeItem.value}`,
+          className: "py-4",
+          children: activeItem.content
+        }
+      )
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
+  Alert,
   Avatar,
+  Badge,
+  Breadcrumb,
   Button,
   Card,
+  Divider,
   InputCNPJ,
   InputCPF,
   InputCep,
@@ -1196,17 +1930,34 @@ Textarea.displayName = "Textarea";
   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