@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/direction-provider.cjs

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var direction_provider_exports = {};
+__export(direction_provider_exports, {
+  DirectionProvider: () => DirectionProvider,
+  useDirection: () => import_DirectionContext.useDirection
+});
+module.exports = __toCommonJS(direction_provider_exports);
+var import_octane = require("octane");
+var import_DirectionContext = require("./utils/DirectionContext.cjs");
+function DirectionProvider(props) {
+  const { direction = "ltr" } = props;
+  return (0, import_octane.createElement)(import_DirectionContext.DirectionContext.Provider, { value: direction, children: props.children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DirectionProvider,
+  useDirection
+});

package/dist/cjs/field.cjs

@@ -0,0 +1,559 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var field_exports = {};
+__export(field_exports, {
+  Field: () => Field,
+  useFieldRootContext: () => import_FieldRootContext2.useFieldRootContext
+});
+module.exports = __toCommonJS(field_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_constants = require("./utils/field/constants.cjs");
+var import_FieldRootContext = require("./utils/field/FieldRootContext.cjs");
+var import_FieldItemContext = require("./utils/field/FieldItemContext.cjs");
+var import_FieldRootContext2 = require("./utils/field/FieldRootContext.cjs");
+var import_FieldItemContext2 = require("./utils/field/FieldItemContext.cjs");
+var import_FormContext = require("./utils/field/FormContext.cjs");
+var import_LabelableContext = require("./utils/field/LabelableContext.cjs");
+var import_LabelableProvider = require("./utils/field/LabelableProvider.cjs");
+var import_useLabelableId = require("./utils/field/useLabelableId.cjs");
+var import_useLabel = require("./utils/field/useLabel.cjs");
+var import_useRegisterFieldControl = require("./utils/field/useRegisterFieldControl.cjs");
+var import_useFieldValidation = require("./utils/field/useFieldValidation.cjs");
+var import_useFieldControlRegistration = require("./utils/field/useFieldControlRegistration.cjs");
+var import_getCombinedFieldValidityData = require("./utils/field/getCombinedFieldValidityData.cjs");
+var import_fieldset = require("./fieldset.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+function activeElement(doc) {
+  return doc.activeElement;
+}
+function FieldRootInner(props) {
+  const slot = (0, import_internal.S)("FieldRootInner");
+  const { errors, validationMode: formValidationMode, submitAttemptedRef } = (0, import_FormContext.useFormContext)();
+  const {
+    render,
+    className,
+    validate: validateProp,
+    validationDebounceTime = 0,
+    validationMode = formValidationMode,
+    name,
+    disabled: disabledProp = false,
+    invalid: invalidProp,
+    dirty: dirtyProp,
+    touched: touchedProp,
+    actionsRef,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const disabledFieldset = (0, import_fieldset.useFieldsetRootContext)(true)?.disabled;
+  const validate = (0, import_useStableCallback.useStableCallback)(validateProp || (() => null), (0, import_internal.subSlot)(slot, "validate"));
+  const disabled = disabledFieldset || disabledProp;
+  const [touchedState, setTouchedUnwrapped] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "touched"));
+  const [dirtyState, setDirtyUnwrapped] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "dirty"));
+  const [filled, setFilled] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "filled"));
+  const [focused, setFocused] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "focused"));
+  const dirty = dirtyProp ?? dirtyState;
+  const touched = touchedProp ?? touchedState;
+  const markedDirtyRef = (0, import_octane.useRef)(dirty, (0, import_internal.subSlot)(slot, "markedDirty"));
+  const registeredFieldIdRef = (0, import_octane.useRef)(void 0, (0, import_internal.subSlot)(slot, "regId"));
+  const [registeredFieldName, setRegisteredFieldName] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "regName")
+  );
+  const effectiveName = name ?? registeredFieldName;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (dirtyProp !== void 0) {
+        markedDirtyRef.current = dirtyProp;
+      }
+    },
+    [dirtyProp],
+    (0, import_internal.subSlot)(slot, "e:markedDirty")
+  );
+  const getRegisteredFieldId = (0, import_octane.useCallback)(
+    () => registeredFieldIdRef.current,
+    [],
+    (0, import_internal.subSlot)(slot, "getRegId")
+  );
+  const setRegisteredFieldId = (0, import_octane.useCallback)(
+    (id) => {
+      registeredFieldIdRef.current = id;
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "setRegId")
+  );
+  const setDirty = (0, import_useStableCallback.useStableCallback)(
+    (value) => {
+      if (dirtyProp !== void 0) {
+        return;
+      }
+      if (value) {
+        markedDirtyRef.current = true;
+      }
+      setDirtyUnwrapped(value);
+    },
+    (0, import_internal.subSlot)(slot, "setDirty")
+  );
+  const setTouched = (0, import_useStableCallback.useStableCallback)(
+    (value) => {
+      if (touchedProp !== void 0) {
+        return;
+      }
+      setTouchedUnwrapped(value);
+    },
+    (0, import_internal.subSlot)(slot, "setTouched")
+  );
+  const shouldValidateOnChange = (0, import_useStableCallback.useStableCallback)(
+    () => validationMode === "onChange" || validationMode === "onSubmit" && submitAttemptedRef.current,
+    (0, import_internal.subSlot)(slot, "shouldValidate")
+  );
+  const formError = effectiveName && Object.hasOwn(errors, effectiveName) ? errors[effectiveName] : null;
+  const hasFormError = !!(Array.isArray(formError) ? formError.length : formError);
+  const invalid = invalidProp === true || hasFormError;
+  const [validityData, setValidityData] = (0, import_octane.useState)(
+    { state: import_constants.DEFAULT_VALIDITY_STATE, error: "", errors: [], value: null, initialValue: null },
+    (0, import_internal.subSlot)(slot, "validityData")
+  );
+  const valid = disabled ? null : !invalid && validityData.state.valid;
+  const state = (0, import_octane.useMemo)(
+    () => ({ disabled, touched, dirty, valid, filled, focused }),
+    [disabled, touched, dirty, valid, filled, focused],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const validation = (0, import_useFieldValidation.useFieldValidation)(
+    {
+      setValidityData,
+      validate,
+      validityData,
+      validationDebounceTime,
+      invalid,
+      markedDirtyRef,
+      state,
+      shouldValidateOnChange,
+      getRegisteredFieldId
+    },
+    (0, import_internal.subSlot)(slot, "validation")
+  );
+  const [validateFieldControl, registerFieldControl] = (0, import_useFieldControlRegistration.useFieldControlRegistration)(
+    {
+      commit: validation.commit,
+      invalid,
+      markedDirtyRef,
+      name,
+      setRegisteredFieldName,
+      setRegisteredFieldId,
+      setValidityData,
+      validityData
+    },
+    (0, import_internal.subSlot)(slot, "controlReg")
+  );
+  (0, import_octane.useImperativeHandle)(
+    actionsRef,
+    () => ({ validate: validateFieldControl }),
+    [validateFieldControl],
+    (0, import_internal.subSlot)(slot, "imperative")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      invalid,
+      name: effectiveName,
+      validityData,
+      setValidityData,
+      disabled,
+      touched,
+      setTouched,
+      dirty,
+      setDirty,
+      filled,
+      setFilled,
+      focused,
+      setFocused,
+      validate,
+      validationMode,
+      validationDebounceTime,
+      shouldValidateOnChange,
+      state,
+      markedDirtyRef,
+      registerFieldControl,
+      validation
+    }),
+    [
+      invalid,
+      effectiveName,
+      validityData,
+      disabled,
+      touched,
+      setTouched,
+      dirty,
+      setDirty,
+      filled,
+      setFilled,
+      focused,
+      setFocused,
+      validate,
+      validationMode,
+      validationDebounceTime,
+      shouldValidateOnChange,
+      state,
+      registerFieldControl,
+      validation
+    ],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { ref, state, props: elementProps, stateAttributesMapping: import_constants.fieldValidityMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(import_FieldRootContext.FieldRootContext.Provider, { value: contextValue, children: element });
+}
+function FieldRoot(props) {
+  return (0, import_octane.createElement)(import_LabelableProvider.LabelableProvider, {
+    children: (0, import_octane.createElement)(FieldRootInner, props)
+  });
+}
+function FieldControl(props) {
+  const slot = (0, import_internal.S)("FieldControl");
+  const {
+    render,
+    className,
+    id: idProp,
+    name: nameProp,
+    value: valueProp,
+    disabled: disabledProp = false,
+    onValueChange,
+    defaultValue,
+    autoFocus = false,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const {
+    state: fieldState,
+    name: fieldName,
+    disabled: fieldDisabled,
+    setTouched,
+    setDirty,
+    validityData,
+    setFocused,
+    setFilled,
+    validationMode,
+    validation
+  } = (0, import_FieldRootContext2.useFieldRootContext)();
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const state = { ...fieldState, disabled };
+  const { labelId } = (0, import_LabelableContext.useLabelableContext)();
+  const id = (0, import_useLabelableId.useLabelableId)({ id: idProp }, (0, import_internal.subSlot)(slot, "id"));
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const hasExternalValue = valueProp != null;
+      if (validation.inputRef.current?.value || hasExternalValue && valueProp !== "") {
+        setFilled(true);
+      } else if (hasExternalValue && valueProp === "") {
+        setFilled(false);
+      }
+    },
+    [validation.inputRef, setFilled, valueProp],
+    (0, import_internal.subSlot)(slot, "e:filled")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (autoFocus && inputRef.current === activeElement((0, import_owner.ownerDocument)(inputRef.current))) {
+        setFocused(true);
+      }
+    },
+    [autoFocus, setFocused],
+    (0, import_internal.subSlot)(slot, "e:autofocus")
+  );
+  const [valueUnwrapped] = (0, import_useControlled.useControlled)(
+    { controlled: valueProp, default: defaultValue, name: "FieldControl", state: "value" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueUnwrapped : void 0;
+  const getValueFromInput = (0, import_useStableCallback.useStableCallback)(
+    () => validation.inputRef.current?.value,
+    (0, import_internal.subSlot)(slot, "getValue")
+  );
+  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
+    validation.inputRef,
+    id,
+    value,
+    getValueFromInput,
+    !disabled,
+    nameProp,
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "input",
+    { render, className, style },
+    {
+      ref: [ref, inputRef],
+      state,
+      props: [
+        {
+          id,
+          disabled,
+          name,
+          ref: validation.inputRef,
+          "aria-labelledby": labelId,
+          autoFocus: autoFocus || void 0,
+          ...isControlled ? { value } : { defaultValue },
+          onInput(event) {
+            const inputValue = event.currentTarget.value;
+            onValueChange?.(inputValue, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event));
+            setDirty(inputValue !== validityData.initialValue);
+            setFilled(inputValue !== "");
+            if (!event.defaultPrevented) {
+              clearErrors(name);
+              validation.change(inputValue);
+            }
+          },
+          onFocus() {
+            setFocused(true);
+          },
+          onBlur(event) {
+            setTouched(true);
+            setFocused(false);
+            if (validationMode === "onBlur") {
+              validation.commit(event.currentTarget.value);
+            }
+          },
+          onKeyDown(event) {
+            if (event.currentTarget.tagName === "INPUT" && event.key === "Enter") {
+              setTouched(true);
+              validation.commit(event.currentTarget.value);
+            }
+          }
+        },
+        elementProps,
+        (p) => validation.getValidationProps(disabled, p)
+      ],
+      stateAttributesMapping: import_constants.fieldValidityMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function FieldLabel(props) {
+  const slot = (0, import_internal.S)("FieldLabel");
+  const { render, className, style, id: idProp, nativeLabel = true, ref, ...elementProps } = props;
+  const fieldRootContext = (0, import_FieldRootContext2.useFieldRootContext)(false);
+  const fieldItemContext = (0, import_FieldItemContext2.useFieldItemContext)();
+  const { labelId } = (0, import_LabelableContext.useLabelableContext)();
+  const state = {
+    ...fieldRootContext.state,
+    disabled: fieldRootContext.disabled || fieldItemContext.disabled
+  };
+  const labelRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "labelRef"));
+  const labelProps = (0, import_useLabel.useLabel)(
+    { id: labelId ?? idProp, native: nativeLabel },
+    (0, import_internal.subSlot)(slot, "label")
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "label",
+    { render, className, style },
+    {
+      ref: [ref, labelRef],
+      state,
+      props: [labelProps, elementProps],
+      stateAttributesMapping: import_constants.fieldValidityMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function FieldDescription(props) {
+  const slot = (0, import_internal.S)("FieldDescription");
+  const { render, id: idProp, className, style, ref, ...elementProps } = props;
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const fieldRootContext = (0, import_FieldRootContext2.useFieldRootContext)(false);
+  const fieldItemContext = (0, import_FieldItemContext2.useFieldItemContext)();
+  const { setMessageIds } = (0, import_LabelableContext.useLabelableContext)();
+  const state = {
+    ...fieldRootContext.state,
+    disabled: fieldRootContext.disabled || fieldItemContext.disabled
+  };
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!id) {
+        return void 0;
+      }
+      setMessageIds((v) => v.concat(id));
+      return () => {
+        setMessageIds((v) => v.filter((item) => item !== id));
+      };
+    },
+    [id, setMessageIds],
+    (0, import_internal.subSlot)(slot, "e:register")
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "p",
+    { render, className, style },
+    { ref, state, props: [{ id }, elementProps], stateAttributesMapping: import_constants.fieldValidityMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const errorStateAttributesMapping = {
+  ...import_constants.fieldValidityMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+function FieldError(props) {
+  const slot = (0, import_internal.S)("FieldError");
+  const { render, id: idProp, className, match, style, children, ref, ...elementProps } = props;
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const { validityData, state: fieldState, name } = (0, import_FieldRootContext2.useFieldRootContext)(false);
+  const { setMessageIds } = (0, import_LabelableContext.useLabelableContext)();
+  const { errors } = (0, import_FormContext.useFormContext)();
+  const formError = name && Object.hasOwn(errors, name) ? errors[name] : null;
+  const hasFormError = !!(Array.isArray(formError) ? formError.length : formError);
+  const hasSpecificMatch = typeof match === "string";
+  let rendered = false;
+  if (match === true) {
+    rendered = true;
+  } else if (fieldState.disabled) {
+    rendered = false;
+  } else if (hasSpecificMatch) {
+    rendered = Boolean(validityData.state[match]);
+  } else {
+    rendered = hasFormError || validityData.state.valid === false;
+  }
+  const { mounted, transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    rendered,
+    (0, import_internal.subSlot)(slot, "ts")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!rendered || !id) {
+        return void 0;
+      }
+      setMessageIds((v) => v.concat(id));
+      return () => {
+        setMessageIds((v) => v.filter((item) => item !== id));
+      };
+    },
+    [rendered, id, setMessageIds],
+    (0, import_internal.subSlot)(slot, "e:register")
+  );
+  const errorRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "errorRef"));
+  let error = validityData.error;
+  if (!hasSpecificMatch && hasFormError) {
+    error = formError;
+  } else if (validityData.errors.length > 1) {
+    error = validityData.errors;
+  }
+  let errorMessage = error ?? "";
+  if (Array.isArray(error)) {
+    errorMessage = error.length > 1 ? (0, import_octane.createElement)("ul", {
+      children: error.map(
+        (message) => (0, import_octane.createElement)("li", { key: message, children: message })
+      )
+    }) : error[0];
+  }
+  const state = { ...fieldState, transitionStatus };
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: rendered,
+      ref: errorRef,
+      onComplete() {
+        if (!rendered) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      ref: [ref, errorRef],
+      state,
+      props: [{ id, children: children ?? errorMessage }, elementProps],
+      stateAttributesMapping: errorStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!mounted) {
+    return null;
+  }
+  return element;
+}
+function FieldValidity(props) {
+  const slot = (0, import_internal.S)("FieldValidity");
+  const { children } = props;
+  const { validityData, invalid } = (0, import_FieldRootContext2.useFieldRootContext)(false);
+  const combined = (0, import_octane.useMemo)(
+    () => (0, import_getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+    [validityData, invalid],
+    (0, import_internal.subSlot)(slot, "combined")
+  );
+  const isInvalid = combined.state.valid === false;
+  const { transitionStatus } = (0, import_useTransitionStatus.useTransitionStatus)(isInvalid, (0, import_internal.subSlot)(slot, "ts"));
+  const fieldValidityState = (0, import_octane.useMemo)(
+    () => ({ ...combined, validity: combined.state, transitionStatus }),
+    [combined, transitionStatus],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  return children(fieldValidityState);
+}
+function FieldItem(props) {
+  const slot = (0, import_internal.S)("FieldItem");
+  const { render, className, style, disabled: disabledProp = false, ref, ...elementProps } = props;
+  const { state: fieldState, disabled: rootDisabled } = (0, import_FieldRootContext2.useFieldRootContext)(false);
+  const disabled = rootDisabled || disabledProp;
+  const state = { ...fieldState, disabled };
+  const fieldItemContextValue = (0, import_octane.useMemo)(() => ({ disabled }), [disabled], (0, import_internal.subSlot)(slot, "ctx"));
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { ref, state, props: elementProps, stateAttributesMapping: import_constants.fieldValidityMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(import_LabelableProvider.LabelableProvider, {
+    children: (0, import_octane.createElement)(import_FieldItemContext.FieldItemContext.Provider, {
+      value: fieldItemContextValue,
+      children: element
+    })
+  });
+}
+const Field = {
+  Root: FieldRoot,
+  Control: FieldControl,
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Error: FieldError,
+  Validity: FieldValidity,
+  Item: FieldItem
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Field,
+  useFieldRootContext
+});

package/dist/cjs/fieldset.cjs

@@ -0,0 +1,101 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fieldset_exports = {};
+__export(fieldset_exports, {
+  Fieldset: () => Fieldset,
+  useFieldsetRootContext: () => useFieldsetRootContext
+});
+module.exports = __toCommonJS(fieldset_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+const FieldsetRootContext = (0, import_octane.createContext)(void 0);
+function useFieldsetRootContext(optional = false) {
+  const context = (0, import_octane.useContext)(FieldsetRootContext);
+  if (!context && !optional) {
+    throw new Error(
+      "Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>."
+    );
+  }
+  return context;
+}
+function FieldsetRoot(props) {
+  const slot = (0, import_internal.S)("FieldsetRoot");
+  const { render, className, style, disabled: disabledProp = false, ref, ...elementProps } = props;
+  const [legendId, setLegendId] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "legendId")
+  );
+  const parentDisabled = useFieldsetRootContext(true)?.disabled;
+  const disabled = parentDisabled || disabledProp;
+  const state = { disabled };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "fieldset",
+    { render, className, style },
+    {
+      ref,
+      state,
+      props: [{ "aria-labelledby": legendId, disabled }, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ legendId, setLegendId, disabled }),
+    [legendId, setLegendId, disabled],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  return (0, import_octane.createElement)(FieldsetRootContext.Provider, { value: contextValue, children: element });
+}
+function FieldsetLegend(props) {
+  const slot = (0, import_internal.S)("FieldsetLegend");
+  const { render, className, style, id: idProp, ref, ...elementProps } = props;
+  const { disabled, setLegendId } = useFieldsetRootContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      setLegendId(id);
+      return () => {
+        setLegendId(void 0);
+      };
+    },
+    [setLegendId, id],
+    (0, import_internal.subSlot)(slot, "e:legendId")
+  );
+  const state = { disabled: disabled ?? false };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [{ id }, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Fieldset = {
+  Root: FieldsetRoot,
+  Legend: FieldsetLegend
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Fieldset,
+  useFieldsetRootContext
+});