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

package/cjs/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;
+  }
+}

package/cjs/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = CheckboxGroup;
+var _solidJs = require("solid-js");
+var _CheckboxRoot = require("../checkbox/root/CheckboxRoot");
+var _useFieldControlValidation = require("../field/control/useFieldControlValidation");
+var _FieldRootContext = require("../field/root/FieldRootContext");
+var _useField = require("../field/useField");
+var _constants = require("../field/utils/constants");
+var _solidHelpers = require("../solid-helpers");
+var _useBaseUiId = require("../utils/useBaseUiId");
+var _useControlled = require("../utils/useControlled");
+var _useRenderElement = require("../utils/useRenderElement");
+var _CheckboxGroupContext = require("./CheckboxGroupContext");
+var _useCheckboxGroupParent = require("./useCheckboxGroupParent");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Provides a shared state to a series of checkboxes.
+ *
+ * Documentation: [Base UI Checkbox Group](https://base-ui.com/react/components/checkbox-group)
+ */
+function CheckboxGroup(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['allValues', 'defaultValue', 'disabled', 'id', 'onValueChange', 'render', 'value']);
+  const {
+    disabled: fieldDisabled,
+    labelId,
+    name: fieldName,
+    state: fieldState
+  } = (0, _FieldRootContext.useFieldRootContext)();
+  const disabled = () => fieldDisabled() || (local.disabled ?? false);
+  const fieldControlValidation = (0, _useFieldControlValidation.useFieldControlValidation)();
+  const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
+    controlled: () => local.value,
+    default: () => local.defaultValue,
+    name: 'CheckboxGroup',
+    state: 'value'
+  });
+  const setValue = (v, event) => {
+    (0, _solidJs.batch)(() => {
+      setValueUnwrapped(v);
+      local.onValueChange?.(v, event);
+    });
+  };
+  const parent = (0, _useCheckboxGroupParent.useCheckboxGroupParent)({
+    allValues: () => local.allValues,
+    value: () => local.value,
+    onValueChange: (...args) => {
+      local.onValueChange?.(...args);
+    }
+  });
+  const id = (0, _useBaseUiId.useBaseUiId)(() => local.id);
+  let controlRef = null;
+  const registerControlRef = element => {
+    if (controlRef == null && element != null && !element.hasAttribute(_CheckboxRoot.PARENT_CHECKBOX)) {
+      controlRef = element;
+    }
+  };
+  (0, _useField.useField)({
+    enabled: () => !!fieldName(),
+    id,
+    commitValidation: fieldControlValidation.commitValidation,
+    value,
+    controlRef: () => controlRef,
+    name: fieldName,
+    getValue: value
+  });
+  const contextValue = {
+    allValues: () => local.allValues,
+    value,
+    defaultValue: () => local.defaultValue,
+    setValue,
+    parent,
+    disabled,
+    fieldControlValidation,
+    registerControlRef
+  };
+  const state = (0, _solidJs.mergeProps)(fieldState, {
+    get disabled() {
+      return disabled();
+    }
+  });
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    customStyleHookMapping: _constants.fieldValidityMapping,
+    props: [{
+      get role() {
+        return 'group';
+      },
+      get 'aria-labelledby'() {
+        return labelId();
+      }
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxGroupContext.CheckboxGroupContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/cjs/checkbox-group/CheckboxGroupContext.d.ts

@@ -0,0 +1,16 @@
+import { type Accessor } from 'solid-js';
+import { useFieldControlValidation } from "../field/control/useFieldControlValidation.js";
+import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
+export interface CheckboxGroupContext {
+  value: Accessor<string[] | undefined>;
+  defaultValue: Accessor<string[] | undefined>;
+  setValue: (value: string[], event: Event) => void;
+  allValues: Accessor<string[] | undefined>;
+  parent: useCheckboxGroupParent.ReturnValue;
+  disabled: Accessor<boolean>;
+  fieldControlValidation: useFieldControlValidation.ReturnValue;
+  registerControlRef: (element: HTMLButtonElement | null | undefined) => void;
+}
+export declare const CheckboxGroupContext: import("solid-js").Context<CheckboxGroupContext | undefined>;
+export declare function useCheckboxGroupContext(optional: false): CheckboxGroupContext;
+export declare function useCheckboxGroupContext(optional?: true): CheckboxGroupContext | undefined;

package/cjs/checkbox-group/CheckboxGroupContext.js

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

package/cjs/checkbox-group/CheckboxGroupDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum CheckboxGroupDataAttributes {
+  /**
+   * Present when the checkbox group is disabled.
+   */
+  disabled = "data-disabled",
+}

package/cjs/checkbox-group/CheckboxGroupDataAttributes.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroupDataAttributes = void 0;
+let CheckboxGroupDataAttributes = exports.CheckboxGroupDataAttributes = /*#__PURE__*/function (CheckboxGroupDataAttributes) {
+  /**
+   * Present when the checkbox group is disabled.
+   */
+  CheckboxGroupDataAttributes["disabled"] = "data-disabled";
+  return CheckboxGroupDataAttributes;
+}({});

package/cjs/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";

package/cjs/checkbox-group/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxGroup.CheckboxGroup;
+  }
+});
+var _CheckboxGroup = require("./CheckboxGroup");

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

@@ -0,0 +1 @@
+export { CheckboxGroup } from "./CheckboxGroup.js";

package/cjs/checkbox-group/index.parts.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxGroup.CheckboxGroup;
+  }
+});
+var _CheckboxGroup = require("./CheckboxGroup");

package/cjs/checkbox-group/useCheckboxGroupParent.d.ts

@@ -0,0 +1,27 @@
+import { type Accessor } from 'solid-js';
+export declare function useCheckboxGroupParent(params: useCheckboxGroupParent.Parameters): useCheckboxGroupParent.ReturnValue;
+export declare namespace useCheckboxGroupParent {
+  interface Parameters {
+    allValues?: Accessor<string[] | undefined>;
+    value?: Accessor<string[] | undefined>;
+    onValueChange?: (value: string[], event: Event) => void;
+  }
+  interface ReturnValue {
+    id: Accessor<string | undefined>;
+    indeterminate: Accessor<boolean>;
+    disabledStatesRef: Map<string, boolean>;
+    getParentProps: () => {
+      id: string | undefined;
+      indeterminate: boolean;
+      checked: boolean;
+      'aria-controls': string;
+      onCheckedChange: (checked: boolean, event: Event) => void;
+    };
+    getChildProps: (name: string) => {
+      name: string;
+      id: string;
+      checked: boolean;
+      onCheckedChange: (checked: boolean, event: Event) => void;
+    };
+  }
+}

package/cjs/checkbox-group/useCheckboxGroupParent.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCheckboxGroupParent = useCheckboxGroupParent;
+var _solidJs = require("solid-js");
+var _useBaseUiId = require("../utils/useBaseUiId");
+const EMPTY = [];
+function useCheckboxGroupParent(params) {
+  const allValues = () => params.allValues?.() ?? EMPTY;
+  const value = () => params.value?.() ?? EMPTY;
+  let uncontrolledStateRef = value();
+  const disabledStatesRef = new Map();
+  const [status, setStatus] = (0, _solidJs.createSignal)('mixed');
+  const id = (0, _useBaseUiId.useBaseUiId)();
+  const checked = () => value().length === allValues().length;
+  const indeterminate = () => value().length !== allValues().length && value().length > 0;
+  const getParentProps = () => ({
+    get id() {
+      return id();
+    },
+    get indeterminate() {
+      return indeterminate();
+    },
+    get checked() {
+      return checked();
+    },
+    get 'aria-controls'() {
+      return allValues().map(v => `${id()}-${v}`).join(' ');
+    },
+    onCheckedChange(_, event) {
+      (0, _solidJs.batch)(() => {
+        const uncontrolledState = uncontrolledStateRef;
+
+        // None except the disabled ones that are checked, which can't be changed.
+        const none = allValues().filter(v => disabledStatesRef.get(v) && uncontrolledState.includes(v));
+        // "All" that are valid:
+        // - any that aren't disabled
+        // - disabled ones that are checked
+        const all = allValues().filter(v => !disabledStatesRef.get(v) || disabledStatesRef.get(v) && uncontrolledState.includes(v));
+        const allOnOrOff = uncontrolledState.length === all.length || uncontrolledState.length === 0;
+        if (allOnOrOff) {
+          if (value().length === all.length) {
+            params.onValueChange?.(none, event);
+          } else {
+            params.onValueChange?.(all, event);
+          }
+          return;
+        }
+        if (status() === 'mixed') {
+          params.onValueChange?.(all, event);
+          setStatus('on');
+        } else if (status() === 'on') {
+          params.onValueChange?.(none, event);
+          setStatus('off');
+        } else if (status() === 'off') {
+          params.onValueChange?.(uncontrolledState, event);
+          setStatus('mixed');
+        }
+      });
+    }
+  });
+  const getChildProps = name => ({
+    get name() {
+      return name;
+    },
+    get id() {
+      return `${id()}-${name}`;
+    },
+    get checked() {
+      return value().includes(name);
+    },
+    onCheckedChange(nextChecked, event) {
+      (0, _solidJs.batch)(() => {
+        const newValue = value().slice();
+        if (nextChecked) {
+          newValue.push(name);
+        } else {
+          newValue.splice(newValue.indexOf(name), 1);
+        }
+        uncontrolledStateRef = newValue;
+        params.onValueChange?.(newValue, event);
+        setStatus('mixed');
+      });
+    }
+  });
+  return {
+    id,
+    indeterminate,
+    getParentProps,
+    getChildProps,
+    disabledStatesRef
+  };
+}

package/cjs/collapsible/index.d.ts

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

package/cjs/collapsible/index.js

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

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

@@ -0,0 +1,3 @@
+export { CollapsibleRoot as Root } from "./root/CollapsibleRoot.js";
+export { CollapsibleTrigger as Trigger } from "./trigger/CollapsibleTrigger.js";
+export { CollapsiblePanel as Panel } from "./panel/CollapsiblePanel.js";

package/cjs/collapsible/index.parts.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function () {
+    return _CollapsiblePanel.CollapsiblePanel;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _CollapsibleRoot.CollapsibleRoot;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function () {
+    return _CollapsibleTrigger.CollapsibleTrigger;
+  }
+});
+var _CollapsibleRoot = require("./root/CollapsibleRoot");
+var _CollapsibleTrigger = require("./trigger/CollapsibleTrigger");
+var _CollapsiblePanel = require("./panel/CollapsiblePanel");

package/cjs/collapsible/panel/CollapsiblePanel.d.ts

@@ -0,0 +1,29 @@
+import { BaseUIComponentProps } from "../../utils/types.js";
+import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+/**
+ * A panel with the collapsible contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+export declare function CollapsiblePanel(componentProps: CollapsiblePanel.Props): import("solid-js").JSX.Element;
+export declare namespace CollapsiblePanel {
+  interface State extends CollapsibleRoot.State {}
+  interface Props extends BaseUIComponentProps<'div', CollapsibleRoot.State> {
+    /**
+     * Allows the browser’s built-in page search to find and expand the panel contents.
+     *
+     * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+     * to hide the element without removing it from the DOM.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Whether to keep the element in the DOM while the panel is hidden.
+     * This prop is ignored when `hiddenUntilFound` is used.
+     * @default false
+     */
+    keepMounted?: boolean;
+  }
+}

package/cjs/collapsible/panel/CollapsiblePanel.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsiblePanel = CollapsiblePanel;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _warn = require("../../utils/warn");
+var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
+var _styleHooks = require("../root/styleHooks");
+var _CollapsiblePanelCssVars = require("./CollapsiblePanelCssVars");
+var _useCollapsiblePanel = require("./useCollapsiblePanel");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A panel with the collapsible contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
+ */
+function CollapsiblePanel(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['hiddenUntilFound', 'keepMounted', 'id']);
+  const hiddenUntilFound = () => local.hiddenUntilFound ?? false;
+  const keepMounted = () => local.keepMounted ?? false;
+  if (process.env.NODE_ENV !== 'production') {
+    (0, _solidJs.createEffect)(() => {
+      if (hiddenUntilFound() && keepMounted() === false) {
+        (0, _warn.warn)('The `keepMounted={false}` prop on a Collapsible will be ignored when using `hiddenUntilFound` since it requires the Panel to remain mounted even when closed.');
+      }
+    });
+  }
+  const {
+    animationType,
+    setAnimationType,
+    height,
+    setHiddenUntilFound,
+    setKeepMounted,
+    panelId,
+    mounted,
+    onOpenChange,
+    open,
+    refs,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimension,
+    setTransitionDimension,
+    visible,
+    width,
+    state
+  } = (0, _CollapsibleRootContext.useCollapsibleRootContext)();
+  (0, _solidJs.createEffect)(() => {
+    setHiddenUntilFound(hiddenUntilFound());
+  });
+  (0, _solidJs.createEffect)(() => {
+    setKeepMounted(keepMounted());
+  });
+  const panel = (0, _useCollapsiblePanel.useCollapsiblePanel)({
+    animationType,
+    setAnimationType,
+    height,
+    hiddenUntilFound,
+    id: () => local.id ?? panelId(),
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    refs,
+    runOnceAnimationsFinish,
+    setDimensions,
+    setMounted,
+    setOpen,
+    setVisible,
+    transitionDimension,
+    setTransitionDimension,
+    visible,
+    width
+  });
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open,
+    ref: () => refs.panelRef,
+    onComplete() {
+      if (!open()) {
+        return;
+      }
+      setDimensions({
+        height: undefined,
+        width: undefined
+      });
+    }
+  });
+  const shouldRender = (0, _solidJs.createMemo)(() => keepMounted() || hiddenUntilFound() || !keepMounted() && mounted());
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: el => {
+      refs.panelRef = el;
+      panel.ref(el);
+    },
+    props: [panel.props, {
+      get style() {
+        return {
+          [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelHeight]: height() === undefined ? 'auto' : `${height()}px`,
+          [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelWidth]: width() === undefined ? 'auto' : `${width()}px`
+        };
+      }
+    }, elementProps],
+    customStyleHookMapping: _styleHooks.collapsibleStyleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_solidJs.Show, {
+    when: shouldRender(),
+    children: element()
+  });
+}

package/cjs/collapsible/panel/CollapsiblePanelCssVars.d.ts

@@ -0,0 +1,12 @@
+export declare enum CollapsiblePanelCssVars {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  collapsiblePanelHeight = "--collapsible-panel-height",
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  collapsiblePanelWidth = "--collapsible-panel-width",
+}

package/cjs/collapsible/panel/CollapsiblePanelCssVars.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsiblePanelCssVars = void 0;
+let CollapsiblePanelCssVars = exports.CollapsiblePanelCssVars = /*#__PURE__*/function (CollapsiblePanelCssVars) {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
+  return CollapsiblePanelCssVars;
+}({});

package/cjs/collapsible/panel/CollapsiblePanelDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum CollapsiblePanelDataAttributes {
+  /**
+   * Present when the collapsible panel is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the collapsible panel is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/cjs/collapsible/panel/CollapsiblePanelDataAttributes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsiblePanelDataAttributes = void 0;
+var _styleHookMapping = require("../../utils/styleHookMapping");
+let CollapsiblePanelDataAttributes = exports.CollapsiblePanelDataAttributes = function (CollapsiblePanelDataAttributes) {
+  /**
+   * Present when the collapsible panel is open.
+   */
+  CollapsiblePanelDataAttributes["open"] = "data-open";
+  /**
+   * Present when the collapsible panel is closed.
+   */
+  CollapsiblePanelDataAttributes["closed"] = "data-closed";
+  /**
+   * Present when the panel is animating in.
+   */
+  CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["startingStyle"] = _styleHookMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the panel is animating out.
+   */
+  CollapsiblePanelDataAttributes[CollapsiblePanelDataAttributes["endingStyle"] = _styleHookMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CollapsiblePanelDataAttributes;
+}({});