@sustaina/shared-ui 1.60.0 → 1.61.0

package/dist/index.js

@@ -19,7 +19,7 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var dateFns = require('date-fns');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var cmdk = require('cmdk');
-var SheetPrimitive = require('@radix-ui/react-dialog');
+var DialogPrimitive2 = require('@radix-ui/react-dialog');
 var reactVirtual = require('@tanstack/react-virtual');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -96,7 +96,7 @@ var Autoplay__default = /*#__PURE__*/_interopDefault(Autoplay);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
-var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
+var DialogPrimitive2__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive2);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
@@ -6106,14 +6106,14 @@ var ConditionMonthInput = ({ row, control, onClear }) => {
   return renderPicker(`value_${row.id}`, "value");
 };
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Overlay,
+    DialogPrimitive2__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -6133,7 +6133,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      SheetPrimitive__namespace.Content,
+      DialogPrimitive2__namespace.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -6144,7 +6144,7 @@ function DialogContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-            SheetPrimitive__namespace.Close,
+            DialogPrimitive2__namespace.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",
@@ -6171,7 +6171,7 @@ function DialogHeader({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Title,
+    DialogPrimitive2__namespace.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
@@ -6184,7 +6184,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Description,
+    DialogPrimitive2__namespace.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-muted-foreground text-sm", className),
@@ -9938,17 +9938,17 @@ var DataTable = ({
 };
 var DataTable_default = DataTable;
 function Dialog2(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal2(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay2({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Overlay,
+    DialogPrimitive2__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -9959,7 +9959,7 @@ function DialogOverlay2({ className, ...props }) {
     }
   );
 }
-function DialogHeader2({ className, children, ...props }) {
+function InternalDialogHeader({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9972,7 +9972,7 @@ function DialogHeader2({ className, children, ...props }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold", children }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          SheetPrimitive__namespace.Close,
+          DialogPrimitive2__namespace.Close,
           {
             "data-slot": "dialog-close",
             className: "absolute right-4 top-4 rounded-xs opacity-80 hover:opacity-100 transition-opacity focus:outline-hidden",
@@ -9996,7 +9996,7 @@ function DialogContent2({
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal2, { children: [
     showOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay2, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      SheetPrimitive__namespace.Content,
+      DialogPrimitive2__namespace.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -10005,7 +10005,7 @@ function DialogContent2({
         ),
         ...props,
         children: [
-          header && /* @__PURE__ */ jsxRuntime.jsx(DialogHeader2, { children: header }),
+          header && /* @__PURE__ */ jsxRuntime.jsx(InternalDialogHeader, { children: header }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children })
         ]
       }
@@ -10027,7 +10027,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle2({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Title,
+    DialogPrimitive2__namespace.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg font-semibold leading-none", className),
@@ -10040,7 +10040,7 @@ function DialogDescription2({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Description,
+    DialogPrimitive2__namespace.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -10048,18 +10048,50 @@ function DialogDescription2({
     }
   );
 }
+function DialogCloseButton(props) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-6 h-6 text-white" })
+    }
+  );
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogHeader2({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
 function cn2(...inputs) {
   return tailwindMerge.twMerge(clsx2.clsx(inputs));
 }
 function Dialog3({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal3({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay3({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Overlay,
+    DialogPrimitive2__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn2(
@@ -10079,7 +10111,7 @@ function DialogContent3({
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal3, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay3, { className: "z-99" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      SheetPrimitive__namespace.Content,
+      DialogPrimitive2__namespace.Content,
       {
         "data-slot": "dialog-content",
         className: cn2(
@@ -10090,7 +10122,7 @@ function DialogContent3({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-            SheetPrimitive__namespace.Close,
+            DialogPrimitive2__namespace.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",
@@ -10117,7 +10149,7 @@ function DialogHeader3({ className, ...props }) {
 }
 function DialogTitle3({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Title,
+    DialogPrimitive2__namespace.Title,
     {
       "data-slot": "dialog-title",
       className: cn2("text-lg leading-none font-semibold", className),
@@ -10130,7 +10162,7 @@ function DialogDescription3({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Description,
+    DialogPrimitive2__namespace.Description,
     {
       "data-slot": "dialog-description",
       className: cn2("text-muted-foreground text-sm", className),
@@ -11403,9 +11435,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,
@@ -11852,20 +11887,20 @@ function Separator3({
   );
 }
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetClose({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive2__namespace.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Overlay,
+    DialogPrimitive2__namespace.Overlay,
     {
       "data-slot": "sheet-overlay",
       className: cn(
@@ -11885,7 +11920,7 @@ function SheetContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      SheetPrimitive__namespace.Content,
+      DialogPrimitive2__namespace.Content,
       {
         "data-slot": "sheet-content",
         className: cn(
@@ -11899,7 +11934,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPrimitive2__namespace.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__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -11923,7 +11958,7 @@ function SheetFooter({ className, ...props }) {
 }
 function SheetTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Title,
+    DialogPrimitive2__namespace.Title,
     {
       "data-slot": "sheet-title",
       className: cn("text-foreground font-semibold", className),
@@ -11936,7 +11971,7 @@ function SheetDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SheetPrimitive__namespace.Description,
+    DialogPrimitive2__namespace.Description,
     {
       "data-slot": "sheet-description",
       className: cn("text-muted-foreground text-sm", className),
@@ -17590,6 +17625,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 = React.useMemo(() => Math.min(100, Math.max(0, percent)), [percent]);
+  const displayValue = React.useMemo(() => parseFloat(clamped.toFixed(precision)), [clamped, precision]);
+  const successClamped = React.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 = React.useMemo(() => {
+    if (!showInfo) return null;
+    if (format6) return format6(displayValue);
+    return `${displayValue}%`;
+  }, [showInfo, format6, displayValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center gap-2 min-w-0",
+        posAlign === "start" && !isInner && "flex-row-reverse",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] leading-none text-primary-foreground whitespace-nowrap tabular-nums", children: info })
+                }
+              )
+            ]
+          }
+        ),
+        !isInner && info && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs shrink-0 tabular-nums", children: info })
+      ]
+    }
+  );
+};
+var ProgressBar_default = React.memo(ProgressBar);
 var TruncatedMouseEnterDiv = ({
   value,
   className,
@@ -18525,9 +18658,12 @@ exports.DecreaseIcon = DecreaseIcon;
 exports.Dialog = Dialog2;
 exports.DialogAlert = DialogAlert;
 exports.DialogAlertProvider = DialogAlertProvider;
+exports.DialogClose = DialogClose;
+exports.DialogCloseButton = DialogCloseButton;
 exports.DialogContent = DialogContent2;
 exports.DialogDescription = DialogDescription2;
 exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader2;
 exports.DialogTitle = DialogTitle2;
 exports.DialogTrigger = DialogTrigger;
 exports.DropdownMenu = DropdownMenu;
@@ -18603,6 +18739,7 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.PowerIcon = PowerIcon;
 exports.PreventPageLeave = PreventPageLeave_default;
+exports.ProgressBar = ProgressBar_default;
 exports.QuestionIcon = QuestionIcon;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RadioGroupRoot = RadioGroupRoot;