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

package/esm/checkbox/indicator/CheckboxIndicatorDataAttributes.d.ts

@@ -0,0 +1,54 @@
+export declare enum CheckboxIndicatorDataAttributes {
+  /**
+   * Present when the checkbox is checked.
+   */
+  checked = "data-checked",
+  /**
+   * Present when the checkbox is not checked.
+   */
+  unchecked = "data-unchecked",
+  /**
+   * Present when the checkbox is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the checkbox is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Present when the checkbox is required.
+   */
+  required = "data-required",
+  /**
+   * Present when the checkbox indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the checkbox indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the checkbox has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the checkbox's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the checkbox is checked (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the checkbox is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+}

package/esm/checkbox/indicator/CheckboxIndicatorDataAttributes.js

@@ -0,0 +1,56 @@
+import { TransitionStatusDataAttributes } from "../../utils/styleHookMapping.js";
+export let CheckboxIndicatorDataAttributes = function (CheckboxIndicatorDataAttributes) {
+  /**
+   * Present when the checkbox is checked.
+   */
+  CheckboxIndicatorDataAttributes["checked"] = "data-checked";
+  /**
+   * Present when the checkbox is not checked.
+   */
+  CheckboxIndicatorDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the checkbox is disabled.
+   */
+  CheckboxIndicatorDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the checkbox is readonly.
+   */
+  CheckboxIndicatorDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Present when the checkbox is required.
+   */
+  CheckboxIndicatorDataAttributes["required"] = "data-required";
+  /**
+   * Present when the checkbox indicator is animating in.
+   */
+  CheckboxIndicatorDataAttributes[CheckboxIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the checkbox indicator is animating out.
+   */
+  CheckboxIndicatorDataAttributes[CheckboxIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   */
+  CheckboxIndicatorDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   */
+  CheckboxIndicatorDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the checkbox has been touched (when wrapped in Field.Root).
+   */
+  CheckboxIndicatorDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the checkbox's value has changed (when wrapped in Field.Root).
+   */
+  CheckboxIndicatorDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the checkbox is checked (when wrapped in Field.Root).
+   */
+  CheckboxIndicatorDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the checkbox is focused (when wrapped in Field.Root).
+   */
+  CheckboxIndicatorDataAttributes["focused"] = "data-focused";
+  return CheckboxIndicatorDataAttributes;
+}({});

package/esm/checkbox/root/CheckboxRoot.d.ts

@@ -0,0 +1,90 @@
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { BaseUIComponentProps } from "../../utils/types.js";
+export declare const PARENT_CHECKBOX = "data-parent";
+/**
+ * Represents the checkbox itself.
+ * Renders a `<button>` element and a hidden `<input>` beside.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+export declare function CheckboxRoot(componentProps: CheckboxRoot.Props): import("solid-js").JSX.Element;
+export declare namespace CheckboxRoot {
+  interface State extends FieldRoot.State {
+    /**
+     * Whether the checkbox is currently ticked.
+     */
+    checked: boolean;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the user must tick the checkbox before submitting a form.
+     */
+    required: boolean;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+     */
+    indeterminate: boolean;
+  }
+  interface Props extends Omit<BaseUIComponentProps<'button', State>, 'onChange'> {
+    /**
+     * Whether the checkbox is currently ticked.
+     *
+     * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
+     * @default undefined
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is initially ticked.
+     *
+     * To render a controlled checkbox, use the `checked` prop instead.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Event handler called when the checkbox is ticked or unticked.
+     *
+     * @param {boolean} checked The new checked state.
+     * @param {Event} event The corresponding event that initiated the change.
+     */
+    onCheckedChange?: (checked: boolean, event: Event) => void;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the user must tick the checkbox before submitting a form.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * A ref to access the hidden `<input>` element.
+     */
+    inputRef?: HTMLInputElement | null | undefined;
+    /**
+     * Whether the checkbox controls a group of child checkboxes.
+     *
+     * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
+     * @default false
+     */
+    parent?: boolean;
+    /**
+     * 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 true
+     */
+    nativeButton?: boolean;
+  }
+}

package/esm/checkbox/root/CheckboxRoot.js

@@ -0,0 +1,288 @@
+import { batch, createEffect, createMemo, createSignal, onMount, mergeProps as solidMergeProps, splitProps } from 'solid-js';
+import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
+import { useFieldControlValidation } from "../../field/control/useFieldControlValidation.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useField } from "../../field/useField.js";
+import { useFormContext } from "../../form/FormContext.js";
+import { mergeProps } from "../../merge-props/index.js";
+import { splitComponentProps } from "../../solid-helpers.js";
+import { useButton } from "../../use-button/useButton.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useControlled } from "../../utils/useControlled.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { visuallyHidden } from "../../utils/visuallyHidden.js";
+import { useCustomStyleHookMapping } from "../utils/useCustomStyleHookMapping.js";
+import { CheckboxRootContext } from "./CheckboxRootContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PARENT_CHECKBOX = 'data-parent';
+
+/**
+ * Represents the checkbox itself.
+ * Renders a `<button>` element and a hidden `<input>` beside.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+export function CheckboxRoot(componentProps) {
+  const [, local, elementProps] = splitComponentProps(componentProps, ['checked', 'defaultChecked', 'disabled', 'id', 'indeterminate', 'inputRef', 'name', 'onCheckedChange', 'parent', 'readOnly', 'render', 'required', 'value', 'nativeButton']);
+  const checkedProp = () => local.checked;
+  const defaultChecked = () => local.defaultChecked ?? false;
+  const disabledProp = () => local.disabled ?? false;
+  const indeterminate = () => local.indeterminate ?? false;
+  const parent = () => local.parent ?? false;
+  const readOnly = () => local.readOnly ?? false;
+  const required = () => local.required ?? false;
+  const nativeButton = () => local.nativeButton ?? true;
+  const {
+    clearErrors
+  } = useFormContext();
+  const {
+    disabled: fieldDisabled,
+    labelId,
+    name: fieldName,
+    setDirty,
+    setFilled,
+    setFocused,
+    setTouched,
+    state: fieldState,
+    validationMode,
+    validityData,
+    setCodependentRefs: setChildRefs
+  } = useFieldRootContext();
+  const groupContext = useCheckboxGroupContext();
+  const parentContext = () => groupContext?.parent;
+  const isGrouped = createMemo(() => parentContext() && groupContext?.allValues());
+  const disabled = () => fieldDisabled() || groupContext?.disabled() || disabledProp();
+  const name = () => fieldName() ?? local.name;
+  const value = () => local.value ?? name();
+  const groupProps = createMemo(() => {
+    let mainProps = {};
+    if (isGrouped()) {
+      if (parent()) {
+        mainProps = groupContext.parent.getParentProps();
+      }
+      if (value()) {
+        mainProps = groupContext.parent.getChildProps(value());
+      }
+    }
+    const [localGroup, otherGorup] = splitProps(mainProps, ['checked', 'indeterminate', 'onCheckedChange']);
+    return {
+      other: otherGorup,
+      local: {
+        get checked() {
+          return localGroup.checked ?? checkedProp();
+        },
+        get indeterminate() {
+          return localGroup.indeterminate ?? indeterminate();
+        },
+        // eslint-disable-next-line solid/reactivity
+        onCheckedChange: localGroup.onCheckedChange
+      }
+    };
+  });
+  const groupValue = () => groupContext?.value();
+  const setGroupValue = groupContext?.setValue;
+  const defaultGroupValue = () => groupContext?.defaultValue();
+  const [controlRef, setControlRef] = createSignal(null);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const localFieldControlValidation = useFieldControlValidation();
+  const fieldControlValidation = () => groupContext?.fieldControlValidation ?? localFieldControlValidation;
+  const [checked, setCheckedState] = useControlled({
+    controlled: () => {
+      return value() && groupValue() && !parent() ? groupValue().includes(value()) : groupProps().local.checked;
+    },
+    default: () => value() && defaultGroupValue() && !parent() ? defaultGroupValue().includes(value()) : defaultChecked(),
+    name: 'Checkbox',
+    state: 'checked'
+  });
+  const id = useBaseUiId(() => local.id);
+  onMount(() => {
+    setChildRefs('control', {
+      explicitId: id,
+      ref: controlRef,
+      id: () => local.id
+    });
+  });
+  useField({
+    enabled: () => !groupContext,
+    id,
+    commitValidation: (...args) => fieldControlValidation().commitValidation(...args),
+    value: checked,
+    controlRef,
+    name,
+    getValue: () => checked()
+  });
+  let inputRef = null;
+  createEffect(() => {
+    if (inputRef) {
+      inputRef.indeterminate = groupProps().local.indeterminate;
+      if (checked()) {
+        setFilled(true);
+      }
+    }
+  });
+  const onFocus = () => setFocused(true);
+  const onBlur = () => {
+    if (!inputRef) {
+      return;
+    }
+    setTouched(true);
+    setFocused(false);
+    if (validationMode() === 'onBlur') {
+      fieldControlValidation().commitValidation(groupContext ? groupValue() : inputRef.checked);
+    }
+  };
+  const onClick = event => {
+    if (event.defaultPrevented || readOnly()) {
+      return;
+    }
+    event.preventDefault();
+    inputRef?.click();
+  };
+  const inputProps = createMemo(() => {
+    return mergeProps({
+      get checked() {
+        return checked();
+      },
+      get disabled() {
+        return disabled();
+      },
+      // parent checkboxes unset `name` to be excluded from form submission
+      get name() {
+        return parent() ? undefined : name();
+      },
+      // Set `id` to stop Chrome warning about an unassociated input
+      get id() {
+        return `${id()}-input`;
+      },
+      get required() {
+        return required();
+      },
+      ref: el => {
+        inputRef = el;
+        fieldControlValidation().refs.inputRef = el;
+      },
+      style: visuallyHidden,
+      tabIndex: -1,
+      type: 'checkbox',
+      'aria-hidden': true,
+      onChange(event) {
+        const groupContextValue = groupContext?.value();
+        // Workaround for https://github.com/facebook/react/issues/9023
+        if (event.defaultPrevented) {
+          return;
+        }
+        batch(() => {
+          const nextChecked = event.target.checked;
+          setDirty(nextChecked !== validityData.initialValue);
+          setCheckedState(nextChecked);
+          groupProps().local.onCheckedChange?.(nextChecked, event);
+          local.onCheckedChange?.(nextChecked, event);
+          clearErrors(name());
+          if (!groupContext) {
+            setFilled(nextChecked);
+            if (validationMode() === 'onChange') {
+              fieldControlValidation().commitValidation(nextChecked);
+            } else {
+              fieldControlValidation().commitValidation(nextChecked, true);
+            }
+          }
+          if (value() && groupContextValue && setGroupValue && !parent()) {
+            const nextGroupValue = nextChecked ? [...groupContextValue, value()] : groupContextValue.filter(item => item !== value());
+            setGroupValue(nextGroupValue, event);
+            setFilled(nextGroupValue.length > 0);
+            if (validationMode() === 'onChange') {
+              fieldControlValidation().commitValidation(nextGroupValue);
+            } else {
+              fieldControlValidation().commitValidation(nextGroupValue, true);
+            }
+          }
+        });
+      },
+      onFocus() {
+        controlRef()?.focus();
+      },
+      // React <19 sets an empty value if `undefined` is passed explicitly
+      // To avoid this, we only set the value if it's defined
+      get value() {
+        return local.value !== undefined ? (groupContext ? checked() && local.value : local.value) || '' : undefined;
+      }
+    }, groupContext ? fieldControlValidation().getValidationProps : fieldControlValidation().getInputValidationProps);
+  });
+  const computedChecked = () => isGrouped() ? Boolean(groupProps().local.checked) : checked();
+  const computedIndeterminate = () => isGrouped() ? groupProps().local.indeterminate || indeterminate() : indeterminate();
+  createEffect(() => {
+    if (parentContext() && value()) {
+      parentContext()?.disabledStatesRef.set(value(), disabled());
+    }
+  });
+  const state = solidMergeProps(fieldState, {
+    get disabled() {
+      return disabled();
+    },
+    get checked() {
+      return computedChecked();
+    },
+    get readOnly() {
+      return readOnly();
+    },
+    get required() {
+      return required();
+    },
+    get indeterminate() {
+      return computedIndeterminate();
+    }
+  });
+  const customStyleHookMapping = useCustomStyleHookMapping(state);
+  const element = useRenderElement('button', componentProps, {
+    state,
+    ref: el => {
+      buttonRef(el);
+      setControlRef(el);
+      groupContext?.registerControlRef(el);
+    },
+    customStyleHookMapping,
+    props: [{
+      get id() {
+        return id();
+      },
+      role: 'checkbox',
+      get disabled() {
+        return disabled();
+      },
+      get 'aria-checked'() {
+        return groupProps().local.indeterminate ? 'mixed' : checked();
+      },
+      get 'aria-readonly'() {
+        return readOnly() || undefined;
+      },
+      get 'aria-required'() {
+        return required() || undefined;
+      },
+      get 'aria-labelledby'() {
+        return labelId();
+      },
+      get [PARENT_CHECKBOX]() {
+        return parent() ? '' : undefined;
+      },
+      onFocus,
+      onBlur,
+      onClick
+    }, props => fieldControlValidation().getValidationProps(props), elementProps, props => mergeProps(props, groupProps().other), getButtonProps]
+  });
+  return /*#__PURE__*/_jsxs(CheckboxRootContext.Provider, {
+    value: state,
+    children: [element(), !checked() && !groupContext && local.name && !parent() && /*#__PURE__*/_jsx("input", {
+      type: "hidden",
+      name: local.name,
+      value: "off"
+    }), /*#__PURE__*/_jsx("input", {
+      ...inputProps()
+    })]
+  });
+}

package/esm/checkbox/root/CheckboxRootContext.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxRoot } from "./CheckboxRoot.js";
+export type CheckboxRootContext = CheckboxRoot.State;
+export declare const CheckboxRootContext: import("solid-js").Context<CheckboxRoot.State | undefined>;
+export declare function useCheckboxRootContext(): CheckboxRoot.State;

package/esm/checkbox/root/CheckboxRootContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'solid-js';
+export const CheckboxRootContext = createContext();
+export function useCheckboxRootContext() {
+  const context = useContext(CheckboxRootContext);
+  if (context === undefined) {
+    throw new Error('Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.');
+  }
+  return context;
+}

package/esm/checkbox/root/CheckboxRootDataAttributes.d.ts

@@ -0,0 +1,46 @@
+export declare enum CheckboxRootDataAttributes {
+  /**
+   * Present when the checkbox is checked.
+   */
+  checked = "data-checked",
+  /**
+   * Present when the checkbox is not checked.
+   */
+  unchecked = "data-unchecked",
+  /**
+   * Present when the checkbox is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the checkbox is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Present when the checkbox is required.
+   */
+  required = "data-required",
+  /**
+   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the checkbox has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the checkbox's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the checkbox is checked (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the checkbox is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+}

package/esm/checkbox/root/CheckboxRootDataAttributes.js

@@ -0,0 +1,47 @@
+export let CheckboxRootDataAttributes = /*#__PURE__*/function (CheckboxRootDataAttributes) {
+  /**
+   * Present when the checkbox is checked.
+   */
+  CheckboxRootDataAttributes["checked"] = "data-checked";
+  /**
+   * Present when the checkbox is not checked.
+   */
+  CheckboxRootDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the checkbox is disabled.
+   */
+  CheckboxRootDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the checkbox is readonly.
+   */
+  CheckboxRootDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Present when the checkbox is required.
+   */
+  CheckboxRootDataAttributes["required"] = "data-required";
+  /**
+   * Present when the checkbox is in valid state (when wrapped in Field.Root).
+   */
+  CheckboxRootDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the checkbox is in invalid state (when wrapped in Field.Root).
+   */
+  CheckboxRootDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the checkbox has been touched (when wrapped in Field.Root).
+   */
+  CheckboxRootDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the checkbox's value has changed (when wrapped in Field.Root).
+   */
+  CheckboxRootDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the checkbox is checked (when wrapped in Field.Root).
+   */
+  CheckboxRootDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the checkbox is focused (when wrapped in Field.Root).
+   */
+  CheckboxRootDataAttributes["focused"] = "data-focused";
+  return CheckboxRootDataAttributes;
+}({});

package/esm/checkbox/utils/useCustomStyleHookMapping.d.ts

@@ -0,0 +1,3 @@
+import type { CustomStyleHookMapping } from "../../utils/getStyleHookProps.js";
+import type { CheckboxRoot } from "../root/CheckboxRoot.js";
+export declare function useCustomStyleHookMapping(state: CheckboxRoot.State): CustomStyleHookMapping<CheckboxRoot.State>;

package/esm/checkbox/utils/useCustomStyleHookMapping.js

@@ -0,0 +1,19 @@
+import { CheckboxRootDataAttributes } from "../root/CheckboxRootDataAttributes.js";
+export function useCustomStyleHookMapping(state) {
+  return {
+    checked(value) {
+      if (state.indeterminate) {
+        // `data-indeterminate` is already handled by the `indeterminate` prop.
+        return {};
+      }
+      if (value) {
+        return {
+          [CheckboxRootDataAttributes.checked]: ''
+        };
+      }
+      return {
+        [CheckboxRootDataAttributes.unchecked]: ''
+      };
+    }
+  };
+}

package/esm/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,44 @@
+import type { FieldRoot } from "../field/root/FieldRoot.js";
+import type { BaseUIComponentProps } from "../utils/types.js";
+/**
+ * Provides a shared state to a series of checkboxes.
+ *
+ * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
+ */
+export declare function CheckboxGroup(componentProps: CheckboxGroup.Props): import("solid-js").JSX.Element;
+export declare namespace CheckboxGroup {
+  interface State extends FieldRoot.State {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * Names of the checkboxes in the group that should be ticked.
+     *
+     * To render an uncontrolled checkbox group, use the `defaultValue` prop instead.
+     */
+    value?: string[];
+    /**
+     * Names of the checkboxes in the group that should be initially ticked.
+     *
+     * To render a controlled checkbox group, use the `value` prop instead.
+     */
+    defaultValue?: string[];
+    /**
+     * Event handler called when a checkbox in the group is ticked or unticked.
+     * Provides the new value as an argument.
+     */
+    onValueChange?: (value: string[], event: Event) => void;
+    /**
+     * Names of all checkboxes in the group. Use this when creating a parent checkbox.
+     */
+    allValues?: string[];
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+  }
+}