@sustaina/shared-ui 1.15.0 → 1.16.0

package/dist/index.mjs

@@ -850,7 +850,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-input data-[placeholder]:text-gray-00 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:border-ring data-[state=open]:[&_svg]:text-foreground",
+        "border-input data-placeholder:text-gray-00 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:border-ring data-[state=open]:[&_svg]:text-foreground",
         className
       ),
       ...props,
@@ -872,7 +872,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -885,7 +885,7 @@ function SelectContent({
           {
             className: cn(
               "m-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
             ),
             children
           }
@@ -915,7 +915,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "hover:bg-[#EAF5EE] hover:text-[#379A2A] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 ",
+        "hover:bg-[#EAF5EE] hover:text-[#379A2A] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 ",
         className
       ),
       ...props,
@@ -5738,6 +5738,233 @@ var useGridSettingsStore = create(
   })
 );
 var useGridSettingsStore_default = useGridSettingsStore;
+function LoadingOverlay({
+  className,
+  fullscreen = true,
+  spinnerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "loading-overlay",
+      className: cn(
+        fullscreen ? "fixed z-100" : "absolute z-10",
+        "inset-0 flex items-center justify-center transition-opacity duration-300",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Spinner, { className: cn("size-50", spinnerClassName) })
+    }
+  );
+}
+var DEVICE_SIZES = [320, 420, 640, 768, 1024, 1280, 1536, 1920];
+var IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var defaultLoader = ({ src }) => src;
+function toNumber(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : void 0;
+  }
+  if (typeof value === "string") {
+    const parsed = parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  return void 0;
+}
+function formatDimension(value) {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+function matchClosestSize(target) {
+  for (const size of IMAGE_SIZES) {
+    if (size >= target) {
+      return size;
+    }
+  }
+  return DEVICE_SIZES[DEVICE_SIZES.length - 1];
+}
+function getCandidateWidths({
+  width,
+  sizes,
+  fill
+}) {
+  if (fill || sizes) {
+    return DEVICE_SIZES;
+  }
+  if (typeof width === "number" && width > 0) {
+    const targets = /* @__PURE__ */ new Set([width, width * 2]);
+    return Array.from(targets).map((target) => matchClosestSize(target)).sort((a, b) => a - b);
+  }
+  return DEVICE_SIZES;
+}
+var Image2 = React4.forwardRef(function Image3({
+  src,
+  alt,
+  width,
+  height,
+  fill = false,
+  sizes,
+  quality = 75,
+  priority = false,
+  placeholder: placeholder2 = "empty",
+  blurDataURL,
+  loader = defaultLoader,
+  unoptimized = false,
+  wrapperClassName,
+  className,
+  objectFit,
+  objectPosition,
+  onLoadingComplete,
+  style,
+  ...imgProps
+}, ref) {
+  const {
+    loading: loadingProp,
+    fetchPriority: fetchPriorityProp,
+    decoding: decodingProp,
+    onLoad: onLoadProp,
+    ...restImgProps
+  } = imgProps;
+  const widthNumber = toNumber(width);
+  const heightNumber = toNumber(height);
+  React4.useEffect(() => {
+    if (!fill && (!widthNumber || !heightNumber)) {
+      console.warn(
+        "[Image] When `fill` is false you should provide both `width` and `height` to prevent layout shifts."
+      );
+    }
+  }, [fill, heightNumber, widthNumber]);
+  const candidateWidths = React4.useMemo(
+    () => getCandidateWidths({ width: widthNumber, sizes, fill }),
+    [fill, sizes, widthNumber]
+  );
+  const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
+  const computedSrc = React4.useMemo(() => {
+    if (unoptimized) {
+      return src;
+    }
+    return loader({ src, width: largestWidth, quality });
+  }, [largestWidth, loader, quality, src, unoptimized]);
+  const computedSrcSet = React4.useMemo(() => {
+    if (unoptimized) {
+      return void 0;
+    }
+    return candidateWidths.map((currentWidth) => `${loader({ src, width: currentWidth, quality })} ${currentWidth}w`).join(", ");
+  }, [candidateWidths, loader, quality, src, unoptimized]);
+  const sizesValue = sizes ?? (fill ? "100vw" : widthNumber ? `${widthNumber}px` : void 0);
+  const [isLoaded, setIsLoaded] = React4.useState(false);
+  const internalRef = React4.useRef(null);
+  const setRefs = React4.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (!ref) {
+        return;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  React4.useEffect(() => {
+    const image = internalRef.current;
+    if (!image) {
+      return;
+    }
+    if (image.complete && image.naturalWidth > 0) {
+      setIsLoaded(true);
+      onLoadingComplete?.(image);
+    } else {
+      setIsLoaded(false);
+    }
+  }, [onLoadingComplete, src]);
+  const handleLoad = React4.useCallback(
+    (event) => {
+      setIsLoaded(true);
+      onLoadProp?.(event);
+      onLoadingComplete?.(event.currentTarget);
+    },
+    [onLoadProp, onLoadingComplete]
+  );
+  const loading = priority ? "eager" : loadingProp ?? "lazy";
+  const fetchPriority = priority ? "high" : fetchPriorityProp;
+  const decoding = decodingProp ?? "async";
+  const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
+  const wrapperStyle = React4.useMemo(
+    () => ({
+      position: "relative",
+      display: fill ? "block" : "inline-block",
+      overflow: "hidden",
+      width: fill ? "100%" : formatDimension(width) ?? void 0,
+      height: fill ? "100%" : formatDimension(height) ?? void 0
+    }),
+    [fill, height, width]
+  );
+  const imageStyle = React4.useMemo(
+    () => ({
+      width: fill ? "100%" : formatDimension(width) ?? void 0,
+      height: fill ? "100%" : formatDimension(height) ?? void 0,
+      position: fill ? "absolute" : void 0,
+      inset: fill ? 0 : void 0,
+      objectFit: resolvedObjectFit,
+      objectPosition,
+      ...style
+    }),
+    [fill, height, objectPosition, resolvedObjectFit, style, width]
+  );
+  const shouldShowLoadingOverlay = placeholder2 === "blur";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "image",
+      className: cn("relative overflow-hidden", fill ? "block" : "inline-block", wrapperClassName),
+      style: wrapperStyle,
+      children: [
+        shouldShowLoadingOverlay && /* @__PURE__ */ jsx(
+          LoadingOverlay,
+          {
+            "aria-hidden": true,
+            fullscreen: false,
+            spinnerClassName: "size-6",
+            className: cn(
+              // "bg-white/75!",
+              isLoaded ? "opacity-0 pointer-events-none" : "opacity-100"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref: setRefs,
+            className: cn(
+              "block transition-opacity duration-300",
+              fill && "absolute inset-0 size-full",
+              shouldShowLoadingOverlay && !isLoaded ? "opacity-0" : "opacity-100",
+              className
+            ),
+            src: computedSrc,
+            srcSet: computedSrcSet,
+            sizes: sizesValue,
+            width: fill ? void 0 : widthNumber,
+            height: fill ? void 0 : heightNumber,
+            alt,
+            loading,
+            fetchPriority,
+            decoding,
+            onLoad: handleLoad,
+            style: imageStyle,
+            ...restImgProps
+          }
+        )
+      ]
+    }
+  );
+});
+Image2.displayName = "Image";
 var ListTable = ({ onTableReady, children }) => {
   React4.useEffect(() => {
     if (onTableReady) {
@@ -8446,6 +8673,6 @@ var CropperModal = ({
   );
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, CropperModalError, DIALOG_ALERT_I18N_NAMESPACE, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, 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, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as 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, useSidebar, useTruncated_default as useTruncated };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, CropperModalError, DIALOG_ALERT_I18N_NAMESPACE, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Image2 as Image, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, 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, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as 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, useSidebar, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map