@northslopetech/altitude-ui 2.0.2 → 2.0.5

package/dist/index.mjs

@@ -23,7 +23,7 @@ var buttonVariants = cva2(
         destructive: "bg-error text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
         "destructive-subtle": "bg-light text-error border border-secondary shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
         ghost: "bg-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
-        link: "bg-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2"
+        link: "bg-light text-dark underline underline-offset-4 hover:cursor-pointer active:text-info"
       },
       size: {
         sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
@@ -156,7 +156,19 @@ import { cva as cva4 } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var selectTriggerVariants = cva4(
-  "flex w-full items-center justify-between border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors rounded-md px-3 min-w-80"
+  "flex items-center justify-between border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors rounded-md px-3",
+  {
+    variants: {
+      width: {
+        default: "w-full min-w-80",
+        fill: "w-full",
+        compact: "w-auto min-w-32"
+      }
+    },
+    defaultVariants: {
+      width: "default"
+    }
+  }
 );
 var selectContentVariants = cva4(
   "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
@@ -178,7 +190,7 @@ var SelectGroup = SelectPrimitive.Group;
 SelectGroup.displayName = "SelectGroup";
 var SelectValue = SelectPrimitive.Value;
 SelectValue.displayName = "SelectValue";
-var SelectTrigger = React3.forwardRef(({ className, children, style, ...props }, ref) => {
+var SelectTrigger = React3.forwardRef(({ className, children, style, width, ...props }, ref) => {
   const tokenStyles = {
     font: "var(--typography-label-md-regular)",
     ...style
@@ -188,7 +200,7 @@ var SelectTrigger = React3.forwardRef(({ className, children, style, ...props },
     {
       ref,
       className: cn(
-        selectTriggerVariants(),
+        selectTriggerVariants({ width }),
         "border-secondary focus-visible:border-2 focus-visible:border-strong data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
         className
       ),
@@ -404,30 +416,190 @@ var FormField = React4.forwardRef(
 FormField.displayName = "FormField";
 
 // src/components/ui/date-picker.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cva as cva5 } from "class-variance-authority";
 import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
+
+// src/components/ui/input.tsx
+import * as React5 from "react";
+import { cva as cva5 } from "class-variance-authority";
+import { X, Lock } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var datePickerTriggerVariants = cva5(
-  "flex w-full items-center justify-between border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2"
+var inputVariants = cva5(
+  "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",
+  {
+    variants: {
+      variant: {
+        input: "h-10 py-2",
+        textarea: "min-h-20 resize-none pt-4 pb-2"
+      }
+    },
+    defaultVariants: {
+      variant: "input"
+    }
+  }
+);
+var Input = React5.forwardRef(
+  ({
+    className,
+    variant = "input",
+    style,
+    value,
+    onChange,
+    onClear,
+    showClear: showClearProp,
+    readOnly,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React5.useState(value || "");
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const showClear = showClearProp !== false && currentValue && currentValue.toString().length > 0 && !readOnly;
+    const showLock = readOnly;
+    const tokenStyles = {
+      font: "var(--typography-label-md-regular)",
+      ...style
+    };
+    const handleInputChange = (e) => {
+      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) {
+        onChange(e);
+      }
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      if (onChange) {
+        if (variant === "input") {
+          const inputEvent = {
+            target: { value: "" },
+            currentTarget: { value: "" }
+          };
+          onChange(inputEvent);
+        } else {
+          const textareaEvent = {
+            target: { value: "" },
+            currentTarget: { value: "" }
+          };
+          onChange(
+            textareaEvent
+          );
+        }
+      }
+      onClear?.();
+    };
+    if (variant === "textarea") {
+      return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            className: cn(
+              inputVariants({ variant }),
+              (showClear || showLock) && "pr-10",
+              className
+            ),
+            style: tokenStyles,
+            ref,
+            value: currentValue,
+            onChange: handleTextareaChange,
+            readOnly,
+            ...props
+          }
+        ),
+        showClear && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            className: "absolute right-3 top-3 h-4 w-4 text-secondary hover:text-dark transition-colors",
+            children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
+          }
+        ),
+        showLock && /* @__PURE__ */ jsx4(Lock, { className: "absolute right-3 top-3 h-4 w-4 text-secondary" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          className: cn(
+            inputVariants({ variant }),
+            (showClear || showLock) && "pr-10",
+            className
+          ),
+          style: tokenStyles,
+          ref,
+          value: currentValue,
+          onChange: handleInputChange,
+          readOnly,
+          ...props
+        }
+      ),
+      showClear && /* @__PURE__ */ jsx4(
+        "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__ */ jsx4(X, { className: "h-4 w-4" })
+        }
+      ),
+      showLock && /* @__PURE__ */ jsx4(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
+    ] });
+  }
 );
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var DAYS = ["S", "M", "T", "W", "T", "F", "S"];
-var DatePicker = React5.forwardRef(
+Input.displayName = "Input";
+var TypedInput = Input;
+
+// src/components/ui/date-picker.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var getDayNames = () => {
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    days.push(
+      new Intl.DateTimeFormat("en-US", { weekday: "narrow" }).format(
+        new Date(2e3, 0, i + 1)
+      )
+    );
+  }
+  return days;
+};
+var getMonthNames = () => {
+  const months = [];
+  for (let i = 0; i < 12; i++) {
+    months.push(
+      new Intl.DateTimeFormat("en-US", { month: "long" }).format(
+        new Date(2e3, i, 1)
+      )
+    );
+  }
+  return months;
+};
+var parseDateInput = (input) => {
+  if (!input.trim()) return null;
+  const date = new Date(input);
+  if (isNaN(date.getTime())) return null;
+  return date;
+};
+var formatDateInput = (date) => {
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+};
+var DatePicker = React6.forwardRef(
   ({
     value,
     onValueChange,
@@ -444,20 +616,30 @@ var DatePicker = React5.forwardRef(
       if (isNaN(parsed.getTime())) return void 0;
       return parsed;
     };
-    const [selectedDate, setSelectedDate] = React5.useState(
+    const [selectedDate, setSelectedDate] = React6.useState(
       value || parseDate(defaultValue)
     );
-    const [currentMonth, setCurrentMonth] = React5.useState(() => {
+    const [currentMonth, setCurrentMonth] = React6.useState(() => {
       const date = value || parseDate(defaultValue) || /* @__PURE__ */ new Date();
       return new Date(date.getFullYear(), date.getMonth());
     });
-    const [open, setOpen] = React5.useState(false);
-    React5.useEffect(() => {
+    const [open, setOpen] = React6.useState(false);
+    const [inputValue, setInputValue] = React6.useState(() => {
+      const initialDate = value || parseDate(defaultValue);
+      return initialDate ? formatDateInput(initialDate) : "";
+    });
+    React6.useEffect(() => {
       setSelectedDate(value);
-      if (!value) return;
-      setCurrentMonth(new Date(value.getFullYear(), value.getMonth()));
+      if (value) {
+        setCurrentMonth(new Date(value.getFullYear(), value.getMonth()));
+        setInputValue(formatDateInput(value));
+      } else if (value === void 0) {
+        return;
+      } else {
+        setInputValue("");
+      }
     }, [value]);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (value) return;
       const parsedDefault = parseDate(defaultValue);
       if (!parsedDefault) return;
@@ -465,13 +647,51 @@ var DatePicker = React5.forwardRef(
       setCurrentMonth(
         new Date(parsedDefault.getFullYear(), parsedDefault.getMonth())
       );
+      setInputValue(formatDateInput(parsedDefault));
     }, [defaultValue, value]);
     const handleDateSelect = (date) => {
       const newDate = new Date(date);
       setSelectedDate(newDate);
+      setInputValue(formatDateInput(newDate));
       onValueChange?.(newDate);
       setOpen(false);
     };
+    const handleInputChange = (e) => {
+      const rawValue = e.target.value;
+      const cursorPosition = e.target.selectionStart || 0;
+      const input = e.target;
+      const numbersOnly = rawValue.replace(/\D/g, "");
+      let formattedValue = "";
+      if (numbersOnly.length > 0) {
+        if (numbersOnly.length <= 2) {
+          formattedValue = numbersOnly;
+        } else if (numbersOnly.length <= 4) {
+          formattedValue = `${numbersOnly.slice(0, 2)}/${numbersOnly.slice(2)}`;
+        } else {
+          formattedValue = `${numbersOnly.slice(0, 2)}/${numbersOnly.slice(2, 4)}/${numbersOnly.slice(4, 8)}`;
+        }
+      }
+      setInputValue(formattedValue);
+      setTimeout(() => {
+        let newPosition = cursorPosition;
+        if (formattedValue.length > rawValue.length) {
+          newPosition = Math.min(cursorPosition + 1, formattedValue.length);
+        }
+        newPosition = Math.max(0, Math.min(newPosition, formattedValue.length));
+        input.setSelectionRange(newPosition, newPosition);
+      }, 0);
+      const parsedDate = parseDateInput(formattedValue);
+      if (parsedDate) {
+        setSelectedDate(parsedDate);
+        setCurrentMonth(
+          new Date(parsedDate.getFullYear(), parsedDate.getMonth())
+        );
+        onValueChange?.(parsedDate);
+      } else if (formattedValue === "") {
+        setSelectedDate(void 0);
+        onValueChange?.(void 0);
+      }
+    };
     const handleMonthChange = (direction) => {
       setCurrentMonth((prev) => {
         const newMonth = new Date(prev);
@@ -483,112 +703,129 @@ var DatePicker = React5.forwardRef(
         return newMonth;
       });
     };
-    const formatDate = (date) => {
-      return date.toLocaleDateString("en-US", {
-        month: "2-digit",
-        day: "2-digit",
-        year: "numeric"
-      });
+    const handleMonthSelect = (monthIndex) => {
+      const newMonth = new Date(currentMonth);
+      newMonth.setMonth(parseInt(monthIndex, 10));
+      setCurrentMonth(newMonth);
+    };
+    const handleYearSelect = (year) => {
+      const newMonth = new Date(currentMonth);
+      newMonth.setFullYear(parseInt(year, 10));
+      setCurrentMonth(newMonth);
     };
     const getDaysInMonth = (date) => {
       const year = date.getFullYear();
       const month = date.getMonth();
       const firstDay = new Date(year, month, 1);
-      const lastDay = new Date(year, month + 1, 0);
-      const daysInMonth = lastDay.getDate();
+      const daysInMonth = new Date(year, month + 1, 0).getDate();
       const startingDayOfWeek = firstDay.getDay();
-      const days2 = [];
-      for (let i = 0; i < startingDayOfWeek; i++) {
-        days2.push(null);
-      }
-      for (let day = 1; day <= daysInMonth; day++) {
-        days2.push(new Date(year, month, day));
-      }
-      return days2;
+      return [
+        // Empty cells for days before the first day of the month
+        ...Array(startingDayOfWeek).fill(null),
+        // All days of the month
+        ...Array.from(
+          { length: daysInMonth },
+          (_, i) => new Date(year, month, i + 1)
+        )
+      ];
     };
     const isDateSelected = (date) => {
       if (!selectedDate) return false;
       return date.getTime() === selectedDate.getTime();
     };
     const isToday = (date) => {
-      return date.getTime() === (/* @__PURE__ */ new Date()).getTime();
+      const today = /* @__PURE__ */ new Date();
+      return date.toDateString() === today.toDateString();
     };
     const days = getDaysInMonth(currentMonth);
-    return /* @__PURE__ */ jsxs4(
+    const months = getMonthNames();
+    const dayNames = getDayNames();
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const years = Array.from({ length: 100 }, (_, i) => currentYear - 50 + i);
+    return /* @__PURE__ */ jsxs5(
       PopoverPrimitive.Root,
       {
         open: disabled ? false : open,
         onOpenChange: disabled ? void 0 : setOpen,
         children: [
-          /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              ref,
-              className: cn(
-                datePickerTriggerVariants(),
-                "border-secondary focus-visible:border-2 focus-visible:border-strong",
-                className
-              ),
-              disabled,
-              ...props,
-              children: [
-                /* @__PURE__ */ jsx4(
-                  Typography,
-                  {
-                    variant: "label-md",
-                    as: "span",
-                    className: cn(
-                      "flex-1 text-left truncate",
-                      !selectedDate && "text-secondary",
-                      disabled && "text-secondary"
-                    ),
-                    children: selectedDate ? formatDate(selectedDate) : placeholder
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  Calendar,
-                  {
-                    className: cn(
-                      "h-5 w-5 flex-shrink-0",
-                      disabled ? "text-secondary opacity-50" : "text-secondary"
-                    )
-                  }
+          /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx5(
+              TypedInput,
+              {
+                ref,
+                value: inputValue,
+                onChange: handleInputChange,
+                placeholder,
+                disabled,
+                className: cn("pr-10", className),
+                showClear: false,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx5(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx5("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ jsx5(
+              Calendar,
+              {
+                className: cn(
+                  "h-5 w-5 flex-shrink-0",
+                  disabled ? "text-secondary opacity-50" : "text-secondary"
                 )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsx5(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
             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",
-              sideOffset: 4,
-              align: "start",
-              children: /* @__PURE__ */ jsxs4("div", { className: "p-4", children: [
-                /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-4", children: [
-                  /* @__PURE__ */ jsx4(
+              sideOffset: 8,
+              align: "end",
+              alignOffset: -12,
+              side: "bottom",
+              sticky: "always",
+              children: /* @__PURE__ */ jsxs5("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between mb-4 gap-1", children: [
+                  /* @__PURE__ */ jsx5(
                     "button",
                     {
                       onClick: () => handleMonthChange("prev"),
-                      className: "p-1 hover:bg-gray rounded transition-colors",
-                      children: /* @__PURE__ */ jsx4(ChevronLeft, { className: "h-4 w-4" })
+                      className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
+                      children: /* @__PURE__ */ jsx5(ChevronLeft, { className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsxs4(Typography, { variant: "label-sm-bold", as: "div", children: [
-                    MONTHS[currentMonth.getMonth()],
-                    " ",
-                    currentMonth.getFullYear()
+                  /* @__PURE__ */ jsxs5("div", { className: "flex gap-1 flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsxs5(
+                      Select,
+                      {
+                        value: currentMonth.getMonth().toString(),
+                        onValueChange: handleMonthSelect,
+                        children: [
+                          /* @__PURE__ */ jsx5(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ jsx5(SelectValue, {}) }),
+                          /* @__PURE__ */ jsx5(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ jsx5(SelectItem, { value: index.toString(), children: month }, month)) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5(
+                      Select,
+                      {
+                        value: currentMonth.getFullYear().toString(),
+                        onValueChange: handleYearSelect,
+                        children: [
+                          /* @__PURE__ */ jsx5(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ jsx5(SelectValue, {}) }),
+                          /* @__PURE__ */ jsx5(SelectContent, { children: years.map((year) => /* @__PURE__ */ jsx5(SelectItem, { value: year.toString(), children: year }, year)) })
+                        ]
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx5(
                     "button",
                     {
                       onClick: () => handleMonthChange("next"),
-                      className: "p-1 hover:bg-gray rounded transition-colors",
-                      children: /* @__PURE__ */ jsx4(ChevronRight, { className: "h-4 w-4" })
+                      className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
+                      children: /* @__PURE__ */ jsx5(ChevronRight, { className: "h-4 w-4" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx5(
                     Typography,
                     {
                       variant: "label-xs-bold",
@@ -598,11 +835,11 @@ var DatePicker = React5.forwardRef(
                     },
                     day
                   )) }),
-                  /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ jsx5(
                     "div",
                     {
                       className: "h-8 w-8 flex items-center justify-center",
-                      children: date && /* @__PURE__ */ jsx4(
+                      children: date && /* @__PURE__ */ jsx5(
                         "button",
                         {
                           onClick: () => handleDateSelect(date),
@@ -614,7 +851,7 @@ var DatePicker = React5.forwardRef(
                             !isDateSelected(date) && "rounded-full",
                             isToday(date) && !isDateSelected(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"
                           ),
-                          children: /* @__PURE__ */ jsx4(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
+                          children: /* @__PURE__ */ jsx5(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
                         }
                       )
                     },
@@ -632,9 +869,9 @@ var DatePicker = React5.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 // src/components/ui/upload.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 var uploadVariants = cva6(
   "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
@@ -658,7 +895,7 @@ var uploadVariants = cva6(
     }
   }
 );
-var Upload = React6.forwardRef(
+var Upload = React7.forwardRef(
   ({
     className,
     endpoint,
@@ -676,23 +913,23 @@ var Upload = React6.forwardRef(
     loading = false,
     ...props
   }, ref) => {
-    const [currentState, setCurrentState] = React6.useState(state);
-    const [currentProgress, setCurrentProgress] = React6.useState(progress);
-    const fileInputRef = React6.useRef(null);
-    const [selectedFiles, setSelectedFiles] = React6.useState([]);
-    React6.useEffect(() => {
+    const [currentState, setCurrentState] = React7.useState(state);
+    const [currentProgress, setCurrentProgress] = React7.useState(progress);
+    const fileInputRef = React7.useRef(null);
+    const [selectedFiles, setSelectedFiles] = React7.useState([]);
+    React7.useEffect(() => {
       if (loading) {
         setCurrentState("uploading");
       } else {
         setCurrentState(state);
       }
     }, [state, loading]);
-    React6.useEffect(() => {
+    React7.useEffect(() => {
       if (loading || progress !== void 0) {
         setCurrentProgress(progress);
       }
     }, [progress, loading]);
-    const uploadFile = React6.useCallback(
+    const uploadFile = React7.useCallback(
       (file) => {
         if (!endpoint) {
           console.warn("Upload endpoint not provided");
@@ -834,17 +1071,17 @@ var Upload = React6.forwardRef(
     const renderContent = () => {
       switch (currentState) {
         case "error":
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", children: "Upload fail" }),
-                  /* @__PURE__ */ jsx5(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
+                /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", children: "Upload fail" }),
+                  /* @__PURE__ */ jsx6(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   Button,
                   {
                     variant: "destructive",
@@ -858,22 +1095,22 @@ var Upload = React6.forwardRef(
             }
           );
         case "uploading":
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
-                /* @__PURE__ */ jsxs5("div", { className: "w-full max-w-[720px] space-y-2", children: [
-                  /* @__PURE__ */ jsx5("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
+                /* @__PURE__ */ jsxs6("div", { className: "w-full max-w-[720px] space-y-2", children: [
+                  /* @__PURE__ */ jsx6("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ jsx6(
                     "div",
                     {
                       className: "bg-primary h-2 rounded-full transition-all duration-300 ease-in-out",
                       style: { width: `${currentProgress}%` }
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs5(
+                  /* @__PURE__ */ jsxs6(
                     Typography,
                     {
                       variant: "body-sm",
@@ -889,29 +1126,29 @@ var Upload = React6.forwardRef(
             }
           );
         case "success":
-          return /* @__PURE__ */ jsx5(
+          return /* @__PURE__ */ jsx6(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
-              children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
-                selectedFiles.length > 0 && /* @__PURE__ */ jsx5("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx5(Typography, { variant: "body-sm", children: file.name }, index)) })
+              children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
+                selectedFiles.length > 0 && /* @__PURE__ */ jsx6("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx6(Typography, { variant: "body-sm", children: file.name }, index)) })
               ] })
             }
           );
         default:
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
-                  /* @__PURE__ */ jsx5(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
+                /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
+                  /* @__PURE__ */ jsx6(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   Button,
                   {
                     variant: "default",
@@ -925,10 +1162,10 @@ var Upload = React6.forwardRef(
                     children: "Choose files"
                   }
                 ),
-                /* @__PURE__ */ jsxs5(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                /* @__PURE__ */ jsxs6(Typography, { variant: "body-sm", className: "text-secondary", children: [
                   "Supported file: ",
                   getFileTypeDisplay(),
-                  /* @__PURE__ */ jsx5("br", {}),
+                  /* @__PURE__ */ jsx6("br", {}),
                   "Max: ",
                   Math.round(maxFileSize / 1024 / 1024),
                   " MB each"
@@ -938,7 +1175,7 @@ var Upload = React6.forwardRef(
           );
       }
     };
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
@@ -962,7 +1199,7 @@ var Upload = React6.forwardRef(
         "aria-disabled": disabled,
         ...props,
         children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "input",
             {
               ref: fileInputRef,
@@ -982,171 +1219,30 @@ var Upload = React6.forwardRef(
 Upload.displayName = "Upload";
 
 // src/components/ui/checkbox.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 import { cva as cva7 } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var checkboxVariants = cva7(
   "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 = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var Checkbox = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn(checkboxVariants(), className),
     ...props,
-    children: /* @__PURE__ */ jsx6(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx6(CheckIcon, { className: "size-3" }) })
+    children: /* @__PURE__ */ jsx7(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx7(CheckIcon, { className: "size-3" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-// src/components/ui/input.tsx
-import * as React8 from "react";
-import { cva as cva8 } from "class-variance-authority";
-import { X, Lock } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var inputVariants = cva8(
-  "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",
-  {
-    variants: {
-      variant: {
-        input: "h-10 py-2",
-        textarea: "min-h-20 resize-none pt-4 pb-2"
-      }
-    },
-    defaultVariants: {
-      variant: "input"
-    }
-  }
-);
-var Input = React8.forwardRef(
-  ({
-    className,
-    variant = "input",
-    style,
-    value,
-    onChange,
-    onClear,
-    readOnly,
-    ...props
-  }, ref) => {
-    const [internalValue, setInternalValue] = React8.useState(value || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
-    const showClear = currentValue && currentValue.toString().length > 0 && !readOnly;
-    const showLock = readOnly;
-    const tokenStyles = {
-      font: "var(--typography-label-md-regular)",
-      ...style
-    };
-    const handleInputChange = (e) => {
-      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) {
-        onChange(e);
-      }
-    };
-    const handleClear = () => {
-      if (!isControlled) {
-        setInternalValue("");
-      }
-      if (onChange) {
-        if (variant === "input") {
-          const inputEvent = {
-            target: { value: "" },
-            currentTarget: { value: "" }
-          };
-          onChange(inputEvent);
-        } else {
-          const textareaEvent = {
-            target: { value: "" },
-            currentTarget: { value: "" }
-          };
-          onChange(
-            textareaEvent
-          );
-        }
-      }
-      onClear?.();
-    };
-    if (variant === "textarea") {
-      return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx7(
-          "textarea",
-          {
-            className: cn(
-              inputVariants({ variant }),
-              (showClear || showLock) && "pr-10",
-              className
-            ),
-            style: tokenStyles,
-            ref,
-            value: currentValue,
-            onChange: handleTextareaChange,
-            readOnly,
-            ...props
-          }
-        ),
-        showClear && /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            onClick: handleClear,
-            className: "absolute right-3 top-3 h-4 w-4 text-secondary hover:text-dark transition-colors",
-            children: /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" })
-          }
-        ),
-        showLock && /* @__PURE__ */ jsx7(Lock, { className: "absolute right-3 top-3 h-4 w-4 text-secondary" })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx7(
-        "input",
-        {
-          className: cn(
-            inputVariants({ variant }),
-            (showClear || showLock) && "pr-10",
-            className
-          ),
-          style: tokenStyles,
-          ref,
-          value: currentValue,
-          onChange: handleInputChange,
-          readOnly,
-          ...props
-        }
-      ),
-      showClear && /* @__PURE__ */ jsx7(
-        "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__ */ jsx7(X, { className: "h-4 w-4" })
-        }
-      ),
-      showLock && /* @__PURE__ */ jsx7(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/badge.tsx
 import * as React9 from "react";
-import { cva as cva9 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var badgeVariants = cva9(
+var badgeVariants = cva8(
   "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",
   {
     variants: {
@@ -1196,14 +1292,14 @@ Badge.displayName = "Badge";
 
 // src/components/ui/tabs.tsx
 import * as React10 from "react";
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva9 } from "class-variance-authority";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var tabsVariants = cva10(
-  "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 px-3 py-2 h-10 w-[140px]",
+var tabsVariants = cva9(
+  "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",
   {
     variants: {
       variant: {
-        default: "border-b-2 border-subtle hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-border-subtle disabled:text-muted disabled:cursor-not-allowed"
+        default: "border-b-2 border-transparent hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-subtle disabled:text-muted disabled:cursor-not-allowed"
       }
     },
     defaultVariants: {
@@ -1211,16 +1307,6 @@ var tabsVariants = cva10(
     }
   }
 );
-var tabsListVariants = cva10("inline-flex items-center justify-center", {
-  variants: {
-    variant: {
-      default: "border-b border-secondary"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
 var TabsContext = React10.createContext(
   void 0
 );
@@ -1240,19 +1326,13 @@ var Tabs = React10.forwardRef((props, ref) => {
     children,
     ...restProps
   } = props;
-  const handleValueChange = React10.useCallback(
-    (newValue) => {
-      onValueChange(newValue);
-    },
-    [onValueChange]
-  );
   const contextValue = React10.useMemo(
     () => ({
       activeTab: value,
-      setActiveTab: handleValueChange,
+      setActiveTab: onValueChange,
       variant
     }),
-    [value, handleValueChange, variant]
+    [value, onValueChange, variant]
   );
   return /* @__PURE__ */ jsx9(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
@@ -1260,17 +1340,12 @@ Tabs.displayName = "Tabs";
 var TabsList = React10.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    const { variant } = useTabsContext();
-    const tabsListClassName = React10.useMemo(
-      () => cn(tabsListVariants({ variant }), className),
-      [variant, className]
-    );
     return /* @__PURE__ */ jsx9(
       "div",
       {
         ref,
         role: "tablist",
-        className: tabsListClassName,
+        className: cn("inline-flex items-center justify-center", className),
         ...restProps,
         children
       }
@@ -1278,8 +1353,8 @@ var TabsList = React10.forwardRef(
   }
 );
 TabsList.displayName = "TabsList";
-var getTabTypographyStyles = () => ({
-  font: "var(--typography-label-sm-bold)"
+var getTabTypographyStyles = (isActive) => ({
+  font: isActive ? "var(--typography-label-sm-bold)" : "var(--typography-label-sm-regular)"
 });
 var TabsTrigger = React10.forwardRef(
   (props, ref) => {
@@ -1291,10 +1366,10 @@ var TabsTrigger = React10.forwardRef(
     const isActive = activeTab === value;
     const tokenStyles = React10.useMemo(
       () => ({
-        ...getTabTypographyStyles(),
+        ...getTabTypographyStyles(isActive),
         ...style
       }),
-      [style]
+      [isActive, style]
     );
     const triggerClassName = React10.useMemo(
       () => cn(tabsVariants({ variant }), className),
@@ -1318,7 +1393,7 @@ var TabsTrigger = React10.forwardRef(
         disabled,
         onClick: handleClick,
         ...restProps,
-        children
+        children: /* @__PURE__ */ jsx9("span", { className: "pl-3 pr-6 py-2", children })
       }
     );
   }
@@ -1332,10 +1407,6 @@ var TabsContent = React10.forwardRef(
       throw new Error("TabsContent must have a value prop");
     }
     const isActive = activeTab === value;
-    const contentClassName = React10.useMemo(
-      () => cn("mt-6", className),
-      [className]
-    );
     if (!isActive) {
       return null;
     }
@@ -1347,7 +1418,7 @@ var TabsContent = React10.forwardRef(
         id: `tabpanel-${value}`,
         "aria-labelledby": `tab-${value}`,
         tabIndex: 0,
-        className: contentClassName,
+        className: cn("mt-6", className),
         ...restProps,
         children
       }
@@ -1381,10 +1452,8 @@ export {
   badgeVariants,
   buttonVariants,
   checkboxVariants,
-  datePickerTriggerVariants,
   inputVariants,
   selectTriggerVariants,
-  tabsListVariants,
   tabsVariants,
   typographyVariants,
   uploadVariants