@sigep/react 1.1.3 → 1.1.4

package/dist/index.mjs

@@ -1252,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,
@@ -1269,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigep/react",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",