@msviderok/base-ui-solid 1.0.0-beta.1

package/cjs/alert-dialog/title/AlertDialogTitle.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlertDialogTitle = AlertDialogTitle;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A heading that labels the dialog.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+function AlertDialogTitle(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['id']);
+  const {
+    setCodependentRefs
+  } = (0, _AlertDialogRootContext.useAlertDialogRootContext)();
+  const id = (0, _useBaseUiId.useBaseUiId)(local.id);
+  let ref;
+  (0, _solidJs.onMount)(() => {
+    setCodependentRefs('title', {
+      explicitId: id,
+      ref: () => ref,
+      id: () => local.id
+    });
+  });
+  const element = (0, _useRenderElement.useRenderElement)('h2', componentProps, {
+    ref: el => {
+      ref = el;
+    },
+    props: [{
+      get id() {
+        return id();
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element
+  });
+}

package/cjs/alert-dialog/trigger/AlertDialogTrigger.d.ts

@@ -0,0 +1,29 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A button that opens the alert dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+export declare function AlertDialogTrigger(componentProps: AlertDialogTrigger.Props): import("solid-js").JSX.Element;
+export declare namespace AlertDialogTrigger {
+  interface Props extends BaseUIComponentProps<'button', State> {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+     * @default false
+     */
+    nativeButton?: boolean;
+  }
+  interface State {
+    /**
+     * Whether the dialog is currently disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the dialog is currently open.
+     */
+    open: boolean;
+  }
+}

package/cjs/alert-dialog/trigger/AlertDialogTrigger.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlertDialogTrigger = AlertDialogTrigger;
+var _solidHelpers = require("../../solid-helpers");
+var _useButton = require("../../use-button/useButton");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _AlertDialogRootContext = require("../root/AlertDialogRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A button that opens the alert dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+function AlertDialogTrigger(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['disabled', 'nativeButton']);
+  const disabled = () => local.disabled ?? false;
+  const native = () => local.nativeButton ?? true;
+  const {
+    open,
+    setTriggerElement,
+    triggerProps
+  } = (0, _AlertDialogRootContext.useAlertDialogRootContext)();
+  const state = {
+    get disabled() {
+      return disabled();
+    },
+    get open() {
+      return open();
+    }
+  };
+  const {
+    getButtonProps,
+    buttonRef
+  } = (0, _useButton.useButton)({
+    disabled,
+    native
+  });
+  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
+    state,
+    ref: el => {
+      buttonRef(el);
+      setTriggerElement(el);
+    },
+    props: [triggerProps, elementProps, getButtonProps],
+    customStyleHookMapping: _popupStateMapping.triggerOpenStateMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/alert-dialog/trigger/AlertDialogTriggerDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum AlertDialogTriggerDataAttributes {
+  /**
+   * Present when the trigger is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the corresponding dialog is open.
+   */
+  popupOpen = "data-popup-open",
+}

package/cjs/alert-dialog/trigger/AlertDialogTriggerDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlertDialogTriggerDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let AlertDialogTriggerDataAttributes = exports.AlertDialogTriggerDataAttributes = function (AlertDialogTriggerDataAttributes) {
+  /**
+   * Present when the trigger is disabled.
+   */
+  AlertDialogTriggerDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the corresponding dialog is open.
+   */
+  AlertDialogTriggerDataAttributes[AlertDialogTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  return AlertDialogTriggerDataAttributes;
+}({});

package/cjs/avatar/fallback/AvatarFallback.d.ts

@@ -0,0 +1,17 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+import type { AvatarRoot } from "../root/AvatarRoot.js";
+/**
+ * Rendered when the image fails to load or when no image is provided.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+export declare function AvatarFallback(componentProps: AvatarFallback.Props): import("solid-js").JSX.Element;
+export declare namespace AvatarFallback {
+  interface Props extends BaseUIComponentProps<'span', AvatarRoot.State> {
+    /**
+     * How long to wait before showing the fallback. Specified in milliseconds.
+     */
+    delay?: number;
+  }
+}

package/cjs/avatar/fallback/AvatarFallback.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarFallback = AvatarFallback;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _useTimeout = require("../../utils/useTimeout");
+var _AvatarRootContext = require("../root/AvatarRootContext");
+var _styleHooks = require("../root/styleHooks");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Rendered when the image fails to load or when no image is provided.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+function AvatarFallback(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['delay']);
+  const {
+    imageLoadingStatus
+  } = (0, _AvatarRootContext.useAvatarRootContext)();
+  const [delayPassed, setDelayPassed] = (0, _solidJs.createSignal)(local.delay === undefined);
+  const timeout = (0, _useTimeout.useTimeout)();
+  (0, _solidJs.createEffect)(() => {
+    if (local.delay !== undefined) {
+      timeout.start(local.delay, () => setDelayPassed(true));
+    }
+    (0, _solidJs.onCleanup)(() => {
+      timeout.clear();
+    });
+  });
+  const state = {
+    get imageLoadingStatus() {
+      return imageLoadingStatus();
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    state,
+    props: elementProps,
+    customStyleHookMapping: _styleHooks.avatarStyleHookMapping,
+    enabled: () => imageLoadingStatus() !== 'loaded' && delayPassed()
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/avatar/image/AvatarImage.d.ts

@@ -0,0 +1,18 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+import type { AvatarRoot } from "../root/AvatarRoot.js";
+import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
+/**
+ * The image to be displayed in the avatar.
+ * Renders an `<img>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+export declare function AvatarImage(componentProps: AvatarImage.Props): import("solid-js").JSX.Element;
+export declare namespace AvatarImage {
+  interface Props extends BaseUIComponentProps<'img', AvatarRoot.State> {
+    /**
+     * Callback fired when the loading status changes.
+     */
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+  }
+}

package/cjs/avatar/image/AvatarImage.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarImage = AvatarImage;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _AvatarRootContext = require("../root/AvatarRootContext");
+var _styleHooks = require("../root/styleHooks");
+var _useImageLoadingStatus = require("./useImageLoadingStatus");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The image to be displayed in the avatar.
+ * Renders an `<img>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+function AvatarImage(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['onLoadingStatusChange', 'referrerPolicy', 'crossOrigin']);
+  const context = (0, _AvatarRootContext.useAvatarRootContext)();
+  const imageLoadingStatus = (0, _useImageLoadingStatus.useImageLoadingStatus)({
+    src: () => componentProps.src,
+    referrerPolicy: local.referrerPolicy,
+    crossOrigin: local.crossOrigin
+  });
+  const handleLoadingStatusChange = status => {
+    (0, _solidJs.batch)(() => {
+      local.onLoadingStatusChange?.(status);
+      context.setImageLoadingStatus(status);
+    });
+  };
+  (0, _solidJs.createEffect)(() => {
+    if (imageLoadingStatus() !== 'idle') {
+      handleLoadingStatusChange(imageLoadingStatus());
+    }
+  });
+  const state = {
+    get imageLoadingStatus() {
+      return imageLoadingStatus();
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)('img', componentProps, {
+    state,
+    props: elementProps,
+    customStyleHookMapping: _styleHooks.avatarStyleHookMapping,
+    enabled: () => imageLoadingStatus() === 'loaded'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/avatar/image/useImageLoadingStatus.d.ts

@@ -0,0 +1,10 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface UseImageLoadingStatusOptions {
+  src: MaybeAccessor<string | undefined>;
+  referrerPolicy?: MaybeAccessor<JSX.HTMLReferrerPolicy | undefined>;
+  crossOrigin?: MaybeAccessor<JSX.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'] | undefined>;
+}
+export declare function useImageLoadingStatus(options: UseImageLoadingStatusOptions): Accessor<ImageLoadingStatus>;
+export {};

package/cjs/avatar/image/useImageLoadingStatus.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useImageLoadingStatus = useImageLoadingStatus;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+function useImageLoadingStatus(options) {
+  const [loadingStatus, setLoadingStatus] = (0, _solidJs.createSignal)('idle');
+  const src = () => (0, _solidHelpers.access)(options.src);
+  const referrerPolicy = () => (0, _solidHelpers.access)(options.referrerPolicy);
+  const crossOrigin = () => (0, _solidHelpers.access)(options.crossOrigin);
+  (0, _solidJs.createEffect)(() => {
+    if (!src()) {
+      setLoadingStatus('error');
+      return;
+    }
+    let isMounted = true;
+    const image = new window.Image();
+    const updateStatus = status => () => {
+      if (!isMounted) {
+        return;
+      }
+      setLoadingStatus(status);
+    };
+    setLoadingStatus('loading');
+    image.onload = updateStatus('loaded');
+    image.onerror = updateStatus('error');
+    if (referrerPolicy()) {
+      image.referrerPolicy = referrerPolicy();
+    }
+    image.crossOrigin = crossOrigin() ?? null;
+    image.src = src();
+    (0, _solidJs.onCleanup)(() => {
+      isMounted = false;
+    });
+  });
+  return loadingStatus;
+}

package/cjs/avatar/index.d.ts

@@ -0,0 +1 @@
+export * as Avatar from "./index.parts.js";

package/cjs/avatar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = void 0;
+var _Avatar = _interopRequireWildcard(require("./index.parts"));
+exports.Avatar = _Avatar;

package/cjs/avatar/index.parts.d.ts

@@ -0,0 +1,3 @@
+export { AvatarRoot as Root } from "./root/AvatarRoot.js";
+export { AvatarImage as Image } from "./image/AvatarImage.js";
+export { AvatarFallback as Fallback } from "./fallback/AvatarFallback.js";

package/cjs/avatar/index.parts.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Fallback", {
+  enumerable: true,
+  get: function () {
+    return _AvatarFallback.AvatarFallback;
+  }
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _AvatarImage.AvatarImage;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _AvatarRoot.AvatarRoot;
+  }
+});
+var _AvatarRoot = require("./root/AvatarRoot");
+var _AvatarImage = require("./image/AvatarImage");
+var _AvatarFallback = require("./fallback/AvatarFallback");

package/cjs/avatar/root/AvatarRoot.d.ts

@@ -0,0 +1,15 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * Displays a user's profile picture, initials, or fallback icon.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+export declare function AvatarRoot(componentProps: AvatarRoot.Props): import("solid-js").JSX.Element;
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+export declare namespace AvatarRoot {
+  interface Props extends BaseUIComponentProps<'span', State> {}
+  interface State {
+    imageLoadingStatus: ImageLoadingStatus;
+  }
+}

package/cjs/avatar/root/AvatarRoot.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarRoot = AvatarRoot;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _AvatarRootContext = require("./AvatarRootContext");
+var _styleHooks = require("./styleHooks");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Displays a user's profile picture, initials, or fallback icon.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+function AvatarRoot(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const [imageLoadingStatus, setImageLoadingStatus] = (0, _solidJs.createSignal)('idle');
+  const state = {
+    get imageLoadingStatus() {
+      return imageLoadingStatus();
+    }
+  };
+  const contextValue = {
+    imageLoadingStatus,
+    setImageLoadingStatus
+  };
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    state,
+    props: elementProps,
+    customStyleHookMapping: _styleHooks.avatarStyleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarRootContext.AvatarRootContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/cjs/avatar/root/AvatarRootContext.d.ts

@@ -0,0 +1,8 @@
+import { type Accessor } from 'solid-js';
+import type { ImageLoadingStatus } from "./AvatarRoot.js";
+export interface AvatarRootContext {
+  imageLoadingStatus: Accessor<ImageLoadingStatus>;
+  setImageLoadingStatus: (status: ImageLoadingStatus) => void;
+}
+export declare const AvatarRootContext: import("solid-js").Context<AvatarRootContext | undefined>;
+export declare function useAvatarRootContext(): AvatarRootContext;

package/cjs/avatar/root/AvatarRootContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarRootContext = void 0;
+exports.useAvatarRootContext = useAvatarRootContext;
+var _solidJs = require("solid-js");
+const AvatarRootContext = exports.AvatarRootContext = (0, _solidJs.createContext)(undefined);
+function useAvatarRootContext() {
+  const context = (0, _solidJs.useContext)(AvatarRootContext);
+  if (context === undefined) {
+    throw new Error('Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>.');
+  }
+  return context;
+}

package/cjs/avatar/root/styleHooks.d.ts

@@ -0,0 +1,3 @@
+export declare const avatarStyleHookMapping: {
+  imageLoadingStatus: () => null;
+};

package/cjs/avatar/root/styleHooks.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarStyleHookMapping = void 0;
+const avatarStyleHookMapping = exports.avatarStyleHookMapping = {
+  imageLoadingStatus: () => null
+};

package/cjs/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * as Checkbox from "./index.parts.js";

package/cjs/checkbox/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = void 0;
+var _Checkbox = _interopRequireWildcard(require("./index.parts"));
+exports.Checkbox = _Checkbox;

package/cjs/checkbox/index.parts.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxRoot as Root } from "./root/CheckboxRoot.js";
+export { CheckboxIndicator as Indicator } from "./indicator/CheckboxIndicator.js";

package/cjs/checkbox/index.parts.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Indicator", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxIndicator.CheckboxIndicator;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxRoot.CheckboxRoot;
+  }
+});
+var _CheckboxRoot = require("./root/CheckboxRoot");
+var _CheckboxIndicator = require("./indicator/CheckboxIndicator");

package/cjs/checkbox/indicator/CheckboxIndicator.d.ts

@@ -0,0 +1,22 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { CheckboxRoot } from "../root/CheckboxRoot.js";
+/**
+ * Indicates whether the checkbox is ticked.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+export declare function CheckboxIndicator(componentProps: CheckboxIndicator.Props): import("solid-js").JSX.Element;
+export declare namespace CheckboxIndicator {
+  interface State extends CheckboxRoot.State {
+    transitionStatus: TransitionStatus;
+  }
+  interface Props extends BaseUIComponentProps<'span', State> {
+    /**
+     * Whether to keep the element in the DOM when the checkbox is not checked.
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+}

package/cjs/checkbox/indicator/CheckboxIndicator.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxIndicator = CheckboxIndicator;
+var _solidJs = require("solid-js");
+var _constants = require("../../field/utils/constants");
+var _styleHookMapping = require("../../utils/styleHookMapping");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _CheckboxRootContext = require("../root/CheckboxRootContext");
+var _useCustomStyleHookMapping = require("../utils/useCustomStyleHookMapping");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Indicates whether the checkbox is ticked.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+function CheckboxIndicator(componentProps) {
+  const [local, elementProps] = (0, _solidJs.splitProps)(componentProps, ['keepMounted']);
+  const keepMounted = () => local.keepMounted ?? false;
+  const rootState = (0, _CheckboxRootContext.useCheckboxRootContext)();
+  const rendered = () => rootState.checked || rootState.indeterminate;
+  const {
+    transitionStatus,
+    setMounted
+  } = (0, _useTransitionStatus.useTransitionStatus)(rendered);
+  let indicatorRef = null;
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open: rendered,
+    ref: () => indicatorRef,
+    onComplete() {
+      if (!rendered()) {
+        setMounted(false);
+      }
+    }
+  });
+  const baseStyleHookMapping = (0, _useCustomStyleHookMapping.useCustomStyleHookMapping)(rootState);
+  const customStyleHookMapping = {
+    ...baseStyleHookMapping,
+    ..._styleHookMapping.transitionStatusMapping,
+    ..._constants.fieldValidityMapping
+  };
+  const shouldRender = () => keepMounted() || rendered();
+  const indicatorState = (0, _solidJs.mergeProps)(rootState, {
+    get transitionStatus() {
+      return transitionStatus();
+    }
+  });
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    state: indicatorState,
+    ref: el => {
+      indicatorRef = el;
+    },
+    customStyleHookMapping,
+    props: elementProps,
+    enabled: shouldRender
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
+    when: shouldRender(),
+    children: element()
+  });
+}