@sigep/react 1.1.3 → 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
@@ -1296,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,
@@ -1314,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