@tree-ia/design-system 1.5.2 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +48 -1
  2. package/dist/index.d.mts.map +1 -1
  3. package/dist/index.mjs +204 -80
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import { createPortal } from "react-dom";
4
- import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, File, GripVertical, Image, Inbox, Info, LogOut, Moon, Search, Sun, Upload, User, X, XCircle } from "lucide-react";
5
- import { Bar, Line } from "react-chartjs-2";
6
- import { BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, Title as Title$1, Tooltip as Tooltip$1 } from "chart.js";
4
+ import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, File, GripVertical, Image, Inbox, Info, LogOut, Monitor, Moon, Search, Sun, Upload, User, X, XCircle } from "lucide-react";
5
+ import { Bar, Doughnut, Line } from "react-chartjs-2";
6
+ import { ArcElement, BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, Title as Title$1, Tooltip as Tooltip$1 } from "chart.js";
7
7
  import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
8
8
 
9
9
  //#region src/components/Loading/index.tsx
@@ -35,7 +35,7 @@ function Loading({ size = "md", className = "", text, textColor, color, variant
35
35
 
36
36
  //#endregion
37
37
  //#region src/components/Button/index.tsx
38
- const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
38
+ const cn$30 = (...classes) => classes.filter(Boolean).join(" ");
39
39
  function Button({ children, variant = "primary", size = "md", isLoading = false, icon, iconPosition = "left", className, disabled, ...props }) {
40
40
  const baseStyles = "font-medium rounded-lg transition-all duration-200 ease-out cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--dashboard-primary,#2563EB)] active:scale-[0.97]";
41
41
  const variantStyles = {
@@ -56,7 +56,7 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
56
56
  };
57
57
  const isIconOnly = !!icon && (children === void 0 || children === null || typeof children === "string" && children.trim() === "");
58
58
  return /* @__PURE__ */ jsx("button", {
59
- className: cn$29(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
59
+ className: cn$30(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
60
60
  disabled: disabled || isLoading,
61
61
  ...props,
62
62
  children: isLoading ? /* @__PURE__ */ jsxs("span", {
@@ -81,7 +81,7 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
81
81
 
82
82
  //#endregion
83
83
  //#region src/components/Input/index.tsx
84
- const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
84
+ const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
85
85
  const Input = React.forwardRef(({ className, type = "text", label, error, children, id, ...props }, ref) => {
86
86
  const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
87
87
  return /* @__PURE__ */ jsxs("div", {
@@ -97,7 +97,7 @@ const Input = React.forwardRef(({ className, type = "text", label, error, childr
97
97
  children: [/* @__PURE__ */ jsx("input", {
98
98
  type,
99
99
  id: inputId,
100
- className: cn$28("flex h-10 w-full rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] px-3 py-2 text-sm text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm transition-colors duration-200 focus:border-[var(--dashboard-primary,#37a501)] placeholder:text-[var(--dashboard-text-secondary,#6b7280)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", error ? "border-[var(--dashboard-status-danger,#EF4444)] focus:border-[var(--dashboard-status-danger,#EF4444)]" : void 0, children ? "pr-10" : void 0, className),
100
+ className: cn$29("flex h-10 w-full rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] px-3 py-2 text-sm text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm transition-colors duration-200 focus:border-[var(--dashboard-primary,#37a501)] placeholder:text-[var(--dashboard-text-secondary,#6b7280)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", error ? "border-[var(--dashboard-status-danger,#EF4444)] focus:border-[var(--dashboard-status-danger,#EF4444)]" : void 0, children ? "pr-10" : void 0, className),
101
101
  ref,
102
102
  ...props
103
103
  }), children && /* @__PURE__ */ jsx("div", {
@@ -761,16 +761,16 @@ function FormField({ label, name, type = "text", value, onChange, error, require
761
761
 
762
762
  //#endregion
763
763
  //#region src/components/Tabs/index.tsx
764
- const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
764
+ const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
765
765
  function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
766
766
  if (variant === "pill") return /* @__PURE__ */ jsx("div", {
767
- className: cn$27("flex flex-wrap gap-2", className),
767
+ className: cn$28("flex flex-wrap gap-2", className),
768
768
  role: "tablist",
769
769
  children: tabs.map((tab) => {
770
770
  const isActive = activeTab === tab.id;
771
771
  return /* @__PURE__ */ jsxs("button", {
772
772
  onClick: () => onChange(tab.id),
773
- className: cn$27("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", isActive ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
773
+ className: cn$28("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", isActive ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
774
774
  role: "tab",
775
775
  "aria-selected": isActive,
776
776
  children: [
@@ -780,7 +780,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
780
780
  }),
781
781
  tab.label,
782
782
  tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
783
- className: cn$27("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-white/20 text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
783
+ className: cn$28("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-white/20 text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
784
784
  children: tab.count
785
785
  })
786
786
  ]
@@ -788,7 +788,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
788
788
  })
789
789
  });
790
790
  return /* @__PURE__ */ jsx("div", {
791
- className: cn$27("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
791
+ className: cn$28("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
792
792
  children: /* @__PURE__ */ jsx("nav", {
793
793
  className: "flex gap-6",
794
794
  "aria-label": "Tabs",
@@ -796,7 +796,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
796
796
  const isActive = activeTab === tab.id;
797
797
  return /* @__PURE__ */ jsxs("button", {
798
798
  onClick: () => onChange(tab.id),
799
- className: cn$27("relative pb-3 px-1 text-sm font-medium transition-colors border-b-2 flex items-center gap-2 cursor-pointer", isActive ? "text-[var(--dashboard-primary,#37a501)] border-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)] border-transparent"),
799
+ className: cn$28("relative pb-3 px-1 text-sm font-medium transition-colors border-b-2 flex items-center gap-2 cursor-pointer", isActive ? "text-[var(--dashboard-primary,#37a501)] border-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)] border-transparent"),
800
800
  role: "tab",
801
801
  "aria-selected": isActive,
802
802
  children: [
@@ -806,7 +806,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
806
806
  }),
807
807
  tab.label,
808
808
  tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
809
- className: cn$27("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
809
+ className: cn$28("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
810
810
  children: tab.count
811
811
  })
812
812
  ]
@@ -818,7 +818,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
818
818
 
819
819
  //#endregion
820
820
  //#region src/components/DateRangePicker/index.tsx
821
- const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
821
+ const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
822
822
  const locales = {
823
823
  pt: {
824
824
  months: [
@@ -925,7 +925,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
925
925
  };
926
926
  const days = getDaysInMonth(currentMonth);
927
927
  return /* @__PURE__ */ jsxs("div", {
928
- className: cn$26("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
928
+ className: cn$27("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
929
929
  children: [/* @__PURE__ */ jsxs("div", {
930
930
  className: "flex items-center justify-between mb-4",
931
931
  children: [
@@ -963,9 +963,9 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
963
963
  const isSelected = isStart || isEnd;
964
964
  return /* @__PURE__ */ jsxs("div", {
965
965
  className: "relative h-8 w-8",
966
- children: [value.start && value.end && (inRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: cn$26("absolute inset-0 bg-[var(--dashboard-text-secondary,#6b7280)]/10", isStart && "rounded-l-full", isEnd && "rounded-r-full") }), /* @__PURE__ */ jsx("button", {
966
+ children: [value.start && value.end && (inRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: cn$27("absolute inset-0 bg-[var(--dashboard-text-secondary,#6b7280)]/10", isStart && "rounded-l-full", isEnd && "rounded-r-full") }), /* @__PURE__ */ jsx("button", {
967
967
  onClick: () => handleDayClick(day),
968
- className: cn$26("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full cursor-pointer", isSelected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
968
+ className: cn$27("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full cursor-pointer", isSelected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
969
969
  children: day
970
970
  })]
971
971
  }, day);
@@ -976,7 +976,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
976
976
 
977
977
  //#endregion
978
978
  //#region src/components/Title/index.tsx
979
- const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
979
+ const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
980
980
  const defaultSizeByLevel = {
981
981
  1: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl",
982
982
  2: "text-xl sm:text-2xl md:text-3xl lg:text-4xl",
@@ -1011,7 +1011,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
1011
1011
  const sizeClass = size ? customSizes[size] : defaultSizeByLevel[level];
1012
1012
  const colorClass = color || "text-[var(--dashboard-text-primary,#2d2d2d)]";
1013
1013
  return /* @__PURE__ */ jsx(Tag, {
1014
- className: cn$25(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
1014
+ className: cn$26(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
1015
1015
  ...props,
1016
1016
  children
1017
1017
  });
@@ -1019,7 +1019,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
1019
1019
 
1020
1020
  //#endregion
1021
1021
  //#region src/components/ToggleSwitch/index.tsx
1022
- const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
1022
+ const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
1023
1023
  const sizeConfig$1 = {
1024
1024
  sm: {
1025
1025
  track: "h-5 w-9",
@@ -1043,7 +1043,7 @@ const sizeConfig$1 = {
1043
1043
  function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label, className }) {
1044
1044
  const config = sizeConfig$1[size];
1045
1045
  return /* @__PURE__ */ jsxs("div", {
1046
- className: cn$24("inline-flex items-center gap-2", className),
1046
+ className: cn$25("inline-flex items-center gap-2", className),
1047
1047
  children: [/* @__PURE__ */ jsx("button", {
1048
1048
  type: "button",
1049
1049
  role: "switch",
@@ -1051,10 +1051,10 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
1051
1051
  "aria-label": label,
1052
1052
  disabled,
1053
1053
  onClick: () => onChange(!enabled),
1054
- className: cn$24("relative inline-flex items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--dashboard-primary,#37a501)]", config.track, enabled ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
1055
- children: /* @__PURE__ */ jsx("span", { className: cn$24("inline-block transform rounded-full bg-white shadow-sm transition-transform", config.thumb, enabled ? config.translateOn : config.translateOff) })
1054
+ className: cn$25("relative inline-flex items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--dashboard-primary,#37a501)]", config.track, enabled ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
1055
+ children: /* @__PURE__ */ jsx("span", { className: cn$25("inline-block transform rounded-full bg-white shadow-sm transition-transform", config.thumb, enabled ? config.translateOn : config.translateOff) })
1056
1056
  }), label && /* @__PURE__ */ jsx("span", {
1057
- className: cn$24("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
1057
+ className: cn$25("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
1058
1058
  children: label
1059
1059
  })]
1060
1060
  });
@@ -1062,7 +1062,7 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
1062
1062
 
1063
1063
  //#endregion
1064
1064
  //#region src/components/BadgeStatus/index.tsx
1065
- const cn$23 = (...classes) => classes.filter(Boolean).join(" ");
1065
+ const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
1066
1066
  const variantStyles = {
1067
1067
  success: {
1068
1068
  color: "text-[var(--dashboard-status-success,#10B981)]",
@@ -1093,7 +1093,7 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
1093
1093
  const styles = variantStyles[variant];
1094
1094
  const useCustomColors = color || bgColor;
1095
1095
  return /* @__PURE__ */ jsx("span", {
1096
- className: cn$23("inline-flex items-center rounded-full font-medium whitespace-nowrap", sizeClasses$1[size], !useCustomColors && styles.color, !useCustomColors && styles.bgColor, className),
1096
+ className: cn$24("inline-flex items-center rounded-full font-medium whitespace-nowrap", sizeClasses$1[size], !useCustomColors && styles.color, !useCustomColors && styles.bgColor, className),
1097
1097
  style: useCustomColors ? {
1098
1098
  color: color || void 0,
1099
1099
  backgroundColor: bgColor || void 0
@@ -1104,7 +1104,7 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
1104
1104
 
1105
1105
  //#endregion
1106
1106
  //#region src/components/Sidebar/index.tsx
1107
- const cn$22 = (...classes) => classes.filter(Boolean).join(" ");
1107
+ const cn$23 = (...classes) => classes.filter(Boolean).join(" ");
1108
1108
  function DefaultLink({ href, className, children }) {
1109
1109
  return /* @__PURE__ */ jsx("a", {
1110
1110
  href,
@@ -1180,7 +1180,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1180
1180
  const isChildActive = item.children?.some((c) => currentPath === c.href);
1181
1181
  if (hasChildren) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
1182
1182
  onClick: () => toggleExpand(item.id),
1183
- className: cn$22("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isChildActive ? "text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10"),
1183
+ className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isChildActive ? "text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10"),
1184
1184
  style: { transition: "background-color 200ms, color 200ms" },
1185
1185
  title: collapsed && !mobile ? item.label : void 0,
1186
1186
  children: [/* @__PURE__ */ jsx(Icon, {
@@ -1195,7 +1195,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1195
1195
  children: item.label
1196
1196
  }), /* @__PURE__ */ jsx(ChevronRight, {
1197
1197
  size: 14,
1198
- className: cn$22("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
1198
+ className: cn$23("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
1199
1199
  })] })]
1200
1200
  }), (!collapsed || mobile) && /* @__PURE__ */ jsx("div", {
1201
1201
  className: "overflow-hidden transition-all duration-200 ml-7 border-l-2 border-[var(--dashboard-sidebar-border,#2A6510)]",
@@ -1207,7 +1207,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1207
1207
  href: child.href,
1208
1208
  className: "block",
1209
1209
  children: /* @__PURE__ */ jsxs("div", {
1210
- className: cn$22("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#5DD611)] font-semibold border-l-2 border-[var(--dashboard-primary,#37a501)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:text-[var(--dashboard-sidebar-active-text,#5DD611)]"),
1210
+ className: cn$23("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#5DD611)] font-semibold border-l-2 border-[var(--dashboard-primary,#37a501)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:text-[var(--dashboard-sidebar-active-text,#5DD611)]"),
1211
1211
  style: { transition: "background-color 200ms, color 200ms" },
1212
1212
  children: [/* @__PURE__ */ jsx(ChildIcon, {
1213
1213
  size: 15,
@@ -1224,7 +1224,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1224
1224
  href: item.href,
1225
1225
  className: "block",
1226
1226
  children: /* @__PURE__ */ jsxs("div", {
1227
- className: cn$22("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#37a501)]/25 text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10"),
1227
+ className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#37a501)]/25 text-[var(--dashboard-sidebar-active-text,#5DD611)]" : "text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10"),
1228
1228
  style: { transition: "background-color 200ms, color 200ms" },
1229
1229
  title: collapsed && !mobile ? item.label : void 0,
1230
1230
  children: [/* @__PURE__ */ jsx(Icon, {
@@ -1318,7 +1318,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1318
1318
  })
1319
1319
  })]
1320
1320
  }), /* @__PURE__ */ jsxs("aside", {
1321
- className: cn$22("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-r border-[var(--dashboard-sidebar-border,#2A6510)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
1321
+ className: cn$23("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#1B4D08)] border-r border-[var(--dashboard-sidebar-border,#2A6510)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
1322
1322
  style: { transition: `width 400ms ${cubicBezier}` },
1323
1323
  children: [onToggleCollapse && /* @__PURE__ */ jsxs("button", {
1324
1324
  onClick: onToggleCollapse,
@@ -1387,17 +1387,18 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1387
1387
  children: [
1388
1388
  user && /* @__PURE__ */ jsxs("button", {
1389
1389
  onClick: onUserClick,
1390
- className: cn$22("w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#37a501)]/5 hover:bg-[var(--dashboard-primary,#37a501)]/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
1390
+ className: cn$23("w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#37a501)]/5 hover:bg-[var(--dashboard-primary,#37a501)]/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
1391
1391
  title: isCollapsed ? `${user.subtitle ? user.subtitle + " - " : ""}${user.name}` : void 0,
1392
1392
  children: [/* @__PURE__ */ jsx("div", {
1393
1393
  className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#37a501)]/30 text-[var(--dashboard-sidebar-text,#FFFFFF)] flex-shrink-0",
1394
1394
  children: /* @__PURE__ */ jsx(User, { size: 16 })
1395
1395
  }), /* @__PURE__ */ jsxs("div", {
1396
- className: "ml-3 overflow-hidden text-left",
1396
+ className: "overflow-hidden text-left",
1397
1397
  style: {
1398
1398
  width: isCollapsed ? 0 : "auto",
1399
+ marginLeft: isCollapsed ? 0 : "0.75rem",
1399
1400
  opacity: isCollapsed ? 0 : 1,
1400
- transition: `width 400ms ${cubicBezier}, opacity 400ms ${cubicBezier}`
1401
+ transition: `width 400ms ${cubicBezier}, margin 400ms ${cubicBezier}, opacity 400ms ${cubicBezier}`
1401
1402
  },
1402
1403
  children: [
1403
1404
  user.subtitle && /* @__PURE__ */ jsx("p", {
@@ -1419,7 +1420,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1419
1420
  footerItems?.map((item) => renderMenuItem(item, isCollapsed, false)),
1420
1421
  onLogout && /* @__PURE__ */ jsxs("button", {
1421
1422
  onClick: onLogout,
1422
- className: cn$22("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10", isCollapsed ? "justify-center" : "justify-start"),
1423
+ className: cn$23("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#FFFFFF)] hover:bg-[var(--dashboard-primary,#37a501)]/10", isCollapsed ? "justify-center" : "justify-start"),
1423
1424
  style: { transition: "background-color 200ms" },
1424
1425
  title: isCollapsed ? logoutLabel : void 0,
1425
1426
  children: [/* @__PURE__ */ jsx(LogOut, {
@@ -1445,42 +1446,42 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
1445
1446
  })] });
1446
1447
  }
1447
1448
 
1448
- //#endregion
1449
- //#region src/hooks/useTheme.ts
1450
- const ThemeContext = createContext(null);
1451
- function useTheme() {
1452
- const context = useContext(ThemeContext);
1453
- if (!context) throw new Error("useTheme must be used within a DashboardProvider");
1454
- return context;
1455
- }
1456
-
1457
1449
  //#endregion
1458
1450
  //#region src/components/ThemeSwitcher/index.tsx
1459
- const cn$21 = (...classes) => classes.filter(Boolean).join(" ");
1460
- function ThemeSwitcher({ className }) {
1461
- const { resolvedTheme, setTheme } = useTheme();
1462
- const toggle = () => {
1463
- setTheme(resolvedTheme === "dark" ? "light" : "dark");
1464
- };
1465
- return /* @__PURE__ */ jsxs("button", {
1466
- type: "button",
1467
- onClick: toggle,
1468
- className: cn$21("relative inline-flex items-center justify-center h-9 w-9 rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] shadow-sm transition-colors cursor-pointer hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--dashboard-primary,#37a501)] focus-visible:ring-offset-2", className),
1469
- "aria-label": "Alternar tema",
1470
- children: [
1471
- /* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
1472
- /* @__PURE__ */ jsx(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
1473
- /* @__PURE__ */ jsx("span", {
1474
- className: "sr-only",
1475
- children: "Alternar tema"
1476
- })
1477
- ]
1451
+ const cn$22 = (...classes) => classes.filter(Boolean).join(" ");
1452
+ const modes = [
1453
+ {
1454
+ value: "light",
1455
+ icon: Sun,
1456
+ label: "Claro"
1457
+ },
1458
+ {
1459
+ value: "dark",
1460
+ icon: Moon,
1461
+ label: "Escuro"
1462
+ },
1463
+ {
1464
+ value: "system",
1465
+ icon: Monitor,
1466
+ label: "Sistema"
1467
+ }
1468
+ ];
1469
+ function ThemeSwitcher({ mode, onModeChange, className }) {
1470
+ return /* @__PURE__ */ jsx("div", {
1471
+ className: cn$22("inline-flex items-center gap-1 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] p-1", className),
1472
+ children: modes.map(({ value, icon: Icon, label }) => /* @__PURE__ */ jsxs("button", {
1473
+ type: "button",
1474
+ onClick: () => onModeChange(value),
1475
+ className: cn$22("flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", mode === value ? "bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
1476
+ title: label,
1477
+ children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), /* @__PURE__ */ jsx("span", { children: label })]
1478
+ }, value))
1478
1479
  });
1479
1480
  }
1480
1481
 
1481
1482
  //#endregion
1482
1483
  //#region src/components/KPICard/index.tsx
1483
- const cn$20 = (...classes) => classes.filter(Boolean).join(" ");
1484
+ const cn$21 = (...classes) => classes.filter(Boolean).join(" ");
1484
1485
  function formatValue(value, format) {
1485
1486
  switch (format) {
1486
1487
  case "currency": return new Intl.NumberFormat("pt-BR", {
@@ -1510,7 +1511,7 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
1510
1511
  if (isLoading) return /* @__PURE__ */ jsx(KPICardSkeleton, { className });
1511
1512
  const trendConfig = trendConfigs[trend];
1512
1513
  return /* @__PURE__ */ jsxs("div", {
1513
- className: cn$20("h-full w-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 transition-all duration-200 ease-out dashboard-shadow-sm hover:dashboard-shadow-md flex flex-col", className),
1514
+ className: cn$21("h-full w-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 transition-all duration-200 ease-out dashboard-shadow-sm hover:dashboard-shadow-md flex flex-col", className),
1514
1515
  children: [/* @__PURE__ */ jsxs("div", {
1515
1516
  className: "flex justify-between items-start mb-4",
1516
1517
  children: [/* @__PURE__ */ jsx("h3", {
@@ -1527,7 +1528,7 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
1527
1528
  className: "text-3xl font-bold text-[var(--dashboard-text-primary,#0F172A)] whitespace-nowrap tracking-tight",
1528
1529
  children: formatValue(value, format)
1529
1530
  }), /* @__PURE__ */ jsxs("div", {
1530
- className: cn$20("inline-flex items-center gap-1 px-2 py-1 rounded-full flex-shrink-0 mb-1", trendConfig.color),
1531
+ className: cn$21("inline-flex items-center gap-1 px-2 py-1 rounded-full flex-shrink-0 mb-1", trendConfig.color),
1531
1532
  children: [/* @__PURE__ */ jsx("span", {
1532
1533
  className: "text-sm",
1533
1534
  children: trendConfig.icon
@@ -1541,7 +1542,7 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
1541
1542
  }
1542
1543
  function KPICardSkeleton({ className }) {
1543
1544
  return /* @__PURE__ */ jsxs("div", {
1544
- className: cn$20("h-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm animate-pulse flex flex-col", className),
1545
+ className: cn$21("h-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm animate-pulse flex flex-col", className),
1545
1546
  children: [/* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded w-2/3 mb-4" }), /* @__PURE__ */ jsxs("div", {
1546
1547
  className: "flex items-end gap-3 flex-1",
1547
1548
  children: [/* @__PURE__ */ jsx("div", { className: "h-8 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded w-1/2" }), /* @__PURE__ */ jsx("div", { className: "h-5 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded-full w-1/4" })]
@@ -1551,13 +1552,13 @@ function KPICardSkeleton({ className }) {
1551
1552
 
1552
1553
  //#endregion
1553
1554
  //#region src/components/PageLayout/index.tsx
1554
- const cn$19 = (...classes) => classes.filter(Boolean).join(" ");
1555
+ const cn$20 = (...classes) => classes.filter(Boolean).join(" ");
1555
1556
  function PageLayout({ title, description, headerActions, children, contentPadding = true, sidebar, sidebarCollapsed = false, sidebarWidth = 280, sidebarCollapsedWidth = 109, className }) {
1556
1557
  const marginLeft = sidebar ? sidebarCollapsed ? `max(0px, ${sidebarCollapsedWidth}px)` : `max(0px, ${sidebarWidth}px)` : "0px";
1557
1558
  return /* @__PURE__ */ jsxs("div", {
1558
- className: cn$19("min-h-screen bg-[var(--dashboard-background,#f2f2f2)]", className),
1559
+ className: cn$20("min-h-screen bg-[var(--dashboard-background,#f2f2f2)]", className),
1559
1560
  children: [sidebar, /* @__PURE__ */ jsxs("main", {
1560
- className: cn$19("pt-16 xl:pt-0", !sidebar && "pt-0"),
1561
+ className: cn$20("pt-16 xl:pt-0", !sidebar && "pt-0"),
1561
1562
  style: {
1562
1563
  marginLeft,
1563
1564
  transition: "margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1)"
@@ -1595,7 +1596,7 @@ function PageLayout({ title, description, headerActions, children, contentPaddin
1595
1596
  //#endregion
1596
1597
  //#region src/components/ComparisonLineChart/index.tsx
1597
1598
  Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip$1, Legend, Filler);
1598
- const cn$18 = (...classes) => classes.filter(Boolean).join(" ");
1599
+ const cn$19 = (...classes) => classes.filter(Boolean).join(" ");
1599
1600
  function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, currentPeriodLabel = "Período atual", previousPeriodLabel = "Período anterior", title, color, height = 300, className }) {
1600
1601
  const primaryColor = color || (typeof document !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue("--dashboard-primary").trim() : "") || "#37a501";
1601
1602
  const data = {
@@ -1689,7 +1690,7 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
1689
1690
  }
1690
1691
  };
1691
1692
  return /* @__PURE__ */ jsxs("div", {
1692
- className: cn$18("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
1693
+ className: cn$19("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
1693
1694
  children: [title && /* @__PURE__ */ jsx("h3", {
1694
1695
  className: "text-base font-semibold mb-4 text-[var(--dashboard-text-primary,#2d2d2d)]",
1695
1696
  children: title
@@ -1706,7 +1707,7 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
1706
1707
  //#endregion
1707
1708
  //#region src/components/HorizontalBarChart/index.tsx
1708
1709
  Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip$1, Legend);
1709
- const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
1710
+ const cn$18 = (...classes) => classes.filter(Boolean).join(" ");
1710
1711
  function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, bestItemLabel = "Melhor item", className }) {
1711
1712
  const [activeTab, setActiveTab] = useState((tabs ? tabs.map((t) => t.id) : Object.keys(datasets))[0]);
1712
1713
  const [isMobile, setIsMobile] = useState(false);
@@ -1781,7 +1782,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
1781
1782
  }
1782
1783
  };
1783
1784
  return /* @__PURE__ */ jsxs("div", {
1784
- className: cn$17("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-5 sm:p-6 min-h-[850px] sm:h-full flex flex-col", className),
1785
+ className: cn$18("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-5 sm:p-6 min-h-[850px] sm:h-full flex flex-col", className),
1785
1786
  children: [
1786
1787
  title && /* @__PURE__ */ jsxs("div", {
1787
1788
  className: "flex items-center gap-2 mb-4",
@@ -1794,7 +1795,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
1794
1795
  className: "flex gap-2 mb-4 flex-wrap",
1795
1796
  children: tabs.map((tab) => /* @__PURE__ */ jsx("button", {
1796
1797
  onClick: () => setActiveTab(tab.id),
1797
- className: cn$17("px-3.5 py-2 sm:px-4 sm:py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap cursor-pointer", activeTab === tab.id ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
1798
+ className: cn$18("px-3.5 py-2 sm:px-4 sm:py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap cursor-pointer", activeTab === tab.id ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
1798
1799
  children: tab.label
1799
1800
  }, tab.id))
1800
1801
  }),
@@ -1833,7 +1834,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
1833
1834
  //#endregion
1834
1835
  //#region src/components/VerticalBarChart/index.tsx
1835
1836
  Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip$1, Legend);
1836
- const cn$16 = (...classes) => classes.filter(Boolean).join(" ");
1837
+ const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
1837
1838
  function VerticalBarChart({ labels, data: values, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, bestItemLabel = "Melhor item", labelMaxChars = 3, className }) {
1838
1839
  const maxValue = Math.max(...values);
1839
1840
  const bestLabel = labels[values.indexOf(maxValue)];
@@ -1896,7 +1897,7 @@ function VerticalBarChart({ labels, data: values, title, titleIcon, color, value
1896
1897
  }
1897
1898
  };
1898
1899
  return /* @__PURE__ */ jsxs("div", {
1899
- className: cn$16("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
1900
+ className: cn$17("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
1900
1901
  children: [
1901
1902
  title && /* @__PURE__ */ jsxs("div", {
1902
1903
  className: "flex items-center gap-2 mb-4",
@@ -1937,6 +1938,120 @@ function VerticalBarChart({ labels, data: values, title, titleIcon, color, value
1937
1938
  });
1938
1939
  }
1939
1940
 
1941
+ //#endregion
1942
+ //#region src/components/DoughnutChart/index.tsx
1943
+ Chart.register(ArcElement, Tooltip$1, Legend);
1944
+ const DEFAULT_COLORS = [
1945
+ "#2563EB",
1946
+ "#059669",
1947
+ "#D97706",
1948
+ "#DC2626",
1949
+ "#7C3AED",
1950
+ "#0891B2",
1951
+ "#DB2777",
1952
+ "#65A30D",
1953
+ "#EA580C",
1954
+ "#4F46E5"
1955
+ ];
1956
+ const cn$16 = (...classes) => classes.filter(Boolean).join(" ");
1957
+ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, showLegend = true, formatValue, cutout = 65, height = 240, className }) {
1958
+ const total = items.reduce((sum, item) => sum + item.value, 0);
1959
+ const format = formatValue || ((v) => String(v));
1960
+ const colors = items.map((item, i) => item.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length]);
1961
+ const chartData = {
1962
+ labels: items.map((i) => i.label),
1963
+ datasets: [{
1964
+ data: items.map((i) => i.value),
1965
+ backgroundColor: colors,
1966
+ borderColor: "var(--dashboard-surface, #ffffff)",
1967
+ borderWidth: 2,
1968
+ hoverOffset: 4
1969
+ }]
1970
+ };
1971
+ const options = {
1972
+ responsive: true,
1973
+ maintainAspectRatio: false,
1974
+ cutout: `${cutout}%`,
1975
+ plugins: {
1976
+ legend: { display: false },
1977
+ tooltip: {
1978
+ backgroundColor: "rgba(45, 45, 45, 0.95)",
1979
+ titleColor: "#fff",
1980
+ bodyColor: "#fff",
1981
+ padding: 12,
1982
+ displayColors: true,
1983
+ titleFont: {
1984
+ size: 12,
1985
+ weight: "bold"
1986
+ },
1987
+ bodyFont: { size: 11 },
1988
+ callbacks: { label: (context) => {
1989
+ const pct = total > 0 ? (context.parsed / total * 100).toFixed(1) : "0";
1990
+ return ` ${context.label}: ${format(context.parsed)} (${pct}%)`;
1991
+ } }
1992
+ }
1993
+ }
1994
+ };
1995
+ return /* @__PURE__ */ jsxs("div", {
1996
+ className: cn$16("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
1997
+ children: [title && /* @__PURE__ */ jsxs("div", {
1998
+ className: "flex items-center gap-2 mb-4",
1999
+ children: [titleIcon, /* @__PURE__ */ jsx("h3", {
2000
+ className: "text-base font-semibold text-[var(--dashboard-text-primary,#2d2d2d)]",
2001
+ children: title
2002
+ })]
2003
+ }), /* @__PURE__ */ jsxs("div", {
2004
+ className: cn$16("flex items-center", showLegend ? "gap-6" : "justify-center"),
2005
+ children: [/* @__PURE__ */ jsxs("div", {
2006
+ className: "relative flex-shrink-0",
2007
+ style: {
2008
+ width: height,
2009
+ height
2010
+ },
2011
+ children: [/* @__PURE__ */ jsx(Doughnut, {
2012
+ data: chartData,
2013
+ options
2014
+ }), (centerLabel || centerValue) && /* @__PURE__ */ jsxs("div", {
2015
+ className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none",
2016
+ children: [centerValue && /* @__PURE__ */ jsx("span", {
2017
+ className: "text-2xl font-bold text-[var(--dashboard-text-primary,#2d2d2d)]",
2018
+ children: centerValue
2019
+ }), centerLabel && /* @__PURE__ */ jsx("span", {
2020
+ className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
2021
+ children: centerLabel
2022
+ })]
2023
+ })]
2024
+ }), showLegend && items.length > 0 && /* @__PURE__ */ jsx("div", {
2025
+ className: "flex-1 min-w-0 space-y-2",
2026
+ children: items.map((item, i) => {
2027
+ const pct = total > 0 ? (item.value / total * 100).toFixed(1) : "0";
2028
+ return /* @__PURE__ */ jsxs("div", {
2029
+ className: "flex items-center gap-2",
2030
+ children: [
2031
+ /* @__PURE__ */ jsx("span", {
2032
+ className: "w-3 h-3 rounded-full flex-shrink-0",
2033
+ style: { backgroundColor: colors[i] }
2034
+ }),
2035
+ /* @__PURE__ */ jsx("span", {
2036
+ className: "text-sm text-[var(--dashboard-text-secondary,#6b7280)] truncate flex-1",
2037
+ children: item.label
2038
+ }),
2039
+ /* @__PURE__ */ jsx("span", {
2040
+ className: "text-sm font-medium text-[var(--dashboard-text-primary,#2d2d2d)] whitespace-nowrap",
2041
+ children: format(item.value)
2042
+ }),
2043
+ /* @__PURE__ */ jsxs("span", {
2044
+ className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)] whitespace-nowrap",
2045
+ children: [pct, "%"]
2046
+ })
2047
+ ]
2048
+ }, item.label);
2049
+ })
2050
+ })]
2051
+ })]
2052
+ });
2053
+ }
2054
+
1940
2055
  //#endregion
1941
2056
  //#region src/components/ProgressBarList/index.tsx
1942
2057
  const cn$15 = (...classes) => classes.filter(Boolean).join(" ");
@@ -4139,6 +4254,15 @@ function useConfig() {
4139
4254
  return config;
4140
4255
  }
4141
4256
 
4257
+ //#endregion
4258
+ //#region src/hooks/useTheme.ts
4259
+ const ThemeContext = createContext(null);
4260
+ function useTheme() {
4261
+ const context = useContext(ThemeContext);
4262
+ if (!context) throw new Error("useTheme must be used within a DashboardProvider");
4263
+ return context;
4264
+ }
4265
+
4142
4266
  //#endregion
4143
4267
  //#region src/providers/ThemeProvider.tsx
4144
4268
  function ThemeProvider({ children }) {
@@ -4323,5 +4447,5 @@ function DashboardProvider({ config: configOverrides, children }) {
4323
4447
  }
4324
4448
 
4325
4449
  //#endregion
4326
- export { Alert, AuthLayout, BadgeStatus, Breadcrumb, Button, Card, Checkbox, CodeInput, Combobox, ComparisonLineChart, DashboardProvider, DataGrid, DateRangePicker, Dropdown, EmptyState, FileUpload, FilterBar, FormField, HorizontalBarChart, Input, KPICard, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Skeleton, StatusBadge, Stepper, Table, TableBody, TableEmpty, TableHeader, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, Tooltip, TreeView, VerticalBarChart, createColumnHelper, createConfig, defaultConfig, useConfig, useLoading, useNotifications, useTheme };
4450
+ export { Alert, AuthLayout, BadgeStatus, Breadcrumb, Button, Card, Checkbox, CodeInput, Combobox, ComparisonLineChart, DashboardProvider, DataGrid, DateRangePicker, DoughnutChart, Dropdown, EmptyState, FileUpload, FilterBar, FormField, HorizontalBarChart, Input, KPICard, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Skeleton, StatusBadge, Stepper, Table, TableBody, TableEmpty, TableHeader, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, Tooltip, TreeView, VerticalBarChart, createColumnHelper, createConfig, defaultConfig, useConfig, useLoading, useNotifications, useTheme };
4327
4451
  //# sourceMappingURL=index.mjs.map