@motor-hero/ui-kit 0.26.0 → 0.28.0

package/dist/index.js

@@ -372,7 +372,24 @@ function FormField({ label, htmlFor, error, required, children, className }) {
 // src/components/base-dialog.tsx
 import * as Dialog from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import * as React2 from "react";
+
+// src/hooks/use-is-desktop.ts
 import * as React from "react";
+var DESKTOP_QUERY = "(min-width: 640px)";
+function useIsDesktop() {
+  const [isDesktop, setIsDesktop] = React.useState(
+    () => typeof window !== "undefined" ? window.matchMedia(DESKTOP_QUERY).matches : true
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(DESKTOP_QUERY);
+    const onChange = () => setIsDesktop(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isDesktop;
+}
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -399,9 +416,11 @@ function BaseDialog({
   footer,
   size = "lg",
   className,
+  modal,
   contentWrapper = (content) => content
 }) {
-  React.useEffect(() => {
+  const isDesktop = useIsDesktop();
+  React2.useEffect(() => {
     if (open) return;
     const id = window.setTimeout(() => {
       if (document.body.style.pointerEvents === "none") {
@@ -428,7 +447,7 @@ function BaseDialog({
     /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-4", children }),
     footer && /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-end", children: footer })
   ] });
-  return /* @__PURE__ */ jsx10(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(Dialog.Portal, { children: [
+  return /* @__PURE__ */ jsx10(Dialog.Root, { open, onOpenChange, modal: modal ?? !isDesktop, children: /* @__PURE__ */ jsxs9(Dialog.Portal, { children: [
     /* @__PURE__ */ jsx10(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
     /* @__PURE__ */ jsx10(
       Dialog.Content,
@@ -548,9 +567,9 @@ function TableSkeleton({ rows = 5, columns = 4 }) {
 }
 
 // src/components/search-input.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var SearchInput = React2.forwardRef(
+var SearchInput = React3.forwardRef(
   ({ containerClassName, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxs13("div", { className: `relative flex-1 ${containerClassName ?? ""}`, children: [
       /* @__PURE__ */ jsxs13(
@@ -588,10 +607,10 @@ SearchInput.displayName = "SearchInput";
 
 // src/components/password-input.tsx
 import { Eye, EyeOff } from "lucide-react";
-import * as React3 from "react";
+import * as React4 from "react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-var PasswordInput = React3.forwardRef(({ containerClassName, className, ...props }, ref) => {
-  const [visible, setVisible] = React3.useState(false);
+var PasswordInput = React4.forwardRef(({ containerClassName, className, ...props }, ref) => {
+  const [visible, setVisible] = React4.useState(false);
   return /* @__PURE__ */ jsxs14("div", { className: `relative ${containerClassName ?? ""}`, children: [
     /* @__PURE__ */ jsx16(
       "input",
@@ -625,21 +644,21 @@ import * as React6 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 // src/hooks/use-infinite-scroll-sentinel.ts
-import * as React4 from "react";
+import * as React5 from "react";
 function useInfiniteScrollSentinel({
   enabled,
   loading,
   onLoadMore
 }) {
-  const listRef = React4.useRef(null);
-  const sentinelRef = React4.useRef(null);
-  const loadingRef = React4.useRef(loading);
-  const onLoadMoreRef = React4.useRef(onLoadMore);
-  React4.useEffect(() => {
+  const listRef = React5.useRef(null);
+  const sentinelRef = React5.useRef(null);
+  const loadingRef = React5.useRef(loading);
+  const onLoadMoreRef = React5.useRef(onLoadMore);
+  React5.useEffect(() => {
     loadingRef.current = loading;
     onLoadMoreRef.current = onLoadMore;
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!enabled) return;
     const root = listRef.current;
     const sentinel = sentinelRef.current;
@@ -658,23 +677,6 @@ function useInfiniteScrollSentinel({
   return { listRef, sentinelRef };
 }
 
-// src/hooks/use-is-desktop.ts
-import * as React5 from "react";
-var DESKTOP_QUERY = "(min-width: 640px)";
-function useIsDesktop() {
-  const [isDesktop, setIsDesktop] = React5.useState(
-    () => typeof window !== "undefined" ? window.matchMedia(DESKTOP_QUERY).matches : true
-  );
-  React5.useEffect(() => {
-    const mql = window.matchMedia(DESKTOP_QUERY);
-    const onChange = () => setIsDesktop(mql.matches);
-    onChange();
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return isDesktop;
-}
-
 // src/components/combobox.tsx
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function Combobox({