xertica-ui 2.2.1 → 2.4.0

package/dist/rich-text-editor-DqLICivI.js

@@ -0,0 +1,2832 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { c as cn, B as Button } from './button-DZHzN1Gd.js';
+import { cva } from 'class-variance-authority';
+import { XCircle, AlertTriangle, Info, CheckCircle, RefreshCw, BarChart3, WifiOff, XIcon, Undo, Redo, ChevronDown, Type, Heading1, Heading2, Heading3, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Link, X, Search, ChevronUp } from 'lucide-react';
+import { C as Card, e as CardHeader, f as CardTitle, c as CardDescription, a as CardAction, b as CardContent, d as CardFooter, S as Skeleton } from './skeleton-DtR5tkYe.js';
+import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from './select-D-xvCZK2.js';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { D as DropdownMenu, n as DropdownMenuTrigger, b as DropdownMenuContent, d as DropdownMenuItem } from './dropdown-menu-Dn_eV2Xb.js';
+import { P as Popover, c as PopoverTrigger, b as PopoverContent, I as Input } from './input-cc-PTD4R.js';
+
+const alertVariants = cva(
+  "relative w-full rounded-[var(--radius)] border-l-4 px-4 py-3 grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted/50 border-l-border text-foreground [&>svg]:text-muted-foreground",
+        success: "bg-[color:var(--success)]/10 dark:bg-[color:var(--success)]/20 border-l-[color:var(--success)] text-foreground [&>svg]:text-[color:var(--success)]",
+        info: "bg-[color:var(--info)]/10 dark:bg-[color:var(--info)]/20 border-l-[color:var(--info)] text-foreground [&>svg]:text-[color:var(--info)]",
+        warning: "bg-[color:var(--warning)]/10 dark:bg-[color:var(--warning)]/20 border-l-[color:var(--warning)] text-foreground [&>svg]:text-[color:var(--warning)]",
+        destructive: "bg-[color:var(--destructive)]/10 dark:bg-[color:var(--destructive)]/20 border-l-[color:var(--destructive)] text-foreground [&>svg]:text-[color:var(--destructive)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const alertIcons = {
+  default: Info,
+  success: CheckCircle,
+  info: Info,
+  warning: AlertTriangle,
+  destructive: XCircle
+};
+function Alert({ className, variant, icon, children, ...props }) {
+  const alertVariant = variant && variant in alertIcons ? variant : "default";
+  const DefaultIcon = alertIcons[alertVariant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      children: [
+        icon !== void 0 ? icon : /* @__PURE__ */ jsx(DefaultIcon, { className: "flex-shrink-0" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children })
+      ]
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn("font-medium mb-1 leading-tight", className),
+      ...props
+    }
+  );
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "alert-description", className: cn("leading-relaxed", className), ...props });
+}
+
+const Empty = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex min-h-[400px] flex-col items-center justify-center rounded-[var(--radius-card)] border border-dashed border-border p-8 text-center animate-in fade-in-50",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Empty.displayName = "Empty";
+const EmptyIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+EmptyIcon.displayName = "EmptyIcon";
+const EmptyImage = React.forwardRef(
+  ({ className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      alt,
+      className: cn("mx-auto mb-4 h-48 w-48 object-contain opacity-50", className),
+      ...props
+    }
+  )
+);
+EmptyImage.displayName = "EmptyImage";
+const EmptyTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("mt-4 font-semibold text-foreground", className), ...props })
+);
+EmptyTitle.displayName = "EmptyTitle";
+const EmptyDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("mt-2 text-sm text-muted-foreground max-w-sm mx-auto", className),
+    ...props
+  }
+));
+EmptyDescription.displayName = "EmptyDescription";
+const EmptyAction = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mt-6 flex flex-col gap-2 sm:flex-row sm:gap-4", className),
+      ...props
+    }
+  )
+);
+EmptyAction.displayName = "EmptyAction";
+
+const THEMES = { light: "", dark: ".dark" };
+const defaultPeriods = [
+  { value: "7d", label: "7 days" },
+  { value: "30d", label: "30 days" },
+  { value: "90d", label: "90 days" }
+];
+const defaultChartColors = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+  "var(--chart-6)",
+  "var(--chart-7)",
+  "var(--chart-8)"
+];
+const chartBarSizes = {
+  sm: 8,
+  md: 14,
+  lg: 22,
+  xl: 32
+};
+const ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border relative h-[300px] min-h-[200px] w-full min-w-0 overflow-hidden text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children })
+      ]
+    }
+  ) });
+}
+const ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(([, config2]) => config2.theme || config2.color);
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+const ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-border/50 bg-background/95 backdrop-blur-sm grid min-w-[8rem] items-start gap-1.5 rounded-xl border px-3 py-2 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload?.fill || item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                      ] }),
+                      item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-semibold tabular-nums", children: item.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            item.dataKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+const ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.map((item) => {
+        const key = `${nameKey ? item.value : item.dataKey || item.value || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-full bg-(--color-bg)",
+                  style: {
+                    "--color-bg": item.color || `var(--color-${key})`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: itemConfig?.label || item.value })
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+function getChartSeries(config, series) {
+  if (series?.length) {
+    return series;
+  }
+  return Object.entries(config).map(([key, item]) => ({
+    key,
+    label: item.label
+  }));
+}
+function getSeriesColor(key, index, colors) {
+  if (Array.isArray(colors)) {
+    return colors[index] || defaultChartColors[index % defaultChartColors.length];
+  }
+  return colors?.[key] || defaultChartColors[index % defaultChartColors.length];
+}
+function getChartConfigWithColors(config, keys, colors) {
+  return keys.reduce((nextConfig, key, index) => {
+    const item = config[key];
+    if (item?.theme && !colors) {
+      nextConfig[key] = item;
+      return nextConfig;
+    }
+    nextConfig[key] = {
+      label: item?.label || key,
+      icon: item?.icon,
+      color: colors ? getSeriesColor(key, index, colors) : item?.color || getSeriesColor(key, index)
+    };
+    return nextConfig;
+  }, {});
+}
+function buildChartConfig(keys, colors) {
+  return keys.reduce((cfg, key, index) => {
+    cfg[key] = {
+      label: key,
+      color: getSeriesColor(key, index, colors)
+    };
+    return cfg;
+  }, {});
+}
+function formatTick(value) {
+  if (typeof value !== "number") {
+    return value;
+  }
+  return Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(value);
+}
+function defaultFilterData(data, period) {
+  const match = period.match(/^(\d+)/);
+  if (!match) {
+    return data;
+  }
+  const limit = Number(match[1]);
+  return data.slice(Math.max(data.length - limit, 0));
+}
+function getErrorDescription(error) {
+  if (typeof error === "string") {
+    return error;
+  }
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return void 0;
+}
+function getBarSize(barSize = "md") {
+  return typeof barSize === "number" ? barSize : chartBarSizes[barSize];
+}
+function hasChartData(data, series) {
+  if (!data.length || !series.length) {
+    return false;
+  }
+  return data.some(
+    (item) => series.some((serie) => {
+      const value = item[serie.key];
+      return value !== null && value !== void 0 && value !== "";
+    })
+  );
+}
+function hasPieData(data, nameKey, valueKey) {
+  return data.some((item) => {
+    const name = item[nameKey];
+    const value = item[valueKey];
+    return name !== null && name !== void 0 && name !== "" && value !== null && value !== void 0 && value !== "";
+  });
+}
+function ChartState({
+  type,
+  className,
+  error,
+  onRetry,
+  retryLabel = "Try again",
+  emptyTitle = "No data available",
+  emptyDescription = "There is no data available for this chart yet.",
+  errorTitle = "Connection error",
+  errorDescription,
+  loadingLabel = "Loading chart data"
+}) {
+  if (type === "loading") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-[240px] flex-col justify-end gap-3 rounded-[var(--radius-card)] border border-border p-6",
+          className
+        ),
+        "aria-label": typeof loadingLabel === "string" ? loadingLabel : void 0,
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-2/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-14 w-3/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-4/5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-36 w-full" })
+        ]
+      }
+    );
+  }
+  if (type === "error") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex min-h-[240px] items-center justify-center rounded-[var(--radius-card)] border border-border p-6",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "max-w-xl", children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: errorTitle }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: errorDescription || getErrorDescription(error) || "Unable to load chart data. Check your connection and try again." }),
+          onRetry ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: onRetry, children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" }),
+            retryLabel
+          ] }) }) : null
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Empty, { className: cn("min-h-[240px]", className), children: [
+    /* @__PURE__ */ jsx(EmptyIcon, { children: /* @__PURE__ */ jsx(BarChart3, { className: "size-10 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx(EmptyTitle, { children: emptyTitle }),
+    /* @__PURE__ */ jsx(EmptyDescription, { children: emptyDescription }),
+    onRetry ? /* @__PURE__ */ jsx(EmptyAction, { children: /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: onRetry, children: [
+      /* @__PURE__ */ jsx(WifiOff, { className: "size-4" }),
+      retryLabel
+    ] }) }) : null
+  ] });
+}
+function getChartState(state, hasData, className) {
+  if (state.isLoading) {
+    return /* @__PURE__ */ jsx(ChartState, { ...state, type: "loading", className });
+  }
+  if (state.error) {
+    return /* @__PURE__ */ jsx(ChartState, { ...state, type: "error", className });
+  }
+  if (!hasData) {
+    return /* @__PURE__ */ jsx(ChartState, { ...state, type: "empty", className });
+  }
+  return null;
+}
+function ChartCard({
+  title,
+  description,
+  action,
+  footer,
+  children,
+  className,
+  contentClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full min-w-0 overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null,
+      action ? /* @__PURE__ */ jsx(CardAction, { children: action }) : null
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: contentClassName, children }),
+    footer ? /* @__PURE__ */ jsx(CardFooter, { children: footer }) : null
+  ] });
+}
+function AreaGradientDefs({
+  seriesKeys,
+  opacity = 0.3
+}) {
+  return /* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: `var(--color-${key})`, stopOpacity: opacity }),
+    /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: `var(--color-${key})`, stopOpacity: 0 })
+  ] }, key)) });
+}
+function DashboardBarChart({
+  data,
+  config,
+  indexKey = "name",
+  series,
+  colors,
+  barSize = "md",
+  stacked = false,
+  showGrid = true,
+  showLegend = true,
+  valueFormatter = formatTick,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+  ...props
+}) {
+  const chartSeries = getChartSeries(config, series);
+  const chartConfig = getChartConfigWithColors(
+    config,
+    chartSeries.map((item) => item.key),
+    colors
+  );
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      onRetry,
+      retryLabel,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel
+    },
+    hasChartData(data, chartSeries),
+    cn("h-[320px] w-full", stateClassName)
+  );
+  const barElements = React.useMemo(() => {
+    const topOfStack = /* @__PURE__ */ new Set();
+    if (stacked) {
+      const lastByStack = /* @__PURE__ */ new Map();
+      chartSeries.forEach((s) => lastByStack.set(s.stackId || "total", s.key));
+      lastByStack.forEach((key) => topOfStack.add(key));
+    }
+    return chartSeries.map((item) => {
+      const isTop = !stacked || topOfStack.has(item.key);
+      return /* @__PURE__ */ jsx(
+        RechartsPrimitive.Bar,
+        {
+          dataKey: item.key,
+          fill: `var(--color-${item.key})`,
+          radius: isTop ? [4, 4, 0, 0] : [0, 0, 0, 0],
+          barSize: getBarSize(barSize),
+          stackId: stacked ? item.stackId || "total" : item.stackId,
+          isAnimationActive: true,
+          animationDuration: 600,
+          animationEasing: "ease-out"
+        },
+        item.key
+      );
+    });
+  }, [stacked, chartSeries]);
+  if (chartState) {
+    return chartState;
+  }
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[320px] w-full", className), ...props, children: /* @__PURE__ */ jsxs(RechartsPrimitive.BarChart, { data, accessibilityLayer: true, barGap: 4, children: [
+    showGrid ? /* @__PURE__ */ jsx(
+      RechartsPrimitive.CartesianGrid,
+      {
+        vertical: false,
+        strokeDasharray: "3 3",
+        stroke: "var(--border)",
+        strokeOpacity: 0.5
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.XAxis,
+      {
+        dataKey: indexKey,
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.YAxis,
+      {
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        tickFormatter: valueFormatter
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        cursor: { fill: "var(--muted)", opacity: 0.4, radius: 4 },
+        content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
+      }
+    ),
+    showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
+    barElements
+  ] }) });
+}
+function DashboardLineChart({
+  data,
+  config,
+  indexKey = "name",
+  series,
+  colors,
+  showDots = false,
+  showGrid = true,
+  showLegend = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  valueFormatter = formatTick,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+  ...props
+}) {
+  const chartSeries = getChartSeries(config, series);
+  const chartConfig = getChartConfigWithColors(
+    config,
+    chartSeries.map((item) => item.key),
+    colors
+  );
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      onRetry,
+      retryLabel,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel
+    },
+    hasChartData(data, chartSeries),
+    cn("h-[320px] w-full", stateClassName)
+  );
+  if (chartState) {
+    return chartState;
+  }
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[320px] w-full", className), ...props, children: /* @__PURE__ */ jsxs(RechartsPrimitive.LineChart, { data, accessibilityLayer: true, children: [
+    showGrid ? /* @__PURE__ */ jsx(
+      RechartsPrimitive.CartesianGrid,
+      {
+        vertical: false,
+        strokeDasharray: "3 3",
+        stroke: "var(--border)",
+        strokeOpacity: 0.5
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.XAxis,
+      {
+        dataKey: indexKey,
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.YAxis,
+      {
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        tickFormatter: valueFormatter
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: "line" }) }),
+    showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
+    chartSeries.map((item) => /* @__PURE__ */ jsx(
+      RechartsPrimitive.Line,
+      {
+        type: curveType,
+        dataKey: item.key,
+        stroke: `var(--color-${item.key})`,
+        strokeWidth,
+        dot: showDots ? { r: 3, fill: `var(--color-${item.key})`, strokeWidth: 0 } : false,
+        activeDot: { r: 5, strokeWidth: 0 },
+        yAxisId: item.yAxisId,
+        isAnimationActive: true,
+        animationDuration: 600,
+        animationEasing: "ease-out"
+      },
+      item.key
+    ))
+  ] }) });
+}
+function HorizontalBarChart({
+  data,
+  config,
+  indexKey = "name",
+  series,
+  colors,
+  barSize = "md",
+  stacked = false,
+  categoryWidth = 96,
+  showGrid = true,
+  showLegend = true,
+  valueFormatter = formatTick,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+  ...props
+}) {
+  const chartSeries = getChartSeries(config, series);
+  const chartConfig = getChartConfigWithColors(
+    config,
+    chartSeries.map((item) => item.key),
+    colors
+  );
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      onRetry,
+      retryLabel,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel
+    },
+    hasChartData(data, chartSeries),
+    cn("h-[320px] w-full", stateClassName)
+  );
+  if (chartState) {
+    return chartState;
+  }
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[320px] w-full", className), ...props, children: /* @__PURE__ */ jsxs(
+    RechartsPrimitive.BarChart,
+    {
+      data,
+      layout: "vertical",
+      accessibilityLayer: true,
+      margin: { left: 8, right: 16 },
+      children: [
+        showGrid ? /* @__PURE__ */ jsx(
+          RechartsPrimitive.CartesianGrid,
+          {
+            horizontal: false,
+            strokeDasharray: "3 3",
+            stroke: "var(--border)",
+            strokeOpacity: 0.5
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          RechartsPrimitive.XAxis,
+          {
+            type: "number",
+            tickLine: false,
+            axisLine: false,
+            tickMargin: 8,
+            tickFormatter: valueFormatter
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RechartsPrimitive.YAxis,
+          {
+            dataKey: indexKey,
+            type: "category",
+            tickLine: false,
+            axisLine: false,
+            tickMargin: 8,
+            width: categoryWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+        showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
+        chartSeries.map((item) => /* @__PURE__ */ jsx(
+          RechartsPrimitive.Bar,
+          {
+            dataKey: item.key,
+            fill: `var(--color-${item.key})`,
+            radius: [0, 4, 4, 0],
+            barSize: getBarSize(barSize),
+            stackId: stacked ? item.stackId || "total" : item.stackId,
+            isAnimationActive: true,
+            animationDuration: 600,
+            animationEasing: "ease-out"
+          },
+          item.key
+        ))
+      ]
+    }
+  ) });
+}
+function InteractiveTimeSeriesChart({
+  data,
+  config,
+  indexKey = "date",
+  series,
+  colors,
+  periods = defaultPeriods,
+  defaultPeriod = periods[1]?.value || periods[0]?.value || "30d",
+  defaultSeries,
+  filterData = defaultFilterData,
+  showGrid = true,
+  showLegend = false,
+  showDots = false,
+  gradientFill = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  valueFormatter = formatTick,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+  ...props
+}) {
+  const chartSeries = getChartSeries(config, series);
+  const chartConfig = getChartConfigWithColors(
+    config,
+    chartSeries.map((item) => item.key),
+    colors
+  );
+  const [period, setPeriod] = React.useState(defaultPeriod);
+  const [activeSeries, setActiveSeries] = React.useState(
+    defaultSeries || chartSeries[0]?.key || ""
+  );
+  const filteredData = React.useMemo(() => filterData(data, period), [data, filterData, period]);
+  const visibleSeries = chartSeries.length > 1 ? chartSeries.filter((item) => item.key === activeSeries) : chartSeries;
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      onRetry,
+      retryLabel,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel
+    },
+    hasChartData(filteredData, visibleSeries),
+    cn("h-[320px] w-full", stateClassName)
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      chartSeries.length > 1 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+          role: "group",
+          "aria-label": "Selecionar metrica do grafico",
+          children: chartSeries.map((item) => {
+            const label = item.label || config[item.key]?.label || item.key;
+            return /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                "aria-pressed": activeSeries === item.key,
+                onClick: () => setActiveSeries(item.key),
+                className: cn(
+                  "h-8 px-3 text-sm font-medium transition-all",
+                  activeSeries === item.key ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: label
+              },
+              item.key
+            );
+          })
+        }
+      ) : /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsxs(Select, { value: period, onValueChange: setPeriod, children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: "w-full sm:w-[160px]",
+            size: "sm",
+            "aria-label": "Selecionar periodo do grafico",
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Period" })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { children: periods.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) })
+      ] })
+    ] }),
+    chartState || /* @__PURE__ */ jsx(
+      ChartContainer,
+      {
+        config: chartConfig,
+        className: cn("h-[320px] w-full", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(RechartsPrimitive.AreaChart, { data: filteredData, accessibilityLayer: true, children: [
+          gradientFill && /* @__PURE__ */ jsx(AreaGradientDefs, { seriesKeys: visibleSeries.map((s) => s.key), opacity: 0.4 }),
+          showGrid ? /* @__PURE__ */ jsx(
+            RechartsPrimitive.CartesianGrid,
+            {
+              vertical: false,
+              strokeDasharray: "3 3",
+              stroke: "var(--border)",
+              strokeOpacity: 0.5
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            RechartsPrimitive.XAxis,
+            {
+              dataKey: indexKey,
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RechartsPrimitive.YAxis,
+            {
+              tickLine: false,
+              axisLine: false,
+              tickMargin: 8,
+              tickFormatter: valueFormatter
+            }
+          ),
+          /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: "line" }) }),
+          showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
+          visibleSeries.map((item) => /* @__PURE__ */ jsx(
+            RechartsPrimitive.Area,
+            {
+              type: curveType,
+              dataKey: item.key,
+              stroke: `var(--color-${item.key})`,
+              fill: gradientFill ? `url(#gradient-${item.key})` : `var(--color-${item.key})`,
+              fillOpacity: gradientFill ? 1 : 0.16,
+              strokeWidth,
+              dot: showDots ? { r: 3, fill: `var(--color-${item.key})`, strokeWidth: 0 } : false,
+              activeDot: { r: 5, strokeWidth: 0 },
+              isAnimationActive: true,
+              animationDuration: 600,
+              animationEasing: "ease-out"
+            },
+            item.key
+          ))
+        ] })
+      }
+    )
+  ] });
+}
+function ComboMetricChart({
+  data,
+  config,
+  indexKey = "name",
+  series,
+  colors,
+  barSize = "md",
+  showGrid = true,
+  showLegend = true,
+  gradientFill = false,
+  curveType = "monotone",
+  valueFormatter = formatTick,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+  ...props
+}) {
+  const chartSeries = getChartSeries(config, series);
+  const chartConfig = getChartConfigWithColors(
+    config,
+    chartSeries.map((item) => item.key),
+    colors
+  );
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      onRetry,
+      retryLabel,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel
+    },
+    hasChartData(data, chartSeries),
+    cn("h-[340px] w-full", stateClassName)
+  );
+  if (chartState) {
+    return chartState;
+  }
+  const areaSeries = gradientFill ? chartSeries.filter((s) => s.type === "area").map((s) => s.key) : [];
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[340px] w-full", className), ...props, children: /* @__PURE__ */ jsxs(RechartsPrimitive.ComposedChart, { data, accessibilityLayer: true, children: [
+    gradientFill && areaSeries.length > 0 && /* @__PURE__ */ jsx(AreaGradientDefs, { seriesKeys: areaSeries, opacity: 0.35 }),
+    showGrid ? /* @__PURE__ */ jsx(
+      RechartsPrimitive.CartesianGrid,
+      {
+        vertical: false,
+        strokeDasharray: "3 3",
+        stroke: "var(--border)",
+        strokeOpacity: 0.5
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.XAxis,
+      {
+        dataKey: indexKey,
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.YAxis,
+      {
+        tickLine: false,
+        axisLine: false,
+        tickMargin: 8,
+        tickFormatter: valueFormatter
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
+    showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }) : null,
+    chartSeries.map(
+      (item) => item.type === "line" ? /* @__PURE__ */ jsx(
+        RechartsPrimitive.Line,
+        {
+          type: curveType,
+          dataKey: item.key,
+          stroke: `var(--color-${item.key})`,
+          strokeWidth: 2,
+          dot: false,
+          activeDot: { r: 5, strokeWidth: 0 },
+          yAxisId: item.yAxisId,
+          isAnimationActive: true,
+          animationDuration: 600,
+          animationEasing: "ease-out"
+        },
+        item.key
+      ) : item.type === "area" ? /* @__PURE__ */ jsx(
+        RechartsPrimitive.Area,
+        {
+          type: curveType,
+          dataKey: item.key,
+          stroke: `var(--color-${item.key})`,
+          fill: gradientFill ? `url(#gradient-${item.key})` : `var(--color-${item.key})`,
+          fillOpacity: gradientFill ? 1 : 0.12,
+          strokeWidth: 2,
+          dot: false,
+          activeDot: { r: 5, strokeWidth: 0 },
+          yAxisId: item.yAxisId,
+          isAnimationActive: true,
+          animationDuration: 600,
+          animationEasing: "ease-out"
+        },
+        item.key
+      ) : /* @__PURE__ */ jsx(
+        RechartsPrimitive.Bar,
+        {
+          dataKey: item.key,
+          fill: `var(--color-${item.key})`,
+          radius: [4, 4, 0, 0],
+          barSize: getBarSize(barSize),
+          yAxisId: item.yAxisId,
+          isAnimationActive: true,
+          animationDuration: 600,
+          animationEasing: "ease-out"
+        },
+        item.key
+      )
+    )
+  ] }) });
+}
+function DonutBreakdownChart({
+  data,
+  config,
+  nameKey = "name",
+  valueKey = "value",
+  colors,
+  centerLabel,
+  centerValue,
+  showLegend = true,
+  innerRadius = "58%",
+  outerRadius = "82%",
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className,
+  ...props
+}) {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const chartKeys = data.map((entry, index) => String(entry[nameKey] || `segment-${index}`));
+  const chartConfig = getChartConfigWithColors(config, chartKeys, colors);
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      onRetry,
+      retryLabel,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel
+    },
+    hasPieData(data, nameKey, valueKey),
+    cn("h-[320px] w-full", stateClassName)
+  );
+  if (chartState) {
+    return chartState;
+  }
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[320px] w-full", className), ...props, children: /* @__PURE__ */ jsxs(RechartsPrimitive.PieChart, { accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        cursor: false,
+        content: /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true, nameKey })
+      }
+    ),
+    showLegend ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey }), verticalAlign: "bottom" }) : null,
+    /* @__PURE__ */ jsxs(
+      RechartsPrimitive.Pie,
+      {
+        data,
+        dataKey: valueKey,
+        nameKey,
+        innerRadius,
+        outerRadius,
+        paddingAngle: 3,
+        activeIndex,
+        onMouseEnter: (_, index) => setActiveIndex(index),
+        isAnimationActive: true,
+        animationDuration: 600,
+        animationEasing: "ease-out",
+        children: [
+          data.map((entry, index) => {
+            const key = String(entry[nameKey] || `segment-${index}`);
+            return /* @__PURE__ */ jsx(
+              RechartsPrimitive.Cell,
+              {
+                fill: `var(--color-${key})`,
+                opacity: index === activeIndex ? 1 : 0.7,
+                stroke: "transparent"
+              },
+              key
+            );
+          }),
+          centerValue || centerLabel ? /* @__PURE__ */ jsx(
+            RechartsPrimitive.Label,
+            {
+              position: "center",
+              content: ({ viewBox }) => {
+                if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
+                  return null;
+                }
+                return /* @__PURE__ */ jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", dominantBaseline: "middle", children: [
+                  centerValue ? /* @__PURE__ */ jsx(
+                    "tspan",
+                    {
+                      x: viewBox.cx,
+                      y: viewBox.cy,
+                      className: "fill-foreground text-2xl font-semibold",
+                      children: centerValue
+                    }
+                  ) : null,
+                  centerLabel ? /* @__PURE__ */ jsx(
+                    "tspan",
+                    {
+                      x: viewBox.cx,
+                      y: Number(viewBox.cy) + 22,
+                      className: "fill-muted-foreground text-xs",
+                      children: centerLabel
+                    }
+                  ) : null
+                ] });
+              }
+            }
+          ) : null
+        ]
+      }
+    )
+  ] }) });
+}
+function SparklineChart({
+  data,
+  dataKey,
+  color = "var(--chart-1)",
+  filled = true,
+  showEndDot = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  className
+}) {
+  const sparkId = React.useId().replace(/:/g, "");
+  const lastPoint = data[data.length - 1];
+  const lastValue = lastPoint ? lastPoint[dataKey] : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-12 w-full min-w-0", className), children: [
+    /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+      RechartsPrimitive.AreaChart,
+      {
+        data,
+        margin: { top: 4, right: showEndDot ? 8 : 0, bottom: 0, left: 0 },
+        children: [
+          filled && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `spark-gradient-${sparkId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color, stopOpacity: 0.3 }),
+            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color, stopOpacity: 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            RechartsPrimitive.Area,
+            {
+              type: curveType,
+              dataKey,
+              stroke: color,
+              strokeWidth,
+              fill: filled ? `url(#spark-gradient-${sparkId})` : "none",
+              fillOpacity: 1,
+              dot: false,
+              activeDot: false,
+              isAnimationActive: true,
+              animationDuration: 600,
+              animationEasing: "ease-out"
+            }
+          )
+        ]
+      }
+    ) }),
+    showEndDot && lastValue !== void 0 && lastValue !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute right-0 top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full ring-2 ring-background",
+        style: { backgroundColor: color }
+      }
+    )
+  ] });
+}
+function RadarMetricChart({
+  data,
+  labelKey,
+  series,
+  colors,
+  filled = true,
+  fillOpacity = 0.25,
+  showDots = false,
+  showGrid = true,
+  showLegend,
+  valueFormatter,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className
+}) {
+  const chartConfig = React.useMemo(
+    () => buildChartConfig(
+      series.map((s) => s.key),
+      colors
+    ),
+    [series, colors]
+  );
+  const hasData = data.length > 0 && series.length > 0;
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel,
+      stateClassName,
+      onRetry,
+      retryLabel
+    },
+    hasData
+  );
+  const displayLegend = showLegend ?? series.length > 1;
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[300px] w-full", className), children: chartState ?? /* @__PURE__ */ jsxs(RechartsPrimitive.RadarChart, { data, accessibilityLayer: true, children: [
+    showGrid && /* @__PURE__ */ jsx(RechartsPrimitive.PolarGrid, { stroke: "var(--border)", strokeOpacity: 0.6 }),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.PolarAngleAxis,
+      {
+        dataKey: labelKey,
+        tick: { fill: "var(--muted-foreground)", fontSize: 12 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.PolarRadiusAxis,
+      {
+        tick: false,
+        axisLine: false,
+        tickFormatter: valueFormatter
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        content: /* @__PURE__ */ jsx(
+          ChartTooltipContent,
+          {
+            formatter: valueFormatter ? (v) => valueFormatter(v) : void 0
+          }
+        )
+      }
+    ),
+    displayLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+    series.map((s) => /* @__PURE__ */ jsx(
+      RechartsPrimitive.Radar,
+      {
+        name: s.label ?? s.key,
+        dataKey: s.key,
+        stroke: `var(--color-${s.key})`,
+        fill: filled ? `var(--color-${s.key})` : "none",
+        fillOpacity: filled ? fillOpacity : 0,
+        dot: showDots ? { r: 3, fill: `var(--color-${s.key})` } : false,
+        isAnimationActive: true,
+        animationDuration: 600,
+        animationEasing: "ease-out"
+      },
+      s.key
+    ))
+  ] }) });
+}
+function PieMetricChart({
+  data,
+  nameKey,
+  valueKey,
+  colors,
+  outerRadius = "80%",
+  innerRadius = 0,
+  showLabels = false,
+  showLegend = true,
+  explodeIndex,
+  explodeOffset = 12,
+  valueFormatter,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className
+}) {
+  const names = React.useMemo(() => data.map((d) => String(d[nameKey] ?? "")), [data, nameKey]);
+  const chartConfig = React.useMemo(() => buildChartConfig(names, colors), [names, colors]);
+  const hasData = hasPieData(data, nameKey, valueKey);
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel,
+      stateClassName,
+      onRetry,
+      retryLabel
+    },
+    hasData
+  );
+  return /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: cn("h-[300px] w-full", className), children: chartState ?? /* @__PURE__ */ jsxs(RechartsPrimitive.PieChart, { accessibilityLayer: true, children: [
+    /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        content: /* @__PURE__ */ jsx(
+          ChartTooltipContent,
+          {
+            nameKey,
+            formatter: valueFormatter ? (v) => valueFormatter(v) : void 0
+          }
+        )
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, { nameKey }) }),
+    /* @__PURE__ */ jsx(
+      RechartsPrimitive.Pie,
+      {
+        data,
+        dataKey: valueKey,
+        nameKey,
+        outerRadius,
+        innerRadius,
+        paddingAngle: 2,
+        label: showLabels ? ({ cx, cy, midAngle, innerRadius: ir, outerRadius: or, percent }) => {
+          const RADIAN = Math.PI / 180;
+          const radius = Number(ir) + (Number(or) - Number(ir)) * 1.35;
+          const x = Number(cx) + radius * Math.cos(-midAngle * RADIAN);
+          const y = Number(cy) + radius * Math.sin(-midAngle * RADIAN);
+          return percent > 0.04 ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              x,
+              y,
+              fill: "var(--foreground)",
+              textAnchor: x > Number(cx) ? "start" : "end",
+              dominantBaseline: "central",
+              fontSize: 12,
+              fontWeight: 500,
+              children: `${(percent * 100).toFixed(0)}%`
+            }
+          ) : null;
+        } : false,
+        labelLine: false,
+        isAnimationActive: true,
+        animationDuration: 600,
+        animationEasing: "ease-out",
+        children: data.map((entry, index) => {
+          const name = String(entry[nameKey] ?? "");
+          const isExploded = index === explodeIndex;
+          return /* @__PURE__ */ jsx(
+            RechartsPrimitive.Cell,
+            {
+              fill: chartConfig[name]?.color ?? `var(--chart-${index % 8 + 1})`,
+              stroke: "var(--background)",
+              strokeWidth: 2,
+              style: isExploded ? {
+                filter: `drop-shadow(0 4px 8px color-mix(in srgb, ${chartConfig[name]?.color ?? "var(--chart-1)"} 40%, transparent))`
+              } : void 0
+            },
+            `cell-${index}`
+          );
+        })
+      }
+    )
+  ] }) });
+}
+function RadialBarMetricChart({
+  data,
+  dataKey = "value",
+  nameKey = "name",
+  colors,
+  innerRadius = "30%",
+  outerRadius = "100%",
+  startAngle = 90,
+  endAngle = -270,
+  showBackground = true,
+  showLegend = true,
+  valueFormatter,
+  isLoading,
+  error,
+  onRetry,
+  retryLabel,
+  emptyTitle,
+  emptyDescription,
+  errorTitle,
+  errorDescription,
+  loadingLabel,
+  stateClassName,
+  className
+}) {
+  const names = React.useMemo(() => data.map((d) => String(d[nameKey] ?? "")), [data, nameKey]);
+  const chartConfig = React.useMemo(() => buildChartConfig(names, colors), [names, colors]);
+  const hasData = data.length > 0;
+  const chartState = getChartState(
+    {
+      isLoading,
+      error,
+      emptyTitle,
+      emptyDescription,
+      errorTitle,
+      errorDescription,
+      loadingLabel,
+      stateClassName,
+      onRetry,
+      retryLabel
+    },
+    hasData
+  );
+  const coloredData = React.useMemo(
+    () => data.map((item, index) => {
+      const name = String(item[nameKey] ?? "");
+      return {
+        ...item,
+        fill: chartConfig[name]?.color ?? `var(--chart-${index % 8 + 1})`
+      };
+    }),
+    [data, nameKey, chartConfig]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx(ChartContainer, { config: chartConfig, className: "h-[260px] w-full", children: chartState ?? /* @__PURE__ */ jsxs(
+      RechartsPrimitive.RadialBarChart,
+      {
+        data: coloredData,
+        innerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+        accessibilityLayer: true,
+        children: [
+          /* @__PURE__ */ jsx(
+            ChartTooltip,
+            {
+              cursor: false,
+              content: /* @__PURE__ */ jsx(
+                ChartTooltipContent,
+                {
+                  nameKey,
+                  formatter: valueFormatter ? (v) => valueFormatter(v) : void 0
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RechartsPrimitive.RadialBar,
+            {
+              dataKey,
+              background: showBackground ? { fill: "var(--muted)" } : false,
+              cornerRadius: 6,
+              isAnimationActive: true,
+              animationDuration: 700,
+              animationEasing: "ease-out"
+            }
+          )
+        ]
+      }
+    ) }),
+    showLegend && !chartState && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-x-4 gap-y-1.5 px-2", children: coloredData.map((item, index) => {
+      const d = item;
+      const name = String(d[nameKey] ?? "");
+      const fillColor = d.fill ?? `var(--chart-${index % 8 + 1})`;
+      const val = d[dataKey];
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+            style: { backgroundColor: fillColor }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          name,
+          val !== void 0 && val !== null && /* @__PURE__ */ jsx("span", { className: "ml-1 font-medium text-foreground", children: valueFormatter ? valueFormatter(val) : String(val) })
+        ] })
+      ] }, name);
+    }) })
+  ] });
+}
+function GaugeChart({
+  value,
+  min = 0,
+  max = 100,
+  thresholds,
+  label,
+  valueFormatter,
+  showNeedle = true,
+  className
+}) {
+  const percent = Math.min(1, Math.max(0, (value - min) / (max - min)));
+  const percentInt = Math.round(percent * 100);
+  const activeColor = React.useMemo(() => {
+    if (!thresholds || thresholds.length === 0) return "var(--chart-1)";
+    for (const t of thresholds) {
+      if (percentInt <= t.value) return t.color;
+    }
+    return thresholds[thresholds.length - 1].color;
+  }, [thresholds, percentInt]);
+  const displayText = valueFormatter ? valueFormatter(value, percentInt) : `${percentInt}%`;
+  const cx = 100;
+  const cy = 100;
+  const R = 80;
+  const r = 54;
+  const polar = (angleDeg, radius) => {
+    const rad = angleDeg * Math.PI / 180;
+    return {
+      x: cx + radius * Math.cos(rad),
+      y: cy - radius * Math.sin(rad)
+    };
+  };
+  const trackStart = polar(180, R);
+  const trackEnd = polar(0, R);
+  const trackStartI = polar(180, r);
+  const trackEndI = polar(0, r);
+  const trackPath = [
+    `M ${trackStart.x} ${trackStart.y}`,
+    `A ${R} ${R} 0 0 1 ${trackEnd.x} ${trackEnd.y}`,
+    `L ${trackEndI.x} ${trackEndI.y}`,
+    `A ${r} ${r} 0 0 0 ${trackStartI.x} ${trackStartI.y}`,
+    "Z"
+  ].join(" ");
+  const valueAngle = 180 - percent * 180;
+  const valueEnd = polar(valueAngle, R);
+  const valueEndI = polar(valueAngle, r);
+  const valuePath = percent <= 0 ? "" : percent >= 1 ? trackPath : [
+    `M ${trackStart.x} ${trackStart.y}`,
+    `A ${R} ${R} 0 0 1 ${valueEnd.x} ${valueEnd.y}`,
+    `L ${valueEndI.x} ${valueEndI.y}`,
+    `A ${r} ${r} 0 0 0 ${trackStartI.x} ${trackStartI.y}`,
+    "Z"
+  ].join(" ");
+  const needleAngle = 180 - percent * 180;
+  const needleTip = polar(needleAngle, r - 6);
+  const needleBase1 = polar(needleAngle + 90, 5);
+  const needleBase2 = polar(needleAngle - 90, 5);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-full max-w-[260px]", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 200 130", className: "w-full", "aria-label": `Gauge: ${displayText}`, children: [
+      /* @__PURE__ */ jsx("path", { d: trackPath, fill: "var(--muted)" }),
+      valuePath && /* @__PURE__ */ jsx("path", { d: valuePath, fill: activeColor }),
+      showNeedle && /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${needleTip.x},${needleTip.y} ${needleBase1.x},${needleBase1.y} ${needleBase2.x},${needleBase2.y}`,
+            fill: "var(--foreground)",
+            opacity: 0.85
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx, cy, r: 5, fill: "var(--foreground)" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: cx,
+          y: cy + 18,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          fontSize: 22,
+          fontWeight: 700,
+          fill: "currentColor",
+          className: "fill-foreground",
+          children: displayText
+        }
+      ),
+      label && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: cx,
+          y: cy + 36,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          fontSize: 10,
+          fill: "currentColor",
+          className: "fill-muted-foreground",
+          children: label
+        }
+      )
+    ] }) }),
+    thresholds && thresholds.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-x-3 gap-y-1", children: thresholds.map((t, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-block h-2 w-2 shrink-0 rounded-full",
+          style: { backgroundColor: t.color }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t.label })
+    ] }, i)) })
+  ] });
+}
+
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      "data-slot": "table",
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) });
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("text-muted-foreground mt-4 text-sm", className),
+      ...props
+    }
+  );
+}
+
+const Textarea = React.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    const sizeClasses = {
+      sm: "px-2 py-1 text-sm",
+      md: "px-3 py-2 text-base",
+      lg: "px-4 py-3 text-base"
+    };
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "data-slot": "textarea",
+        className: cn(
+          "flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus:ring-2 focus:ring-primary focus:border-transparent",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          sizeClasses[size],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const dialogVariants = cva(
+  "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full translate-x-[-50%] translate-y-[-50%] border shadow-elevation-sm duration-200 rounded-[var(--radius-card)] overflow-hidden max-h-[calc(100dvh-2rem)]",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        "2xl": "max-w-2xl",
+        "3xl": "max-w-3xl",
+        "4xl": "max-w-4xl",
+        "5xl": "max-w-5xl",
+        full: "max-w-[calc(100vw-2rem)] h-[calc(100dvh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "lg"
+    }
+  }
+);
+const DialogContent = React.forwardRef(({ className, children, size, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      "data-slot": "dialog-content",
+      className: cn(dialogVariants({ size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0", children }),
+        showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 z-10 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
+          /* @__PURE__ */ jsx(XIcon, {}),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-left shrink-0", className),
+      ...props
+    }
+  );
+}
+function DialogBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-body",
+      className: cn("flex-1 overflow-y-auto min-h-0 -mx-6 px-6", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end shrink-0", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-foreground font-semibold leading-tight text-[length:var(--text-h4)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+function useRichTextEditor({
+  value,
+  onChange
+}) {
+  const editorRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const linkInputRef = useRef(null);
+  const savedSelection = useRef(null);
+  const [wordCount, setWordCount] = useState(0);
+  const [characterCount, setCharacterCount] = useState(0);
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    justifyLeft: false,
+    justifyCenter: false,
+    justifyRight: false,
+    insertUnorderedList: false,
+    insertOrderedList: false,
+    link: false,
+    h1: false,
+    h2: false,
+    h3: false,
+    p: true
+  });
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [linkUrl, setLinkUrl] = useState("https://");
+  const [isLinkOpen, setIsLinkOpen] = useState(false);
+  const [hasSavedSelection, setHasSavedSelection] = useState(false);
+  const findParentTag = useCallback((node, tagName) => {
+    let current = node;
+    while (current && current !== editorRef.current) {
+      if (current.nodeName === tagName) return current;
+      current = current.parentNode;
+    }
+    return null;
+  }, []);
+  const updateActiveFormats = useCallback(() => {
+    let formatBlock = "";
+    try {
+      formatBlock = document.queryCommandValue("formatBlock");
+    } catch (_e) {
+    }
+    const selection = window.getSelection();
+    const anchorNode = selection?.anchorNode;
+    const focusNode = selection?.focusNode;
+    setActiveFormats({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      justifyLeft: document.queryCommandState("justifyLeft"),
+      justifyCenter: document.queryCommandState("justifyCenter"),
+      justifyRight: document.queryCommandState("justifyRight"),
+      insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+      insertOrderedList: document.queryCommandState("insertOrderedList"),
+      link: !!(findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A")),
+      h1: formatBlock === "h1" || formatBlock === "H1",
+      h2: formatBlock === "h2" || formatBlock === "H2",
+      h3: formatBlock === "h3" || formatBlock === "H3",
+      p: formatBlock === "p" || formatBlock === "P" || formatBlock === "div" || formatBlock === "DIV" || formatBlock === ""
+    });
+  }, [findParentTag]);
+  const updateActiveFormatsRef = useRef(updateActiveFormats);
+  useEffect(() => {
+    updateActiveFormatsRef.current = updateActiveFormats;
+  }, [updateActiveFormats]);
+  useEffect(() => {
+    if (editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+    }
+    const handleSelectionChange = () => {
+      if (document.activeElement === editorRef.current) {
+        updateActiveFormatsRef.current();
+      }
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => document.removeEventListener("selectionchange", handleSelectionChange);
+  }, []);
+  useEffect(() => {
+    const text = editorRef.current?.innerText || "";
+    setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+    setCharacterCount(text.trim() ? text.length : 0);
+  }, [value]);
+  const handleInput = useCallback(() => {
+    if (editorRef.current) {
+      onChange?.(editorRef.current.innerHTML);
+      updateActiveFormats();
+      const text = editorRef.current.innerText || "";
+      setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+      setCharacterCount(text.trim() ? text.length : 0);
+    }
+  }, [onChange, updateActiveFormats]);
+  const execCommand = useCallback(
+    (command, val = "") => {
+      document.execCommand(command, false, val);
+      updateActiveFormats();
+      editorRef.current?.focus();
+      if (editorRef.current) {
+        onChange?.(editorRef.current.innerHTML);
+      }
+    },
+    [onChange, updateActiveFormats]
+  );
+  const performSearch = useCallback((text, backward = false) => {
+    if (!text || !editorRef.current) return;
+    const editor = editorRef.current;
+    const selection = window.getSelection();
+    if (!selection) return;
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+    const segments = [];
+    let offset = 0;
+    let node;
+    while (node = walker.nextNode()) {
+      segments.push({ node, start: offset });
+      offset += node.length;
+    }
+    const fullText = segments.reduce((acc, s) => acc + (s.node.textContent ?? ""), "");
+    let searchFrom = 0;
+    if (selection.rangeCount > 0) {
+      const range2 = selection.getRangeAt(0);
+      if (editor.contains(range2.startContainer)) {
+        const seg = segments.find((s) => s.node === range2.startContainer);
+        if (seg) {
+          searchFrom = backward ? seg.start + range2.startOffset - 1 : seg.start + range2.endOffset;
+        }
+      }
+    }
+    const lowerFull = fullText.toLowerCase();
+    const lowerQuery = text.toLowerCase();
+    let matchStart = -1;
+    if (backward) {
+      matchStart = lowerFull.lastIndexOf(lowerQuery, Math.max(0, searchFrom));
+      if (matchStart === -1) matchStart = lowerFull.lastIndexOf(lowerQuery);
+    } else {
+      matchStart = lowerFull.indexOf(lowerQuery, searchFrom);
+      if (matchStart === -1) matchStart = lowerFull.indexOf(lowerQuery);
+    }
+    if (matchStart === -1) return;
+    const matchEnd = matchStart + text.length;
+    const range = document.createRange();
+    let startSet = false;
+    let endSet = false;
+    for (let i = 0; i < segments.length && !endSet; i++) {
+      const seg = segments[i];
+      const segEnd = seg.start + seg.node.length;
+      if (!startSet && matchStart < segEnd && matchStart >= seg.start) {
+        range.setStart(seg.node, matchStart - seg.start);
+        startSet = true;
+      }
+      if (startSet && matchEnd <= segEnd) {
+        range.setEnd(seg.node, matchEnd - seg.start);
+        endSet = true;
+      }
+    }
+    if (startSet && endSet) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      range.startContainer.parentElement?.scrollIntoView?.({ block: "nearest" });
+    }
+  }, []);
+  const handleCreateLink = useCallback(() => {
+    if (savedSelection.current) {
+      const selection2 = window.getSelection();
+      selection2?.removeAllRanges();
+      selection2?.addRange(savedSelection.current);
+    }
+    const selection = window.getSelection();
+    const anchorNode = selection?.anchorNode;
+    const existingLink = findParentTag(anchorNode || null, "A");
+    if (existingLink) {
+      if (linkUrl) {
+        existingLink.setAttribute("href", linkUrl);
+        existingLink.setAttribute("target", "_blank");
+        existingLink.setAttribute("rel", "noopener noreferrer");
+        existingLink.style.color = "hsl(var(--primary))";
+        existingLink.style.textDecoration = "underline";
+        existingLink.style.cursor = "pointer";
+      }
+      handleInput();
+      setIsLinkOpen(false);
+      savedSelection.current = null;
+      return;
+    }
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return;
+    }
+    if (linkUrl) {
+      document.execCommand("createLink", false, linkUrl);
+      setTimeout(() => {
+        const anchor = findParentTag(window.getSelection()?.anchorNode || null, "A");
+        if (anchor) {
+          anchor.setAttribute("target", "_blank");
+          anchor.setAttribute("rel", "noopener noreferrer");
+          anchor.style.color = "hsl(var(--primary))";
+          anchor.style.textDecoration = "underline";
+          anchor.style.cursor = "pointer";
+        }
+        handleInput();
+      }, 10);
+      setIsLinkOpen(false);
+      savedSelection.current = null;
+    }
+  }, [linkUrl, findParentTag, handleInput]);
+  const handleUnlink = useCallback(() => {
+    const selection = window.getSelection();
+    const anchorNode = selection?.anchorNode;
+    const existingLink = findParentTag(anchorNode || null, "A");
+    if (existingLink) {
+      const parent = existingLink.parentNode;
+      while (existingLink.firstChild) {
+        parent?.insertBefore(existingLink.firstChild, existingLink);
+      }
+      parent?.removeChild(existingLink);
+      handleInput();
+    } else {
+      document.execCommand("unlink", false, "");
+    }
+  }, [findParentTag, handleInput]);
+  const onLinkPopoverOpenChange = useCallback(
+    (open) => {
+      if (open) {
+        const selection = window.getSelection();
+        const anchorNode = selection?.anchorNode;
+        const focusNode = selection?.focusNode;
+        const existingLink = findParentTag(anchorNode || null, "A") || findParentTag(focusNode || null, "A");
+        if (existingLink) {
+          setLinkUrl(existingLink.getAttribute("href") || "https://");
+        } else {
+          setLinkUrl("https://");
+        }
+        if (selection && selection.rangeCount > 0 && (!selection.isCollapsed || existingLink)) {
+          savedSelection.current = selection.getRangeAt(0).cloneRange();
+          setHasSavedSelection(true);
+        } else {
+          savedSelection.current = null;
+          setHasSavedSelection(false);
+        }
+        setTimeout(() => linkInputRef.current?.focus(), 100);
+      } else {
+        setHasSavedSelection(false);
+      }
+      setIsLinkOpen(open);
+    },
+    [findParentTag]
+  );
+  return {
+    // Refs
+    editorRef,
+    searchInputRef,
+    linkInputRef,
+    // State
+    activeFormats,
+    isSearchOpen,
+    setIsSearchOpen,
+    searchQuery,
+    setSearchQuery,
+    linkUrl,
+    setLinkUrl,
+    isLinkOpen,
+    hasSavedSelection,
+    // Computed
+    wordCount,
+    characterCount,
+    // Handlers
+    updateActiveFormats,
+    execCommand,
+    handleInput,
+    performSearch,
+    handleCreateLink,
+    handleUnlink,
+    onLinkPopoverOpenChange
+  };
+}
+
+function RichTextEditor({
+  value,
+  onChange,
+  placeholder,
+  className,
+  actionButton,
+  allowSearch = true,
+  allowLinks = true,
+  allowUndoRedo = true,
+  allowHeadings = true,
+  allowFormatting = true,
+  allowAlignment = true,
+  allowLists = true,
+  showWordCount = true,
+  showCharacterCount = true,
+  disabled = false,
+  readOnly = false,
+  onFocus,
+  onBlur,
+  minHeight,
+  maxHeight
+}) {
+  const isEditable = !disabled && !readOnly;
+  const showToolbar = isEditable;
+  const {
+    editorRef,
+    searchInputRef,
+    linkInputRef,
+    activeFormats,
+    isSearchOpen,
+    setIsSearchOpen,
+    searchQuery,
+    setSearchQuery,
+    linkUrl,
+    setLinkUrl,
+    isLinkOpen,
+    hasSavedSelection,
+    wordCount,
+    characterCount,
+    updateActiveFormats,
+    execCommand,
+    handleInput,
+    performSearch,
+    handleCreateLink,
+    handleUnlink,
+    onLinkPopoverOpenChange
+  } = useRichTextEditor({ value, onChange });
+  const getCurrentBlockLabel = () => {
+    if (activeFormats.h1)
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4 mr-1 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: "Título 1" })
+      ] });
+    if (activeFormats.h2)
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4 mr-1 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: "Título 2" })
+      ] });
+    if (activeFormats.h3)
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4 mr-1 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: "Título 3" })
+      ] });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Type, { className: "w-4 h-4 mr-1 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: "Parágrafo" })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full w-full bg-background sm:border border-border sm:shadow-sm sm:rounded-lg overflow-hidden",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        [contenteditable]:empty:before {
+          content: attr(data-placeholder);
+          color: hsl(var(--muted-foreground));
+          pointer-events: none;
+          display: block;
+        }
+        .prose-editor ul {
+          list-style-type: disc !important;
+          padding-left: 1.5rem !important;
+          margin-top: 0.5rem !important;
+          margin-bottom: 0.5rem !important;
+        }
+        .prose-editor ol {
+          list-style-type: decimal !important;
+          padding-left: 1.5rem !important;
+          margin-top: 0.5rem !important;
+          margin-bottom: 0.5rem !important;
+        }
+        .prose-editor b, .prose-editor strong {
+          font-weight: 600 !important;
+        }
+        .prose-editor i, .prose-editor em {
+          font-style: italic !important;
+        }
+        .prose-editor u {
+          text-decoration: underline !important;
+        }
+        .prose-editor h1 {
+          font-size: 2.25rem !important;
+          font-weight: 700 !important;
+          margin-bottom: 1.25rem !important;
+          line-height: 1.2 !important;
+          margin-top: 2rem !important;
+          color: hsl(var(--foreground));
+        }
+        .prose-editor h2 {
+          font-size: 1.75rem !important;
+          font-weight: 600 !important;
+          margin-bottom: 1rem !important;
+          margin-top: 1.5rem !important;
+          color: hsl(var(--foreground));
+        }
+        .prose-editor h3 {
+          font-size: 1.35rem !important;
+          font-weight: 600 !important;
+          margin-bottom: 0.75rem !important;
+          margin-top: 1.25rem !important;
+          color: hsl(var(--foreground));
+        }
+        .prose-editor p {
+          margin-bottom: 1rem !important;
+          line-height: 1.6 !important;
+        }
+        .prose-editor a {
+          color: var(--info) !important;
+          text-decoration: underline !important;
+          cursor: pointer !important;
+        }
+        .prose-editor h1:first-child, .prose-editor h2:first-child, .prose-editor h3:first-child, .prose-editor p:first-child {
+          margin-top: 0 !important;
+        }
+        .prose-editor {
+          outline: none !important;
+        }
+      ` }),
+        showToolbar && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-border bg-muted/30 flex items-center gap-1 flex-wrap shrink-0", children: [
+          allowUndoRedo && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8 text-muted-foreground",
+                onClick: () => execCommand("undo"),
+                title: "Desfazer",
+                "aria-label": "Desfazer",
+                children: /* @__PURE__ */ jsx(Undo, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8 text-muted-foreground",
+                onClick: () => execCommand("redo"),
+                title: "Refazer",
+                "aria-label": "Refazer",
+                children: /* @__PURE__ */ jsx(Redo, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
+          ] }),
+          allowHeadings && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-8 gap-0 text-muted-foreground w-[120px] justify-start px-2",
+                  children: [
+                    getCurrentBlockLabel(),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 ml-auto opacity-50 shrink-0" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-[160px]", style: { zIndex: 9999 }, children: [
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onPointerDown: (e) => e.preventDefault(),
+                    onClick: () => execCommand("formatBlock", "P"),
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsx(Type, { className: "w-4 h-4 text-muted-foreground" }),
+                      " Parágrafo"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onPointerDown: (e) => e.preventDefault(),
+                    onClick: () => execCommand("formatBlock", "H1"),
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4 text-muted-foreground" }),
+                      " Título 1"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onPointerDown: (e) => e.preventDefault(),
+                    onClick: () => execCommand("formatBlock", "H2"),
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4 text-muted-foreground" }),
+                      " Título 2"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    onPointerDown: (e) => e.preventDefault(),
+                    onClick: () => execCommand("formatBlock", "H3"),
+                    className: "gap-2",
+                    children: [
+                      /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4 text-muted-foreground" }),
+                      " Título 3"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
+          ] }),
+          allowFormatting && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.bold && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("bold"),
+                title: "Negrito",
+                "aria-label": "Negrito",
+                children: /* @__PURE__ */ jsx(Bold, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.italic && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("italic"),
+                title: "Itálico",
+                "aria-label": "Itálico",
+                children: /* @__PURE__ */ jsx(Italic, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.underline && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("underline"),
+                title: "Sublinhado",
+                "aria-label": "Sublinhado",
+                children: /* @__PURE__ */ jsx(Underline, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
+          ] }),
+          allowAlignment && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.justifyLeft && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("justifyLeft"),
+                title: "Alinhar à esquerda",
+                "aria-label": "Alinhar à esquerda",
+                children: /* @__PURE__ */ jsx(AlignLeft, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.justifyCenter && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("justifyCenter"),
+                title: "Centralizar",
+                "aria-label": "Centralizar",
+                children: /* @__PURE__ */ jsx(AlignCenter, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.justifyRight && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("justifyRight"),
+                title: "Alinhar à direita",
+                "aria-label": "Alinhar à direita",
+                children: /* @__PURE__ */ jsx(AlignRight, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
+          ] }),
+          allowLists && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.insertUnorderedList && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("insertUnorderedList"),
+                title: "Lista com marcadores",
+                "aria-label": "Lista com marcadores",
+                children: /* @__PURE__ */ jsx(List, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(
+                  "h-8 w-8 text-muted-foreground",
+                  activeFormats.insertOrderedList && "bg-muted text-foreground"
+                ),
+                onClick: () => execCommand("insertOrderedList"),
+                title: "Lista numerada",
+                "aria-label": "Lista numerada",
+                children: /* @__PURE__ */ jsx(ListOrdered, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
+          ] }),
+          allowLinks && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Popover, { open: isLinkOpen, onOpenChange: onLinkPopoverOpenChange, modal: false, children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: cn(
+                    "h-8 w-8 text-muted-foreground",
+                    (activeFormats.link || isLinkOpen) && "bg-muted text-foreground"
+                  ),
+                  title: "Inserir link",
+                  "aria-label": "Inserir link",
+                  children: /* @__PURE__ */ jsx(Link, { className: "w-4 h-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-3", align: "start", style: { zIndex: 9999 }, children: !activeFormats.link && !hasSavedSelection ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground py-1", children: "Selecione um texto para criar um link." }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs font-medium", children: activeFormats.link ? "Editar Link" : "Inserir Link" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      ref: linkInputRef,
+                      placeholder: "https://...",
+                      value: linkUrl,
+                      onChange: (e) => setLinkUrl(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleCreateLink();
+                        }
+                      },
+                      className: "h-8 text-xs"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Button, { size: "sm", className: "h-8", onClick: handleCreateLink, children: "Aplicar" })
+                ] })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8 text-muted-foreground",
+                onClick: handleUnlink,
+                title: "Remover link",
+                "aria-label": "Remover link",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border mx-1 hidden sm:block" })
+          ] }),
+          (allowFormatting || allowHeadings || allowAlignment || allowLists || allowLinks) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-muted-foreground",
+              onClick: () => execCommand("removeFormat"),
+              title: "Limpar formatação",
+              "aria-label": "Limpar formatação",
+              children: /* @__PURE__ */ jsx(Type, { className: "w-4 h-4" })
+            }
+          ),
+          allowSearch && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: cn(
+                "h-8 w-8 text-muted-foreground",
+                isSearchOpen && "bg-muted text-foreground"
+              ),
+              onClick: () => {
+                setIsSearchOpen(!isSearchOpen);
+                if (!isSearchOpen) setTimeout(() => searchInputRef.current?.focus(), 100);
+              },
+              title: "Buscar",
+              "aria-label": "Buscar",
+              children: /* @__PURE__ */ jsx(Search, { className: "w-4 h-4" })
+            }
+          ),
+          actionButton && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            actionButton
+          ] })
+        ] }),
+        isSearchOpen && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 border-b border-border bg-muted/20 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
+            /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: searchInputRef,
+                placeholder: "Buscar no texto...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    performSearch(searchQuery, e.shiftKey);
+                  }
+                  if (e.key === "Escape") {
+                    setIsSearchOpen(false);
+                  }
+                },
+                className: "h-8 pl-8 text-xs bg-background"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => performSearch(searchQuery, true),
+                title: "Anterior",
+                children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => performSearch(searchQuery, false),
+                title: "Próximo",
+                children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
+                onClick: () => setIsSearchOpen(false),
+                title: "Fechar busca",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "hidden sm:block text-[10px] text-muted-foreground ml-auto uppercase tracking-wider font-medium", children: "Pressione Enter para buscar" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto p-4 sm:p-8 bg-background scrollbar-thin",
+            style: { minHeight, maxHeight },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: editorRef,
+                contentEditable: isEditable,
+                role: "textbox",
+                "aria-multiline": "true",
+                "aria-label": placeholder || "Editor de texto",
+                "aria-readonly": readOnly,
+                "aria-disabled": disabled,
+                onInput: handleInput,
+                onSelect: isEditable ? updateActiveFormats : void 0,
+                onFocus: () => {
+                  updateActiveFormats();
+                  onFocus?.();
+                },
+                onBlur,
+                className: "prose-editor min-h-full max-w-none focus:outline-none",
+                "data-placeholder": placeholder
+              }
+            )
+          }
+        ),
+        (showWordCount || showCharacterCount) && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t border-border bg-muted/20 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "text-[10px] sm:text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-2", children: [
+          showWordCount && /* @__PURE__ */ jsxs("span", { children: [
+            wordCount,
+            " ",
+            wordCount === 1 ? "palavra" : "palavras"
+          ] }),
+          showWordCount && showCharacterCount && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "•" }),
+          showCharacterCount && /* @__PURE__ */ jsxs("span", { children: [
+            characterCount,
+            " ",
+            characterCount === 1 ? "caractere" : "caracteres"
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export { Alert as A, EmptyTitle as B, ChartCard as C, DashboardBarChart as D, Empty as E, RadialBarMetricChart as F, GaugeChart as G, HorizontalBarChart as H, InteractiveTimeSeriesChart as I, RichTextEditor as J, TableBody as K, TableCaption as L, TableCell as M, TableFooter as N, TableHead as O, PieMetricChart as P, TableHeader as Q, RadarMetricChart as R, SparklineChart as S, Table as T, TableRow as U, Textarea as V, useChart as W, useRichTextEditor as X, AlertDescription as a, AlertTitle as b, ChartContainer as c, ChartLegend as d, ChartLegendContent as e, ChartStyle as f, ChartTooltip as g, ChartTooltipContent as h, ComboMetricChart as i, DashboardLineChart as j, Dialog as k, DialogBody as l, DialogClose as m, DialogContent as n, DialogDescription as o, DialogFooter as p, DialogHeader as q, DialogOverlay as r, DialogPortal as s, DialogTitle as t, DialogTrigger as u, DonutBreakdownChart as v, EmptyAction as w, EmptyDescription as x, EmptyIcon as y, EmptyImage as z };