react-better-html 1.1.140 → 1.1.142

package/dist/index.d.mts

@@ -114,7 +114,7 @@ type LoaderProps = {
     width?: number;
     /** @default false */
     disabled?: boolean;
-} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
+} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
     box: (props: OmitProps<LoaderProps, "size"> & {
@@ -614,6 +614,11 @@ type FormRowProps = {
      * @default false
      */
     noBreakingPoint?: boolean;
+    /**
+     * @description Weather to render the children as a column or not
+     * @default false
+     */
+    asColumn?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -623,6 +628,7 @@ type FormRowComponentType = {
         icon?: IconName | AnyOtherString;
         title?: string;
         description?: string;
+        isLoading?: boolean;
         withActions?: boolean;
         saveButtonLoaderName?: LoaderName | AnyOtherString;
         resetButtonLoaderName?: LoaderName | AnyOtherString;

package/dist/index.d.ts

@@ -114,7 +114,7 @@ type LoaderProps = {
     width?: number;
     /** @default false */
     disabled?: boolean;
-} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
+} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
     box: (props: OmitProps<LoaderProps, "size"> & {
@@ -614,6 +614,11 @@ type FormRowProps = {
      * @default false
      */
     noBreakingPoint?: boolean;
+    /**
+     * @description Weather to render the children as a column or not
+     * @default false
+     */
+    asColumn?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -623,6 +628,7 @@ type FormRowComponentType = {
         icon?: IconName | AnyOtherString;
         title?: string;
         description?: string;
+        isLoading?: boolean;
         withActions?: boolean;
         saveButtonLoaderName?: LoaderName | AnyOtherString;
         resetButtonLoaderName?: LoaderName | AnyOtherString;

package/dist/index.js

@@ -2434,6 +2434,7 @@ function AlertsHolder() {
       gap: theme2.styles.gap,
       alignItems: pluginConfig.align === "center" ? "center" : pluginConfig.align === "right" ? "flex-end" : void 0,
       transform: pluginConfig.align === "center" ? "translateX(-50%)" : void 0,
+      zIndex: 1e3,
       children: alerts.map((alert) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Alert_default, { alert }, alert.id))
     }
   );
@@ -6988,7 +6989,7 @@ var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
@@ -7207,10 +7208,10 @@ var Form_default = Form2;
 // src/components/FormRow.tsx
 var import_react23 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormRowComponent = (0, import_react23.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+var FormRowComponent = (0, import_react23.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
+  const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
@@ -7221,6 +7222,7 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
   icon,
   title,
   description,
+  isLoading,
   withActions,
   saveButtonLoaderName,
   resetButtonLoaderName,
@@ -7231,21 +7233,36 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
 }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
+  const titleGap = theme2.styles.space;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { as: "h3", children: title }),
         description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
-      ] })
+      ] }),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: 26 - titleGap })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       Div_default.row,
       {
+        position: "relative",
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            Div_default,
+            {
+              position: "absolute",
+              top: "50%",
+              right: `calc(100% + ${theme2.styles.space}px)`,
+              transform: "translateY(-50%)",
+              opacity: !isLoading ? 0 : void 0,
+              pointerEvents: !isLoading ? "none" : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default, {})
+            }
+          ),
           children,
           withActions && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),