@motor-hero/ui-kit 0.26.0 → 0.27.0

package/dist/components/base-dialog.d.ts

@@ -17,6 +17,13 @@ export interface BaseDialogProps {
     footer?: ReactNode;
     size?: BaseDialogSize;
     className?: string;
+    /**
+     * Radix `modal` for the underlying Dialog. Defaults to `!isDesktop`: on
+     * desktop the dialog is non-modal so a Combobox/Select popover (portaled
+     * outside the dialog) can receive focus and keystrokes; on mobile it stays
+     * modal so the bottom-sheet behaves. Pass explicitly to override.
+     */
+    modal?: boolean;
     /**
      * Advanced: wraps the dialog's inner content (header + body + footer) inside
      * Content. Used by FormDialog to inject a <form>. Defaults to identity.
@@ -33,6 +40,6 @@ export interface BaseDialogProps {
  * can persist after closing a dialog that contained a Select/Popover,
  * which would otherwise make the rest of the page unclickable.
  */
-export declare function BaseDialog({ open, onOpenChange, title, description, children, footer, size, className, contentWrapper, }: BaseDialogProps): React.JSX.Element;
+export declare function BaseDialog({ open, onOpenChange, title, description, children, footer, size, className, modal, contentWrapper, }: BaseDialogProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=base-dialog.d.ts.map

package/dist/components/base-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,QAAA,MAAM,WAAW;;;;;;CAMP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,cAAqC,GACtC,EAAE,eAAe,qBA8DjB"}
+{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW;;;;;;CAMP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,KAAK,EACL,cAAqC,GACtC,EAAE,eAAe,qBA+DjB"}

package/dist/index.cjs

@@ -447,7 +447,24 @@ function FormField({ label, htmlFor, error, required, children, className }) {
 // src/components/base-dialog.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react2 = require("lucide-react");
+var React2 = __toESM(require("react"), 1);
+
+// src/hooks/use-is-desktop.ts
 var React = __toESM(require("react"), 1);
+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
 var import_clsx = require("clsx");
@@ -474,9 +491,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") {
@@ -503,7 +522,7 @@ function BaseDialog({
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-4", children }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Dialog.Portal, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog.Root, { open, onOpenChange, modal: modal ?? !isDesktop, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Dialog.Portal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(
       Dialog.Content,
@@ -623,9 +642,9 @@ function TableSkeleton({ rows = 5, columns = 4 }) {
 }
 
 // src/components/search-input.tsx
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var SearchInput = React2.forwardRef(
+var SearchInput = React3.forwardRef(
   ({ containerClassName, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `relative flex-1 ${containerClassName ?? ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -663,10 +682,10 @@ SearchInput.displayName = "SearchInput";
 
 // src/components/password-input.tsx
 var import_lucide_react3 = require("lucide-react");
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `relative ${containerClassName ?? ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
@@ -700,21 +719,21 @@ var React6 = __toESM(require("react"), 1);
 var import_vaul = require("vaul");
 
 // src/hooks/use-infinite-scroll-sentinel.ts
-var React4 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 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;
@@ -733,23 +752,6 @@ function useInfiniteScrollSentinel({
   return { listRef, sentinelRef };
 }
 
-// src/hooks/use-is-desktop.ts
-var React5 = __toESM(require("react"), 1);
-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
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Combobox({