@accreditation/ui 1.0.0

package/dist/components/organisms/expandable-cards/expandable-cards.js

@@ -0,0 +1,307 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var react$1 = require('motion/react');
+var boxes_background = require('../../backgrounds/boxes.background');
+var useOutsideClick = require('../../hooks/use-outside-click');
+var button = require('../../atoms/button');
+
+function ExpandableCardDemo() {
+  const [active, setActive] = react.useState(null);
+  const ref = react.useRef(null);
+  const id = react.useId();
+  react.useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        setActive(false);
+      }
+    }
+    if (active && typeof active === "object") {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [active]);
+  useOutsideClick.useOutsideClick(
+    ref,
+    () => setActive(null)
+  );
+  const cards = [
+    {
+      title: "CSI",
+      subtitle: "Informa\xE7\xF5es gerais",
+      value: "0.0",
+      percentage: "0.00%",
+      comparison: "maior que no m\xEAs anterior",
+      trend: "up",
+      metrics: [
+        { label: "Ordens de Servi\xE7o", value: "23" },
+        { label: "Taxa Geral de Aprova\xE7\xE3o", value: "0%" },
+        { label: "Taxa de Recusas", value: "0%" },
+        { label: "Versionamento M\xE9dio", value: "1" },
+        { label: "Quantidade de Feedbacks", value: "23" },
+        { label: "Tempo m\xE9dio para enviar nova vers\xE3o", value: "0 dias" },
+        { label: "Tempo m\xE9dio de resposta da equipe", value: "0 dias" },
+        { label: "Tempo m\xE9dio para finaliza\xE7\xE3o", value: "229 dias" }
+      ]
+    }
+  ];
+  const card = cards[0];
+  if (!card) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.LayoutGroup, { id: `cards-${id}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: active && typeof active === "object" && /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/20 h-full w-full z-10"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: active && typeof active === "object" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 grid place-items-center z-[100] p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      react$1.motion.div,
+      {
+        layoutId: `card-${active.title}-${id}`,
+        ref,
+        className: "w-full max-w-[700px] bg-white dark:bg-neutral-900 rounded-none border border-neutral-200 dark:border-neutral-800 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.motion.h2,
+                {
+                  layoutId: `title-${active.title}-${id}`,
+                  className: "text-lg font-semibold text-neutral-900 dark:text-neutral-100",
+                  children: active.title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.motion.p,
+                {
+                  layoutId: `subtitle-${active.subtitle}-${id}`,
+                  className: "text-sm text-neutral-600 dark:text-neutral-400 mt-1",
+                  children: active.subtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setActive(null),
+                className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.motion.div,
+            {
+              layout: true,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              className: "p-6 max-h-[70vh] overflow-auto",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: active.metrics.map((metric, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-0",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-neutral-700 dark:text-neutral-300", children: metric.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: metric.value })
+                  ]
+                },
+                index
+              )) })
+            }
+          )
+        ]
+      }
+    ) }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 max-w-6xl mx-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      react$1.motion.div,
+      {
+        layout: true,
+        layoutId: `card-${card.title}-${id}`,
+        onClick: () => setActive(card),
+        className: "bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-none p-6 cursor-pointer transition-shadow",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react$1.motion.span,
+                {
+                  layout: true,
+                  layoutId: `title-${card.title}-${id}`,
+                  className: "text-sm text-neutral-600 dark:text-neutral-400",
+                  children: card.title
+                }
+              ),
+              card.trend === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-4 h-4 text-neutral-400" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "w-4 h-4 text-neutral-400" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              card.trend === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-3 h-3 text-neutral-400" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "w-3 h-3 text-neutral-400" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: card.percentage })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-neutral-900 dark:text-neutral-100 mb-4", children: card.value }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react$1.motion.div,
+            {
+              layout: true,
+              layoutId: `subtitle-${card.subtitle}-${id}`,
+              className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: card.comparison }),
+                card.trend === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "w-4 h-4" })
+              ]
+            }
+          )
+        ]
+      },
+      `card-${card.title}-${id}`
+    ) })
+  ] });
+}
+const CloseIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.svg,
+    {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      exit: {
+        opacity: 0,
+        transition: {
+          duration: 0.05
+        }
+      },
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-4 w-4 text-black",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6l-12 12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12" })
+      ]
+    }
+  );
+};
+function ExpandableInfoCard({
+  title,
+  description,
+  value,
+  content,
+  ctaText = "Detalhes",
+  ctaLink,
+  icon,
+  className
+}) {
+  const [open, setOpen] = react.useState(false);
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "auto";
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  useOutsideClick.useOutsideClick(ref, () => setOpen(false));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: [
+          "w-full text-left h-full min-h-[150px]",
+          "relative overflow-hidden",
+          // para suportar o background absoluto
+          "rounded-none border border-gray-200 bg-white shadow-none",
+          "dark:border-gray-800 dark:bg-neutral-900",
+          "p-4 flex flex-col justify-between",
+          "cursor-pointer",
+          className || ""
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0 [mask-image:radial-gradient(circle_at_30%_20%,rgba(0,0,0,0.85),rgba(0,0,0,0.98))]", children: /* @__PURE__ */ jsxRuntime.jsx(boxes_background.Boxes, { className: "opacity-[0.18] dark:opacity-[0.16]" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-500 dark:text-gray-400", children: [
+              icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-gray-500 tabular-nums tracking-tight", children: value ?? "--" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 text-gray-700 dark:text-gray-300 font-medium text-center", children: title })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(
+      react$1.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[100] grid place-items-center",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/20" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react$1.motion.div,
+            {
+              ref,
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.98 },
+              className: "w-full max-w-[720px] h-full md:h-fit md:max-h-[90%] flex flex-col bg-white dark:bg-neutral-900 rounded-none border border-gray-200 dark:border-neutral-800 relative z-[101]",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": title,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-800", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[15px] font-semibold text-neutral-800 dark:text-neutral-100", children: title }),
+                    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-neutral-600 dark:text-neutral-400 mt-0.5", children: description })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      "aria-label": "Fechar",
+                      variant: "outline",
+                      size: "icon",
+                      className: "h-7 w-7 rounded-none",
+                      onClick: () => setOpen(false),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm", children: typeof content === "function" ? content() : content }) }),
+                ctaLink && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4 border-t border-gray-200 dark:border-neutral-800", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, variant: "outline", className: "rounded-none", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: ctaLink, target: "_blank", rel: "noreferrer", children: ctaText }) }) })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+exports.CloseIcon = CloseIcon;
+exports.ExpandableInfoCard = ExpandableInfoCard;
+exports.default = ExpandableCardDemo;

package/dist/components/organisms/expandable-cards/expandable-cards.mjs

@@ -0,0 +1,301 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useId, useEffect } from 'react';
+import { X, TrendingUp, TrendingDown } from 'lucide-react';
+import { LayoutGroup, AnimatePresence, motion } from 'motion/react';
+import { Boxes } from '../../backgrounds/boxes.background';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { Button } from '../../atoms/button';
+
+function ExpandableCardDemo() {
+  const [active, setActive] = useState(null);
+  const ref = useRef(null);
+  const id = useId();
+  useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        setActive(false);
+      }
+    }
+    if (active && typeof active === "object") {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [active]);
+  useOutsideClick(
+    ref,
+    () => setActive(null)
+  );
+  const cards = [
+    {
+      title: "CSI",
+      subtitle: "Informa\xE7\xF5es gerais",
+      value: "0.0",
+      percentage: "0.00%",
+      comparison: "maior que no m\xEAs anterior",
+      trend: "up",
+      metrics: [
+        { label: "Ordens de Servi\xE7o", value: "23" },
+        { label: "Taxa Geral de Aprova\xE7\xE3o", value: "0%" },
+        { label: "Taxa de Recusas", value: "0%" },
+        { label: "Versionamento M\xE9dio", value: "1" },
+        { label: "Quantidade de Feedbacks", value: "23" },
+        { label: "Tempo m\xE9dio para enviar nova vers\xE3o", value: "0 dias" },
+        { label: "Tempo m\xE9dio de resposta da equipe", value: "0 dias" },
+        { label: "Tempo m\xE9dio para finaliza\xE7\xE3o", value: "229 dias" }
+      ]
+    }
+  ];
+  const card = cards[0];
+  if (!card) return null;
+  return /* @__PURE__ */ jsxs(LayoutGroup, { id: `cards-${id}`, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: active && typeof active === "object" && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/20 h-full w-full z-10"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: active && typeof active === "object" ? /* @__PURE__ */ jsx("div", { className: "fixed inset-0 grid place-items-center z-[100] p-4", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layoutId: `card-${active.title}-${id}`,
+        ref,
+        className: "w-full max-w-[700px] bg-white dark:bg-neutral-900 rounded-none border border-neutral-200 dark:border-neutral-800 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-800", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                motion.h2,
+                {
+                  layoutId: `title-${active.title}-${id}`,
+                  className: "text-lg font-semibold text-neutral-900 dark:text-neutral-100",
+                  children: active.title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.p,
+                {
+                  layoutId: `subtitle-${active.subtitle}-${id}`,
+                  className: "text-sm text-neutral-600 dark:text-neutral-400 mt-1",
+                  children: active.subtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setActive(null),
+                className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200 transition-colors",
+                children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: true,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              className: "p-6 max-h-[70vh] overflow-auto",
+              children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: active.metrics.map((metric, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-0",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-700 dark:text-neutral-300", children: metric.label }),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: metric.value })
+                  ]
+                },
+                index
+              )) })
+            }
+          )
+        ]
+      }
+    ) }) : null }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 max-w-6xl mx-auto p-4", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        layout: true,
+        layoutId: `card-${card.title}-${id}`,
+        onClick: () => setActive(card),
+        className: "bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-none p-6 cursor-pointer transition-shadow",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  layout: true,
+                  layoutId: `title-${card.title}-${id}`,
+                  className: "text-sm text-neutral-600 dark:text-neutral-400",
+                  children: card.title
+                }
+              ),
+              card.trend === "up" ? /* @__PURE__ */ jsx(TrendingUp, { className: "w-4 h-4 text-neutral-400" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "w-4 h-4 text-neutral-400" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              card.trend === "up" ? /* @__PURE__ */ jsx(TrendingUp, { className: "w-3 h-3 text-neutral-400" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "w-3 h-3 text-neutral-400" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: card.percentage })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-neutral-900 dark:text-neutral-100 mb-4", children: card.value }),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              layout: true,
+              layoutId: `subtitle-${card.subtitle}-${id}`,
+              className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: card.comparison }),
+                card.trend === "up" ? /* @__PURE__ */ jsx(TrendingUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "w-4 h-4" })
+              ]
+            }
+          )
+        ]
+      },
+      `card-${card.title}-${id}`
+    ) })
+  ] });
+}
+const CloseIcon = () => {
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      exit: {
+        opacity: 0,
+        transition: {
+          duration: 0.05
+        }
+      },
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-4 w-4 text-black",
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 6l-12 12" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
+      ]
+    }
+  );
+};
+function ExpandableInfoCard({
+  title,
+  description,
+  value,
+  content,
+  ctaText = "Detalhes",
+  ctaLink,
+  icon,
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "auto";
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+  useOutsideClick(ref, () => setOpen(false));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: [
+          "w-full text-left h-full min-h-[150px]",
+          "relative overflow-hidden",
+          // para suportar o background absoluto
+          "rounded-none border border-gray-200 bg-white shadow-none",
+          "dark:border-gray-800 dark:bg-neutral-900",
+          "p-4 flex flex-col justify-between",
+          "cursor-pointer",
+          className || ""
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-0 [mask-image:radial-gradient(circle_at_30%_20%,rgba(0,0,0,0.85),rgba(0,0,0,0.98))]", children: /* @__PURE__ */ jsx(Boxes, { className: "opacity-[0.18] dark:opacity-[0.16]" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-500 dark:text-gray-400", children: [
+              icon,
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: description })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-gray-500 tabular-nums tracking-tight", children: value ?? "--" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-6 text-gray-700 dark:text-gray-300 font-medium text-center", children: title })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-[100] grid place-items-center",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/20" }),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              ref,
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.98 },
+              className: "w-full max-w-[720px] h-full md:h-fit md:max-h-[90%] flex flex-col bg-white dark:bg-neutral-900 rounded-none border border-gray-200 dark:border-neutral-800 relative z-[101]",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": title,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-800", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold text-neutral-800 dark:text-neutral-100", children: title }),
+                    description && /* @__PURE__ */ jsx("p", { className: "text-[13px] text-neutral-600 dark:text-neutral-400 mt-0.5", children: description })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "aria-label": "Fechar",
+                      variant: "outline",
+                      size: "icon",
+                      className: "h-7 w-7 rounded-none",
+                      onClick: () => setOpen(false),
+                      children: /* @__PURE__ */ jsx(CloseIcon, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-5 py-4 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm", children: typeof content === "function" ? content() : content }) }),
+                ctaLink && /* @__PURE__ */ jsx("div", { className: "px-5 py-4 border-t border-gray-200 dark:border-neutral-800", children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", className: "rounded-none", children: /* @__PURE__ */ jsx("a", { href: ctaLink, target: "_blank", rel: "noreferrer", children: ctaText }) }) })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { CloseIcon, ExpandableInfoCard, ExpandableCardDemo as default };

package/dist/components/organisms/expandable-cards/expandable-cards.types.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export interface ExpandableCardsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+//# sourceMappingURL=expandable-cards.types.d.ts.map

package/dist/components/organisms/expandable-cards/expandable-cards.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-cards.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/expandable-cards/expandable-cards.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG"}

package/dist/components/organisms/expandable-cards/expandable-cards.types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/organisms/expandable-cards/expandable-cards.types.mjs

@@ -0,0 +1 @@
+

package/dist/components/organisms/expandable-cards/index.d.ts

@@ -0,0 +1,3 @@
+export * from './expandable-cards';
+export * from './expandable-cards.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/expandable-cards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/expandable-cards/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/dist/components/organisms/expandable-cards/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var expandableCards = require('./expandable-cards');
+var expandableCards_types = require('./expandable-cards.types');
+
+
+
+Object.keys(expandableCards).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return expandableCards[k]; }
+	});
+});
+Object.keys(expandableCards_types).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return expandableCards_types[k]; }
+	});
+});

package/dist/components/organisms/expandable-cards/index.mjs

@@ -0,0 +1,2 @@
+export * from './expandable-cards';
+export * from './expandable-cards.types';

package/dist/components/organisms/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './sidebar';
+export * from './sidebar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}