@iclips/ui 1.4.13 → 2.0.1

package/dist/components/ui/charts/donut-chart.js

@@ -0,0 +1,285 @@
+"use client";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as N from "react";
+import { ResponsiveContainer as z, PieChart as A, Pie as k, Label as D, Sector as L, Tooltip as M } from "recharts";
+import { cn as b } from "../utils.js";
+const y = [
+  "#3b82f6",
+  // blue-500
+  "#10b981",
+  // emerald-500
+  "#f59e0b",
+  // amber-500
+  "#ef4444",
+  // red-500
+  "#8b5cf6",
+  // violet-500
+  "#06b6d4",
+  // cyan-500
+  "#f97316",
+  // orange-500
+  "#14b8a6",
+  // teal-500
+  "#ec4899",
+  // pink-500
+  "#6366f1"
+  // indigo-500
+];
+function C(n) {
+  return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(n);
+}
+function R({ layout: n, chartSize: t }) {
+  const s = [1, 2, 3].map((i) => /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e("div", { className: "w-2.5 h-2.5 rounded-full bg-muted shrink-0" }),
+    /* @__PURE__ */ e("div", { className: "h-3 bg-muted rounded flex-1" })
+  ] }, i));
+  return n === "horizontal" ? /* @__PURE__ */ l("div", { className: "flex items-center gap-6 w-full animate-pulse", children: [
+    /* @__PURE__ */ e("div", { className: "rounded-full bg-muted shrink-0", style: { width: t, height: t } }),
+    /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 flex-1", children: s })
+  ] }) : /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center w-full animate-pulse gap-4", children: [
+    /* @__PURE__ */ e("div", { className: "rounded-full bg-muted", style: { width: 140, height: 140 } }),
+    /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 w-full max-w-50", children: s })
+  ] });
+}
+function j() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col items-center justify-center w-full h-full text-muted-foreground gap-2", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "rounded-full border-4 border-dashed border-muted",
+        style: { width: 100, height: 100 }
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "text-sm", children: "Sem dados para exibir" })
+  ] });
+}
+function F({
+  active: n,
+  payload: t,
+  formatValue: s,
+  total: i
+}) {
+  if (!n || !(t != null && t.length)) return null;
+  const o = t[0], r = i > 0 ? (o.value / i * 100).toFixed(1) : "0.0";
+  return /* @__PURE__ */ l("div", { className: "bg-popover border border-border rounded shadow-lg p-2 text-xs min-w-35", children: [
+    /* @__PURE__ */ e("div", { className: "font-medium mb-1", children: o.name }),
+    /* @__PURE__ */ l("div", { className: "flex justify-between gap-4", children: [
+      /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Valor" }),
+      /* @__PURE__ */ e("span", { className: "font-mono", children: s(o.value) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex justify-between gap-4", children: [
+      /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "%" }),
+      /* @__PURE__ */ l("span", { className: "font-mono", children: [
+        r,
+        "%"
+      ] })
+    ] })
+  ] });
+}
+function T({ viewBox: n, activeIndex: t, chartData: s, formatValue: i, total: o }) {
+  const r = (n == null ? void 0 : n.cx) ?? 0, c = (n == null ? void 0 : n.cy) ?? 0, d = t !== null && t >= 0 ? s[t] : null;
+  if (d) {
+    const a = o > 0 ? (d.value / o * 100).toFixed(1) : "0.0", f = 13, g = d.name.length > f ? d.name.substring(0, f - 1) + "…" : d.name;
+    return /* @__PURE__ */ l("g", { children: [
+      /* @__PURE__ */ e(
+        "text",
+        {
+          x: r,
+          y: c - 14,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          style: { fontSize: 10, fill: "var(--muted-foreground)" },
+          children: g
+        }
+      ),
+      /* @__PURE__ */ e(
+        "text",
+        {
+          x: r,
+          y: c + 2,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          style: { fontSize: 11, fontWeight: 700, fill: d.color },
+          children: i(d.value)
+        }
+      ),
+      /* @__PURE__ */ l(
+        "text",
+        {
+          x: r,
+          y: c + 18,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          style: { fontSize: 11, fill: "var(--muted-foreground)" },
+          children: [
+            a,
+            "%"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ l("g", { children: [
+    /* @__PURE__ */ e(
+      "text",
+      {
+        x: r,
+        y: c - 8,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        style: { fontSize: 10, fill: "var(--muted-foreground)" },
+        children: "Total"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "text",
+      {
+        x: r,
+        y: c + 8,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        style: { fontSize: 13, fontWeight: 700, fill: "currentColor" },
+        children: i(o)
+      }
+    )
+  ] });
+}
+function E({
+  chartData: n,
+  total: t,
+  formatValue: s,
+  activeIndex: i,
+  onHover: o
+}) {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-1.5", children: [
+    n.map((r, c) => {
+      const d = t > 0 ? (r.value / t * 100).toFixed(1) : "0.0", a = i === c;
+      return /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex items-center gap-2 text-xs cursor-default rounded px-1 py-0.5 transition-opacity",
+          style: { opacity: i !== null && !a ? 0.4 : 1 },
+          onMouseEnter: () => o(c),
+          onMouseLeave: () => o(null),
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: "inline-block w-2.5 h-2.5 rounded-full shrink-0 transition-transform",
+                style: {
+                  background: r.color,
+                  transform: a ? "scale(1.3)" : "scale(1)"
+                }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "flex-1 truncate text-muted-foreground", children: r.name }),
+            /* @__PURE__ */ e("span", { className: "font-mono text-foreground", children: s(r.value) }),
+            /* @__PURE__ */ l("span", { className: "text-muted-foreground w-10.5 text-right", children: [
+              d,
+              "%"
+            ] })
+          ]
+        },
+        c
+      );
+    }),
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-2 text-xs border-t border-border pt-1.5 mt-0.5", children: [
+      /* @__PURE__ */ e("span", { className: "flex-1 font-medium", children: "Total" }),
+      /* @__PURE__ */ e("span", { className: "font-mono font-semibold", children: s(t) })
+    ] })
+  ] });
+}
+function W({
+  data: n,
+  title: t,
+  formatValue: s = C,
+  className: i,
+  isLoading: o = !1,
+  layout: r = "vertical",
+  activeLabel: c = !1,
+  chartSize: d
+}) {
+  const [a, f] = N.useState(null), g = N.useMemo(() => n.reduce((m, u) => m + u.value, 0), [n]), p = N.useMemo(
+    () => n.map((m, u) => ({
+      name: m.label,
+      value: m.value,
+      color: m.color ?? y[u % y.length]
+    })),
+    [n]
+  ), h = r === "horizontal", x = d ?? (h ? 140 : 220), w = h ? Math.round(x * 0.34) : 55, S = h ? Math.round(x * 0.51) : 85;
+  return /* @__PURE__ */ l("div", { className: b("flex flex-col gap-4 w-full", i), children: [
+    t && /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-foreground", children: t }),
+    o ? /* @__PURE__ */ e(R, { layout: r, chartSize: x }) : n.length === 0 ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ l("div", { className: b(h ? "flex items-center gap-4" : "flex flex-col gap-4"), children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "shrink-0",
+          style: h ? { width: x, height: x } : { width: "100%", height: x },
+          children: /* @__PURE__ */ e(z, { width: "100%", height: "100%", children: /* @__PURE__ */ l(A, { children: [
+            /* @__PURE__ */ e(
+              k,
+              {
+                data: p,
+                cx: "50%",
+                cy: "50%",
+                innerRadius: w,
+                outerRadius: S,
+                paddingAngle: 2,
+                dataKey: "value",
+                nameKey: "name",
+                onMouseEnter: (m, u) => f(u),
+                onMouseLeave: () => f(null),
+                shape: (m, u) => {
+                  var v;
+                  return /* @__PURE__ */ e(
+                    L,
+                    {
+                      ...m,
+                      fill: (v = p[u]) == null ? void 0 : v.color,
+                      stroke: "transparent",
+                      opacity: a !== null && a !== u ? 0.4 : 1
+                    }
+                  );
+                },
+                children: c && /* @__PURE__ */ e(
+                  D,
+                  {
+                    content: /* @__PURE__ */ e(
+                      T,
+                      {
+                        activeIndex: a,
+                        chartData: p,
+                        formatValue: s,
+                        total: g
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            !c && /* @__PURE__ */ e(
+              M,
+              {
+                content: /* @__PURE__ */ e(F, { formatValue: s, total: g })
+              }
+            )
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: b(h ? "flex-1 min-w-0" : ""), children: /* @__PURE__ */ e(
+        E,
+        {
+          chartData: p,
+          total: g,
+          formatValue: s,
+          activeIndex: a,
+          onHover: f
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  W as DonutChart
+};
+//# sourceMappingURL=donut-chart.js.map

package/dist/components/ui/charts/donut-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.js","sources":["../../../../src/components/ui/charts/donut-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Label, Pie, PieChart, ResponsiveContainer, Sector, Tooltip } from \"recharts\";\nimport { cn } from \"../utils\";\n\n// ── Paleta padrão ─────────────────────────────────────────────────────────────\nconst DEFAULT_COLORS = [\n  \"#3b82f6\", // blue-500\n  \"#10b981\", // emerald-500\n  \"#f59e0b\", // amber-500\n  \"#ef4444\", // red-500\n  \"#8b5cf6\", // violet-500\n  \"#06b6d4\", // cyan-500\n  \"#f97316\", // orange-500\n  \"#14b8a6\", // teal-500\n  \"#ec4899\", // pink-500\n  \"#6366f1\", // indigo-500\n];\n\n// ── Tipos ─────────────────────────────────────────────────────────────────────\n\nexport interface DonutChartItem {\n  label: string;\n  value: number;\n  color?: string;\n}\n\nexport interface DonutChartProps {\n  data: DonutChartItem[];\n  title?: string;\n  formatValue?: (v: number) => string;\n  className?: string;\n  isLoading?: boolean;\n  /**\n   * Orientação da legenda em relação ao gráfico.\n   * - \"vertical\": legenda abaixo do donut (padrão)\n   * - \"horizontal\": legenda ao lado direito do donut\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Quando true, exibe o nome, valor e % da categoria no centro do\n   * donut ao passar o mouse — desabilita o tooltip flutuante padrão.\n   */\n  activeLabel?: boolean;\n  /**\n   * Tamanho (px) do container do gráfico no eixo fixo.\n   * - horizontal: largura e altura do donut (padrão: 140)\n   * - vertical: altura do donut (padrão: 220)\n   */\n  chartSize?: number;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nfunction defaultFormat(v: number): string {\n  return new Intl.NumberFormat(\"pt-BR\", { style: \"currency\", currency: \"BRL\" }).format(v);\n}\n\n// ── Skeleton ──────────────────────────────────────────────────────────────────\n\nfunction DonutSkeleton({ layout, chartSize }: { layout: \"vertical\" | \"horizontal\"; chartSize: number }) {\n  const legendItems = [1, 2, 3].map((i) => (\n    <div key={i} className=\"flex items-center gap-2\">\n      <div className=\"w-2.5 h-2.5 rounded-full bg-muted shrink-0\" />\n      <div className=\"h-3 bg-muted rounded flex-1\" />\n    </div>\n  ));\n\n  if (layout === \"horizontal\") {\n    return (\n      <div className=\"flex items-center gap-6 w-full animate-pulse\">\n        <div className=\"rounded-full bg-muted shrink-0\" style={{ width: chartSize, height: chartSize }} />\n        <div className=\"flex flex-col gap-2 flex-1\">{legendItems}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col items-center justify-center w-full animate-pulse gap-4\">\n      <div className=\"rounded-full bg-muted\" style={{ width: 140, height: 140 }} />\n      <div className=\"flex flex-col gap-2 w-full max-w-50\">{legendItems}</div>\n    </div>\n  );\n}\n\n// ── Empty state ───────────────────────────────────────────────────────────────\n\nfunction DonutEmpty() {\n  return (\n    <div className=\"flex flex-col items-center justify-center w-full h-full text-muted-foreground gap-2\">\n      <div\n        className=\"rounded-full border-4 border-dashed border-muted\"\n        style={{ width: 100, height: 100 }}\n      />\n      <span className=\"text-sm\">Sem dados para exibir</span>\n    </div>\n  );\n}\n\n// ── Tooltip flutuante (usado quando activeLabel=false) ────────────────────────\n\nfunction CustomTooltip({\n  active,\n  payload,\n  formatValue,\n  total,\n}: {\n  active?: boolean;\n  payload?: any[];\n  formatValue: (v: number) => string;\n  total: number;\n}) {\n  if (!active || !payload?.length) return null;\n  const item = payload[0];\n  const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : \"0.0\";\n  return (\n    <div className=\"bg-popover border border-border rounded shadow-lg p-2 text-xs min-w-35\">\n      <div className=\"font-medium mb-1\">{item.name}</div>\n      <div className=\"flex justify-between gap-4\">\n        <span className=\"text-muted-foreground\">Valor</span>\n        <span className=\"font-mono\">{formatValue(item.value)}</span>\n      </div>\n      <div className=\"flex justify-between gap-4\">\n        <span className=\"text-muted-foreground\">%</span>\n        <span className=\"font-mono\">{pct}%</span>\n      </div>\n    </div>\n  );\n}\n\n// ── Label central (usado quando activeLabel=true) ─────────────────────────────\n\ninterface CenterLabelProps {\n  viewBox?: { cx: number; cy: number; innerRadius?: number; outerRadius?: number };\n  activeIndex: number | null;\n  chartData: Array<{ name: string; value: number; color: string }>;\n  formatValue: (v: number) => string;\n  total: number;\n}\n\nfunction CenterLabel({ viewBox, activeIndex, chartData, formatValue, total }: CenterLabelProps) {\n  const cx = viewBox?.cx ?? 0;\n  const cy = viewBox?.cy ?? 0;\n\n  const item = activeIndex !== null && activeIndex >= 0 ? chartData[activeIndex] : null;\n\n  if (item) {\n    const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : \"0.0\";\n    const maxLen = 13;\n    const name = item.name.length > maxLen ? item.name.substring(0, maxLen - 1) + \"…\" : item.name;\n    return (\n      <g>\n        <text\n          x={cx}\n          y={cy - 14}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          style={{ fontSize: 10, fill: \"var(--muted-foreground)\" }}\n        >\n          {name}\n        </text>\n        <text\n          x={cx}\n          y={cy + 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          style={{ fontSize: 11, fontWeight: 700, fill: item.color }}\n        >\n          {formatValue(item.value)}\n        </text>\n        <text\n          x={cx}\n          y={cy + 18}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          style={{ fontSize: 11, fill: \"var(--muted-foreground)\" }}\n        >\n          {pct}%\n        </text>\n      </g>\n    );\n  }\n\n  return (\n    <g>\n      <text\n        x={cx}\n        y={cy - 8}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        style={{ fontSize: 10, fill: \"var(--muted-foreground)\" }}\n      >\n        Total\n      </text>\n      <text\n        x={cx}\n        y={cy + 8}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        style={{ fontSize: 13, fontWeight: 700, fill: \"currentColor\" }}\n      >\n        {formatValue(total)}\n      </text>\n    </g>\n  );\n}\n\n// ── Legenda ───────────────────────────────────────────────────────────────────\n\nfunction DonutLegend({\n  chartData,\n  total,\n  formatValue,\n  activeIndex,\n  onHover,\n}: {\n  chartData: Array<{ name: string; value: number; color: string }>;\n  total: number;\n  formatValue: (v: number) => string;\n  activeIndex: number | null;\n  onHover: (index: number | null) => void;\n}) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {chartData.map((item, i) => {\n        const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : \"0.0\";\n        const isActive = activeIndex === i;\n        const isDimmed = activeIndex !== null && !isActive;\n        return (\n          <div\n            key={i}\n            className=\"flex items-center gap-2 text-xs cursor-default rounded px-1 py-0.5 transition-opacity\"\n            style={{ opacity: isDimmed ? 0.4 : 1 }}\n            onMouseEnter={() => onHover(i)}\n            onMouseLeave={() => onHover(null)}\n          >\n            <span\n              className=\"inline-block w-2.5 h-2.5 rounded-full shrink-0 transition-transform\"\n              style={{\n                background: item.color,\n                transform: isActive ? \"scale(1.3)\" : \"scale(1)\",\n              }}\n            />\n            <span className=\"flex-1 truncate text-muted-foreground\">{item.name}</span>\n            <span className=\"font-mono text-foreground\">{formatValue(item.value)}</span>\n            <span className=\"text-muted-foreground w-10.5 text-right\">{pct}%</span>\n          </div>\n        );\n      })}\n      <div className=\"flex items-center gap-2 text-xs border-t border-border pt-1.5 mt-0.5\">\n        <span className=\"flex-1 font-medium\">Total</span>\n        <span className=\"font-mono font-semibold\">{formatValue(total)}</span>\n      </div>\n    </div>\n  );\n}\n\n// ── Componente principal ──────────────────────────────────────────────────────\n\nexport function DonutChart({\n  data,\n  title,\n  formatValue = defaultFormat,\n  className,\n  isLoading = false,\n  layout = \"vertical\",\n  activeLabel = false,\n  chartSize: chartSizeProp,\n}: DonutChartProps) {\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n\n  const total = React.useMemo(() => data.reduce((acc, d) => acc + d.value, 0), [data]);\n\n  const chartData = React.useMemo(\n    () =>\n      data.map((item, i) => ({\n        name: item.label,\n        value: item.value,\n        color: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],\n      })),\n    [data],\n  );\n\n  const isHorizontal = layout === \"horizontal\";\n  const chartSize = chartSizeProp ?? (isHorizontal ? 140 : 220);\n  const innerRadius = isHorizontal ? Math.round(chartSize * 0.34) : 55;\n  const outerRadius = isHorizontal ? Math.round(chartSize * 0.51) : 85;\n\n  return (\n    <div className={cn(\"flex flex-col gap-4 w-full\", className)}>\n      {title && <div className=\"text-sm font-semibold text-foreground\">{title}</div>}\n\n      {isLoading ? (\n        <DonutSkeleton layout={layout} chartSize={chartSize} />\n      ) : data.length === 0 ? (\n        <DonutEmpty />\n      ) : (\n        <div className={cn(isHorizontal ? \"flex items-center gap-4\" : \"flex flex-col gap-4\")}>\n          {/* Gráfico */}\n          <div\n            className=\"shrink-0\"\n            style={\n              isHorizontal\n                ? { width: chartSize, height: chartSize }\n                : { width: \"100%\", height: chartSize }\n            }\n          >\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <PieChart>\n                <Pie\n                  data={chartData}\n                  cx=\"50%\"\n                  cy=\"50%\"\n                  innerRadius={innerRadius}\n                  outerRadius={outerRadius}\n                  paddingAngle={2}\n                  dataKey=\"value\"\n                  nameKey=\"name\"\n                  onMouseEnter={(_, index) => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(null)}\n                  shape={(props, index) => (\n                    <Sector\n                      {...props}\n                      fill={chartData[index]?.color}\n                      stroke=\"transparent\"\n                      opacity={activeIndex !== null && activeIndex !== index ? 0.4 : 1}\n                    />\n                  )}\n                >\n                  {activeLabel && (\n                    <Label\n                      content={\n                        <CenterLabel\n                          activeIndex={activeIndex}\n                          chartData={chartData}\n                          formatValue={formatValue}\n                          total={total}\n                        />\n                      }\n                    />\n                  )}\n                </Pie>\n                {!activeLabel && (\n                  <Tooltip\n                    content={<CustomTooltip formatValue={formatValue} total={total} />}\n                  />\n                )}\n              </PieChart>\n            </ResponsiveContainer>\n          </div>\n\n          {/* Legenda */}\n          <div className={cn(isHorizontal ? \"flex-1 min-w-0\" : \"\")}>\n            <DonutLegend\n              chartData={chartData}\n              total={total}\n              formatValue={formatValue}\n              activeIndex={activeIndex}\n              onHover={setActiveIndex}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_COLORS","defaultFormat","v","DonutSkeleton","layout","chartSize","legendItems","jsxs","jsx","DonutEmpty","CustomTooltip","active","payload","formatValue","total","item","pct","CenterLabel","viewBox","activeIndex","chartData","cx","cy","maxLen","name","DonutLegend","onHover","i","isActive","DonutChart","data","title","className","isLoading","activeLabel","chartSizeProp","setActiveIndex","React","acc","d","isHorizontal","innerRadius","outerRadius","cn","ResponsiveContainer","PieChart","Pie","_","index","props","Sector","_a","Label","Tooltip"],"mappings":"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"}

package/dist/components/ui/charts/kpi-card.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),c=require("../layout/card.cjs"),N=require("../primitives/badge.cjs"),l=require("../primitives/skeleton.cjs"),i=require("lucide-react"),m=require("../utils.cjs");function g(s){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>s[t]})}}return r.default=s,Object.freeze(r)}const b=g(p),u=b.forwardRef(({title:s,primaryContent:r,secondaryContent:t,trendValue:a,trendLabel:x,icon:j=i.Activity,isLoading:n=!1,onClick:o,className:h},f)=>{const d=!n&&!!o;return e.jsxs(c.Card,{ref:f,onClick:d?o:void 0,className:m.cn(d&&"cursor-pointer hover:bg-accent/50 transition-colors",h),children:[e.jsx(c.CardHeader,{className:"pb-1",children:e.jsx(c.CardTitle,{className:"flex items-center gap-2 text-sm text-muted-foreground",children:n?e.jsxs(e.Fragment,{children:[e.jsx(l.Skeleton,{className:"size-4 shrink-0 rounded"}),e.jsx(l.Skeleton,{className:"h-4 w-24"})]}):e.jsxs(e.Fragment,{children:[e.jsx(j,{className:"size-4 shrink-0 text-muted-foreground"}),e.jsx("span",{className:"truncate",children:s})]})})}),e.jsxs(c.CardContent,{className:"space-y-1 pt-0",children:[e.jsxs("div",{className:"flex items-baseline gap-2",children:[n?e.jsx(l.Skeleton,{className:"h-8 w-28"}):e.jsx("span",{className:"min-w-0 truncate text-2xl font-bold",title:r,children:r}),!n&&a!==void 0&&e.jsxs(N.Badge,{variant:"secondary",className:m.cn("h-auto shrink-0 px-1.5 py-0 text-xs",a>0?"text-green-600":"text-red-600"),children:[a>0?e.jsx(i.TrendingUp,{className:"mr-0.5 inline h-3 w-3"}):e.jsx(i.TrendingDown,{className:"mr-0.5 inline h-3 w-3"}),x]})]}),e.jsx("div",{className:"min-h-4 text-xs text-muted-foreground",children:n?e.jsx(l.Skeleton,{className:"h-3 w-full max-w-40"}):t&&e.jsx("span",{className:"block truncate",children:t})})]})]})});u.displayName="KPICard";exports.KPICard=u;
+//# sourceMappingURL=kpi-card.cjs.map

package/dist/components/ui/charts/kpi-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-card.cjs","sources":["../../../../src/components/ui/charts/kpi-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"../layout/card\";\nimport { Badge } from \"../primitives/badge\";\nimport { Skeleton } from \"../primitives/skeleton\";\nimport { TrendingUp, TrendingDown, Activity } from \"lucide-react\";\nimport { cn } from \"../utils\";\n\nexport interface KPICardProps {\n  /**\n   * Título do KPI (ex: \"Receita Mensal\"). Fica em uma linha (trunca com \"…\").\n   */\n  title: string;\n\n  /**\n   * Valor principal em destaque (ex: \"R$ 127.361,23\"). Fica em uma linha\n   * (trunca com \"…\"; o valor completo aparece no `title` nativo ao passar o mouse).\n   */\n  primaryContent: string;\n\n  /**\n   * Texto secundário descritivo (ex: \"vs. mês anterior\"). Uma linha.\n   */\n  secondaryContent?: string;\n\n  /**\n   * Valor de tendência para exibir badge com seta\n   * Positivo = verde + seta para cima\n   * Negativo = vermelho + seta para baixo\n   */\n  trendValue?: number;\n\n  /**\n   * Label customizado para tendência (default: \"+X%\" ou \"-X%\")\n   */\n  trendLabel?: string;\n\n  /**\n   * Ícone a ser exibido no header (componente Lucide React)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n\n  /**\n   * Estado de loading - exibe skeleton com a mesma altura do estado final.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Handler de click - torna o card clicável com hover\n   */\n  onClick?: () => void;\n\n  /**\n   * Classes CSS adicionais\n   */\n  className?: string;\n}\n\n/**\n * KPICard — card de métrica com título, valor em destaque, tendência e texto\n * secundário. O estado de `isLoading` reserva exatamente a mesma altura do\n * estado final (mesma árvore de layout, só troca o conteúdo por `Skeleton`),\n * então não há salto quando os dados chegam. Título, valor e texto secundário\n * ficam sempre em uma linha.\n */\nexport const KPICard = React.forwardRef<HTMLDivElement, KPICardProps>(\n  (\n    {\n      title,\n      primaryContent,\n      secondaryContent,\n      trendValue,\n      trendLabel,\n      icon: Icon = Activity,\n      isLoading = false,\n      onClick,\n      className,\n    },\n    ref\n  ) => {\n    const clickable = !isLoading && !!onClick;\n\n    return (\n      <Card\n        ref={ref}\n        onClick={clickable ? onClick : undefined}\n        className={cn(\n          clickable && \"cursor-pointer hover:bg-accent/50 transition-colors\",\n          className\n        )}\n      >\n        <CardHeader className=\"pb-1\">\n          <CardTitle className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            {isLoading ? (\n              <>\n                <Skeleton className=\"size-4 shrink-0 rounded\" />\n                <Skeleton className=\"h-4 w-24\" />\n              </>\n            ) : (\n              <>\n                <Icon className=\"size-4 shrink-0 text-muted-foreground\" />\n                <span className=\"truncate\">{title}</span>\n              </>\n            )}\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-1 pt-0\">\n          <div className=\"flex items-baseline gap-2\">\n            {isLoading ? (\n              <Skeleton className=\"h-8 w-28\" />\n            ) : (\n              <span\n                className=\"min-w-0 truncate text-2xl font-bold\"\n                title={primaryContent}\n              >\n                {primaryContent}\n              </span>\n            )}\n            {!isLoading && trendValue !== undefined && (\n              <Badge\n                variant=\"secondary\"\n                className={cn(\n                  \"h-auto shrink-0 px-1.5 py-0 text-xs\",\n                  trendValue > 0 ? \"text-green-600\" : \"text-red-600\"\n                )}\n              >\n                {trendValue > 0 ? (\n                  <TrendingUp className=\"mr-0.5 inline h-3 w-3\" />\n                ) : (\n                  <TrendingDown className=\"mr-0.5 inline h-3 w-3\" />\n                )}\n                {trendLabel}\n              </Badge>\n            )}\n          </div>\n          <div className=\"min-h-4 text-xs text-muted-foreground\">\n            {isLoading ? (\n              <Skeleton className=\"h-3 w-full max-w-40\" />\n            ) : (\n              secondaryContent && (\n                <span className=\"block truncate\">{secondaryContent}</span>\n              )\n            )}\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nKPICard.displayName = \"KPICard\";\n"],"names":["KPICard","React","title","primaryContent","secondaryContent","trendValue","trendLabel","Icon","Activity","isLoading","onClick","className","ref","clickable","jsxs","Card","cn","jsx","CardHeader","CardTitle","Fragment","Skeleton","CardContent","Badge","TrendingUp","TrendingDown"],"mappings":"glBAkEaA,EAAUC,EAAM,WAC3B,CACE,CACE,MAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,WAAAC,EACA,KAAMC,EAAOC,EAAAA,SACb,UAAAC,EAAY,GACZ,QAAAC,EACA,UAAAC,CAAA,EAEFC,IACG,CACH,MAAMC,EAAY,CAACJ,GAAa,CAAC,CAACC,EAElC,OACEI,EAAAA,KAACC,EAAAA,KAAA,CACC,IAAAH,EACA,QAASC,EAAYH,EAAU,OAC/B,UAAWM,EAAAA,GACTH,GAAa,sDACbF,CAAA,EAGF,SAAA,CAAAM,EAAAA,IAACC,EAAAA,WAAA,CAAW,UAAU,OACpB,SAAAD,EAAAA,IAACE,EAAAA,WAAU,UAAU,wDAClB,WACCL,EAAAA,KAAAM,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACI,EAAAA,SAAA,CAAS,UAAU,yBAAA,CAA0B,EAC9CJ,EAAAA,IAACI,EAAAA,SAAA,CAAS,UAAU,UAAA,CAAW,CAAA,CAAA,CACjC,EAEAP,EAAAA,KAAAM,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACV,EAAA,CAAK,UAAU,uCAAA,CAAwC,EACxDU,EAAAA,IAAC,OAAA,CAAK,UAAU,WAAY,SAAAf,CAAA,CAAM,CAAA,CAAA,CACpC,EAEJ,EACF,EACAY,EAAAA,KAACQ,EAAAA,YAAA,CAAY,UAAU,iBACrB,SAAA,CAAAR,EAAAA,KAAC,MAAA,CAAI,UAAU,4BACZ,SAAA,CAAAL,EACCQ,EAAAA,IAACI,EAAAA,SAAA,CAAS,UAAU,UAAA,CAAW,EAE/BJ,EAAAA,IAAC,OAAA,CACC,UAAU,sCACV,MAAOd,EAEN,SAAAA,CAAA,CAAA,EAGJ,CAACM,GAAaJ,IAAe,QAC5BS,EAAAA,KAACS,EAAAA,MAAA,CACC,QAAQ,YACR,UAAWP,EAAAA,GACT,sCACAX,EAAa,EAAI,iBAAmB,cAAA,EAGrC,SAAA,CAAAA,EAAa,QACXmB,EAAAA,WAAA,CAAW,UAAU,wBAAwB,EAE9CP,EAAAA,IAACQ,EAAAA,aAAA,CAAa,UAAU,uBAAA,CAAwB,EAEjDnB,CAAA,CAAA,CAAA,CACH,EAEJ,QACC,MAAA,CAAI,UAAU,wCACZ,SAAAG,QACEY,EAAAA,SAAA,CAAS,UAAU,qBAAA,CAAsB,EAE1CjB,GACEa,EAAAA,IAAC,OAAA,CAAK,UAAU,iBAAkB,WAAiB,CAAA,CAGzD,CAAA,CAAA,CACF,CAAA,CAAA,CAAA,CAGN,CACF,EAEAjB,EAAQ,YAAc"}

package/dist/components/ui/charts/kpi-card.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs as r, jsx as e, Fragment as i } from "react/jsx-runtime";
+import * as f from "react";
+import { Card as u, CardHeader as w, CardTitle as g, CardContent as v } from "../layout/card.js";
+import { Badge as b } from "../primitives/badge.js";
+import { Skeleton as s } from "../primitives/skeleton.js";
+import { Activity as k, TrendingUp as C, TrendingDown as y } from "lucide-react";
+import { cn as o } from "../utils.js";
+const T = f.forwardRef(
+  ({
+    title: d,
+    primaryContent: c,
+    secondaryContent: l,
+    trendValue: t,
+    trendLabel: h,
+    icon: p = k,
+    isLoading: a = !1,
+    onClick: n,
+    className: x
+  }, N) => {
+    const m = !a && !!n;
+    return /* @__PURE__ */ r(
+      u,
+      {
+        ref: N,
+        onClick: m ? n : void 0,
+        className: o(
+          m && "cursor-pointer hover:bg-accent/50 transition-colors",
+          x
+        ),
+        children: [
+          /* @__PURE__ */ e(w, { className: "pb-1", children: /* @__PURE__ */ e(g, { className: "flex items-center gap-2 text-sm text-muted-foreground", children: a ? /* @__PURE__ */ r(i, { children: [
+            /* @__PURE__ */ e(s, { className: "size-4 shrink-0 rounded" }),
+            /* @__PURE__ */ e(s, { className: "h-4 w-24" })
+          ] }) : /* @__PURE__ */ r(i, { children: [
+            /* @__PURE__ */ e(p, { className: "size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ e("span", { className: "truncate", children: d })
+          ] }) }) }),
+          /* @__PURE__ */ r(v, { className: "space-y-1 pt-0", children: [
+            /* @__PURE__ */ r("div", { className: "flex items-baseline gap-2", children: [
+              a ? /* @__PURE__ */ e(s, { className: "h-8 w-28" }) : /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "min-w-0 truncate text-2xl font-bold",
+                  title: c,
+                  children: c
+                }
+              ),
+              !a && t !== void 0 && /* @__PURE__ */ r(
+                b,
+                {
+                  variant: "secondary",
+                  className: o(
+                    "h-auto shrink-0 px-1.5 py-0 text-xs",
+                    t > 0 ? "text-green-600" : "text-red-600"
+                  ),
+                  children: [
+                    t > 0 ? /* @__PURE__ */ e(C, { className: "mr-0.5 inline h-3 w-3" }) : /* @__PURE__ */ e(y, { className: "mr-0.5 inline h-3 w-3" }),
+                    h
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "min-h-4 text-xs text-muted-foreground", children: a ? /* @__PURE__ */ e(s, { className: "h-3 w-full max-w-40" }) : l && /* @__PURE__ */ e("span", { className: "block truncate", children: l }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "KPICard";
+export {
+  T as KPICard
+};
+//# sourceMappingURL=kpi-card.js.map

package/dist/components/ui/charts/kpi-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-card.js","sources":["../../../../src/components/ui/charts/kpi-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"../layout/card\";\nimport { Badge } from \"../primitives/badge\";\nimport { Skeleton } from \"../primitives/skeleton\";\nimport { TrendingUp, TrendingDown, Activity } from \"lucide-react\";\nimport { cn } from \"../utils\";\n\nexport interface KPICardProps {\n  /**\n   * Título do KPI (ex: \"Receita Mensal\"). Fica em uma linha (trunca com \"…\").\n   */\n  title: string;\n\n  /**\n   * Valor principal em destaque (ex: \"R$ 127.361,23\"). Fica em uma linha\n   * (trunca com \"…\"; o valor completo aparece no `title` nativo ao passar o mouse).\n   */\n  primaryContent: string;\n\n  /**\n   * Texto secundário descritivo (ex: \"vs. mês anterior\"). Uma linha.\n   */\n  secondaryContent?: string;\n\n  /**\n   * Valor de tendência para exibir badge com seta\n   * Positivo = verde + seta para cima\n   * Negativo = vermelho + seta para baixo\n   */\n  trendValue?: number;\n\n  /**\n   * Label customizado para tendência (default: \"+X%\" ou \"-X%\")\n   */\n  trendLabel?: string;\n\n  /**\n   * Ícone a ser exibido no header (componente Lucide React)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n\n  /**\n   * Estado de loading - exibe skeleton com a mesma altura do estado final.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Handler de click - torna o card clicável com hover\n   */\n  onClick?: () => void;\n\n  /**\n   * Classes CSS adicionais\n   */\n  className?: string;\n}\n\n/**\n * KPICard — card de métrica com título, valor em destaque, tendência e texto\n * secundário. O estado de `isLoading` reserva exatamente a mesma altura do\n * estado final (mesma árvore de layout, só troca o conteúdo por `Skeleton`),\n * então não há salto quando os dados chegam. Título, valor e texto secundário\n * ficam sempre em uma linha.\n */\nexport const KPICard = React.forwardRef<HTMLDivElement, KPICardProps>(\n  (\n    {\n      title,\n      primaryContent,\n      secondaryContent,\n      trendValue,\n      trendLabel,\n      icon: Icon = Activity,\n      isLoading = false,\n      onClick,\n      className,\n    },\n    ref\n  ) => {\n    const clickable = !isLoading && !!onClick;\n\n    return (\n      <Card\n        ref={ref}\n        onClick={clickable ? onClick : undefined}\n        className={cn(\n          clickable && \"cursor-pointer hover:bg-accent/50 transition-colors\",\n          className\n        )}\n      >\n        <CardHeader className=\"pb-1\">\n          <CardTitle className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            {isLoading ? (\n              <>\n                <Skeleton className=\"size-4 shrink-0 rounded\" />\n                <Skeleton className=\"h-4 w-24\" />\n              </>\n            ) : (\n              <>\n                <Icon className=\"size-4 shrink-0 text-muted-foreground\" />\n                <span className=\"truncate\">{title}</span>\n              </>\n            )}\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-1 pt-0\">\n          <div className=\"flex items-baseline gap-2\">\n            {isLoading ? (\n              <Skeleton className=\"h-8 w-28\" />\n            ) : (\n              <span\n                className=\"min-w-0 truncate text-2xl font-bold\"\n                title={primaryContent}\n              >\n                {primaryContent}\n              </span>\n            )}\n            {!isLoading && trendValue !== undefined && (\n              <Badge\n                variant=\"secondary\"\n                className={cn(\n                  \"h-auto shrink-0 px-1.5 py-0 text-xs\",\n                  trendValue > 0 ? \"text-green-600\" : \"text-red-600\"\n                )}\n              >\n                {trendValue > 0 ? (\n                  <TrendingUp className=\"mr-0.5 inline h-3 w-3\" />\n                ) : (\n                  <TrendingDown className=\"mr-0.5 inline h-3 w-3\" />\n                )}\n                {trendLabel}\n              </Badge>\n            )}\n          </div>\n          <div className=\"min-h-4 text-xs text-muted-foreground\">\n            {isLoading ? (\n              <Skeleton className=\"h-3 w-full max-w-40\" />\n            ) : (\n              secondaryContent && (\n                <span className=\"block truncate\">{secondaryContent}</span>\n              )\n            )}\n          </div>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nKPICard.displayName = \"KPICard\";\n"],"names":["KPICard","React","title","primaryContent","secondaryContent","trendValue","trendLabel","Icon","Activity","isLoading","onClick","className","ref","clickable","jsxs","Card","cn","jsx","CardHeader","CardTitle","Fragment","Skeleton","CardContent","Badge","TrendingUp","TrendingDown"],"mappings":";;;;;;;;AAkEO,MAAMA,IAAUC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAMC,IAAOC;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAMC,IAAY,CAACJ,KAAa,CAAC,CAACC;AAElC,WACE,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,SAASC,IAAYH,IAAU;AAAA,QAC/B,WAAWM;AAAA,UACTH,KAAa;AAAA,UACbF;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAM,EAACC,GAAA,EAAW,WAAU,QACpB,UAAA,gBAAAD,EAACE,KAAU,WAAU,yDAClB,cACC,gBAAAL,EAAAM,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAH,EAACI,GAAA,EAAS,WAAU,0BAAA,CAA0B;AAAA,YAC9C,gBAAAJ,EAACI,GAAA,EAAS,WAAU,WAAA,CAAW;AAAA,UAAA,EAAA,CACjC,IAEA,gBAAAP,EAAAM,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAH,EAACV,GAAA,EAAK,WAAU,wCAAA,CAAwC;AAAA,YACxD,gBAAAU,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAf,EAAA,CAAM;AAAA,UAAA,EAAA,CACpC,GAEJ,GACF;AAAA,UACA,gBAAAY,EAACQ,GAAA,EAAY,WAAU,kBACrB,UAAA;AAAA,YAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,cAAAL,IACC,gBAAAQ,EAACI,GAAA,EAAS,WAAU,WAAA,CAAW,IAE/B,gBAAAJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAOd;AAAA,kBAEN,UAAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,CAACM,KAAaJ,MAAe,UAC5B,gBAAAS;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAWP;AAAA,oBACT;AAAA,oBACAX,IAAa,IAAI,mBAAmB;AAAA,kBAAA;AAAA,kBAGrC,UAAA;AAAA,oBAAAA,IAAa,sBACXmB,GAAA,EAAW,WAAU,yBAAwB,IAE9C,gBAAAP,EAACQ,GAAA,EAAa,WAAU,wBAAA,CAAwB;AAAA,oBAEjDnB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GAEJ;AAAA,8BACC,OAAA,EAAI,WAAU,yCACZ,UAAAG,sBACEY,GAAA,EAAS,WAAU,sBAAA,CAAsB,IAE1CjB,KACE,gBAAAa,EAAC,QAAA,EAAK,WAAU,kBAAkB,aAAiB,EAAA,CAGzD;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAjB,EAAQ,cAAc;"}

package/dist/components/ui/data/advanced-data-table.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),O=require("../layout/card.cjs"),q=require("./data-table.cjs"),A=require("../utils.cjs");function R(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:()=>n[e]})}}return r.default=n,Object.freeze(r)}const S=R(y);function P({data:n,columns:r,title:e,description:t,searchPlaceholder:o="Buscar...",searchableColumns:m,filterFields:s=[],initialFilters:b,enableSearch:i=!0,enableFilters:f=s.length>0,pageSizeOptions:x=[5,10,20,50],initialPageSize:j=10,showCard:g=!0,cardPadding:h="p-6",toolbarActions:v,isLoading:N=!1,emptyState:T,emptyMessage:D,className:c,serverConfig:p},l){const d=a.jsx(q.DataTable,{data:n,columns:r,searchPlaceholder:o,searchableColumns:m,enableSearch:i,enableFilters:f,filterFields:s,initialFilters:b,initialPageSize:j,pageSizeOptions:x,toolbarActions:v,serverConfig:p,isLoading:N,emptyState:T,emptyMessage:D});return g?a.jsxs(O.Card,{ref:l,className:A.cn(h,c),children:[(e||t)&&a.jsxs("div",{className:"mb-6",children:[e&&a.jsx("h2",{className:"text-lg font-semibold",children:e}),t&&a.jsx("p",{className:"text-sm text-muted-foreground mt-1",children:t})]}),d]}):a.jsxs("div",{ref:l,className:c,children:[(e||t)&&a.jsxs("div",{className:"mb-6",children:[e&&a.jsx("h2",{className:"text-lg font-semibold",children:e}),t&&a.jsx("p",{className:"text-sm text-muted-foreground mt-1",children:t})]}),d]})}const u=S.forwardRef(P);u.displayName="AdvancedDataTable";exports.AdvancedDataTable=u;
+//# sourceMappingURL=advanced-data-table.cjs.map

package/dist/components/ui/data/advanced-data-table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-data-table.cjs","sources":["../../../../src/components/ui/data/advanced-data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Card } from \"../layout/card\";\nimport { DataTable } from \"./data-table\";\nimport { ColumnDef, ServerSideConfig, EmptyStateConfig } from \"./table-types\";\nimport { FilterField, FilterCondition } from \"./filter-builder\";\nimport { cn } from \"../utils\";\n\nexport interface AdvancedDataTableProps<T extends object> {\n  /**\n   * Dados a serem exibidos na tabela\n   */\n  data: T[];\n\n  /**\n   * Definições de colunas (header, render, sortable, etc.)\n   */\n  columns: ColumnDef<T>[];\n\n  /**\n   * Título opcional para exibir acima da tabela\n   */\n  title?: string;\n\n  /**\n   * Descrição opcional abaixo do título\n   */\n  description?: string;\n\n  /**\n   * Placeholder para o campo de busca\n   * @default \"Buscar...\"\n   */\n  searchPlaceholder?: string;\n\n  /**\n   * Colunas que serão pesquisadas pela busca global\n   * @default Auto-detecta primeira coluna com key 'nome', 'name', 'title' ou primeira coluna\n   */\n  searchableColumns?: (keyof T)[];\n\n  /**\n   * Campos disponíveis para filtros avançados\n   */\n  filterFields?: FilterField[];\n\n  /**\n   * Filtros iniciais/externos a serem aplicados\n   */\n  initialFilters?: FilterCondition[];\n\n  /**\n   * Habilitar busca global\n   * @default true\n   */\n  enableSearch?: boolean;\n\n  /**\n   * Habilitar filtros avançados\n   * @default true (se filterFields fornecido)\n   */\n  enableFilters?: boolean;\n\n  /**\n   * Opções de tamanho de página\n   * @default [5, 10, 20, 50]\n   */\n  pageSizeOptions?: number[];\n\n  /**\n   * Tamanho inicial da página\n   * @default 10\n   */\n  initialPageSize?: number;\n\n  /**\n   * Exibir em Card wrapper\n   * @default true\n   */\n  showCard?: boolean;\n\n  /**\n   * Padding do Card\n   * @default \"p-6\"\n   */\n  cardPadding?: string;\n\n  /**\n   * Ações customizadas na toolbar (botões, dropdowns, etc.)\n   * Passe qualquer React.ReactNode (botões, dropdowns, menus, etc.)\n   */\n  toolbarActions?: React.ReactNode;\n\n  /**\n   * Estado de loading (exibe skeleton/spinner)\n   */\n  isLoading?: boolean;\n\n  /**\n   * Configuração do empty state\n   * Suporta tanto EmptyStateConfig completo quanto string simples (retrocompatibilidade)\n   */\n  emptyState?: EmptyStateConfig | string;\n\n  /**\n   * @deprecated Use emptyState ao invés de emptyMessage\n   */\n  emptyMessage?: string;\n\n  /**\n   * Classes CSS adicionais\n   */\n  className?: string;\n\n  /**\n   * Configuração para modo server-side\n   * Se fornecido, o componente delega filtros/paginação/ordenação para callbacks\n   */\n  serverConfig?: ServerSideConfig<T>;\n}\n\nfunction AdvancedDataTableInner<T extends object>(\n  {\n    data,\n    columns,\n    title,\n    description,\n    searchPlaceholder = \"Buscar...\",\n    searchableColumns,\n    filterFields = [],\n    initialFilters,\n    enableSearch = true,\n    enableFilters = filterFields.length > 0,\n    pageSizeOptions = [5, 10, 20, 50],\n    initialPageSize = 10,\n    showCard = true,\n    cardPadding = \"p-6\",\n    toolbarActions,\n    isLoading = false,\n    emptyState,\n    emptyMessage, // deprecated\n    className,\n    serverConfig,\n  }: AdvancedDataTableProps<T>,\n  ref: React.Ref<HTMLDivElement>\n) {\n    // Sempre renderizar DataTable - skeleton e empty state são gerenciados internamente\n    const tableContent = (\n      <DataTable\n        data={data}\n        columns={columns}\n        searchPlaceholder={searchPlaceholder}\n        searchableColumns={searchableColumns}\n        enableSearch={enableSearch}\n        enableFilters={enableFilters}\n        filterFields={filterFields}\n        initialFilters={initialFilters}\n        initialPageSize={initialPageSize}\n        pageSizeOptions={pageSizeOptions}\n        toolbarActions={toolbarActions}\n        serverConfig={serverConfig}\n        isLoading={isLoading}\n        emptyState={emptyState}\n        emptyMessage={emptyMessage}\n      />\n    );\n\n    // Wrapper condicional (Card ou div)\n    if (showCard) {\n      return (\n        <Card ref={ref} className={cn(cardPadding, className)}>\n          {(title || description) && (\n            <div className=\"mb-6\">\n              {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n              {description && (\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  {description}\n                </p>\n              )}\n            </div>\n          )}\n          {tableContent}\n        </Card>\n      );\n    }\n\n    return (\n      <div ref={ref} className={className}>\n        {(title || description) && (\n          <div className=\"mb-6\">\n            {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n            {description && (\n              <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n            )}\n          </div>\n        )}\n        {tableContent}\n      </div>\n    );\n}\n\nexport const AdvancedDataTable = React.forwardRef(AdvancedDataTableInner) as (<T extends object>(\n  props: AdvancedDataTableProps<T> & { ref?: React.Ref<HTMLDivElement> }\n) => React.ReactElement) & { displayName?: string };\n\nAdvancedDataTable.displayName = \"AdvancedDataTable\";\n"],"names":["AdvancedDataTableInner","data","columns","title","description","searchPlaceholder","searchableColumns","filterFields","initialFilters","enableSearch","enableFilters","pageSizeOptions","initialPageSize","showCard","cardPadding","toolbarActions","isLoading","emptyState","emptyMessage","className","serverConfig","ref","tableContent","jsx","DataTable","Card","cn","jsxs","AdvancedDataTable","React"],"mappings":"ugBA0HA,SAASA,EACP,CACE,KAAAC,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,kBAAAC,EAAoB,YACpB,kBAAAC,EACA,aAAAC,EAAe,CAAA,EACf,eAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EAAgBH,EAAa,OAAS,EACtC,gBAAAI,EAAkB,CAAC,EAAG,GAAI,GAAI,EAAE,EAChC,gBAAAC,EAAkB,GAClB,SAAAC,EAAW,GACX,YAAAC,EAAc,MACd,eAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,aAAAC,EACA,UAAAC,EACA,aAAAC,CACF,EACAC,EACA,CAEE,MAAMC,EACJC,EAAAA,IAACC,EAAAA,UAAA,CACC,KAAAvB,EACA,QAAAC,EACA,kBAAAG,EACA,kBAAAC,EACA,aAAAG,EACA,cAAAC,EACA,aAAAH,EACA,eAAAC,EACA,gBAAAI,EACA,gBAAAD,EACA,eAAAI,EACA,aAAAK,EACA,UAAAJ,EACA,WAAAC,EACA,aAAAC,CAAA,CAAA,EAKJ,OAAIL,SAECY,OAAA,CAAK,IAAAJ,EAAU,UAAWK,EAAAA,GAAGZ,EAAaK,CAAS,EAChD,SAAA,EAAAhB,GAASC,IACTuB,EAAAA,KAAC,MAAA,CAAI,UAAU,OACZ,SAAA,CAAAxB,GAASoB,EAAAA,IAAC,KAAA,CAAG,UAAU,wBAAyB,SAAApB,EAAM,EACtDC,GACCmB,EAAAA,IAAC,IAAA,CAAE,UAAU,qCACV,SAAAnB,CAAA,CACH,CAAA,EAEJ,EAEDkB,CAAA,EACH,EAKFK,EAAAA,KAAC,MAAA,CAAI,IAAAN,EAAU,UAAAF,EACX,SAAA,EAAAhB,GAASC,IACTuB,EAAAA,KAAC,MAAA,CAAI,UAAU,OACZ,SAAA,CAAAxB,GAASoB,EAAAA,IAAC,KAAA,CAAG,UAAU,wBAAyB,SAAApB,EAAM,EACtDC,GACCmB,EAAAA,IAAC,IAAA,CAAE,UAAU,qCAAsC,SAAAnB,CAAA,CAAY,CAAA,EAEnE,EAEDkB,CAAA,EACH,CAEN,CAEO,MAAMM,EAAoBC,EAAM,WAAW7B,CAAsB,EAIxE4B,EAAkB,YAAc"}

package/dist/components/ui/data/advanced-data-table.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs as r, jsx as m } from "react/jsx-runtime";
+import * as j from "react";
+import { Card as C } from "../layout/card.js";
+import { DataTable as R } from "./data-table.js";
+import { cn as w } from "../utils.js";
+function y({
+  data: s,
+  columns: c,
+  title: a,
+  description: e,
+  searchPlaceholder: o = "Buscar...",
+  searchableColumns: f,
+  filterFields: t = [],
+  initialFilters: h,
+  enableSearch: u = !0,
+  enableFilters: b = t.length > 0,
+  pageSizeOptions: x = [5, 10, 20, 50],
+  initialPageSize: N = 10,
+  showCard: v = !0,
+  cardPadding: g = "p-6",
+  toolbarActions: i,
+  isLoading: p = !1,
+  emptyState: D,
+  emptyMessage: T,
+  // deprecated
+  className: n,
+  serverConfig: A
+}, d) {
+  const l = /* @__PURE__ */ m(
+    R,
+    {
+      data: s,
+      columns: c,
+      searchPlaceholder: o,
+      searchableColumns: f,
+      enableSearch: u,
+      enableFilters: b,
+      filterFields: t,
+      initialFilters: h,
+      initialPageSize: N,
+      pageSizeOptions: x,
+      toolbarActions: i,
+      serverConfig: A,
+      isLoading: p,
+      emptyState: D,
+      emptyMessage: T
+    }
+  );
+  return v ? /* @__PURE__ */ r(C, { ref: d, className: w(g, n), children: [
+    (a || e) && /* @__PURE__ */ r("div", { className: "mb-6", children: [
+      a && /* @__PURE__ */ m("h2", { className: "text-lg font-semibold", children: a }),
+      e && /* @__PURE__ */ m("p", { className: "text-sm text-muted-foreground mt-1", children: e })
+    ] }),
+    l
+  ] }) : /* @__PURE__ */ r("div", { ref: d, className: n, children: [
+    (a || e) && /* @__PURE__ */ r("div", { className: "mb-6", children: [
+      a && /* @__PURE__ */ m("h2", { className: "text-lg font-semibold", children: a }),
+      e && /* @__PURE__ */ m("p", { className: "text-sm text-muted-foreground mt-1", children: e })
+    ] }),
+    l
+  ] });
+}
+const B = j.forwardRef(y);
+B.displayName = "AdvancedDataTable";
+export {
+  B as AdvancedDataTable
+};
+//# sourceMappingURL=advanced-data-table.js.map

package/dist/components/ui/data/advanced-data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-data-table.js","sources":["../../../../src/components/ui/data/advanced-data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Card } from \"../layout/card\";\nimport { DataTable } from \"./data-table\";\nimport { ColumnDef, ServerSideConfig, EmptyStateConfig } from \"./table-types\";\nimport { FilterField, FilterCondition } from \"./filter-builder\";\nimport { cn } from \"../utils\";\n\nexport interface AdvancedDataTableProps<T extends object> {\n  /**\n   * Dados a serem exibidos na tabela\n   */\n  data: T[];\n\n  /**\n   * Definições de colunas (header, render, sortable, etc.)\n   */\n  columns: ColumnDef<T>[];\n\n  /**\n   * Título opcional para exibir acima da tabela\n   */\n  title?: string;\n\n  /**\n   * Descrição opcional abaixo do título\n   */\n  description?: string;\n\n  /**\n   * Placeholder para o campo de busca\n   * @default \"Buscar...\"\n   */\n  searchPlaceholder?: string;\n\n  /**\n   * Colunas que serão pesquisadas pela busca global\n   * @default Auto-detecta primeira coluna com key 'nome', 'name', 'title' ou primeira coluna\n   */\n  searchableColumns?: (keyof T)[];\n\n  /**\n   * Campos disponíveis para filtros avançados\n   */\n  filterFields?: FilterField[];\n\n  /**\n   * Filtros iniciais/externos a serem aplicados\n   */\n  initialFilters?: FilterCondition[];\n\n  /**\n   * Habilitar busca global\n   * @default true\n   */\n  enableSearch?: boolean;\n\n  /**\n   * Habilitar filtros avançados\n   * @default true (se filterFields fornecido)\n   */\n  enableFilters?: boolean;\n\n  /**\n   * Opções de tamanho de página\n   * @default [5, 10, 20, 50]\n   */\n  pageSizeOptions?: number[];\n\n  /**\n   * Tamanho inicial da página\n   * @default 10\n   */\n  initialPageSize?: number;\n\n  /**\n   * Exibir em Card wrapper\n   * @default true\n   */\n  showCard?: boolean;\n\n  /**\n   * Padding do Card\n   * @default \"p-6\"\n   */\n  cardPadding?: string;\n\n  /**\n   * Ações customizadas na toolbar (botões, dropdowns, etc.)\n   * Passe qualquer React.ReactNode (botões, dropdowns, menus, etc.)\n   */\n  toolbarActions?: React.ReactNode;\n\n  /**\n   * Estado de loading (exibe skeleton/spinner)\n   */\n  isLoading?: boolean;\n\n  /**\n   * Configuração do empty state\n   * Suporta tanto EmptyStateConfig completo quanto string simples (retrocompatibilidade)\n   */\n  emptyState?: EmptyStateConfig | string;\n\n  /**\n   * @deprecated Use emptyState ao invés de emptyMessage\n   */\n  emptyMessage?: string;\n\n  /**\n   * Classes CSS adicionais\n   */\n  className?: string;\n\n  /**\n   * Configuração para modo server-side\n   * Se fornecido, o componente delega filtros/paginação/ordenação para callbacks\n   */\n  serverConfig?: ServerSideConfig<T>;\n}\n\nfunction AdvancedDataTableInner<T extends object>(\n  {\n    data,\n    columns,\n    title,\n    description,\n    searchPlaceholder = \"Buscar...\",\n    searchableColumns,\n    filterFields = [],\n    initialFilters,\n    enableSearch = true,\n    enableFilters = filterFields.length > 0,\n    pageSizeOptions = [5, 10, 20, 50],\n    initialPageSize = 10,\n    showCard = true,\n    cardPadding = \"p-6\",\n    toolbarActions,\n    isLoading = false,\n    emptyState,\n    emptyMessage, // deprecated\n    className,\n    serverConfig,\n  }: AdvancedDataTableProps<T>,\n  ref: React.Ref<HTMLDivElement>\n) {\n    // Sempre renderizar DataTable - skeleton e empty state são gerenciados internamente\n    const tableContent = (\n      <DataTable\n        data={data}\n        columns={columns}\n        searchPlaceholder={searchPlaceholder}\n        searchableColumns={searchableColumns}\n        enableSearch={enableSearch}\n        enableFilters={enableFilters}\n        filterFields={filterFields}\n        initialFilters={initialFilters}\n        initialPageSize={initialPageSize}\n        pageSizeOptions={pageSizeOptions}\n        toolbarActions={toolbarActions}\n        serverConfig={serverConfig}\n        isLoading={isLoading}\n        emptyState={emptyState}\n        emptyMessage={emptyMessage}\n      />\n    );\n\n    // Wrapper condicional (Card ou div)\n    if (showCard) {\n      return (\n        <Card ref={ref} className={cn(cardPadding, className)}>\n          {(title || description) && (\n            <div className=\"mb-6\">\n              {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n              {description && (\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  {description}\n                </p>\n              )}\n            </div>\n          )}\n          {tableContent}\n        </Card>\n      );\n    }\n\n    return (\n      <div ref={ref} className={className}>\n        {(title || description) && (\n          <div className=\"mb-6\">\n            {title && <h2 className=\"text-lg font-semibold\">{title}</h2>}\n            {description && (\n              <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n            )}\n          </div>\n        )}\n        {tableContent}\n      </div>\n    );\n}\n\nexport const AdvancedDataTable = React.forwardRef(AdvancedDataTableInner) as (<T extends object>(\n  props: AdvancedDataTableProps<T> & { ref?: React.Ref<HTMLDivElement> }\n) => React.ReactElement) & { displayName?: string };\n\nAdvancedDataTable.displayName = \"AdvancedDataTable\";\n"],"names":["AdvancedDataTableInner","data","columns","title","description","searchPlaceholder","searchableColumns","filterFields","initialFilters","enableSearch","enableFilters","pageSizeOptions","initialPageSize","showCard","cardPadding","toolbarActions","isLoading","emptyState","emptyMessage","className","serverConfig","ref","tableContent","jsx","DataTable","Card","cn","jsxs","AdvancedDataTable","React"],"mappings":";;;;;;AA0HA,SAASA,EACP;AAAA,EACE,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,mBAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,gBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgBH,EAAa,SAAS;AAAA,EACtC,iBAAAI,IAAkB,CAAC,GAAG,IAAI,IAAI,EAAE;AAAA,EAChC,iBAAAC,IAAkB;AAAA,EAClB,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,cAAAC;AAAA;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AACF,GACAC,GACA;AAEE,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAvB;AAAA,MACA,SAAAC;AAAA,MACA,mBAAAG;AAAA,MACA,mBAAAC;AAAA,MACA,cAAAG;AAAA,MACA,eAAAC;AAAA,MACA,cAAAH;AAAA,MACA,gBAAAC;AAAA,MACA,iBAAAI;AAAA,MACA,iBAAAD;AAAA,MACA,gBAAAI;AAAA,MACA,cAAAK;AAAA,MACA,WAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,EAAA;AAKJ,SAAIL,sBAECY,GAAA,EAAK,KAAAJ,GAAU,WAAWK,EAAGZ,GAAaK,CAAS,GAChD,UAAA;AAAA,KAAAhB,KAASC,MACT,gBAAAuB,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,MAAAxB,KAAS,gBAAAoB,EAAC,MAAA,EAAG,WAAU,yBAAyB,UAAApB,GAAM;AAAA,MACtDC,KACC,gBAAAmB,EAAC,KAAA,EAAE,WAAU,sCACV,UAAAnB,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEDkB;AAAA,EAAA,GACH,IAKF,gBAAAK,EAAC,OAAA,EAAI,KAAAN,GAAU,WAAAF,GACX,UAAA;AAAA,KAAAhB,KAASC,MACT,gBAAAuB,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,MAAAxB,KAAS,gBAAAoB,EAAC,MAAA,EAAG,WAAU,yBAAyB,UAAApB,GAAM;AAAA,MACtDC,KACC,gBAAAmB,EAAC,KAAA,EAAE,WAAU,sCAAsC,UAAAnB,EAAA,CAAY;AAAA,IAAA,GAEnE;AAAA,IAEDkB;AAAA,EAAA,GACH;AAEN;AAEO,MAAMM,IAAoBC,EAAM,WAAW7B,CAAsB;AAIxE4B,EAAkB,cAAc;"}

package/dist/components/ui/data/comment-system.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),I=require("date-fns"),z=require("date-fns/locale"),u=require("../utils.cjs"),N=require("../primitives/avatar.cjs"),c=require("../primitives/button.cjs"),T=require("../primitives/badge.cjs"),g=require("../overlays/tooltip.cjs"),S=require("../primitives/separator.cjs"),n=require("lucide-react"),w=require("@tiptap/react"),M=require("@tiptap/starter-kit"),O=require("@tiptap/extension-underline"),U=require("@tiptap/extension-link"),_=require("@tiptap/extension-image"),H=require("@tiptap/extension-mention"),D=require("tippy.js"),F=require("./mention-list.cjs"),y=require("emoji-picker-react"),f=require("../overlays/popover.cjs");function K(t){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(l,o,r.get?r:{enumerable:!0,get:()=>t[o]})}}return l.default=t,Object.freeze(l)}const v=K(E),W=({role:t})=>{const l={internal:{label:"Equipe iClips",className:"bg-primary/10 text-primary hover:bg-primary/20 border-primary/20"},client:{label:"Cliente",className:"bg-info/10 text-info-emphasis hover:bg-info/20 border-info/20"},freelancer:{label:"Freelancer",className:"bg-warning/10 text-warning-emphasis hover:bg-warning/20 border-warning/20"}},{label:o,className:r}=l[t];return e.jsx(T.Badge,{variant:"outline",className:u.cn("text-[10px] h-5 px-1.5 font-medium border-0",r),children:o})},X=({editor:t,visible:l})=>!t||!l?null:e.jsxs("div",{className:"flex items-center gap-1 border-b p-1 bg-muted/20 animate-in slide-in-from-bottom-2 duration-200",children:[e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-7 w-7",t.isActive("bold")&&"bg-muted text-primary"),onClick:()=>t.chain().focus().toggleBold().run(),title:"Negrito (Ctrl+B)","aria-label":"Negrito",children:e.jsx(n.Bold,{className:"h-3.5 w-3.5"})}),e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-7 w-7",t.isActive("italic")&&"bg-muted text-primary"),onClick:()=>t.chain().focus().toggleItalic().run(),title:"Itálico (Ctrl+I)","aria-label":"Itálico",children:e.jsx(n.Italic,{className:"h-3.5 w-3.5"})}),e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-7 w-7",t.isActive("underline")&&"bg-muted text-primary"),onClick:()=>t.chain().focus().toggleUnderline().run(),title:"Sublinhado (Ctrl+U)","aria-label":"Sublinhado",children:e.jsx(n.Underline,{className:"h-3.5 w-3.5"})}),e.jsx(S.Separator,{orientation:"vertical",className:"h-4 mx-1"}),e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-7 w-7",t.isActive("bulletList")&&"bg-muted text-primary"),onClick:()=>t.chain().focus().toggleBulletList().run(),"aria-label":"Lista com marcadores",children:e.jsx(n.List,{className:"h-3.5 w-3.5"})}),e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-7 w-7",t.isActive("orderedList")&&"bg-muted text-primary"),onClick:()=>t.chain().focus().toggleOrderedList().run(),"aria-label":"Lista numerada",children:e.jsx(n.ListOrdered,{className:"h-3.5 w-3.5"})}),e.jsx(S.Separator,{orientation:"vertical",className:"h-4 mx-1"}),e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-7 w-7",t.isActive("link")&&"bg-muted text-primary"),"aria-label":"Inserir link",onClick:()=>{const o=t.getAttributes("link").href,r=window.prompt("URL",o);if(r!==null){if(r===""){t.chain().focus().extendMarkRange("link").unsetLink().run();return}t.chain().focus().extendMarkRange("link").setLink({href:r}).run()}},children:e.jsx(n.Link,{className:"h-3.5 w-3.5"})})]}),G=({currentUser:t,onSubmit:l,users:o=[]})=>{const[r,b]=v.useState(!1),[p,i]=v.useState(!1),[h,m]=v.useState([]),[R,C]=v.useState(!0),k=v.useRef(null),A=v.useMemo(()=>[M.configure({link:!1,underline:!1}),O,U.configure({openOnClick:!1}),_,H.configure({HTMLAttributes:{class:"bg-accent text-accent-foreground rounded-sm px-1 py-0.5 font-medium decoration-clone"},suggestion:{items:({query:s})=>o.filter(a=>a.name.toLowerCase().startsWith(s.toLowerCase())).slice(0,5),render:()=>{let s=null,a=null;return{onStart:d=>{s=new w.ReactRenderer(F.MentionList,{props:d,editor:d.editor}),d.clientRect&&(a=D("body",{getReferenceClientRect:d.clientRect,appendTo:()=>document.body,content:s.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"bottom-start"}))},onUpdate(d){s==null||s.updateProps(d),d.clientRect&&(a==null||a[0].setProps({getReferenceClientRect:d.clientRect}))},onKeyDown(d){var j,q;return d.event.key==="Escape"?(a==null||a[0].hide(),!0):!!((q=(j=s==null?void 0:s.ref)==null?void 0:j.onKeyDown)!=null&&q.call(j,d))},onExit(){a==null||a[0].destroy(),s==null||s.destroy()}}}}})],[o]),x=w.useEditor({extensions:A,content:"",onUpdate:({editor:s})=>{C(s.isEmpty)},editorProps:{attributes:{class:"prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[80px] px-3 py-2 text-sm"}}}),B=s=>{if(s.target.files&&s.target.files[0]){const a=s.target.files[0],d=URL.createObjectURL(a),j={id:Math.random().toString(36).substr(2,9),name:a.name,url:d,type:a.type.startsWith("image/")?"image":"file"};m([...h,j]),s.target.value=""}},L=s=>{m(h.filter(a=>a.id!==s))},P=()=>{!x||x.isEmpty&&h.length===0||(l({content:x.getHTML(),isRevisionRequest:r,attachments:h}),x.commands.clearContent(),m([]),b(!1),C(!0))};return e.jsxs("div",{className:"flex gap-3 items-start",children:[e.jsxs(N.Avatar,{className:"h-8 w-8 mt-1 border",children:[e.jsx(N.AvatarImage,{src:t.avatar}),e.jsx(N.AvatarFallback,{children:t.name.substring(0,2).toUpperCase()})]}),e.jsxs("div",{className:u.cn("flex-1 rounded-xl border bg-background shadow-sm overflow-hidden transition-colors",r&&"border-destructive/40 ring-1 ring-destructive/20"),children:[e.jsx(X,{editor:x,visible:p}),e.jsx(w.EditorContent,{editor:x}),h.length>0&&e.jsx("div",{className:"px-3 pb-2 flex flex-wrap gap-2",children:h.map(s=>e.jsxs("div",{className:"relative group",children:[s.type==="image"?e.jsx("div",{className:"h-16 w-16 rounded-md border overflow-hidden relative",children:e.jsx("img",{src:s.url,alt:s.name,className:"h-full w-full object-cover"})}):e.jsx("div",{className:"h-16 w-16 rounded-md border bg-muted flex items-center justify-center",children:e.jsx(n.Paperclip,{className:"h-6 w-6 text-muted-foreground"})}),e.jsx("button",{onClick:()=>L(s.id),className:"absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm",children:e.jsx(n.X,{className:"h-3 w-3"})})]},s.id))}),e.jsxs("div",{className:"flex items-center justify-between p-2 bg-muted/10 border-t",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(g.Tooltip,{children:[e.jsx(g.TooltipTrigger,{asChild:!0,children:e.jsx(c.Button,{variant:"ghost",size:"icon",className:u.cn("h-8 w-8 transition-colors",p?"bg-muted text-foreground":"text-muted-foreground hover:text-foreground"),onClick:()=>i(!p),"aria-label":"Opções de formatação",children:e.jsx(n.Type,{className:"h-4 w-4"})})}),e.jsx(g.TooltipContent,{children:"Opções de formatação"})]}),e.jsx("div",{className:"w-px h-4 bg-border mx-1"}),e.jsxs(f.Popover,{children:[e.jsx(f.PopoverTrigger,{asChild:!0,children:e.jsx(c.Button,{variant:"ghost",size:"icon",className:"h-8 w-8 text-muted-foreground hover:text-foreground","aria-label":"Inserir emoji",children:e.jsx(n.Smile,{className:"h-4 w-4"})})}),e.jsx(f.PopoverContent,{className:"w-auto p-0 border-none",align:"start",side:"top",children:e.jsx(y,{onEmojiClick:s=>x==null?void 0:x.chain().focus().insertContent(s.emoji).run(),width:300,height:350})})]}),e.jsx("input",{type:"file",className:"hidden",ref:k,onChange:B,accept:"image/*,.pdf,.doc,.docx"}),e.jsxs(g.Tooltip,{children:[e.jsx(g.TooltipTrigger,{asChild:!0,children:e.jsx(c.Button,{variant:"ghost",size:"icon",className:"h-8 w-8 text-muted-foreground hover:text-foreground",onClick:()=>{var s;return(s=k.current)==null?void 0:s.click()},"aria-label":"Anexar arquivo",children:e.jsx(n.Paperclip,{className:"h-4 w-4"})})}),e.jsx(g.TooltipContent,{children:"Anexar arquivo"})]}),e.jsxs(g.Tooltip,{children:[e.jsx(g.TooltipTrigger,{asChild:!0,children:e.jsxs(c.Button,{variant:"ghost",size:"sm",className:u.cn("h-8 gap-2 px-2 transition-colors",r?"bg-destructive/10 text-destructive-emphasis hover:bg-destructive/20":"text-muted-foreground hover:text-foreground"),onClick:()=>b(!r),children:[e.jsx(n.AlertCircle,{className:"h-4 w-4"}),e.jsx("span",{className:"text-xs font-medium",children:"Solicitar Refação"})]})}),e.jsx(g.TooltipContent,{children:"Marca este comentário como um pedido de alteração"})]})]}),e.jsxs(c.Button,{size:"sm",onClick:P,disabled:R&&h.length===0,children:["Enviar ",e.jsx(n.Send,{className:"h-3.5 w-3.5 ml-2"})]})]})]})]})},J=({comment:t,currentUserId:l,onDelete:o,onReact:r})=>{var p;const b=t.isRevisionRequest;return e.jsxs("div",{className:u.cn("group flex gap-3 p-4 rounded-lg transition-colors",b?"bg-destructive/5 border border-destructive/20":"hover:bg-muted/20"),children:[e.jsxs(N.Avatar,{className:"h-8 w-8 mt-0.5 border",children:[e.jsx(N.AvatarImage,{src:t.user.avatar}),e.jsx(N.AvatarFallback,{children:t.user.name.substring(0,2).toUpperCase()})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center justify-between mb-1.5",children:[e.jsxs("div",{className:"flex items-center gap-2 flex-wrap",children:[e.jsx("span",{className:"font-semibold text-sm text-foreground",children:t.user.name}),e.jsx(W,{role:t.user.role}),e.jsx("span",{className:"text-xs text-foreground/65",children:I.format(t.createdAt,"dd MMM 'às' HH:mm",{locale:z.ptBR})})]}),e.jsxs("div",{className:"flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity",children:[e.jsxs(f.Popover,{children:[e.jsx(f.PopoverTrigger,{asChild:!0,children:e.jsx(c.Button,{variant:"ghost",size:"icon",className:"h-6 w-6 text-muted-foreground hover:text-foreground","aria-label":"Reagir com emoji",children:e.jsx(n.Smile,{className:"h-3.5 w-3.5","aria-hidden":"true"})})}),e.jsx(f.PopoverContent,{className:"w-auto p-0 border-none",align:"end",children:e.jsx(y,{onEmojiClick:i=>r==null?void 0:r(t.id,i.emoji),width:300,height:350})})]}),o&&e.jsx(c.Button,{variant:"ghost",size:"icon",className:"h-6 w-6 text-muted-foreground hover:text-destructive",onClick:()=>o(t.id),"aria-label":"Excluir comentário",children:e.jsx(n.Trash2,{className:"h-3.5 w-3.5","aria-hidden":"true"})})]})]}),b&&e.jsxs("div",{className:"inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-destructive/10 text-destructive-emphasis text-xs font-medium mb-2",children:[e.jsx(n.AlertCircle,{className:"h-3.5 w-3.5"}),"Solicitação de Refação"]}),e.jsx("div",{className:"prose prose-sm dark:prose-invert max-w-none text-sm text-foreground/90 leading-relaxed break-words [&_p]:mb-2 [&_p:last-child]:mb-0",dangerouslySetInnerHTML:{__html:t.content}}),t.attachments&&t.attachments.length>0&&e.jsx("div",{className:"mt-3 flex flex-wrap gap-2",children:t.attachments.map(i=>e.jsx("div",{className:"group/att relative rounded-lg border overflow-hidden bg-background hover:shadow-sm transition-all cursor-pointer",onClick:()=>window.open(i.url,"_blank"),children:i.type==="image"?e.jsxs("div",{className:"h-32 aspect-[4/3]",children:[e.jsx("img",{src:i.url,alt:i.name,className:"h-full w-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-foreground/0 group-hover/att:bg-foreground/10 transition-colors"})]}):e.jsxs("div",{className:"h-12 px-3 flex items-center gap-2 bg-muted/30",children:[e.jsx(n.Paperclip,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-xs font-medium truncate max-w-[150px]",children:i.name})]})},i.id))}),e.jsxs("div",{className:"mt-3 flex flex-wrap gap-2 items-center",children:[(p=t.reactions)==null?void 0:p.map(i=>e.jsxs("button",{onClick:()=>r==null?void 0:r(t.id,i.emoji),className:u.cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors",i.users.includes(l)?"bg-accent border-accent text-accent-foreground":"bg-muted/30 border-transparent hover:bg-muted/50 text-muted-foreground"),children:[e.jsx("span",{children:i.emoji}),e.jsx("span",{children:i.users.length})]},i.emoji)),r&&e.jsxs(f.Popover,{children:[e.jsx(f.PopoverTrigger,{asChild:!0,children:e.jsx(c.Button,{variant:"ghost",size:"icon",className:"h-6 w-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/50","aria-label":"Adicionar reação",children:e.jsx(n.Plus,{className:"h-3.5 w-3.5"})})}),e.jsx(f.PopoverContent,{className:"w-auto p-0 border-none",align:"start",children:e.jsx(y,{onEmojiClick:i=>r(t.id,i.emoji),width:300,height:350})})]})]})]})]})},Q=({comments:t,currentUser:l,users:o=[],onAddComment:r,onDeleteComment:b,onReact:p,className:i})=>{const h=m=>{r({content:m.content,user:l,isRevisionRequest:m.isRevisionRequest,attachments:m.attachments})};return e.jsxs("div",{className:u.cn("flex flex-col h-full",i),children:[e.jsxs("div",{className:"px-4 py-3 border-b flex items-center justify-between bg-card",children:[e.jsx("h3",{className:"font-semibold text-base",children:"Comentários da Atividade"}),e.jsx(T.Badge,{variant:"secondary",className:"bg-muted text-muted-foreground hover:bg-muted",children:t.length})]}),e.jsx("div",{className:"flex-1 overflow-y-auto p-4 space-y-2 bg-muted/5",children:t.length===0?e.jsxs("div",{className:"h-full flex flex-col items-center justify-center text-muted-foreground min-h-[200px]",children:[e.jsx("div",{className:"bg-muted rounded-full p-3 mb-3",children:e.jsx(n.MoreHorizontal,{className:"h-6 w-6","aria-hidden":"true"})}),e.jsx("p",{className:"text-sm font-medium text-foreground/70",children:"Nenhum comentário ainda"}),e.jsx("p",{className:"text-xs",children:"Inicie a conversa sobre esta tarefa"})]}):t.map(m=>e.jsx(J,{comment:m,currentUserId:l.id,onDelete:b,onReact:p},m.id))}),e.jsx("div",{className:"p-4 border-t bg-card",children:e.jsx(G,{currentUser:l,onSubmit:h,users:o})})]})};exports.CommentSystem=Q;
+//# sourceMappingURL=comment-system.cjs.map