@sustaina/shared-ui 1.60.0 → 1.62.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, isValidElement, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useState, createElement } from 'react';
+import React__default, { forwardRef, memo, isValidElement, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useState, createElement } from 'react';
 import { useRouter } from '@tanstack/react-router';
 import { create } from 'zustand';
 import clsx2, { clsx } from 'clsx';
@@ -18,7 +18,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { format, isValid, parse, parseISO, isAfter, compareAsc } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Command as Command$1 } from 'cmdk';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
+import * as DialogPrimitive2 from '@radix-ui/react-dialog';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -5651,7 +5651,7 @@ function MonthCal({
         setMenuYear(year);
       }
     }
-  }, [selectedMonthDate, menuYear]);
+  }, [selectedMonthDate]);
   React.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
@@ -6063,14 +6063,14 @@ var ConditionMonthInput = ({ row, control, onClear }) => {
   return renderPicker(`value_${row.id}`, "value");
 };
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
+    DialogPrimitive2.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -6090,7 +6090,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
+      DialogPrimitive2.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -6101,7 +6101,7 @@ function DialogContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(
-            SheetPrimitive.Close,
+            DialogPrimitive2.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -6128,7 +6128,7 @@ function DialogHeader({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
+    DialogPrimitive2.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
@@ -6141,7 +6141,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
+    DialogPrimitive2.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-muted-foreground text-sm", className),
@@ -9895,17 +9895,17 @@ var DataTable = ({
 };
 var DataTable_default = DataTable;
 function Dialog2(props) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal2(props) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
+    DialogPrimitive2.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -9916,7 +9916,7 @@ function DialogOverlay2({ className, ...props }) {
     }
   );
 }
-function DialogHeader2({ className, children, ...props }) {
+function InternalDialogHeader({ className, children, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9929,7 +9929,7 @@ function DialogHeader2({ className, children, ...props }) {
       children: [
         /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children }),
         /* @__PURE__ */ jsxs(
-          SheetPrimitive.Close,
+          DialogPrimitive2.Close,
           {
             "data-slot": "dialog-close",
             className: "absolute right-4 top-4 rounded-xs opacity-80 hover:opacity-100 transition-opacity focus:outline-hidden",
@@ -9953,7 +9953,7 @@ function DialogContent2({
   return /* @__PURE__ */ jsxs(DialogPortal2, { children: [
     showOverlay && /* @__PURE__ */ jsx(DialogOverlay2, {}),
     /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
+      DialogPrimitive2.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -9962,7 +9962,7 @@ function DialogContent2({
         ),
         ...props,
         children: [
-          header && /* @__PURE__ */ jsx(DialogHeader2, { children: header }),
+          header && /* @__PURE__ */ jsx(InternalDialogHeader, { children: header }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children })
         ]
       }
@@ -9984,7 +9984,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
+    DialogPrimitive2.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg font-semibold leading-none", className),
@@ -9997,7 +9997,7 @@ function DialogDescription2({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
+    DialogPrimitive2.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -10005,18 +10005,50 @@ function DialogDescription2({
     }
   );
 }
+function DialogCloseButton(props) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      type: "button",
+      "aria-label": "Close",
+      className: cn("absolute top-4 right-4", props.className),
+      style: {
+        background: "none",
+        border: "none",
+        padding: 0,
+        cursor: "pointer",
+        ...props?.style
+      },
+      children: /* @__PURE__ */ jsx(X, { className: "w-6 h-6 text-white" })
+    }
+  );
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogHeader2({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
 function cn2(...inputs) {
   return twMerge(clsx(inputs));
 }
 function Dialog3({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal3({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay3({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
+    DialogPrimitive2.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn2(
@@ -10036,7 +10068,7 @@ function DialogContent3({
   return /* @__PURE__ */ jsxs(DialogPortal3, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay3, { className: "z-99" }),
     /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
+      DialogPrimitive2.Content,
       {
         "data-slot": "dialog-content",
         className: cn2(
@@ -10047,7 +10079,7 @@ function DialogContent3({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(
-            SheetPrimitive.Close,
+            DialogPrimitive2.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -10074,7 +10106,7 @@ function DialogHeader3({ className, ...props }) {
 }
 function DialogTitle3({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
+    DialogPrimitive2.Title,
     {
       "data-slot": "dialog-title",
       className: cn2("text-lg leading-none font-semibold", className),
@@ -10087,7 +10119,7 @@ function DialogDescription3({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
+    DialogPrimitive2.Description,
     {
       "data-slot": "dialog-description",
       className: cn2("text-muted-foreground text-sm", className),
@@ -11360,9 +11392,12 @@ __export(ui_exports, {
   CollapsibleTrigger: () => CollapsibleTrigger2,
   DatePicker: () => DatePicker,
   Dialog: () => Dialog2,
+  DialogClose: () => DialogClose,
+  DialogCloseButton: () => DialogCloseButton,
   DialogContent: () => DialogContent2,
   DialogDescription: () => DialogDescription2,
   DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader2,
   DialogTitle: () => DialogTitle2,
   DialogTrigger: () => DialogTrigger,
   DropdownMenu: () => DropdownMenu,
@@ -11809,20 +11844,20 @@ function Separator3({
   );
 }
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetClose({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx(DialogPrimitive2.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
+    DialogPrimitive2.Overlay,
     {
       "data-slot": "sheet-overlay",
       className: cn(
@@ -11842,7 +11877,7 @@ function SheetContent({
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
+      DialogPrimitive2.Content,
       {
         "data-slot": "sheet-content",
         className: cn(
@@ -11856,7 +11891,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs(DialogPrimitive2.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -11880,7 +11915,7 @@ function SheetFooter({ className, ...props }) {
 }
 function SheetTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
+    DialogPrimitive2.Title,
     {
       "data-slot": "sheet-title",
       className: cn("text-foreground font-semibold", className),
@@ -11893,7 +11928,7 @@ function SheetDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
+    DialogPrimitive2.Description,
     {
       "data-slot": "sheet-description",
       className: cn("text-muted-foreground text-sm", className),
@@ -17090,60 +17125,11 @@ var Input2 = React.forwardRef(
   }
 );
 Input2.displayName = "Input";
-function useFillDecimalOnBlur({
-  enabled,
-  decimalScale,
-  value,
-  defaultValue
-}) {
-  const blurScale = enabled ? decimalScale ?? 2 : void 0;
-  const isUserEditingRef = React.useRef(false);
-  const [formattedValue, setFormattedValue] = React.useState(() => {
-    if (!enabled) return void 0;
-    const scale = decimalScale ?? 2;
-    const initial = parseToNumber(value) ?? parseToNumber(defaultValue);
-    if (initial !== void 0) return truncateToFixed(initial, scale);
-    return void 0;
-  });
-  React.useEffect(() => {
-    if (!enabled) return;
-    const parsed = parseToNumber(value);
-    if (parsed !== void 0) {
-      if (blurScale !== void 0 && !isUserEditingRef.current) {
-        setFormattedValue(truncateToFixed(parsed, blurScale));
-      }
-    } else if (value === null || value === "") {
-      setFormattedValue(void 0);
-    }
-  }, [value, enabled, blurScale]);
-  const onEdit = React.useCallback(
-    (values, sourceInfo) => {
-      if (!enabled || sourceInfo.source !== "event") return;
-      isUserEditingRef.current = true;
-      setFormattedValue(values.value || void 0);
-    },
-    [enabled]
-  );
-  const onBlur = React.useCallback(
-    (truncatedStr) => {
-      isUserEditingRef.current = false;
-      if (!enabled || blurScale === void 0) return;
-      setFormattedValue(truncatedStr);
-    },
-    [enabled, blurScale]
-  );
-  const resetEditing = React.useCallback(() => {
-    isUserEditingRef.current = false;
-  }, []);
-  return { formattedValue, blurScale, onEdit, onBlur, resetEditing, setFormattedValue };
-}
 function useStepper({ value, step, min, max, disabled, onStep }) {
-  const [changed, setChanged] = React.useState(false);
   const changeValue = React.useCallback(
     (delta) => {
       const current = value ?? 0;
       const clamped = clamp(current + delta, min, max);
-      setChanged(true);
       onStep(clamped);
     },
     [value, max, min, onStep]
@@ -17152,7 +17138,7 @@ function useStepper({ value, step, min, max, disabled, onStep }) {
   const decrement = React.useCallback(() => changeValue(-step), [changeValue, step]);
   const isIncrementDisabled = disabled || max !== void 0 && (value ?? 0) >= max;
   const isDecrementDisabled = disabled || min !== void 0 && (value ?? 0) <= min;
-  return { changed, increment, decrement, isIncrementDisabled, isDecrementDisabled };
+  return { increment, decrement, isIncrementDisabled, isDecrementDisabled };
 }
 var InputNumber = ({
   customInputProps,
@@ -17176,26 +17162,37 @@ var InputNumber = ({
   ...props
 }) => {
   const blurFormatEnabled = fillDecimalOnBlur || truncateDecimalOnBlur;
-  const [internalValue, setInternalValue] = React.useState(
+  const blurScale = blurFormatEnabled ? decimalScaleProp ?? 2 : void 0;
+  const [displayOverride, setDisplayOverride] = React.useState(() => {
+    if (!blurFormatEnabled) return void 0;
+    const scale = decimalScaleProp ?? 2;
+    const initial = parseToNumber(value) ?? parseToNumber(defaultValue);
+    if (initial !== void 0) return truncateToFixed(initial, scale);
+    return void 0;
+  });
+  const [numericValue, setNumericValue] = React.useState(
     () => parseToNumber(value) ?? parseToNumber(defaultValue)
   );
-  const internalValueRef = React.useRef(internalValue);
-  const rawValueRef = React.useRef("");
-  const isBlurClampedRef = React.useRef(false);
-  React.useEffect(() => {
-    const parsed = parseToNumber(value);
-    if (parsed !== void 0) {
-      internalValueRef.current = parsed;
-      setInternalValue(parsed);
-    }
-    isBlurClampedRef.current = false;
-  }, [value]);
-  const autoFormat = useFillDecimalOnBlur({
-    enabled: blurFormatEnabled,
-    decimalScale: decimalScaleProp,
-    value,
-    defaultValue
-  });
+  const isEditingRef = React.useRef(false);
+  const rawRef = React.useRef("");
+  const prevValueRef = React.useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    if (value === "" || value === null) {
+      if (displayOverride !== void 0) setDisplayOverride(void 0);
+      if (numericValue !== void 0) setNumericValue(void 0);
+      isEditingRef.current = false;
+    } else if (!isEditingRef.current) {
+      const num = parseToNumber(value);
+      if (num !== numericValue) setNumericValue(num);
+      if (blurFormatEnabled && num !== void 0) {
+        const formatted = truncateToFixed(num, blurScale);
+        if (formatted !== displayOverride) setDisplayOverride(formatted);
+      } else {
+        if (displayOverride !== void 0) setDisplayOverride(void 0);
+      }
+    }
+  }
   const isAllowed = React.useMemo(() => {
     if (maxIntegerDigits === void 0 && !isAllowedProp) return void 0;
     return (values) => {
@@ -17208,80 +17205,73 @@ var InputNumber = ({
       return isAllowedProp ? isAllowedProp(values) : true;
     };
   }, [maxIntegerDigits, isAllowedProp]);
-  const notifyChange = React.useCallback(
-    (newValue, event) => {
-      internalValueRef.current = newValue;
-      setInternalValue(newValue);
-      onStepChange?.(newValue);
-      onValueChange?.(
-        { floatValue: newValue, formattedValue: String(newValue), value: String(newValue) },
-        createSourceInfo(event)
-      );
-    },
-    [onStepChange, onValueChange]
-  );
   const stepper = useStepper({
-    value: internalValue,
+    value: numericValue,
     step,
     min,
     max,
     disabled,
     onStep: React.useCallback(
       (clamped) => {
-        setInternalValue(clamped);
-        if (autoFormat.blurScale !== void 0) {
-          autoFormat.setFormattedValue(truncateToFixed(clamped, autoFormat.blurScale));
-        }
-        notifyChange(clamped);
+        setNumericValue(clamped);
+        const formatted = blurScale !== void 0 ? truncateToFixed(clamped, blurScale) : String(clamped);
+        setDisplayOverride(formatted);
+        rawRef.current = String(clamped);
+        onStepChange?.(clamped);
+        onValueChange?.(
+          { floatValue: clamped, formattedValue: formatted, value: String(clamped) },
+          createSourceInfo()
+        );
       },
-      [autoFormat, notifyChange]
+      [blurScale, onStepChange, onValueChange]
     )
   });
   const handleValueChange = React.useCallback(
     (values, sourceInfo) => {
-      internalValueRef.current = values.floatValue;
-      rawValueRef.current = values.value;
-      setInternalValue(values.floatValue);
       if (sourceInfo.source === "event") {
-        isBlurClampedRef.current = false;
+        isEditingRef.current = true;
+        setDisplayOverride(values.value);
       }
+      setNumericValue(values.floatValue);
+      rawRef.current = values.value;
       onValueChange?.(values, sourceInfo);
       if (values.floatValue !== void 0) onStepChange?.(values.floatValue);
-      autoFormat.onEdit(values, sourceInfo);
     },
-    [onValueChange, onStepChange, autoFormat]
+    [onValueChange, onStepChange]
   );
   const handleBlur = React.useCallback(
     (event) => {
+      isEditingRef.current = false;
       onBlur?.(event);
-      const latestValue = internalValueRef.current;
-      if (latestValue === void 0) {
-        autoFormat.resetEditing();
+      const currentNumeric = numericValue;
+      if (currentNumeric === void 0) {
+        setDisplayOverride("");
         return;
       }
-      const clamped = clamp(latestValue, min, max);
-      const wasClamped = clamped !== latestValue;
+      const clamped = clamp(currentNumeric, min, max);
+      const wasClamped = clamped !== currentNumeric;
       if (wasClamped) {
-        isBlurClampedRef.current = true;
-        internalValueRef.current = clamped;
-        rawValueRef.current = String(clamped);
-        setInternalValue(clamped);
+        setNumericValue(clamped);
+        rawRef.current = String(clamped);
         onValueChange?.(
           { floatValue: clamped, formattedValue: String(clamped), value: String(clamped) },
           createSourceInfo()
         );
         onStepChange?.(clamped);
       }
-      if (blurFormatEnabled && autoFormat.blurScale !== void 0) {
-        const rawStr = wasClamped ? String(clamped) : rawValueRef.current || String(clamped);
-        autoFormat.onBlur(truncateStringToFixed(rawStr, autoFormat.blurScale));
+      if (blurFormatEnabled && blurScale !== void 0) {
+        const rawStr = wasClamped ? String(clamped) : rawRef.current || String(clamped);
+        setDisplayOverride(truncateStringToFixed(rawStr, blurScale));
+      } else if (wasClamped) {
+        setDisplayOverride(String(clamped));
       } else {
-        autoFormat.resetEditing();
+        setDisplayOverride(void 0);
       }
     },
-    [onBlur, blurFormatEnabled, autoFormat, min, max, onValueChange, onStepChange]
+    [onBlur, blurFormatEnabled, blurScale, numericValue, min, max, onValueChange, onStepChange]
   );
-  const effectiveValue = autoFormat.formattedValue !== void 0 ? autoFormat.formattedValue : isBlurClampedRef.current || stepper.changed || blurFormatEnabled ? internalValue : value;
+  const isValueExplicitlyEmpty = value === "" || value === null;
+  const effectiveValue = isValueExplicitlyEmpty ? "" : displayOverride !== void 0 ? displayOverride : value;
   const buttonClass = cn(
     "flex items-center justify-center h-3 w-5 transition-colors outline-none",
     "text-neutral-400 hover:text-neutral-600 active:text-neutral-900",
@@ -17297,7 +17287,7 @@ var InputNumber = ({
       onBlur: handleBlur,
       ...isAllowed && { isAllowed },
       ...truncateDecimalOnBlur ? {} : fillDecimalOnBlur ? { decimalScale: decimalScaleProp } : { decimalScale: decimalScaleProp, fixedDecimalScale: fixedDecimalScaleProp },
-      ...autoFormat.formattedValue !== void 0 && { valueIsNumericString: true },
+      ...displayOverride !== void 0 && { valueIsNumericString: true },
       ...props,
       disabled,
       invalid,
@@ -17547,6 +17537,104 @@ var ActionDropdown = ({
   ] });
 };
 var dropdownMenu_default = ActionDropdown;
+var sizeMap = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var resolveSize = (size) => typeof size === "number" ? { style: { height: size } } : { className: sizeMap[size] };
+var linecapMap = {
+  round: "rounded-full",
+  butt: "rounded-none",
+  square: "rounded-none"
+};
+var alignClassMap = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+var ProgressBar = ({
+  percent = 0,
+  size = "md",
+  showInfo = true,
+  format: format6,
+  precision = 0,
+  success,
+  strokeLinecap = "round",
+  percentPosition = { align: "end", type: "outer" },
+  barClassName,
+  trailClassName,
+  className
+}) => {
+  const clamped = useMemo(() => Math.min(100, Math.max(0, percent)), [percent]);
+  const displayValue = useMemo(() => parseFloat(clamped.toFixed(precision)), [clamped, precision]);
+  const successClamped = useMemo(
+    () => success ? Math.min(100, Math.max(0, success.percent)) : 0,
+    [success]
+  );
+  const linecapClass = linecapMap[strokeLinecap];
+  const posType = percentPosition?.type ?? "outer";
+  const posAlign = percentPosition?.align ?? "end";
+  const isInner = posType === "inner";
+  const { className: sizeClass, style: sizeStyle } = resolveSize(size);
+  const info = useMemo(() => {
+    if (!showInfo) return null;
+    if (format6) return format6(displayValue);
+    return `${displayValue}%`;
+  }, [showInfo, format6, displayValue]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center gap-2 min-w-0",
+        posAlign === "start" && !isInner && "flex-row-reverse",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex-1 overflow-hidden",
+              trailClassName ?? "bg-muted",
+              linecapClass,
+              isInner ? "min-h-4" : sizeClass
+            ),
+            style: isInner ? void 0 : sizeStyle,
+            children: [
+              success && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute left-0 top-0 h-full transition-all duration-300",
+                    success.className ?? "bg-sus-green-1",
+                    linecapClass
+                  ),
+                  style: { width: `${successClamped}%` }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative transition-all duration-300",
+                    barClassName ?? "bg-sus-primary-green-9",
+                    linecapClass,
+                    isInner ? cn("min-h-4 flex items-center px-1", alignClassMap[posAlign]) : cn("h-full", sizeClass)
+                  ),
+                  style: { width: `${clamped}%`, ...!isInner ? sizeStyle : void 0 },
+                  children: isInner && info && /* @__PURE__ */ jsx("span", { className: "text-[10px] leading-none text-primary-foreground whitespace-nowrap tabular-nums", children: info })
+                }
+              )
+            ]
+          }
+        ),
+        !isInner && info && /* @__PURE__ */ jsx("span", { className: "text-xs shrink-0 tabular-nums", children: info })
+      ]
+    }
+  );
+};
+var ProgressBar_default = memo(ProgressBar);
 var TruncatedMouseEnterDiv = ({
   value,
   className,
@@ -18426,6 +18514,6 @@ function InputMentionInner({
 }
 var InputMention = forwardRef(InputMentionInner);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, dropdownMenu_default as ActionDropdown, ActionMenu, AdministrationIcon, AdvanceSearch_default as AdvanceSearch, AnalyticsIcon, ApplicationLogIcon, ArrowIcon, AuditFooter, BookmarkIcon, BriefcaseBusinessIcon, BuildingIcon, Button, SuiCalendarIcon2 as Calendar2Icon, CalendarDaysIcon, CardIcon, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselThumbnails, Checkbox, CircleUserIcon, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyUserRightsIcon, CropperModal, CropperModalError, CustomActionStatusIcon, CustomFieldIcon, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DashboardIcon, DataEntryIcon, DataTable_default as DataTable, DatePicker2 as DatePicker, DecreaseIcon, Dialog2 as Dialog, DialogAlert, DialogAlertProvider, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter, DialogTitle2 as DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisBoxIcon, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, FactoryIcon, FileCogIcon, FileSpreadsheet, FileTextIcon, FiltersIcon, FolderIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HamburgerMenuIcon, HandymanIcon, header_default as Header, HeaderCell_default as HeaderCell, HelpIcon, HomeIcon, HomePlusIcon, Image2 as Image, ImagePlaceholderIcon, InformationIcon, Input, InputMention, InputNumber_default as InputNumber, Label2 as Label, LoadingPage, LookupSelect, MailIcon, MainListContainer_default as MainListContainer, ManIcon, ManagementIcon, MenuIcon, MessageIcon, MessageIconInverse, MessageSquareIcon, MonthPicker2 as MonthPicker, navbar_default as Navbar, NotFoundIcon, OutlineArrowIcon, PlusIcon, PlusSearchIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PowerIcon, PreventPageLeave_default as PreventPageLeave, QuestionIcon, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, RightPanelContainer_default as RightPanelContainer, RoleIcon, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SetupIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, SuiCalendarIcon, SuiCalendarIcon2, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, TabSelect, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, TagListViewIcon, TextArea, TimePicker, ToolBoxIcon, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, TransferUserRightsIcon, TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, UserActiveIcon, UserAloneIcon, UserFriendIcon, UserGroupIcon, UserIcon, UserInactiveIcon, UserNameIcon, UserProtectIcon, UsersIcon, VirtualizedCommand_default as VirtualizedCommand, WorkFlowIcon, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useBindRef_default as useBindRef, useCarousel, useControllableState_default as useControllableState, useDraftGuardStore, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useSafeBlocker, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, dropdownMenu_default as ActionDropdown, ActionMenu, AdministrationIcon, AdvanceSearch_default as AdvanceSearch, AnalyticsIcon, ApplicationLogIcon, ArrowIcon, AuditFooter, BookmarkIcon, BriefcaseBusinessIcon, BuildingIcon, Button, SuiCalendarIcon2 as Calendar2Icon, CalendarDaysIcon, CardIcon, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselThumbnails, Checkbox, CircleUserIcon, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyUserRightsIcon, CropperModal, CropperModalError, CustomActionStatusIcon, CustomFieldIcon, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DashboardIcon, DataEntryIcon, DataTable_default as DataTable, DatePicker2 as DatePicker, DecreaseIcon, Dialog2 as Dialog, DialogAlert, DialogAlertProvider, DialogClose, DialogCloseButton, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisBoxIcon, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, FactoryIcon, FileCogIcon, FileSpreadsheet, FileTextIcon, FiltersIcon, FolderIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HamburgerMenuIcon, HandymanIcon, header_default as Header, HeaderCell_default as HeaderCell, HelpIcon, HomeIcon, HomePlusIcon, Image2 as Image, ImagePlaceholderIcon, InformationIcon, Input, InputMention, InputNumber_default as InputNumber, Label2 as Label, LoadingPage, LookupSelect, MailIcon, MainListContainer_default as MainListContainer, ManIcon, ManagementIcon, MenuIcon, MessageIcon, MessageIconInverse, MessageSquareIcon, MonthPicker2 as MonthPicker, navbar_default as Navbar, NotFoundIcon, OutlineArrowIcon, PlusIcon, PlusSearchIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PowerIcon, PreventPageLeave_default as PreventPageLeave, ProgressBar_default as ProgressBar, QuestionIcon, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, RightPanelContainer_default as RightPanelContainer, RoleIcon, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SetupIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, SuiCalendarIcon, SuiCalendarIcon2, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, TabSelect, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, TagListViewIcon, TextArea, TimePicker, ToolBoxIcon, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, TransferUserRightsIcon, TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, UserActiveIcon, UserAloneIcon, UserFriendIcon, UserGroupIcon, UserIcon, UserInactiveIcon, UserNameIcon, UserProtectIcon, UsersIcon, VirtualizedCommand_default as VirtualizedCommand, WorkFlowIcon, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useBindRef_default as useBindRef, useCarousel, useControllableState_default as useControllableState, useDraftGuardStore, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useSafeBlocker, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map