@digilogiclabs/saas-factory-ui 0.13.1 → 0.13.3

package/dist/index.d.mts

@@ -286,8 +286,10 @@ interface SuccessAnimationProps {
     playSound?: boolean;
     /** Custom sound URL */
     soundUrl?: string;
+    /** Additional HTML attributes for the container */
+    containerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd'>;
 }
-declare function SuccessAnimation({ onComplete, duration, type, message, showMessage, size, className, playSound, soundUrl }: SuccessAnimationProps): react_jsx_runtime.JSX.Element;
+declare function SuccessAnimation({ onComplete, duration, type, message, showMessage, size, className, playSound, soundUrl, containerProps }: SuccessAnimationProps): react_jsx_runtime.JSX.Element;
 declare const SuccessCheckmark: (props: Omit<SuccessAnimationProps, "type">) => react_jsx_runtime.JSX.Element;
 declare const ErrorAnimation: (props: Omit<SuccessAnimationProps, "type">) => react_jsx_runtime.JSX.Element;
 declare const WarningAnimation: (props: Omit<SuccessAnimationProps, "type">) => react_jsx_runtime.JSX.Element;
@@ -731,14 +733,14 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const heroVariants: (props?: ({
-    height?: "auto" | "compact" | "responsive" | "screen" | "50vh" | "60vh" | "75vh" | "80vh" | null | undefined;
+    height?: "auto" | "screen" | "compact" | "responsive" | "50vh" | "60vh" | "75vh" | "80vh" | null | undefined;
     backgroundType?: "none" | "video" | "image" | "pattern" | "gradient" | null | undefined;
     contentAlignment?: "center" | "top" | "right" | "bottom" | "left" | "bottom-right" | "bottom-left" | null | undefined;
     overlay?: "none" | "medium" | "dark" | "light" | "gradient" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const contentVariants: (props?: ({
     maxWidth?: "sm" | "md" | "lg" | "xl" | "mobile" | "full" | "2xl" | "3xl" | "4xl" | null | undefined;
-    mobileTextSize?: "compact" | "standard" | "large" | "hero" | null | undefined;
+    mobileTextSize?: "large" | "compact" | "standard" | "hero" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface MobileHeroProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof heroVariants> {
     backgroundImage?: string;
@@ -1004,6 +1006,8 @@ interface PageTransitionProps {
     onTransitionStart?: () => void;
     onTransitionComplete?: () => void;
     key?: string | number;
+    /** Additional HTML attributes for the container */
+    containerProps?: Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onAnimationEnd' | 'onTransitionStart' | 'onTransitionEnd' | 'onDrag' | 'onDragStart' | 'onDragEnd'>;
 }
 declare const PageTransition: React__default.FC<PageTransitionProps>;
 declare const withPageTransition: (Component: React__default.ComponentType<any>, transitionProps?: Partial<PageTransitionProps>) => {
@@ -1152,6 +1156,8 @@ interface NetworkAwareContentProps {
     onNetworkChange?: (networkInfo: NetworkInfo) => void;
     loadingComponent?: ReactNode;
     fallbackToDefault?: boolean;
+    /** Additional HTML attributes for the container */
+    containerProps?: React__default.HTMLAttributes<HTMLDivElement>;
 }
 declare const NetworkAwareContent: React__default.FC<NetworkAwareContentProps>;
 declare const useNetworkInfo: () => NetworkInfo | null;

package/dist/index.d.ts

@@ -286,8 +286,10 @@ interface SuccessAnimationProps {
     playSound?: boolean;
     /** Custom sound URL */
     soundUrl?: string;
+    /** Additional HTML attributes for the container */
+    containerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd'>;
 }
-declare function SuccessAnimation({ onComplete, duration, type, message, showMessage, size, className, playSound, soundUrl }: SuccessAnimationProps): react_jsx_runtime.JSX.Element;
+declare function SuccessAnimation({ onComplete, duration, type, message, showMessage, size, className, playSound, soundUrl, containerProps }: SuccessAnimationProps): react_jsx_runtime.JSX.Element;
 declare const SuccessCheckmark: (props: Omit<SuccessAnimationProps, "type">) => react_jsx_runtime.JSX.Element;
 declare const ErrorAnimation: (props: Omit<SuccessAnimationProps, "type">) => react_jsx_runtime.JSX.Element;
 declare const WarningAnimation: (props: Omit<SuccessAnimationProps, "type">) => react_jsx_runtime.JSX.Element;
@@ -731,14 +733,14 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const heroVariants: (props?: ({
-    height?: "auto" | "compact" | "responsive" | "screen" | "50vh" | "60vh" | "75vh" | "80vh" | null | undefined;
+    height?: "auto" | "screen" | "compact" | "responsive" | "50vh" | "60vh" | "75vh" | "80vh" | null | undefined;
     backgroundType?: "none" | "video" | "image" | "pattern" | "gradient" | null | undefined;
     contentAlignment?: "center" | "top" | "right" | "bottom" | "left" | "bottom-right" | "bottom-left" | null | undefined;
     overlay?: "none" | "medium" | "dark" | "light" | "gradient" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const contentVariants: (props?: ({
     maxWidth?: "sm" | "md" | "lg" | "xl" | "mobile" | "full" | "2xl" | "3xl" | "4xl" | null | undefined;
-    mobileTextSize?: "compact" | "standard" | "large" | "hero" | null | undefined;
+    mobileTextSize?: "large" | "compact" | "standard" | "hero" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface MobileHeroProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof heroVariants> {
     backgroundImage?: string;
@@ -1004,6 +1006,8 @@ interface PageTransitionProps {
     onTransitionStart?: () => void;
     onTransitionComplete?: () => void;
     key?: string | number;
+    /** Additional HTML attributes for the container */
+    containerProps?: Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onAnimationEnd' | 'onTransitionStart' | 'onTransitionEnd' | 'onDrag' | 'onDragStart' | 'onDragEnd'>;
 }
 declare const PageTransition: React__default.FC<PageTransitionProps>;
 declare const withPageTransition: (Component: React__default.ComponentType<any>, transitionProps?: Partial<PageTransitionProps>) => {
@@ -1152,6 +1156,8 @@ interface NetworkAwareContentProps {
     onNetworkChange?: (networkInfo: NetworkInfo) => void;
     loadingComponent?: ReactNode;
     fallbackToDefault?: boolean;
+    /** Additional HTML attributes for the container */
+    containerProps?: React__default.HTMLAttributes<HTMLDivElement>;
 }
 declare const NetworkAwareContent: React__default.FC<NetworkAwareContentProps>;
 declare const useNetworkInfo: () => NetworkInfo | null;

package/dist/index.js

@@ -2168,7 +2168,8 @@ function SuccessAnimation({
   size = "md",
   className,
   playSound = true,
-  soundUrl
+  soundUrl,
+  containerProps
 }) {
   const [isVisible, setIsVisible] = (0, import_react3.useState)(true);
   const sizeClasses = {
@@ -2239,6 +2240,7 @@ function SuccessAnimation({
         animate: { opacity: 0, scale: 0.8 },
         transition: { duration: 0.3 },
         className: cn("flex flex-col items-center justify-center", className),
+        ...containerProps,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn(
             "rounded-full border-2 flex items-center justify-center",
@@ -2262,6 +2264,7 @@ function SuccessAnimation({
         // Spring-like easing
       },
       className: cn("flex flex-col items-center justify-center", className),
+      ...containerProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           import_framer_motion4.motion.div,
@@ -6578,7 +6581,8 @@ var PageTransition = ({
   reduceMotion = false,
   onTransitionStart,
   onTransitionComplete,
-  key
+  key,
+  containerProps
 }) => {
   const prefersReducedMotion = import_react15.default.useMemo(() => {
     if (typeof window === "undefined") return false;
@@ -6611,6 +6615,7 @@ var PageTransition = ({
         height: "100%",
         position: "relative"
       },
+      ...containerProps,
       children
     },
     key || "page-transition"
@@ -7794,7 +7799,8 @@ var NetworkAwareContent = ({
   respectSaveData = true,
   onNetworkChange,
   loadingComponent,
-  fallbackToDefault = true
+  fallbackToDefault = true,
+  containerProps
 }) => {
   const [networkInfo, setNetworkInfo] = (0, import_react21.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react21.useState)(true);
@@ -7823,13 +7829,13 @@ var NetworkAwareContent = ({
     };
   }, [updateNetworkInfo]);
   if (isLoading || !networkInfo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("flex items-center justify-center p-4", className), children: loadingComponent || /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "h-4 bg-gray-200 rounded w-32" }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("flex items-center justify-center p-4", className), ...containerProps, children: loadingComponent || /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "h-4 bg-gray-200 rounded w-32" }) }) });
   }
   if (!networkInfo.online) {
     if (showOnOffline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, children: showOnOffline });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, ...containerProps, children: showOnOffline });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("text-center p-4 bg-red-50 border border-red-200 rounded", className), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-red-800", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("text-center p-4 bg-red-50 border border-red-200 rounded", className), ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-red-800", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { className: "w-6 h-6 mx-auto mb-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M18.364 5.636l-12.728 12.728m0-12.728l12.728 12.728" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "font-medium", children: "No internet connection" }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-sm", children: "Please check your connection and try again" })
@@ -7837,12 +7843,12 @@ var NetworkAwareContent = ({
   }
   if (respectSaveData && networkInfo.saveData) {
     if (showOnSlow) {
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, children: showOnSlow });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, ...containerProps, children: showOnSlow });
     }
     if (fallbackToDefault) {
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, ...containerProps, children });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("text-center p-4 bg-yellow-50 border border-yellow-200 rounded", className), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-yellow-800", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("text-center p-4 bg-yellow-50 border border-yellow-200 rounded", className), ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-yellow-800", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { className: "w-6 h-6 mx-auto mb-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "font-medium", children: "Data saver mode enabled" }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-sm", children: "Showing minimal content to save data" })
@@ -7851,12 +7857,12 @@ var NetworkAwareContent = ({
   const isFastNetwork = fastThreshold.includes(networkInfo.speed) || networkInfo.downlink >= 10;
   const isSlowNetwork = slowThreshold.includes(networkInfo.speed) || networkInfo.downlink < 1.5;
   if (isFastNetwork && showOnFast) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, children: showOnFast });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, ...containerProps, children: showOnFast });
   }
   if (isSlowNetwork && showOnSlow) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, children: showOnSlow });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, ...containerProps, children: showOnSlow });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className, ...containerProps, children });
 };
 var useNetworkInfo = () => {
   const [networkInfo, setNetworkInfo] = (0, import_react21.useState)(null);