@sustaina/shared-ui 1.5.0 → 1.6.1

package/dist/index.mjs

@@ -16,6 +16,7 @@ import { CSS } from '@dnd-kit/utilities';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -123,6 +124,35 @@ function FormLabel({ children, className, errorClassName, required, ...props })
   );
 }
 
+// src/utils/common.ts
+function isDefined(value) {
+  return value !== null && value !== void 0;
+}
+function isEmptyObject(value) {
+  return !!value && Object.keys(value).length === 0 && value.constructor === Object;
+}
+function debounce(fn, delay = 150) {
+  let timeout = null;
+  return (...args) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+}
+
+// src/utils/filters.ts
+function stripNullishObject(value) {
+  if (!isDefined(value)) {
+    return {};
+  }
+  try {
+    return Object.fromEntries(Object.entries(value).filter(([, propValue]) => isDefined(propValue)));
+  } catch {
+    return {};
+  }
+}
+
 // src/utils/getColumnIdFromTable.ts
 function getColumnIdFromTable(table) {
   const allColumns = table.getAllColumns();
@@ -336,23 +366,36 @@ var useScreenSize = (breakpoints) => {
   return { isMobile, isTablet, isDesktop };
 };
 var useScreenSize_default = useScreenSize;
-
-// src/utils/common.ts
-function isDefined(value) {
-  return value !== null && value !== void 0;
-}
-
-// src/utils/filters.ts
-function stripNullishObject(value) {
-  if (!isDefined(value)) {
-    return {};
-  }
-  try {
-    return Object.fromEntries(Object.entries(value).filter(([, propValue]) => isDefined(propValue)));
-  } catch {
-    return {};
-  }
-}
+var useTruncated = ({
+  elementRef,
+  onChange,
+  resizeDetectDelay = 150
+}) => {
+  const [isTruncated, setIsTruncated] = useState(false);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const checkTruncate = debounce(() => {
+      const truncated = element.scrollWidth > element.clientWidth;
+      setIsTruncated((prev) => {
+        if (prev !== truncated) {
+          onChange?.(truncated);
+        }
+        return truncated;
+      });
+    }, resizeDetectDelay);
+    checkTruncate();
+    const observer = new ResizeObserver(checkTruncate);
+    observer.observe(element);
+    window.addEventListener("resize", checkTruncate);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", checkTruncate);
+    };
+  }, [elementRef, onChange, resizeDetectDelay]);
+  return isTruncated;
+};
+var useTruncated_default = useTruncated;
 var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }) => {
   const { ref, hovering } = useHover_default();
   const showSorter = sorterProps?.show ?? context.column.getCanSort();
@@ -1371,6 +1414,7 @@ function SelectContent({
 function SelectItem({
   className,
   children,
+  hideCheckIcon,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -1383,6 +1427,7 @@ function SelectItem({
       ),
       ...props,
       children: [
+        !hideCheckIcon && //
         /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
       ]
@@ -1522,6 +1567,7 @@ function SortableRow({
                     SelectItem,
                     {
                       value: opt.id,
+                      hideCheckIcon: true,
                       className: cn(
                         "focus:bg-[#e8edea]",
                         opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
@@ -1715,11 +1761,12 @@ var GridSettingsModal = ({
           },
           fields[0]?.fieldId
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx(
           DndContext,
           {
             sensors,
             collisionDetection: closestCenter,
+            modifiers: [restrictToParentElement, restrictToVerticalAxis],
             onDragStart: () => setIsDragging(true),
             onDragEnd: (event) => {
               setIsDragging(false);
@@ -1745,7 +1792,7 @@ var GridSettingsModal = ({
               }
             )
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxs(
           Button2,
           {
@@ -4916,7 +4963,7 @@ function DialogContent2({
       {
         "data-slot": "dialog-content",
         className: cn3(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className
         ),
         ...props,
@@ -4976,13 +5023,15 @@ var buttonVariants4 = cva(
   {
     variants: {
       variant: {
-        default: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
-        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground  dark:border-input dark:hover:bg-input/50",
-        outlineLeave: "border border-[#BB0B0E] bg-background shadow-xs hover:bg-accent hover:text-accent-foreground text-[#BB0B0E]"
+        default: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground  dark:border-input dark:hover:bg-input/50",
+        success: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
+        error: "border border-[#BB0B0E] bg-background shadow-xs hover:bg-accent hover:text-accent-foreground text-[#BB0B0E]",
+        warning: "bg-yellow-500 text-black shadow-xs hover:bg-yellow-600 dark:hover:bg-yellow-400",
+        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50"
       },
       size: {
-        default: "h-9 px-4  has-[>svg]:px-3",
-        option: "py-5 h-9 px-4  has-[>svg]:px-3",
+        default: "h-9 px-4 has-[>svg]:px-3",
+        option: "py-5 h-9 px-4 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
@@ -4992,7 +5041,7 @@ var buttonVariants4 = cva(
         "icon-lg": "size-10"
       },
       active: {
-        true: "bg-sus-primary-1 text-white",
+        true: "opacity-90 ring-2 ring-offset-1 ring-ring",
         false: ""
       }
     },
@@ -5015,42 +5064,58 @@ function Button4({
     Comp,
     {
       "data-slot": "button",
-      className: cn3(buttonVariants4({ variant, size, className, active })),
+      className: cn3(buttonVariants4({ variant, size, active, className })),
       ...props
     }
   );
 }
-function ConfirmDialog({ dialogData, setDialog, onClose }) {
-  const handleClose = () => {
-    setDialog({ state: false });
-    onClose?.();
-  };
-  const titleColor = {
-    default: "text-[#000000]",
-    success: "text-[#3f9e33]",
-    error: "text-[#c63638]"
-  };
-  const showCloseBtn = dialogData.showCloseBtn ?? true;
-  return /* @__PURE__ */ jsx(Dialog2, { open: dialogData.state, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent2, { children: [
+function DialogAlert({
+  open,
+  onOpenChange,
+  title,
+  description,
+  variant = "default",
+  confirmText,
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  showCancel = true,
+  align = "center",
+  outlet
+}) {
+  const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onOpenChange(false);
+  }, [onCancel, onOpenChange]);
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
+  }, [onConfirm]);
+  return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent2, { className: "max-w-md", children: [
     /* @__PURE__ */ jsxs(DialogHeader2, { children: [
-      /* @__PURE__ */ jsx(DialogTitle2, { className: cn3(titleColor[dialogData.variant || "default"], "font-bold"), children: dialogData.title || "" }),
-      /* @__PURE__ */ jsx(DialogDescription2, { children: dialogData.description || "" })
+      title && /* @__PURE__ */ jsx(DialogTitle2, { className: variantClass(variant), children: title }),
+      description && /* @__PURE__ */ jsx(DialogDescription2, { children: description })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "w-full flex justify-center py-5 gap-5", children: [
-      showCloseBtn && /* @__PURE__ */ jsx(Button4, { variant: "cancel", onClick: handleClose, children: "Close" }),
-      dialogData.btn && /* @__PURE__ */ jsx(
-        Button4,
-        {
-          variant: dialogData.variantBtn || "default",
-          disabled: dialogData.btnState === false,
-          onClick: dialogData.onClickBtn,
-          children: dialogData.btn
-        }
-      )
+    outlet && outlet,
+    /* @__PURE__ */ jsxs("div", { className: `flex gap-3 mt-3 ${alignClass}`, children: [
+      showCancel && /* @__PURE__ */ jsx(Button4, { variant: "cancel", onClick: handleCancel, children: cancelText }),
+      confirmText && /* @__PURE__ */ jsx(Button4, { variant, onClick: handleConfirm, children: confirmText })
     ] })
   ] }) });
 }
+function variantClass(variant) {
+  switch (variant) {
+    case "success":
+      return "text-green-600";
+    case "error":
+      return "text-red-600";
+    case "warning":
+      return "text-yellow-600";
+    default:
+      return "";
+  }
+}
 
-export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, ConfirmDialog as Dialog, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize };
+export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, getColumnIdFromTable, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map