@admin-layout/tailwind-ui 12.2.4-alpha.9 → 12.2.4-alpha.97

package/lib/components/Dialog/Dialog.js

@@ -0,0 +1,111 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {X}from'lucide-react';import {useRef,useId,useEffect}from'react';import {cn}from'../../utils/util.js';const DEFAULT_DIALOG_WIDTH = '32rem';
+const DEFAULT_DIALOG_HEIGHT = 'auto';
+const DEFAULT_DIALOG_MIN_WIDTH = 'min(20rem, 90vw)';
+const DEFAULT_DIALOG_MIN_HEIGHT = 'min(12rem, 90vh)';
+const DEFAULT_DIALOG_MAX_WIDTH = '90vw';
+const DEFAULT_DIALOG_MAX_HEIGHT = '90vh';
+function getDialogStyle(width, height) {
+  return {
+    width: width ?? DEFAULT_DIALOG_WIDTH,
+    height: height ?? DEFAULT_DIALOG_HEIGHT,
+    minWidth: DEFAULT_DIALOG_MIN_WIDTH,
+    minHeight: DEFAULT_DIALOG_MIN_HEIGHT,
+    maxWidth: DEFAULT_DIALOG_MAX_WIDTH,
+    maxHeight: DEFAULT_DIALOG_MAX_HEIGHT
+  };
+}
+function Dialog({
+  isOpen,
+  title,
+  subtitle,
+  onClose,
+  onSave,
+  loading,
+  children,
+  saveLabel = 'Save',
+  cancelLabel = 'Cancel',
+  saveDisabled,
+  hideFooter,
+  width,
+  height,
+  className,
+  bodyClassName
+}) {
+  const dialogRef = useRef(null);
+  const titleId = useId();
+  const trimmedTitle = title?.trim();
+  const trimmedSubtitle = subtitle?.trim();
+  const hasHeader = Boolean(trimmedTitle);
+  const dialogStyle = getDialogStyle(width, height);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen && !dialog.open) {
+      dialog.showModal();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+  return jsx("dialog", {
+    ref: dialogRef,
+    onClose: onClose,
+    onClick: event => {
+      if (event.target === dialogRef.current) {
+        dialogRef.current?.close();
+      }
+    },
+    "aria-labelledby": trimmedTitle ? titleId : undefined,
+    "aria-label": !trimmedTitle ? trimmedSubtitle || 'Dialog' : undefined,
+    className: "m-0 h-screen max-h-none w-screen max-w-none border-0 bg-transparent p-4 backdrop:bg-black/50 backdrop:backdrop-blur-sm open:fixed open:inset-0 open:flex open:items-center open:justify-center sm:p-6",
+    children: jsxs("div", {
+      style: dialogStyle,
+      className: cn('themed-modal relative flex w-full flex-col overflow-hidden rounded-themed-lg border border-border bg-card text-card-foreground shadow-themed-xl animate-in fade-in zoom-in-95 duration-200', className),
+      children: [hasHeader && jsxs("div", {
+        className: "flex items-start justify-between gap-4 bg-card px-6 py-4 text-card-foreground",
+        children: [jsxs("div", {
+          children: [jsx("h3", {
+            id: titleId,
+            className: "text-xl font-semibold text-card-foreground",
+            children: trimmedTitle
+          }), trimmedSubtitle && jsx("p", {
+            className: "mt-1 text-sm text-muted-foreground",
+            children: trimmedSubtitle
+          })]
+        }), jsx("button", {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-themed bg-transparent p-1 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground focus-themed",
+          "aria-label": "Close dialog",
+          children: jsx(X, {
+            className: "h-6 w-6"
+          })
+        })]
+      }), !hasHeader && jsx("button", {
+        type: "button",
+        onClick: onClose,
+        className: "absolute right-4 top-4 z-10 rounded-themed bg-transparent p-1 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground focus-themed",
+        "aria-label": "Close dialog",
+        children: jsx(X, {
+          className: "h-6 w-6"
+        })
+      }), jsx("div", {
+        className: cn('min-h-0 flex-1 overflow-y-auto bg-card px-6 py-4 text-card-foreground', !hasHeader && 'pt-14', bodyClassName),
+        children: children
+      }), !hideFooter && jsxs("div", {
+        className: "flex items-center justify-end gap-3 bg-card px-6 py-4 text-card-foreground",
+        children: [jsx("button", {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-themed border border-border bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 focus-themed",
+          children: cancelLabel
+        }), onSave && jsx("button", {
+          type: "button",
+          onClick: onSave,
+          disabled: loading || saveDisabled,
+          className: "themed-button rounded-themed px-4 py-2 text-sm font-medium focus-themed disabled:cursor-not-allowed disabled:opacity-50",
+          children: loading ? 'Saving...' : saveLabel
+        })]
+      })]
+    })
+  });
+}export{Dialog};//# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":"4JAOI,oBAAkB,GAAA,OAAA;MAClB,qBAAoB,GAAA,MAAA;AACpB,MAAA,wBAAoB,GAAA,kBAAA;MACpB,yBAAkB,GAAA,kBAAA;MAClB,wBAAqB,GAAA,MAAA;MACrB,yBAAmB,GAAA,MAAA;SACnB,cAAc,CAAM,KAAC,EAAA,MAAA,EAAA;SACrB;IACA,KAAA,EAAA,KAAW,IAAE,oBAAQ;AACrB,IAAA,MAAM,EAAE,MAAA,IAAA,qBAAuB;AAC/B,IAAA,QAAO,EAAE,wBAAwB;IACjC,SAAS,EAAC,yBAAS;IACnB,QAAA,EAAA,wBAAuB;AAC1B,IAAA,SAAA,EAAA;AAoBD,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/ErrorHandlers/ApplicationErrorHandler.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const ApplicationErrorHandler: (props: any) => React.JSX.Element;
+export declare const ApplicationErrorHandler: (props: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ApplicationErrorHandler.d.ts.map

package/lib/components/ErrorHandlers/ApplicationErrorHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationErrorHandler.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/ApplicationErrorHandler.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,eAAO,MAAM,uBAAuB,GAAI,UAAK,sBAG5C,CAAC"}
+{"version":3,"file":"ApplicationErrorHandler.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/ApplicationErrorHandler.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,uBAAuB,GAAI,UAAK,4CAG5C,CAAC"}

package/lib/components/ErrorHandlers/ApplicationErrorHandler.js

@@ -1,4 +1,4 @@
-import {ApplicationErrorHandlerCommon}from'@admin-layout/client';import*as React from'react';import {logger}from'@cdm-logger/client';import'../ThemeProvider/ThemeProvider.js';import {toast}from'sonner';const FallbackComponent = ({
+import {jsx}from'react/jsx-runtime';import {ApplicationErrorHandlerCommon}from'@admin-layout/client';import*as React from'react';import {logger}from'@cdm-logger/client';import'../ThemeProvider/ThemeProvider.js';import {toast}from'sonner';const FallbackComponent = ({
   error
 }) => {
   React.useLayoutEffect(() => {
@@ -14,7 +14,7 @@ import {ApplicationErrorHandlerCommon}from'@admin-layout/client';import*as React
 };
 const ApplicationErrorHandler = props => {
   const CommonHandler = ApplicationErrorHandlerCommon(FallbackComponent);
-  return React.createElement(CommonHandler, {
+  return jsx(CommonHandler, {
     ...props
   });
 };export{ApplicationErrorHandler};//# sourceMappingURL=ApplicationErrorHandler.js.map

package/lib/components/ErrorHandlers/ErrorBoundary.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const ErrorBoundary: (props: any) => React.JSX.Element;
+export declare const ErrorBoundary: (props: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ErrorBoundary.d.ts.map

package/lib/components/ErrorHandlers/ErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/ErrorBoundary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwC/B,eAAO,MAAM,aAAa,GAAI,UAAK,sBAElC,CAAC"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/ErrorBoundary.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa,GAAI,UAAK,4CAElC,CAAC"}

package/lib/components/ErrorHandlers/ErrorBoundary.js

@@ -1,4 +1,4 @@
-import {ErrorBoundaryCommon}from'@admin-layout/client';import*as React from'react';import {useNavigate}from'@remix-run/react';import {logger}from'@cdm-logger/client';import {icons}from'../../icons/index.js';const Fallback = props => {
+import {jsx,jsxs}from'react/jsx-runtime';import {ErrorBoundaryCommon}from'@admin-layout/client';import*as React from'react';import {useNavigate}from'@remix-run/react';import {logger}from'@cdm-logger/client';import {icons}from'../../icons/index.js';const Fallback = props => {
   const {
     error
   } = props;
@@ -9,33 +9,40 @@ import {ErrorBoundaryCommon}from'@admin-layout/client';import*as React from'reac
   React.useEffect(() => {
     logger.trace(error);
   }, [error]);
-  return React.createElement("div", {
-    className: "flex items-start p-4 rounded-md bg-red-50 border border-red-200"
-  }, React.createElement("div", {
-    className: "flex-shrink-0 mr-3 text-red-400"
-  }, React.createElement(ExclamationCircleIcon, {
-    className: "h-5 w-5"
-  })), React.createElement("div", {
-    className: "flex-1"
-  }, React.createElement("h3", {
-    className: "text-lg font-medium text-red-800"
-  }, "Error!"), React.createElement("div", {
-    className: "mt-2 text-sm text-red-700"
-  }, error?.message)), React.createElement("button", {
-    className: "ml-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors",
-    onClick: () => {
-      navigate('/');
-      /**
-       * Have to reload the window because the above dispatch will only change the router
-       * but won't refresh due to which we have to call the reload on location
-       * Reference: https://stackoverflow.com/questions/63060387/how-do-i-redirect-within-an-errorboundary
-       */
-      window.location.reload();
-    }
-  }, "Home"));
+  return jsxs("div", {
+    className: "flex items-start p-4 rounded-md bg-red-50 border border-red-200",
+    children: [jsx("div", {
+      className: "flex-shrink-0 mr-3 text-red-400",
+      children: jsx(ExclamationCircleIcon, {
+        className: "h-5 w-5"
+      })
+    }), jsxs("div", {
+      className: "flex-1",
+      children: [jsx("h3", {
+        className: "text-lg font-medium text-red-800",
+        children: "Error!"
+      }), jsx("div", {
+        className: "mt-2 text-sm text-red-700",
+        children: error?.message
+      })]
+    }), jsx("button", {
+      className: "ml-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors",
+      onClick: () => {
+        navigate('/');
+        /**
+         * Have to reload the window because the above dispatch will only change the router
+         * but won't refresh due to which we have to call the reload on location
+         * Reference: https://stackoverflow.com/questions/63060387/how-do-i-redirect-within-an-errorboundary
+         */
+        window.location.reload();
+      },
+      children: "Home"
+    })]
+  });
 };
 const ErrorBoundary = props => {
-  return React.createElement(ErrorBoundaryCommon, {
-    fallbackComponent: Fallback
-  }, props?.children);
+  return jsx(ErrorBoundaryCommon, {
+    fallbackComponent: Fallback,
+    children: props?.children
+  });
 };export{ErrorBoundary};//# sourceMappingURL=ErrorBoundary.js.map

package/lib/components/ErrorHandlers/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorHandlers/LayoutErrorBoundary.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-export declare const LayoutErrorBoundary: (props: any) => React.JSX.Element;
+export declare const LayoutErrorBoundary: (props: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LayoutErrorBoundary.d.ts.map

package/lib/components/ErrorHandlers/LayoutErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/LayoutErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,eAAO,MAAM,mBAAmB,GAAI,UAAK,sBAOxC,CAAC"}
+{"version":3,"file":"LayoutErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/LayoutErrorBoundary.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,mBAAmB,GAAI,UAAK,4CAOxC,CAAC"}

package/lib/components/ErrorHandlers/LayoutErrorBoundary.js

@@ -1,29 +1,34 @@
-import React__default from'react';import {ErrorBoundaryCommon}from'@admin-layout/client';import {icons}from'../../icons/index.js';const Fallback = props => {
+import {jsx,jsxs}from'react/jsx-runtime';import {ErrorBoundaryCommon}from'@admin-layout/client';import {icons}from'../../icons/index.js';const Fallback = props => {
   const {
     error
   } = props;
   const {
     TimesIcon
   } = icons;
-  return React__default.createElement("div", {
-    className: "flex flex-col items-center justify-center p-8 text-center"
-  }, React__default.createElement("div", {
-    className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
-  }, React__default.createElement(TimesIcon, {
-    className: "h-8 w-8 text-red-500"
-  })), React__default.createElement("h2", {
-    className: "mb-2 text-2xl font-bold text-gray-800"
-  }, "Something Went Wrong!"), React__default.createElement("p", {
-    className: "text-gray-600"
-  }, error?.message || 'Unable to identify the cause of this error. Please try again later!'));
+  return jsxs("div", {
+    className: "flex flex-col items-center justify-center p-8 text-center",
+    children: [jsx("div", {
+      className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
+      children: jsx(TimesIcon, {
+        className: "h-8 w-8 text-red-500"
+      })
+    }), jsx("h2", {
+      className: "mb-2 text-2xl font-bold text-gray-800",
+      children: "Something Went Wrong!"
+    }), jsx("p", {
+      className: "text-gray-600",
+      children: error?.message || 'Unable to identify the cause of this error. Please try again later!'
+    })]
+  });
 };
 const LayoutErrorBoundary = props => {
   const {
     children,
     pathname
   } = props;
-  return React__default.createElement(ErrorBoundaryCommon, {
+  return jsx(ErrorBoundaryCommon, {
     fallbackComponent: Fallback,
-    pathname: pathname
-  }, children);
+    pathname: pathname,
+    children: children
+  });
 };export{LayoutErrorBoundary};//# sourceMappingURL=LayoutErrorBoundary.js.map

package/lib/components/ErrorHandlers/LayoutErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LayoutErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorHandlers/RemixErrorBoundary.d.ts

@@ -1,11 +1,13 @@
-import * as React from 'react';
 /**
  * Remix Route ErrorBoundary Component
  * This is specifically for Remix route errors (404s, loader errors, etc.)
  * Different from React's ErrorBoundary which handles component errors
  *
+ * Uses inline styles as fallback to ensure the error page renders correctly
+ * even when Tailwind CSS fails to load or during hydration error recovery.
+ *
  * Usage in root.tsx or any route file:
  * export { RemixErrorBoundary as ErrorBoundary } from '@admin-layout/tailwind-ui';
  */
-export declare function RemixErrorBoundary(): React.JSX.Element;
+export declare function RemixErrorBoundary(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RemixErrorBoundary.d.ts.map

package/lib/components/ErrorHandlers/RemixErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemixErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,sBAwIjC"}
+{"version":3,"file":"RemixErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/RemixErrorBoundary.tsx"],"names":[],"mappings":"AA6CA;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,4CA2KjC"}