@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/progress.cjs

@@ -0,0 +1,206 @@
+"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 progress_exports = {};
+__export(progress_exports, {
+  Progress: () => Progress
+});
+module.exports = __toCommonJS(progress_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useRegisteredLabelId = require("./utils/useRegisteredLabelId.cjs");
+var import_useValueAsRef = require("./utils/useValueAsRef.cjs");
+var import_valueToPercent = require("./utils/valueToPercent.cjs");
+var import_formatNumber = require("./utils/formatNumber.cjs");
+var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
+const progressStateAttributesMapping = {
+  status(value) {
+    if (value === "progressing") {
+      return { "data-progressing": "" };
+    }
+    if (value === "complete") {
+      return { "data-complete": "" };
+    }
+    if (value === "indeterminate") {
+      return { "data-indeterminate": "" };
+    }
+    return null;
+  }
+};
+const ProgressRootContext = (0, import_octane.createContext)(void 0);
+function useProgressRootContext() {
+  const context = (0, import_octane.useContext)(ProgressRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: ProgressRootContext is missing. Progress parts must be placed within <Progress.Root>."
+    );
+  }
+  return context;
+}
+function getDefaultAriaValueText(formattedValue, value) {
+  if (value == null) {
+    return "indeterminate progress";
+  }
+  return formattedValue || `${value}%`;
+}
+function ProgressRoot(props) {
+  const slot = (0, import_internal.S)("ProgressRoot");
+  const {
+    format,
+    getAriaValueText = getDefaultAriaValueText,
+    locale,
+    max = 100,
+    min = 0,
+    value,
+    render,
+    className,
+    children,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const [labelId, setLabelId] = (0, import_octane.useState)(void 0, (0, import_internal.subSlot)(slot, "labelId"));
+  const formatOptionsRef = (0, import_useValueAsRef.useValueAsRef)(
+    format,
+    (0, import_internal.subSlot)(slot, "fmt")
+  );
+  let status = "indeterminate";
+  if (Number.isFinite(value)) {
+    status = value === max ? "complete" : "progressing";
+  }
+  const formattedValue = (0, import_formatNumber.formatNumberValue)(value, locale, formatOptionsRef.current);
+  const state = (0, import_octane.useMemo)(() => ({ status }), [status], (0, import_internal.subSlot)(slot, "state"));
+  const defaultProps = {
+    "aria-labelledby": labelId,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value ?? void 0,
+    "aria-valuetext": getAriaValueText(formattedValue, value),
+    role: "progressbar",
+    // Array children reconcile as a keyed list in octane, so both slots carry a key. The
+    // consumer's go through a keyed Fragment because they cannot be keyed in place.
+    children: [
+      (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children }),
+      (0, import_octane.createElement)("span", {
+        key: "sr-hint",
+        role: "presentation",
+        style: import_visuallyHidden.visuallyHidden,
+        children: "x"
+      })
+    ]
+  };
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ formattedValue, max, min, setLabelId, state, status, value }),
+    [formattedValue, max, min, setLabelId, state, status, value],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [defaultProps, elementProps],
+      stateAttributesMapping: progressStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(ProgressRootContext.Provider, { value: contextValue, children: element });
+}
+function ProgressTrack(props) {
+  const slot = (0, import_internal.S)("ProgressTrack");
+  const { render, className, style, ref, ...elementProps } = props;
+  const { state } = useProgressRootContext();
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { state, ref, props: elementProps, stateAttributesMapping: progressStateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function ProgressIndicator(props) {
+  const slot = (0, import_internal.S)("ProgressIndicator");
+  const { render, className, style, ref, ...elementProps } = props;
+  const { max, min, value, state } = useProgressRootContext();
+  const percentageValue = Number.isFinite(value) && value !== null ? (0, import_valueToPercent.valueToPercent)(value, min, max) : null;
+  const indicatorStyle = percentageValue == null ? {} : { insetInlineStart: 0, height: "inherit", width: `${percentageValue}%` };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [{ style: indicatorStyle }, elementProps],
+      stateAttributesMapping: progressStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function ProgressValue(props) {
+  const slot = (0, import_internal.S)("ProgressValue");
+  const { className, render, children, style, ref, ...elementProps } = props;
+  const { value, formattedValue, state } = useProgressRootContext();
+  const formattedValueArg = value == null ? "indeterminate" : formattedValue;
+  const formattedValueDisplay = value == null ? null : formattedValue;
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [
+        {
+          "aria-hidden": true,
+          children: typeof children === "function" ? children(formattedValueArg, value) : formattedValueDisplay
+        },
+        elementProps
+      ],
+      stateAttributesMapping: progressStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function ProgressLabel(props) {
+  const slot = (0, import_internal.S)("ProgressLabel");
+  const { render, className, style, id: idProp, ref, ...elementProps } = props;
+  const { setLabelId, state } = useProgressRootContext();
+  const id = (0, import_useRegisteredLabelId.useRegisteredLabelId)(idProp, setLabelId, (0, import_internal.subSlot)(slot, "labelId"));
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [{ id, role: "presentation" }, elementProps],
+      stateAttributesMapping: progressStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Progress = {
+  Root: ProgressRoot,
+  Track: ProgressTrack,
+  Indicator: ProgressIndicator,
+  Value: ProgressValue,
+  Label: ProgressLabel
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Progress
+});

package/dist/cjs/radio-group.cjs

@@ -0,0 +1,264 @@
+"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 radio_group_exports = {};
+__export(radio_group_exports, {
+  RadioGroup: () => RadioGroup
+});
+module.exports = __toCommonJS(radio_group_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_CompositeRoot = require("./utils/composite/CompositeRoot.cjs");
+var import_keys = require("./utils/composite/keys.cjs");
+var import_contains = require("./utils/contains.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useValueChanged = require("./utils/useValueChanged.cjs");
+var import_constants = require("./utils/field/constants.cjs");
+var import_FieldRootContext = require("./utils/field/FieldRootContext.cjs");
+var import_FormContext = require("./utils/field/FormContext.cjs");
+var import_LabelableContext = require("./utils/field/LabelableContext.cjs");
+var import_useRegisterFieldControl = require("./utils/field/useRegisterFieldControl.cjs");
+var import_RadioGroupContext = require("./utils/RadioGroupContext.cjs");
+var import_fieldset = require("./fieldset.cjs");
+const MODIFIER_KEYS = [import_keys.SHIFT];
+function RadioGroup(props) {
+  const slot = (0, import_internal.S)("RadioGroup");
+  const {
+    render,
+    className,
+    disabled: disabledProp,
+    readOnly,
+    required,
+    onValueChange: onValueChangeProp,
+    value: externalValue,
+    defaultValue,
+    form,
+    name: nameProp,
+    inputRef: inputRefProp,
+    id: idProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const {
+    setTouched: setFieldTouched,
+    setFocused,
+    validationMode,
+    name: fieldName,
+    disabled: fieldDisabled,
+    state: fieldState,
+    validation,
+    setDirty,
+    setFilled,
+    validityData
+  } = (0, import_FieldRootContext.useFieldRootContext)();
+  const { labelId } = (0, import_LabelableContext.useLabelableContext)();
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const fieldsetContext = (0, import_fieldset.useFieldsetRootContext)(true);
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const [checkedValue, setCheckedValueUnwrapped] = (0, import_useControlled.useControlled)(
+    { controlled: externalValue, default: defaultValue, name: "RadioGroup", state: "value" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const [touched, setTouched] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "touched"));
+  const setCheckedValue = (0, import_useStableCallback.useStableCallback)(
+    (value, eventDetails) => {
+      onValueChangeProp?.(value, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      setCheckedValueUnwrapped(value);
+    },
+    (0, import_internal.subSlot)(slot, "setValue")
+  );
+  const controlRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "controlRef"));
+  const groupInputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "groupInput"));
+  const firstEnabledInputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "firstInput"));
+  function setInputRef(hiddenInput) {
+    let cleanup;
+    if (inputRefProp) {
+      if (typeof inputRefProp === "function") {
+        cleanup = inputRefProp(hiddenInput);
+      } else {
+        inputRefProp.current = hiddenInput;
+      }
+    }
+    groupInputRef.current = hiddenInput;
+    validation.inputRef.current = hiddenInput;
+    return cleanup;
+  }
+  const registerControlRef = (0, import_useStableCallback.useStableCallback)(
+    (element, isDisabled = false) => {
+      if (!element) {
+        return;
+      }
+      if (isDisabled) {
+        if (controlRef.current === element) {
+          controlRef.current = null;
+        }
+        return;
+      }
+      if (controlRef.current == null) {
+        controlRef.current = element;
+      }
+    },
+    (0, import_internal.subSlot)(slot, "registerControl")
+  );
+  const registerInputRef = (0, import_useStableCallback.useStableCallback)(
+    (input) => {
+      if (!input || input.disabled) {
+        return void 0;
+      }
+      if (!firstEnabledInputRef.current) {
+        firstEnabledInputRef.current = input;
+      }
+      const currentInput = groupInputRef.current;
+      if (input.checked || currentInput == null || currentInput.disabled) {
+        return setInputRef(input);
+      }
+      return void 0;
+    },
+    (0, import_internal.subSlot)(slot, "registerInput")
+  );
+  const getFormValue = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      const input = groupInputRef.current;
+      if (!input || input.disabled || !input.checked) {
+        return null;
+      }
+      return checkedValue ?? null;
+    },
+    (0, import_internal.subSlot)(slot, "getFormValue")
+  );
+  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
+    controlRef,
+    id,
+    checkedValue ?? null,
+    getFormValue,
+    !disabled,
+    nameProp,
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  (0, import_useValueChanged.useValueChanged)(
+    checkedValue,
+    () => {
+      clearErrors(name);
+      setDirty(checkedValue !== validityData.initialValue);
+      setFilled(checkedValue != null);
+      validation.change(checkedValue);
+      const fallbackInput = firstEnabledInputRef.current;
+      if (checkedValue == null && fallbackInput && !fallbackInput.disabled) {
+        setInputRef(fallbackInput);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "valueChanged")
+  );
+  const ariaLabelledby = elementProps["aria-labelledby"] ?? labelId ?? fieldsetContext?.legendId;
+  const state = {
+    ...fieldState,
+    disabled: disabled ?? false,
+    required: required ?? false,
+    readOnly: readOnly ?? false
+  };
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      ...fieldState,
+      checkedValue,
+      disabled,
+      form,
+      validation,
+      name,
+      readOnly,
+      registerControlRef,
+      registerInputRef,
+      required,
+      setCheckedValue,
+      setTouched,
+      touched
+    }),
+    [
+      checkedValue,
+      disabled,
+      form,
+      validation,
+      fieldState,
+      name,
+      readOnly,
+      registerControlRef,
+      registerInputRef,
+      required,
+      setCheckedValue,
+      setTouched,
+      touched
+    ],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const defaultProps = {
+    id: idProp,
+    role: "radiogroup",
+    "aria-required": required || void 0,
+    "aria-disabled": disabled || void 0,
+    "aria-readonly": readOnly || void 0,
+    "aria-labelledby": ariaLabelledby,
+    onFocus() {
+      setFocused(true);
+    },
+    onBlur(event) {
+      if (!(0, import_contains.contains)(event.currentTarget, event.relatedTarget)) {
+        setFieldTouched(true);
+        setFocused(false);
+        if (validationMode === "onBlur") {
+          validation.commit(checkedValue);
+        }
+      }
+    },
+    onKeyDownCapture(event) {
+      if (event.key.startsWith("Arrow")) {
+        setTouched(true);
+        setFocused(true);
+      }
+    }
+  };
+  const compositeRoot = (0, import_octane.createElement)(import_CompositeRoot.CompositeRoot, {
+    render,
+    className,
+    style,
+    state,
+    props: [
+      defaultProps,
+      elementProps,
+      (p) => validation.getValidationProps(disabled ?? false, p)
+    ],
+    refs: [ref],
+    stateAttributesMapping: import_constants.fieldValidityMapping,
+    enableHomeAndEndKeys: false,
+    modifierKeys: MODIFIER_KEYS
+  });
+  return (0, import_octane.createElement)(import_RadioGroupContext.RadioGroupContext.Provider, {
+    value: contextValue,
+    children: compositeRoot
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadioGroup
+});