@northslopetech/altitude-ui 2.0.14 → 2.1.2

package/dist/index.js

@@ -35,14 +35,19 @@ __export(index_exports, {
   ArrowRight: () => ArrowRight,
   ArrowUp: () => ArrowUp,
   Badge: () => Badge,
+  BarChart: () => BarChart,
   Bell: () => Bell,
   Bookmark: () => Bookmark,
   Button: () => Button,
+  CHART_COLORS: () => CHART_COLORS,
+  CHART_CONSTANTS: () => CHART_CONSTANTS,
+  COLOR_SCHEMES: () => COLOR_SCHEMES,
   Calendar: () => Calendar,
   CaretDown: () => CaretDown,
   CaretLeft: () => CaretLeft,
   CaretRight: () => CaretRight,
   CaretUp: () => CaretUp,
+  ChartLegend: () => ChartLegend,
   Chat: () => Chat,
   Check: () => Check,
   CheckIcon: () => CheckIcon,
@@ -80,9 +85,20 @@ __export(index_exports, {
   Exclamation: () => Exclamation,
   EyeClosed: () => EyeClosed,
   EyeOpen: () => EyeOpen,
+  Field: () => Field,
+  FieldContent: () => FieldContent,
+  FieldDescription: () => FieldDescription,
+  FieldError: () => FieldError,
+  FieldGroup: () => FieldGroup,
+  FieldLabel: () => FieldLabel,
+  FieldLegend: () => FieldLegend,
+  FieldSeparator: () => FieldSeparator,
+  FieldSet: () => FieldSet,
+  FieldTitle: () => FieldTitle,
   Filter: () => Filter,
   FilterDescending: () => FilterDescending,
   FormField: () => FormField,
+  GenericTooltip: () => GenericTooltip,
   GraphBar: () => GraphBar,
   GraphDonut: () => GraphDonut,
   GraphLine: () => GraphLine,
@@ -90,7 +106,9 @@ __export(index_exports, {
   HamburgerMenu: () => HamburgerMenu,
   Home: () => Home,
   Information: () => Information,
-  Input: () => TypedInput,
+  Input: () => Input,
+  Label: () => Label2,
+  LineChart: () => LineChart,
   Location: () => Location,
   Lock: () => Lock,
   Logout: () => Logout,
@@ -98,6 +116,7 @@ __export(index_exports, {
   Minus: () => Minus,
   MoreMenu: () => MoreMenu,
   Phone: () => Phone,
+  PieChart: () => PieChart,
   Plus: () => Plus,
   QuestionCircle: () => QuestionCircle,
   Select: () => Select,
@@ -110,14 +129,19 @@ __export(index_exports, {
   SelectSeparator: () => SelectSeparator,
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
+  Separator: () => Separator2,
   Share: () => Share,
   Star: () => Star,
   Statement: () => Statement,
   Table: () => Table,
+  TableIcon: () => TableIcon,
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
   TabsTrigger: () => TabsTrigger,
+  Textarea: () => Textarea,
+  TooltipContainer: () => TooltipContainer,
+  TooltipItem: () => TooltipItem,
   Trash: () => Trash,
   Typography: () => Typography,
   Upload: () => Upload,
@@ -128,8 +152,20 @@ __export(index_exports, {
   X: () => X,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
+  calculateYAxisWidth: () => calculateYAxisWidth,
   checkboxVariants: () => checkboxVariants,
-  inputVariants: () => inputVariants,
+  createCustomXAxisLabel: () => createCustomXAxisLabel,
+  createCustomYAxisLabel: () => createCustomYAxisLabel,
+  createCustomYAxisRightLabel: () => createCustomYAxisRightLabel,
+  createLegendItems: () => createLegendItems,
+  customXAxisTick: () => customXAxisTick,
+  customXAxisTickRotated: () => customXAxisTickRotated,
+  customYAxisTick: () => customYAxisTick,
+  formatLargeNumber: () => formatLargeNumber,
+  formatPercentage: () => formatPercentage,
+  getHeatmapColor: () => getHeatmapColor,
+  getPerformanceColor: () => getPerformanceColor,
+  getSeriesColor: () => getSeriesColor,
   selectTriggerVariants: () => selectTriggerVariants,
   tabsVariants: () => tabsVariants,
   typographyVariants: () => typographyVariants,
@@ -1609,7 +1645,7 @@ var Statement = ({
     )
   }
 );
-var Table = ({
+var TableIcon = ({
   className,
   variant = "dark",
   ...props
@@ -2052,32 +2088,276 @@ var FormField = React4.forwardRef(
 );
 FormField.displayName = "FormField";
 
-// src/components/ui/date-picker.tsx
-var React6 = __toESM(require("react"));
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
-
-// src/components/ui/input.tsx
-var React5 = __toESM(require("react"));
+// src/components/ui/field.tsx
+var import_react = require("react");
 var import_class_variance_authority5 = require("class-variance-authority");
+
+// src/components/ui/label.tsx
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var inputVariants = (0, import_class_variance_authority5.cva)(
-  "flex w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-secondary transition-colors rounded-md px-3 min-w-80 border-secondary focus-visible:border-2 focus-visible:border-strong placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-subtle shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/field.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = (0, import_class_variance_authority5.cva)(
+  "group/field data-[invalid=true]:text-error flex w-full gap-3",
   {
     variants: {
-      variant: {
-        input: "h-10 py-2",
-        textarea: "h-full resize-none pt-4 pb-2"
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
+        ],
+        responsive: [
+          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
       }
     },
     defaultVariants: {
-      variant: "input"
+      orientation: "vertical"
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Label2,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
+        "has-data-[state=checked]:bg-gray has-data-[state=checked]:border-dark",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-secondary text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-dark [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            className: "bg-light text-secondary relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = (0, import_react.useMemo)(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors) {
+      return null;
+    }
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-error text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
+
+// src/components/ui/date-picker.tsx
+var React6 = __toESM(require("react"));
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+
+// src/components/ui/input.tsx
+var React5 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var inputBaseStyles = "flex h-10 py-2 w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-secondary transition-colors rounded-md px-3 min-w-80 border-secondary focus-visible:border-2 focus-visible:border-strong placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent";
 var Input = React5.forwardRef(
   ({
     className,
-    variant = "input",
     style,
     value,
     onChange,
@@ -2099,15 +2379,7 @@ var Input = React5.forwardRef(
       if (!isControlled) {
         setInternalValue(e.target.value);
       }
-      if (variant === "input" && onChange) {
-        onChange(e);
-      }
-    };
-    const handleTextareaChange = (e) => {
-      if (!isControlled) {
-        setInternalValue(e.target.value);
-      }
-      if (variant === "textarea" && onChange) {
+      if (onChange) {
         onChange(e);
       }
     };
@@ -2116,60 +2388,20 @@ var Input = React5.forwardRef(
         setInternalValue("");
       }
       if (onChange) {
-        if (variant === "input") {
-          const inputEvent = {
-            target: { value: "" },
-            currentTarget: { value: "" }
-          };
-          onChange(inputEvent);
-        } else {
-          const textareaEvent = {
-            target: { value: "" },
-            currentTarget: { value: "" }
-          };
-          onChange(
-            textareaEvent
-          );
-        }
+        const inputEvent = {
+          target: { value: "" },
+          currentTarget: { value: "" }
+        };
+        onChange(inputEvent);
       }
       onClear?.();
     };
-    if (variant === "textarea") {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "textarea",
-          {
-            className: cn(
-              inputVariants({ variant }),
-              (showClear || showLock) && "pr-10",
-              className
-            ),
-            style: tokenStyles,
-            ref,
-            value: currentValue,
-            onChange: handleTextareaChange,
-            readOnly,
-            ...props
-          }
-        ),
-        showClear && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: handleClear,
-            className: "absolute right-3 top-3 h-4 w-4 text-secondary hover:text-dark transition-colors",
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(X, { className: "h-4 w-4" })
-          }
-        ),
-        showLock && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Lock, { className: "absolute right-3 top-3 h-4 w-4 text-secondary" })
-      ] });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "input",
         {
           className: cn(
-            inputVariants({ variant }),
+            inputBaseStyles,
             (showClear || showLock) && "pr-10",
             className
           ),
@@ -2181,24 +2413,23 @@ var Input = React5.forwardRef(
           ...props
         }
       ),
-      showClear && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      showClear && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
           onClick: handleClear,
           className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary hover:text-dark transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(X, { className: "h-4 w-4" })
         }
       ),
-      showLock && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
+      showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
     ] });
   }
 );
 Input.displayName = "Input";
-var TypedInput = Input;
 
 // src/components/ui/date-picker.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var getDayNames = () => {
   const days = [];
   for (let i = 0; i < 7; i++) {
@@ -2399,15 +2630,15 @@ var DatePicker = React6.forwardRef(
     const months = getMonthNames();
     const dayNames = getDayNames();
     const years = generateYears();
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       PopoverPrimitive.Root,
       {
         open: disabled ? false : open,
         onOpenChange: disabled ? void 0 : setOpen,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              TypedInput,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Input,
               {
                 ref,
                 value: inputValue,
@@ -2419,7 +2650,7 @@ var DatePicker = React6.forwardRef(
                 ...props
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               Calendar,
               {
                 className: cn(
@@ -2429,7 +2660,7 @@ var DatePicker = React6.forwardRef(
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             PopoverPrimitive.Content,
             {
               className: "z-50 w-80 rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
@@ -2438,51 +2669,51 @@ var DatePicker = React6.forwardRef(
               alignOffset: -12,
               side: "bottom",
               sticky: "always",
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "p-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between mb-4 gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "p-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4 gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       onClick: () => handleMonthChange("prev"),
                       className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeft, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronLeft, { className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1 flex-1 min-w-0", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-1 flex-1 min-w-0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       Select,
                       {
                         value: currentMonth.getMonth().toString(),
                         onValueChange: handleMonthSelect,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectValue, {}) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: index.toString(), children: month }, month)) })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: index.toString(), children: month }, month)) })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       Select,
                       {
                         value: currentMonth.getFullYear().toString(),
                         onValueChange: handleYearSelect,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectValue, {}) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContent, { children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectItem, { value: year.toString(), children: year }, year)) })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectValue, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectContent, { children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { value: year.toString(), children: year }, year)) })
                         ]
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       onClick: () => handleMonthChange("next"),
                       className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronRight, { className: "h-4 w-4" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     Typography,
                     {
                       variant: "label-xs-bold",
@@ -2492,11 +2723,11 @@ var DatePicker = React6.forwardRef(
                     },
                     day
                   )) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "div",
                     {
                       className: "h-8 w-8 flex items-center justify-center",
-                      children: date && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      children: date && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           onClick: () => handleDateSelect(date),
@@ -2510,7 +2741,7 @@ var DatePicker = React6.forwardRef(
                             isToday(date) && !isDateSelected(date) && !isDateDisabled(date) && "text-blue-600 after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:bg-blue-600 after:rounded-full",
                             isDateDisabled(date) && "text-secondary/40 cursor-not-allowed opacity-50"
                           ),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
                         }
                       )
                     },
@@ -2530,7 +2761,7 @@ DatePicker.displayName = "DatePicker";
 // src/components/ui/upload.tsx
 var React7 = __toESM(require("react"));
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 var uploadVariants = (0, import_class_variance_authority6.cva)(
   "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
@@ -2632,17 +2863,17 @@ var Upload = React7.forwardRef(
     const renderContent = () => {
       switch (effectiveState) {
         case "error":
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "heading-sm", children: "Upload fail" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "heading-sm", children: "Upload fail" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Button,
                   {
                     variant: "destructive",
@@ -2656,22 +2887,22 @@ var Upload = React7.forwardRef(
             }
           );
         case "uploading":
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "div",
                     {
                       className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
                       style: { width: `${progress}%` }
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                     Typography,
                     {
                       variant: "body-sm",
@@ -2687,29 +2918,29 @@ var Upload = React7.forwardRef(
             }
           );
         case "success":
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
-                selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "body-sm", children: file.name }, index)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
+                selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "body-sm", children: file.name }, index)) })
               ] })
             }
           );
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   Button,
                   {
                     variant: "default",
@@ -2723,10 +2954,10 @@ var Upload = React7.forwardRef(
                     children: "Choose files"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
                   "Supported file: ",
                   getFileTypeDisplay(),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("br", {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("br", {}),
                   "Max: ",
                   Math.round(maxFileSize / 1024 / 1024),
                   " MB each"
@@ -2736,7 +2967,7 @@ var Upload = React7.forwardRef(
           );
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         ref,
@@ -2760,7 +2991,7 @@ var Upload = React7.forwardRef(
         "aria-disabled": disabled,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -2783,25 +3014,51 @@ Upload.displayName = "Upload";
 var React8 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var checkboxVariants = (0, import_class_variance_authority7.cva)(
   "peer size-4 shrink-0 rounded-[4px] border border-strong bg-light hover:bg-info-subtle transition-colors focus-visible:outline-none focus-visible:border-2 focus-visible:border-interactive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0"
 );
-var Checkbox = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var Checkbox = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn(checkboxVariants(), className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon, { variant: "light", className: "size-3" }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckIcon, { variant: "light", className: "size-3" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-// src/components/ui/badge.tsx
+// src/components/ui/textarea.tsx
 var React9 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Textarea = React9.forwardRef(
+  ({ className, style, error, ...props }, ref) => {
+    const tokenStyles = {
+      font: "var(--typography-label-md-regular)",
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border bg-light text-dark px-3 pt-3 pb-2 placeholder:text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors resize-y",
+          error ? "border-error focus-visible:border-2 focus-visible:border-error" : "border-secondary focus-visible:border-2 focus-visible:border-strong disabled:border-secondary",
+          className
+        ),
+        style: tokenStyles,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/components/ui/badge.tsx
+var React10 = __toESM(require("react"));
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority8.cva)(
   "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
   {
@@ -2824,7 +3081,7 @@ var badgeVariants = (0, import_class_variance_authority8.cva)(
 function getBadgeTypographyStyles() {
   return { font: "var(--typography-label-sm-bold)" };
 }
-var Badge = React9.forwardRef(
+var Badge = React10.forwardRef(
   ({ className, variant, style, ...props }, ref) => {
     if (!variant) {
       return null;
@@ -2834,7 +3091,7 @@ var Badge = React9.forwardRef(
       ...typographyStyles,
       ...style
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "span",
       {
         className: cn(
@@ -2852,9 +3109,9 @@ var Badge = React9.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/tabs.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var tabsVariants = (0, import_class_variance_authority9.cva)(
   "inline-flex items-center justify-start whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10",
   {
@@ -2868,17 +3125,17 @@ var tabsVariants = (0, import_class_variance_authority9.cva)(
     }
   }
 );
-var TabsContext = React10.createContext(
+var TabsContext = React11.createContext(
   void 0
 );
 function useTabsContext() {
-  const context = React10.useContext(TabsContext);
+  const context = React11.useContext(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used within a Tabs provider");
   }
   return context;
 }
-var Tabs = React10.forwardRef((props, ref) => {
+var Tabs = React11.forwardRef((props, ref) => {
   const {
     className,
     value,
@@ -2887,7 +3144,7 @@ var Tabs = React10.forwardRef((props, ref) => {
     children,
     ...restProps
   } = props;
-  const contextValue = React10.useMemo(
+  const contextValue = React11.useMemo(
     () => ({
       activeTab: value,
       setActiveTab: onValueChange,
@@ -2895,13 +3152,13 @@ var Tabs = React10.forwardRef((props, ref) => {
     }),
     [value, onValueChange, variant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: cn("w-full", className), ...restProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = React10.forwardRef(
+var TabsList = React11.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref,
@@ -2917,7 +3174,7 @@ TabsList.displayName = "TabsList";
 var getTabTypographyStyles = (isActive) => ({
   font: isActive ? "var(--typography-label-sm-bold)" : "var(--typography-label-sm-regular)"
 });
-var TabsTrigger = React10.forwardRef(
+var TabsTrigger = React11.forwardRef(
   (props, ref) => {
     const { className, value, disabled, style, children, ...restProps } = props;
     const { activeTab, setActiveTab, variant } = useTabsContext();
@@ -2925,22 +3182,22 @@ var TabsTrigger = React10.forwardRef(
       throw new Error("TabsTrigger must have a value prop");
     }
     const isActive = activeTab === value;
-    const tokenStyles = React10.useMemo(
+    const tokenStyles = React11.useMemo(
       () => ({
         ...getTabTypographyStyles(isActive),
         ...style
       }),
       [isActive, style]
     );
-    const triggerClassName = React10.useMemo(
+    const triggerClassName = React11.useMemo(
       () => cn(tabsVariants({ variant }), className),
       [variant, className]
     );
-    const handleClick = React10.useCallback(() => {
+    const handleClick = React11.useCallback(() => {
       if (disabled) return;
       setActiveTab(value);
     }, [disabled, setActiveTab, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         ref,
@@ -2954,13 +3211,13 @@ var TabsTrigger = React10.forwardRef(
         disabled,
         onClick: handleClick,
         ...restProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pl-3 pr-6 py-2", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pl-3 pr-6 py-2", children })
       }
     );
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React10.forwardRef(
+var TabsContent = React11.forwardRef(
   (props, ref) => {
     const { className, value, children, ...restProps } = props;
     const { activeTab } = useTabsContext();
@@ -2971,7 +3228,7 @@ var TabsContent = React10.forwardRef(
     if (!isActive) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref,
@@ -2989,11 +3246,11 @@ var TabsContent = React10.forwardRef(
 TabsContent.displayName = "TabsContent";
 
 // src/components/ui/dropdown-menu.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = React11.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var DropdownMenuTrigger = React12.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
   DropdownMenuPrimitive.Trigger,
   {
     ref,
@@ -3003,7 +3260,7 @@ var DropdownMenuTrigger = React11.forwardRef(({ className, icon, children, ...pr
     ),
     ...props,
     children: [
-      icon || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MoreMenu, { className: "size-4" }),
+      icon || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MoreMenu, { className: "size-4" }),
       children
     ]
   }
@@ -3013,7 +3270,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var DropdownMenuSubTrigger = React12.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3026,12 +3283,12 @@ var DropdownMenuSubTrigger = React11.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronRight, { className: "ml-auto" })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronRight, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var DropdownMenuSubContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -3043,7 +3300,7 @@ var DropdownMenuSubContent = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var DropdownMenuContent = React12.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -3057,7 +3314,7 @@ var DropdownMenuContent = React11.forwardRef(({ className, sideOffset = 4, align
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React11.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var DropdownMenuItem = React12.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3074,7 +3331,7 @@ var DropdownMenuItem = React11.forwardRef(({ className, inset, style, ...props }
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, style, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var DropdownMenuCheckboxItem = React12.forwardRef(({ className, children, style, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3089,7 +3346,7 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, style,
     },
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Checkbox,
         {
           checked: checked === true,
@@ -3097,12 +3354,12 @@ var DropdownMenuCheckboxItem = React11.forwardRef(({ className, children, style,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1", children })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex-1", children })
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React11.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+var DropdownMenuRadioItem = React12.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -3116,13 +3373,13 @@ var DropdownMenuRadioItem = React11.forwardRef(({ className, children, style, ..
     },
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var DropdownMenuLabel = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -3135,7 +3392,7 @@ var DropdownMenuLabel = React11.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var DropdownMenuSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3148,7 +3405,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest opacity-60", className),
@@ -3157,6 +3414,793 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/components/ui/charts/chart-legend.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ChartLegend({
+  items,
+  x = 0,
+  y = 550,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      className: `flex justify-center items-center gap-6 ${className}`,
+      style: { height: "100%" },
+      children: items.map(({ key, color, label }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typography, { variant: "body-xs", children: label || key })
+      ] }, key))
+    }
+  ) });
+}
+
+// src/lib/chart-utils.ts
+var CHART_COLORS = {
+  // Status colors
+  SUCCESS: "var(--color-success)",
+  ERROR: "var(--color-error)",
+  WARNING: "var(--color-warning)",
+  SECONDARY: "var(--color-secondary)",
+  // Primary brand colors
+  PRIMARY: "var(--color-primary)",
+  // Categorical palette from altitude-tokens
+  CATEGORICAL: [
+    "var(--color-chart-color-palette-categorical-1)",
+    "var(--color-chart-color-palette-categorical-2)",
+    "var(--color-chart-color-palette-categorical-3)",
+    "var(--color-chart-color-palette-categorical-4)",
+    "var(--color-chart-color-palette-categorical-5)"
+  ],
+  // Performance palette from altitude-tokens
+  PERFORMANCE: [
+    "var(--color-chart-color-palette-performance-1)",
+    "var(--color-chart-color-palette-performance-2)",
+    "var(--color-chart-color-palette-performance-3)",
+    "var(--color-chart-color-palette-performance-4)",
+    "var(--color-chart-color-palette-performance-5)"
+  ],
+  // Heatmap palette from altitude-tokens
+  HEATMAP: [
+    "var(--color-chart-color-palette-heatmap-1)",
+    "var(--color-chart-color-palette-heatmap-2)",
+    "var(--color-chart-color-palette-heatmap-3)",
+    "var(--color-chart-color-palette-heatmap-4)",
+    "var(--color-chart-color-palette-heatmap-5)"
+  ]
+};
+var COLOR_SCHEMES = {
+  passFail: {
+    PASS: CHART_COLORS.SUCCESS,
+    FAIL: CHART_COLORS.ERROR
+  },
+  targetVsAchieved: {
+    TARGET: CHART_COLORS.SECONDARY,
+    ACHIEVED: CHART_COLORS.SUCCESS
+  },
+  performance: {
+    HIGH: CHART_COLORS.PERFORMANCE[0],
+    MEDIUM_HIGH: CHART_COLORS.PERFORMANCE[1],
+    MEDIUM: CHART_COLORS.PERFORMANCE[2],
+    MEDIUM_LOW: CHART_COLORS.PERFORMANCE[3],
+    LOW: CHART_COLORS.PERFORMANCE[4]
+  }
+};
+var CHART_CONSTANTS = {
+  // Standard chart dimensions
+  STANDARD_HEIGHT: 400,
+  LARGE_HEIGHT: 500,
+  SMALL_HEIGHT: 300,
+  // Chart margins
+  MARGIN: {
+    top: 20,
+    right: 30,
+    left: 20,
+    bottom: 5
+  },
+  // Axis dimensions
+  AXIS_HEIGHT_STANDARD: 30,
+  AXIS_HEIGHT_ROTATED: 60,
+  AXIS_WIDTH_STANDARD: 60,
+  AXIS_WIDTH_YAXIS: 80,
+  // Pie chart constants
+  PIE_CHART_CENTER_X: 300,
+  PIE_CHART_CENTER_Y: 200
+};
+var getSeriesColor = (index) => {
+  return CHART_COLORS.CATEGORICAL[index % CHART_COLORS.CATEGORICAL.length] || CHART_COLORS.PRIMARY;
+};
+var getPerformanceColor = (index) => {
+  return CHART_COLORS.PERFORMANCE[index % CHART_COLORS.PERFORMANCE.length] || CHART_COLORS.PRIMARY;
+};
+var getHeatmapColor = (index) => {
+  return CHART_COLORS.HEATMAP[index % CHART_COLORS.HEATMAP.length] || CHART_COLORS.PRIMARY;
+};
+var createLegendItems = (colorScheme) => {
+  return Object.entries(colorScheme).map(([key, color]) => ({
+    key,
+    color,
+    label: key
+  }));
+};
+var calculateYAxisWidth = (data, yAxisKey) => {
+  if (!data || data.length === 0) return CHART_CONSTANTS.AXIS_WIDTH_YAXIS;
+  const maxLength = Math.max(
+    ...data.map((item) => {
+      const value = item[yAxisKey];
+      return String(value || "").length;
+    })
+  );
+  return Math.max(maxLength * 8 + 20, CHART_CONSTANTS.AXIS_WIDTH_YAXIS);
+};
+var formatPercentage = (value, decimals = 1) => {
+  return `${(value * 100).toFixed(decimals)}%`;
+};
+var formatLargeNumber = (value) => {
+  if (value >= 1e6) {
+    return `${(value / 1e6).toFixed(1)}M`;
+  }
+  if (value >= 1e3) {
+    return `${(value / 1e3).toFixed(1)}K`;
+  }
+  return value.toString();
+};
+
+// src/components/ui/charts/chart-labels.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var createCustomXAxisLabel = (text, yOffset = 40) => {
+  const CustomXAxisLabel = ({ viewBox }) => {
+    if (!viewBox) return null;
+    const { x, y, width } = viewBox;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+  };
+  CustomXAxisLabel.displayName = "CustomXAxisLabel";
+  return CustomXAxisLabel;
+};
+var createCustomYAxisLabel = (text, leftMargin) => {
+  const CustomYAxisLabel = ({ viewBox }) => {
+    if (!viewBox) return null;
+    const { x, y, height } = viewBox;
+    const offset = leftMargin ? leftMargin + 10 : 110;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+  };
+  CustomYAxisLabel.displayName = "CustomYAxisLabel";
+  return CustomYAxisLabel;
+};
+var createCustomYAxisRightLabel = (text) => {
+  const CustomYAxisRightLabel = ({ viewBox }) => {
+    if (!viewBox) return null;
+    const { x, y, width, height } = viewBox;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+  };
+  CustomYAxisRightLabel.displayName = "CustomYAxisRightLabel";
+  return CustomYAxisRightLabel;
+};
+var customXAxisTick = (props) => {
+  const { x, y, payload } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "foreignObject",
+    {
+      x: -20,
+      y: 5,
+      width: 40,
+      height: 20,
+      style: { overflow: "visible" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: "flex items-start justify-center h-full",
+          style: { overflow: "visible" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Typography,
+            {
+              variant: "body-xs",
+              className: "text-secondary whitespace-nowrap",
+              children: payload.value
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+var customXAxisTickRotated = (props) => {
+  const { x, y, payload } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "text",
+    {
+      x: 0,
+      y: 0,
+      dy: 10,
+      textAnchor: "end",
+      fill: "currentColor",
+      transform: "rotate(-45)",
+      className: "text-secondary",
+      style: { fontSize: "12px" },
+      children: payload.value
+    }
+  ) });
+};
+var customYAxisTick = (props) => {
+  const { x, y, payload } = props;
+  const text = String(payload.value);
+  const estimatedWidth = Math.max(text.length * 8, 80);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "foreignObject",
+    {
+      x: x - estimatedWidth + 5,
+      y: y - 6,
+      width: estimatedWidth,
+      height: 15,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
+    }
+  );
+};
+
+// src/components/ui/charts/chart-tooltip.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function TooltipContainer({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className: `bg-light border border-subtle rounded p-2.5 text-dark ${className}`,
+      children
+    }
+  );
+}
+function TooltipItem({
+  color,
+  label,
+  value,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("br", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Typography, { variant: "label-sm", className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "span",
+        {
+          className: "inline-block w-3 h-3 mr-1.5",
+          style: { backgroundColor: color }
+        }
+      ),
+      label,
+      ": ",
+      value
+    ] })
+  ] });
+}
+function GenericTooltip({
+  title,
+  items,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TooltipContainer, { className, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typography, { variant: "label-sm-bold", children: title }),
+    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      TooltipItem,
+      {
+        color: item.color,
+        label: item.label,
+        value: item.value
+      },
+      index
+    ))
+  ] });
+}
+
+// src/components/ui/charts/bar-chart.tsx
+var import_react2 = require("react");
+var import_recharts = require("recharts");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var BarChart = (0, import_react2.forwardRef)(
+  ({
+    data,
+    xAxisKey,
+    yAxisKey,
+    title,
+    xAxisLabel,
+    yAxisLabel,
+    barColor = CHART_COLORS.PRIMARY,
+    className = "",
+    rotateXAxisLabels = false,
+    showLegend = false,
+    legendItems = [],
+    onDataPointClick,
+    layout = "horizontal",
+    xAxisType = "category",
+    yAxisType = "number",
+    barDataKey
+  }, ref) => {
+    const handleClick = (data2) => {
+      if (onDataPointClick && data2 && typeof data2 === "object") {
+        onDataPointClick(data2);
+      }
+    };
+    const defaultLegendItems = showLegend && legendItems.length === 0 ? [{ key: yAxisKey, color: barColor, label: yAxisKey }] : legendItems;
+    const hasData = data && data.length > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        ref,
+        className: `bg-light border border-subtle mx-6 ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_recharts.ResponsiveContainer,
+            {
+              width: "100%",
+              height: CHART_CONSTANTS.STANDARD_HEIGHT,
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                import_recharts.BarChart,
+                {
+                  data,
+                  margin: {
+                    ...CHART_CONSTANTS.MARGIN,
+                    left: 24,
+                    bottom: rotateXAxisLabels ? 60 : 50
+                  },
+                  onClick: handleClick,
+                  layout,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_recharts.XAxis,
+                      {
+                        dataKey: xAxisKey,
+                        type: xAxisType,
+                        axisLine: false,
+                        tickLine: false,
+                        tick: rotateXAxisLabels ? customXAxisTickRotated : customXAxisTick,
+                        interval: 0,
+                        height: rotateXAxisLabels ? CHART_CONSTANTS.AXIS_HEIGHT_ROTATED : CHART_CONSTANTS.AXIS_HEIGHT_STANDARD,
+                        width: CHART_CONSTANTS.AXIS_WIDTH_STANDARD,
+                        label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel, 80) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_recharts.YAxis,
+                      {
+                        axisLine: false,
+                        tickLine: false,
+                        tick: customYAxisTick,
+                        label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0,
+                        dataKey: yAxisKey,
+                        type: yAxisType
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_recharts.Tooltip,
+                      {
+                        content: ({
+                          active,
+                          payload,
+                          label
+                        }) => {
+                          if (active && payload && payload.length) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                              GenericTooltip,
+                              {
+                                title: label?.toString(),
+                                items: payload.map((entry) => ({
+                                  color: entry.color || barColor,
+                                  label: entry.name || yAxisKey,
+                                  value: entry.value || 0
+                                }))
+                              }
+                            );
+                          }
+                          return null;
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_recharts.Bar,
+                      {
+                        dataKey: barDataKey || yAxisKey,
+                        fill: barColor,
+                        name: barDataKey || yAxisKey
+                      }
+                    ),
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegend, { items: defaultLegendItems })
+                  ]
+                }
+              )
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+        ]
+      }
+    );
+  }
+);
+BarChart.displayName = "BarChart";
+
+// src/components/ui/charts/line-chart.tsx
+var import_react3 = require("react");
+var import_recharts2 = require("recharts");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var LineChart = (0, import_react3.forwardRef)(
+  ({
+    data,
+    xAxisKey,
+    series,
+    title,
+    xAxisLabel,
+    yAxisLabel,
+    onDataPointClick,
+    className = "",
+    showLegend = true,
+    legendItems = []
+  }, ref) => {
+    const handleClick = (data2) => {
+      if (onDataPointClick && data2 && typeof data2 === "object") {
+        onDataPointClick(data2);
+      }
+    };
+    const defaultLegendItems = legendItems.length > 0 ? legendItems : createLegendItems(
+      series.reduce(
+        (acc, s, index) => ({
+          ...acc,
+          [s.dataKey]: s.color || getSeriesColor(index)
+        }),
+        {}
+      )
+    );
+    const hasData = data && data.length > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "div",
+      {
+        ref,
+        className: `bg-light border border-subtle mx-6 ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_recharts2.ResponsiveContainer,
+            {
+              width: "100%",
+              height: CHART_CONSTANTS.STANDARD_HEIGHT,
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                import_recharts2.LineChart,
+                {
+                  data,
+                  margin: {
+                    ...CHART_CONSTANTS.MARGIN,
+                    left: 24,
+                    bottom: 50
+                  },
+                  onClick: handleClick,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_recharts2.XAxis,
+                      {
+                        dataKey: xAxisKey,
+                        axisLine: false,
+                        tickLine: false,
+                        tick: customXAxisTick,
+                        interval: 0,
+                        height: CHART_CONSTANTS.AXIS_HEIGHT_STANDARD,
+                        label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_recharts2.YAxis,
+                      {
+                        axisLine: false,
+                        tickLine: false,
+                        tick: customYAxisTick,
+                        label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_recharts2.Tooltip,
+                      {
+                        content: ({
+                          active,
+                          payload,
+                          label
+                        }) => {
+                          if (active && payload && payload.length) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              GenericTooltip,
+                              {
+                                title: label?.toString(),
+                                items: payload.map((entry) => ({
+                                  color: entry.color || CHART_COLORS.PRIMARY,
+                                  label: entry.name || entry.dataKey || "",
+                                  value: entry.value || 0
+                                }))
+                              }
+                            );
+                          }
+                          return null;
+                        }
+                      }
+                    ),
+                    series.map((s, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_recharts2.Line,
+                      {
+                        type: "monotone",
+                        dataKey: s.dataKey,
+                        stroke: s.color || getSeriesColor(index),
+                        strokeWidth: s.strokeWidth || 2,
+                        dot: s.dot !== false ? { r: 4 } : false,
+                        activeDot: s.activeDot !== false ? { r: 6 } : false
+                      },
+                      s.dataKey
+                    )),
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegend, { items: defaultLegendItems })
+                  ]
+                }
+              )
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+        ]
+      }
+    );
+  }
+);
+LineChart.displayName = "LineChart";
+
+// src/components/ui/charts/pie-chart.tsx
+var import_react4 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var PieChart = (0, import_react4.forwardRef)(
+  ({
+    data,
+    title,
+    onDataPointClick,
+    className = "",
+    showLegend = true,
+    legendItems = [],
+    innerRadius = "40%",
+    outerRadius = "70%",
+    showLabels = true
+  }, ref) => {
+    const handleClick = (data2) => {
+      if (onDataPointClick && data2 && typeof data2 === "object") {
+        onDataPointClick(data2);
+      }
+    };
+    const defaultLegendItems = legendItems.length > 0 ? legendItems : createLegendItems(
+      data.reduce(
+        (acc, item, index) => ({
+          ...acc,
+          [item.name]: item.color || getSeriesColor(index)
+        }),
+        {}
+      )
+    );
+    const hasData = data && data.length > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        ref,
+        className: `bg-light border border-subtle mx-6 ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            import_recharts3.PieChart,
+            {
+              width: 600,
+              height: CHART_CONSTANTS.LARGE_HEIGHT,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  import_recharts3.Pie,
+                  {
+                    data,
+                    innerRadius,
+                    outerRadius,
+                    dataKey: "value",
+                    cy: CHART_CONSTANTS.PIE_CHART_CENTER_Y,
+                    cx: CHART_CONSTANTS.PIE_CHART_CENTER_X,
+                    label: showLabels,
+                    labelLine: false,
+                    onClick: handleClick,
+                    children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      import_recharts3.Cell,
+                      {
+                        fill: entry.color || getSeriesColor(index)
+                      },
+                      `cell-${index}`
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  import_recharts3.Tooltip,
+                  {
+                    content: ({
+                      active,
+                      payload
+                    }) => {
+                      if (active && payload && payload.length && payload[0]) {
+                        const data2 = payload[0].payload;
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          GenericTooltip,
+                          {
+                            title: data2.name,
+                            items: [
+                              {
+                                color: data2.color || CHART_COLORS.PRIMARY,
+                                label: "Value",
+                                value: data2.value
+                              }
+                            ]
+                          }
+                        );
+                      }
+                      return null;
+                    }
+                  }
+                ),
+                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegend, { items: defaultLegendItems, y: 400 })
+              ]
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+        ]
+      }
+    );
+  }
+);
+PieChart.displayName = "PieChart";
+
+// src/components/ui/table.tsx
+var import_react5 = require("react");
+var import_react_table = require("@tanstack/react-table");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Table({
+  table,
+  className,
+  showPagination = false,
+  paginationClassName
+}) {
+  const currentPage = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const totalPages = table.getPageCount();
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const showingText = totalRows > 0 ? "Showing " + (currentPage * pageSize + 1) + "-" + Math.min((currentPage + 1) * pageSize, totalRows) + " of " + totalRows + " results" : "No results found";
+  const handlePreviousPage = (0, import_react5.useCallback)(() => {
+    table.previousPage();
+  }, [table]);
+  const handleNextPage = (0, import_react5.useCallback)(() => {
+    table.nextPage();
+  }, [table]);
+  const handlePageChange = (0, import_react5.useCallback)(
+    (pageIndex) => {
+      table.setPageIndex(pageIndex);
+    },
+    [table]
+  );
+  const handlePageSizeChange = (0, import_react5.useCallback)(
+    (value) => {
+      table.setPageSize(Number(value));
+    },
+    [table]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { className: "min-w-full divide-y divide-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "div",
+        {
+          className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
+          onClick: header.column.getToggleSortingHandler(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Typography,
+              {
+                variant: "label-xs",
+                className: "text-light uppercase tracking-wider",
+                children: (0, import_react_table.flexRender)(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              }
+            ),
+            header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ml-1", children: [
+              header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronUp, { className: "w-4 h-4 text-light" }),
+              header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDown, { className: "w-4 h-4 text-light" })
+            ] })
+          ]
+        }
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body-sm", children: (0, import_react_table.flexRender)(
+        cell.column.columnDef.cell,
+        cell.getContext()
+      ) }) }, cell.id)) }, row.id)) })
+    ] }) }),
+    showPagination && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between px-6 py-3 bg-light border-t border-subtle",
+          paginationClassName
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handlePreviousPage,
+                disabled: !table.getCanPreviousPage(),
+                className: "p-2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronLeft, { className: "w-4 h-4" })
+              }
+            ),
+            Array.from(
+              { length: Math.min(5, table.getPageCount()) },
+              (_, i) => {
+                let pageNumber;
+                if (totalPages <= 5) {
+                  pageNumber = i;
+                } else if (currentPage <= 2) {
+                  pageNumber = i;
+                } else if (currentPage >= totalPages - 3) {
+                  pageNumber = totalPages - 5 + i;
+                } else {
+                  pageNumber = currentPage - 2 + i;
+                }
+                const isActive = pageNumber === currentPage;
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  Button,
+                  {
+                    variant: isActive ? "default" : "ghost",
+                    size: "sm",
+                    onClick: () => handlePageChange(pageNumber),
+                    className: "min-w-8 h-8 p-0",
+                    children: pageNumber + 1
+                  },
+                  pageNumber
+                );
+              }
+            ),
+            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "px-1 text-secondary", children: "..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleNextPage,
+                disabled: !table.getCanNextPage(),
+                className: "p-2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronRight, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-3 w-48", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              Typography,
+              {
+                variant: "body-sm",
+                className: "text-secondary whitespace-nowrap",
+                children: "Rows per page:"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              Select,
+              {
+                value: table.getState().pagination.pageSize.toString(),
+                onValueChange: handlePageSizeChange,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectValue, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectItem, { value: size.toString(), children: size }, size)) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowDown,
@@ -3164,14 +4208,19 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
   ArrowRight,
   ArrowUp,
   Badge,
+  BarChart,
   Bell,
   Bookmark,
   Button,
+  CHART_COLORS,
+  CHART_CONSTANTS,
+  COLOR_SCHEMES,
   Calendar,
   CaretDown,
   CaretLeft,
   CaretRight,
   CaretUp,
+  ChartLegend,
   Chat,
   Check,
   CheckIcon,
@@ -3209,9 +4258,20 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
   Exclamation,
   EyeClosed,
   EyeOpen,
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
   Filter,
   FilterDescending,
   FormField,
+  GenericTooltip,
   GraphBar,
   GraphDonut,
   GraphLine,
@@ -3220,6 +4280,8 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
   Home,
   Information,
   Input,
+  Label,
+  LineChart,
   Location,
   Lock,
   Logout,
@@ -3227,6 +4289,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
   Minus,
   MoreMenu,
   Phone,
+  PieChart,
   Plus,
   QuestionCircle,
   Select,
@@ -3239,14 +4302,19 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  Separator,
   Share,
   Star,
   Statement,
   Table,
+  TableIcon,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  Textarea,
+  TooltipContainer,
+  TooltipItem,
   Trash,
   Typography,
   Upload,
@@ -3257,8 +4325,20 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
   X,
   badgeVariants,
   buttonVariants,
+  calculateYAxisWidth,
   checkboxVariants,
-  inputVariants,
+  createCustomXAxisLabel,
+  createCustomYAxisLabel,
+  createCustomYAxisRightLabel,
+  createLegendItems,
+  customXAxisTick,
+  customXAxisTickRotated,
+  customYAxisTick,
+  formatLargeNumber,
+  formatPercentage,
+  getHeatmapColor,
+  getPerformanceColor,
+  getSeriesColor,
   selectTriggerVariants,
   tabsVariants,
   typographyVariants,