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

package/esm/field/root/FieldRootDataAttributes.d.ts

@@ -0,0 +1,30 @@
+export declare enum FieldRootDataAttributes {
+  /**
+   * Present when the field is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the field has been touched.
+   */
+  touched = "data-touched",
+  /**
+   * Present when the field's value has changed.
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the field is valid.
+   */
+  valid = "data-valid",
+  /**
+   * Present when the field is invalid.
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the field is filled.
+   */
+  filled = "data-filled",
+  /**
+   * Present when the field control is focused.
+   */
+  focused = "data-focused",
+}

package/esm/field/root/FieldRootDataAttributes.js

@@ -0,0 +1,31 @@
+export let FieldRootDataAttributes = /*#__PURE__*/function (FieldRootDataAttributes) {
+  /**
+   * Present when the field is disabled.
+   */
+  FieldRootDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the field has been touched.
+   */
+  FieldRootDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the field's value has changed.
+   */
+  FieldRootDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the field is valid.
+   */
+  FieldRootDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the field is invalid.
+   */
+  FieldRootDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the field is filled.
+   */
+  FieldRootDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the field control is focused.
+   */
+  FieldRootDataAttributes["focused"] = "data-focused";
+  return FieldRootDataAttributes;
+}({});

package/esm/field/useField.d.ts

@@ -0,0 +1,17 @@
+import { type MaybeAccessor } from "../solid-helpers.js";
+export declare function useField(params: useField.Parameters): void;
+export declare namespace useField {
+  interface Parameters {
+    enabled?: MaybeAccessor<boolean | undefined>;
+    value: MaybeAccessor<unknown>;
+    getValue?: (() => unknown) | undefined;
+    id: MaybeAccessor<string | undefined>;
+    name?: MaybeAccessor<string | undefined>;
+    commitValidation: (value: unknown) => void;
+    /**
+     * A ref to a focusable element that receives focus when the field fails
+     * validation during form submission.
+     */
+    controlRef: MaybeAccessor<any>;
+  }
+}

package/esm/field/useField.js

@@ -0,0 +1,68 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { produce } from 'solid-js/store';
+import { useFormContext } from "../form/FormContext.js";
+import { access } from "../solid-helpers.js";
+import { useFieldRootContext } from "./root/FieldRootContext.js";
+import { getCombinedFieldValidityData } from "./utils/getCombinedFieldValidityData.js";
+export function useField(params) {
+  const {
+    setFormRef
+  } = useFormContext();
+  const {
+    invalid,
+    refs,
+    validityData,
+    setValidityData
+  } = useFieldRootContext();
+  const enabled = () => access(params.enabled) ?? true;
+  const value = () => access(params.value);
+  const id = () => access(params.id);
+  const name = () => access(params.name);
+  const controlRef = () => access(params.controlRef);
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    let initialValue = value();
+    if (initialValue === undefined) {
+      initialValue = params.getValue?.();
+    }
+    if (validityData.initialValue === null && initialValue !== validityData.initialValue) {
+      setValidityData('initialValue', initialValue);
+    }
+  });
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    const idValue = id();
+    if (idValue) {
+      setFormRef('fields', idValue, {
+        controlRef: controlRef(),
+        validityData: getCombinedFieldValidityData(validityData, invalid()),
+        validate() {
+          let nextValue = value();
+          if (nextValue === undefined) {
+            nextValue = params.getValue?.();
+          }
+          refs.markedDirtyRef = true;
+
+          // Synchronously update the validity state so the submit event can be prevented.
+          params.commitValidation?.(nextValue);
+        },
+        getValueRef: params.getValue,
+        name: name()
+      });
+    }
+  });
+  createEffect(() => {
+    const idValue = id();
+    onCleanup(() => {
+      if (idValue) {
+        setFormRef('fields', produce(fields => {
+          delete fields[idValue];
+        }));
+      }
+    });
+  });
+}

package/esm/field/utils/constants.d.ts

@@ -0,0 +1,17 @@
+import { type MaybeAccessor } from "../../solid-helpers.js";
+export declare const DEFAULT_VALIDITY_STATE: {
+  badInput: boolean;
+  customError: boolean;
+  patternMismatch: boolean;
+  rangeOverflow: boolean;
+  rangeUnderflow: boolean;
+  stepMismatch: boolean;
+  tooLong: boolean;
+  tooShort: boolean;
+  typeMismatch: boolean;
+  valid: null;
+  valueMissing: boolean;
+};
+export declare const fieldValidityMapping: {
+  valid(value: MaybeAccessor<boolean | null>): Record<string, string> | null;
+};

package/esm/field/utils/constants.js

@@ -0,0 +1,30 @@
+import { access } from "../../solid-helpers.js";
+import { FieldControlDataAttributes } from "../control/FieldControlDataAttributes.js";
+export const DEFAULT_VALIDITY_STATE = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: null,
+  valueMissing: false
+};
+export const fieldValidityMapping = {
+  valid(value) {
+    if (access(value) === null) {
+      return null;
+    }
+    if (access(value)) {
+      return {
+        [FieldControlDataAttributes.valid]: ''
+      };
+    }
+    return {
+      [FieldControlDataAttributes.invalid]: ''
+    };
+  }
+};

package/esm/field/utils/getCombinedFieldValidityData.d.ts

@@ -0,0 +1,24 @@
+import { FieldValidityData } from "../root/FieldRoot.js";
+/**
+ * Combines the field's client-side, stateful validity data with the external invalid state to
+ * determine the field's true validity.
+ */
+export declare function getCombinedFieldValidityData(validityData: FieldValidityData, invalid: boolean | undefined): {
+  state: {
+    valid: boolean | null;
+    badInput: boolean;
+    customError: boolean;
+    patternMismatch: boolean;
+    rangeOverflow: boolean;
+    rangeUnderflow: boolean;
+    stepMismatch: boolean;
+    tooLong: boolean;
+    tooShort: boolean;
+    typeMismatch: boolean;
+    valueMissing: boolean;
+  };
+  error: string;
+  errors: string[];
+  value: unknown;
+  initialValue: unknown;
+};

package/esm/field/utils/getCombinedFieldValidityData.js

@@ -0,0 +1,13 @@
+/**
+ * Combines the field's client-side, stateful validity data with the external invalid state to
+ * determine the field's true validity.
+ */
+export function getCombinedFieldValidityData(validityData, invalid) {
+  return {
+    ...validityData,
+    state: {
+      ...validityData.state,
+      valid: !invalid && validityData.state.valid
+    }
+  };
+}

package/esm/field/validity/FieldValidity.d.ts

@@ -0,0 +1,29 @@
+import { type JSX } from 'solid-js';
+import { FieldValidityData } from "../root/FieldRoot.js";
+/**
+ * Used to display a custom message based on the field’s validity.
+ * Requires `children` to be a function that accepts field validity state as an argument.
+ *
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
+ */
+export declare function FieldValidity(props: FieldValidity.Props): JSX.Element;
+export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
+  validity: FieldValidityData['state'];
+}
+export declare namespace FieldValidity {
+  interface State {}
+  interface Props {
+    /**
+     * A function that accepts the field validity state as an argument.
+     *
+     * ```jsx
+     * <Field.Validity>
+     *   {(validity) => {
+     *     return <div>...</div>
+     *   }}
+     * </Field.Validity>
+     * ```
+     */
+    children: (state: FieldValidityState) => JSX.Element;
+  }
+}

package/esm/field/validity/FieldValidity.js

@@ -0,0 +1,29 @@
+import { createMemo } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { useFieldRootContext } from "../root/FieldRootContext.js";
+import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityData.js";
+
+/**
+ * Used to display a custom message based on the field’s validity.
+ * Requires `children` to be a function that accepts field validity state as an argument.
+ *
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldValidity(props) {
+  const {
+    validityData,
+    invalid
+  } = useFieldRootContext(false);
+  const fieldValidityState = createMemo(() => {
+    const combinedFieldValidityData = getCombinedFieldValidityData(validityData, invalid());
+    return {
+      ...combinedFieldValidityData,
+      validity: combinedFieldValidityData.state
+    };
+  });
+  return /*#__PURE__*/_jsx(Dynamic, {
+    component: props.children,
+    ...fieldValidityState()
+  });
+}

package/esm/fieldset/index.d.ts

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

package/esm/fieldset/index.js

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

package/esm/fieldset/index.parts.d.ts

@@ -0,0 +1,2 @@
+export { FieldsetRoot as Root } from "./root/FieldsetRoot.js";
+export { FieldsetLegend as Legend } from "./legend/FieldsetLegend.js";

package/esm/fieldset/index.parts.js

@@ -0,0 +1,2 @@
+export { FieldsetRoot as Root } from "./root/FieldsetRoot.js";
+export { FieldsetLegend as Legend } from "./legend/FieldsetLegend.js";

package/esm/fieldset/legend/FieldsetLegend.d.ts

@@ -0,0 +1,17 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * An accessible label that is automatically associated with the fieldset.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
+ */
+export declare function FieldsetLegend(componentProps: FieldsetLegend.Props): import("solid-js").JSX.Element;
+export declare namespace FieldsetLegend {
+  interface State {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {}
+}

package/esm/fieldset/legend/FieldsetLegend.js

@@ -0,0 +1,48 @@
+import { onMount } from 'solid-js';
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldsetRootContext } from "../root/FieldsetRootContext.js";
+
+/**
+ * An accessible label that is automatically associated with the fieldset.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
+ */
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function FieldsetLegend(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['id']);
+  const {
+    disabled,
+    setCodependentRefs
+  } = useFieldsetRootContext();
+  const id = useBaseUiId(() => local.id);
+  let ref;
+  onMount(() => {
+    setCodependentRefs('legend', {
+      explicitId: id,
+      ref: () => ref,
+      id: () => local.id
+    });
+  });
+  const state = {
+    get disabled() {
+      return disabled() ?? false;
+    }
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: el => {
+      ref = el;
+    },
+    props: [{
+      get id() {
+        return id();
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: element()
+  });
+}

package/esm/fieldset/root/FieldsetRoot.d.ts

@@ -0,0 +1,17 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * Groups the fieldset legend and the associated fields.
+ * Renders a `<fieldset>` element.
+ *
+ * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
+ */
+export declare function FieldsetRoot(componentProps: FieldsetRoot.Props): import("solid-js").JSX.Element;
+export declare namespace FieldsetRoot {
+  type State = {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+  };
+  interface Props extends BaseUIComponentProps<'fieldset', State> {}
+}

package/esm/fieldset/root/FieldsetRoot.js

@@ -0,0 +1,50 @@
+import { createEffect, createSignal, on, onCleanup } from 'solid-js';
+import { createStore } from 'solid-js/store';
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { FieldsetRootContext } from "./FieldsetRootContext.js";
+
+/**
+ * Groups the fieldset legend and the associated fields.
+ * Renders a `<fieldset>` element.
+ *
+ * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FieldsetRoot(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['disabled']);
+  const disabled = () => local.disabled ?? false;
+  const [legendId, setLegendId] = createSignal();
+  const [codependentRefs, setCodependentRefs] = createStore({});
+  const state = {
+    get disabled() {
+      return disabled();
+    }
+  };
+  const contextValue = {
+    legendId,
+    codependentRefs,
+    setCodependentRefs,
+    disabled
+  };
+  createEffect(on(() => codependentRefs.legend, legend => {
+    if (legend) {
+      setLegendId(legend.id() ?? legend.explicitId());
+    }
+    onCleanup(() => {
+      setLegendId(undefined);
+    });
+  }));
+  const element = useRenderElement('fieldset', componentProps, {
+    state,
+    props: [{
+      get 'aria-labelledby'() {
+        return legendId();
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/_jsx(FieldsetRootContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/esm/fieldset/root/FieldsetRootContext.d.ts

@@ -0,0 +1,11 @@
+import { type Accessor } from 'solid-js';
+import type { SetStoreFunction, Store } from 'solid-js/store';
+import type { CodependentRefs } from "../../solid-helpers.js";
+export interface FieldsetRootContext {
+  legendId: Accessor<string | undefined>;
+  disabled: Accessor<boolean | undefined>;
+  codependentRefs: Store<CodependentRefs<['legend']>>;
+  setCodependentRefs: SetStoreFunction<CodependentRefs<['legend']>>;
+}
+export declare const FieldsetRootContext: import("solid-js").Context<FieldsetRootContext>;
+export declare function useFieldsetRootContext(): FieldsetRootContext;

package/esm/fieldset/root/FieldsetRootContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'solid-js';
+export const FieldsetRootContext = createContext({
+  legendId: () => undefined,
+  disabled: () => undefined,
+  codependentRefs: {},
+  setCodependentRefs: () => {}
+});
+export function useFieldsetRootContext() {
+  return useContext(FieldsetRootContext);
+}

package/esm/floating-ui-solid/components/FloatingDelayGroup.d.ts

@@ -0,0 +1,57 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { Delay, FloatingRootContext } from "../types.js";
+export interface FloatingDelayGroupProps {
+  children?: JSX.Element;
+  /**
+   * The delay to use for the group when it's not in the instant phase.
+   */
+  delay: Delay;
+  /**
+   * An optional explicit timeout to use for the group, which represents when
+   * grouping logic will no longer be active after the close delay completes.
+   * This is useful if you want grouping to “last” longer than the close delay,
+   * for example if there is no close delay at all.
+   */
+  timeoutMs?: number;
+}
+/**
+ * Experimental next version of `FloatingDelayGroup` to become the default
+ * in the future. This component is not yet stable.
+ * Provides context for a group of floating elements that should share a
+ * `delay`. Unlike `FloatingDelayGroup`, `useDelayGroup` with this
+ * component does not cause a re-render of unrelated consumers of the
+ * context when the delay changes.
+ * @see https://floating-ui.com/docs/FloatingDelayGroup
+ * @internal
+ */
+export declare function FloatingDelayGroup(props: FloatingDelayGroupProps): JSX.Element;
+interface UseDelayGroupOptions {
+  /**
+   * Whether delay grouping should be enabled.
+   * @default true
+   */
+  enabled?: MaybeAccessor<boolean>;
+}
+interface UseDelayGroupReturn {
+  /**
+   * The delay reference object.
+   */
+  delayRef: Accessor<Delay>;
+  /**
+   * Whether animations should be removed.
+   */
+  isInstantPhase: Accessor<boolean>;
+  /**
+   * Whether a `<FloatingDelayGroup>` provider is present.
+   */
+  hasProvider: Accessor<boolean>;
+}
+/**
+ * Enables grouping when called inside a component that's a child of a
+ * `FloatingDelayGroup`.
+ * @see https://floating-ui.com/docs/FloatingDelayGroup
+ * @internal
+ */
+export declare function useDelayGroup(context: FloatingRootContext, options?: UseDelayGroupOptions): UseDelayGroupReturn;
+export {};

package/esm/floating-ui-solid/components/FloatingDelayGroup.js

@@ -0,0 +1,128 @@
+import { createContext, createEffect, createSignal, onCleanup, useContext } from 'solid-js';
+import { useTimeout } from "../../utils/useTimeout.js";
+import { access } from "../../solid-helpers.js";
+import { getDelay } from "../hooks/useHover.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FloatingDelayGroupContext = createContext({
+  hasProvider: () => false,
+  setHasProvider: () => {},
+  timeoutMs: () => 0,
+  setTimeoutMs: () => {},
+  delayRef: () => 0,
+  setDelayRef: () => {},
+  currentIdRef: () => null,
+  setCurrentIdRef: () => {},
+  initialDelayRef: 0,
+  timeout: useTimeout(),
+  currentContextRef: null
+});
+/**
+ * Experimental next version of `FloatingDelayGroup` to become the default
+ * in the future. This component is not yet stable.
+ * Provides context for a group of floating elements that should share a
+ * `delay`. Unlike `FloatingDelayGroup`, `useDelayGroup` with this
+ * component does not cause a re-render of unrelated consumers of the
+ * context when the delay changes.
+ * @see https://floating-ui.com/docs/FloatingDelayGroup
+ * @internal
+ */
+export function FloatingDelayGroup(props) {
+  // eslint-disable-next-line solid/reactivity
+  const initialDelayRef = props.delay;
+  const [hasProvider, setHasProvider] = createSignal(true);
+  // eslint-disable-next-line solid/reactivity
+  const [timeoutMs, setTimeoutMs] = createSignal(props.timeoutMs ?? 0);
+  const [delayRef, setDelayRef] = createSignal(initialDelayRef);
+  const [currentIdRef, setCurrentIdRef] = createSignal(null);
+  const currentContextRef = null;
+  const timeout = useTimeout();
+  return /*#__PURE__*/_jsx(FloatingDelayGroupContext.Provider, {
+    value: {
+      hasProvider,
+      setHasProvider,
+      timeoutMs,
+      setTimeoutMs,
+      delayRef,
+      setDelayRef,
+      currentIdRef,
+      setCurrentIdRef,
+      initialDelayRef,
+      timeout,
+      currentContextRef
+    },
+    children: props.children
+  });
+}
+/**
+ * Enables grouping when called inside a component that's a child of a
+ * `FloatingDelayGroup`.
+ * @see https://floating-ui.com/docs/FloatingDelayGroup
+ * @internal
+ */
+export function useDelayGroup(context, options = {}) {
+  const enabled = () => access(options.enabled) ?? true;
+  const groupContext = useContext(FloatingDelayGroupContext);
+  const [isInstantPhase, setIsInstantPhase] = createSignal(false);
+  createEffect(() => {
+    function unset() {
+      setIsInstantPhase(false);
+      groupContext.currentContextRef?.setIsInstantPhase(false);
+      groupContext.setCurrentIdRef(null);
+      groupContext.currentContextRef = null;
+      groupContext.setDelayRef(groupContext.initialDelayRef);
+    }
+    if (!enabled()) {
+      return;
+    }
+    if (!groupContext.currentIdRef()) {
+      return;
+    }
+    if (!context.open() && groupContext.currentIdRef() === context.floatingId()) {
+      setIsInstantPhase(false);
+      if (groupContext.timeoutMs()) {
+        groupContext.timeout.start(groupContext.timeoutMs(), unset);
+        onCleanup(() => {
+          groupContext.timeout.clear();
+        });
+        return;
+      }
+      unset();
+    }
+  });
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    if (!context.open()) {
+      return;
+    }
+    const prevContext = groupContext.currentContextRef;
+    const prevId = groupContext.currentIdRef();
+    groupContext.currentContextRef = {
+      onOpenChange: context.onOpenChange,
+      setIsInstantPhase
+    };
+    groupContext.setCurrentIdRef(context.floatingId());
+    groupContext.setDelayRef({
+      open: 0,
+      close: getDelay(() => groupContext.initialDelayRef, 'close')
+    });
+    if (prevId !== null && prevId !== context.floatingId()) {
+      groupContext.timeout.clear();
+      setIsInstantPhase(true);
+      prevContext?.setIsInstantPhase(true);
+      prevContext?.onOpenChange(false);
+    } else {
+      setIsInstantPhase(false);
+      prevContext?.setIsInstantPhase(false);
+    }
+  });
+  onCleanup(() => {
+    groupContext.currentContextRef = null;
+  });
+  return {
+    hasProvider: groupContext.hasProvider,
+    delayRef: groupContext.delayRef,
+    isInstantPhase
+  };
+}