@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/avatar.cjs

@@ -0,0 +1,234 @@
+"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 avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(avatar_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_useTimeout = require("./utils/useTimeout.cjs");
+const avatarStateAttributesMapping = {
+  imageLoadingStatus: () => null
+};
+const imageStateAttributesMapping = {
+  ...avatarStateAttributesMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+const AvatarRootContext = (0, import_octane.createContext)(void 0);
+function useAvatarRootContext() {
+  const context = (0, import_octane.useContext)(AvatarRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>."
+    );
+  }
+  return context;
+}
+function useImageLoadingStatus(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useImageLoadingStatus");
+  const src = user[0];
+  const options = user[1] ?? {};
+  const { referrerPolicy, crossOrigin, sizes, srcSet } = options;
+  const [loadingStatus, setLoadingStatus] = (0, import_octane.useState)(
+    "idle",
+    (0, import_internal.subSlot)(slot, "ls")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!src && !srcSet) {
+        setLoadingStatus("error");
+        return void 0;
+      }
+      let isMounted = true;
+      const image = new window.Image();
+      const updateStatus = (status) => () => {
+        if (!isMounted) {
+          return;
+        }
+        setLoadingStatus(status);
+      };
+      setLoadingStatus("loading");
+      image.onload = updateStatus("loaded");
+      image.onerror = updateStatus("error");
+      if (referrerPolicy) {
+        image.referrerPolicy = referrerPolicy;
+      }
+      image.crossOrigin = crossOrigin ?? null;
+      if (sizes) {
+        image.sizes = sizes;
+      }
+      if (srcSet) {
+        image.srcset = srcSet;
+      }
+      if (src) {
+        image.src = src;
+      }
+      if (image.complete) {
+        setLoadingStatus(image.naturalWidth > 0 ? "loaded" : "error");
+      }
+      return () => {
+        isMounted = false;
+      };
+    },
+    [src, srcSet, sizes, crossOrigin, referrerPolicy],
+    (0, import_internal.subSlot)(slot, "e:load")
+  );
+  return loadingStatus;
+}
+function AvatarRoot(props) {
+  const slot = (0, import_internal.S)("AvatarRoot");
+  const { className, render, style, ref, ...elementProps } = props;
+  const [imageLoadingStatus, setImageLoadingStatus] = (0, import_octane.useState)(
+    "idle",
+    (0, import_internal.subSlot)(slot, "ls")
+  );
+  const state = { imageLoadingStatus };
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({ imageLoadingStatus, setImageLoadingStatus }),
+    [imageLoadingStatus, setImageLoadingStatus],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    { state, ref, props: elementProps, stateAttributesMapping: avatarStateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(AvatarRootContext.Provider, { value: contextValue, children: element });
+}
+function AvatarImage(props) {
+  const slot = (0, import_internal.S)("AvatarImage");
+  const {
+    className,
+    render,
+    onLoadingStatusChange: onLoadingStatusChangeProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { setImageLoadingStatus } = useAvatarRootContext();
+  const imageLoadingStatus = useImageLoadingStatus(
+    elementProps.src,
+    elementProps,
+    (0, import_internal.subSlot)(slot, "ils")
+  );
+  const isVisible = imageLoadingStatus === "loaded";
+  const { mounted, transitionStatus, setMounted } = (0, import_useTransitionStatus.useTransitionStatus)(
+    isVisible,
+    (0, import_internal.subSlot)(slot, "ts")
+  );
+  const imageRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "imgRef"));
+  const handleLoadingStatusChange = (0, import_useStableCallback.useStableCallback)(
+    (status) => {
+      onLoadingStatusChangeProp?.(status);
+      setImageLoadingStatus(status);
+    },
+    (0, import_internal.subSlot)(slot, "hlsc")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (imageLoadingStatus !== "idle") {
+        handleLoadingStatusChange(imageLoadingStatus);
+      }
+    },
+    [imageLoadingStatus, handleLoadingStatusChange],
+    (0, import_internal.subSlot)(slot, "e:status")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => () => setImageLoadingStatus("idle"),
+    [setImageLoadingStatus],
+    (0, import_internal.subSlot)(slot, "e:reset")
+  );
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open: isVisible,
+      ref: imageRef,
+      onComplete() {
+        if (!isVisible) {
+          setMounted(false);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const state = { imageLoadingStatus, transitionStatus };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "img",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, imageRef],
+      props: elementProps,
+      stateAttributesMapping: imageStateAttributesMapping,
+      enabled: mounted
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  if (!mounted) {
+    return null;
+  }
+  return element;
+}
+function AvatarFallback(props) {
+  const slot = (0, import_internal.S)("AvatarFallback");
+  const { className, render, delay, style, ref, ...elementProps } = props;
+  const { imageLoadingStatus } = useAvatarRootContext();
+  const [delayPassed, setDelayPassed] = (0, import_octane.useState)(delay === void 0, (0, import_internal.subSlot)(slot, "dp"));
+  const timeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "to"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (delay !== void 0) {
+        timeout.start(delay, () => setDelayPassed(true));
+      } else {
+        setDelayPassed(true);
+      }
+      return timeout.clear;
+    },
+    [timeout, delay],
+    (0, import_internal.subSlot)(slot, "e:delay")
+  );
+  const state = { imageLoadingStatus };
+  return (0, import_useRenderElement.useRenderElement)(
+    "span",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: elementProps,
+      stateAttributesMapping: avatarStateAttributesMapping,
+      enabled: imageLoadingStatus !== "loaded" && (delay === void 0 || delayPassed)
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/cjs/button.cjs

@@ -0,0 +1,54 @@
+"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 button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_internal = require("./internal.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+function Button(props) {
+  const slot = (0, import_internal.S)("Button");
+  const {
+    render,
+    className,
+    disabled = false,
+    focusableWhenDisabled = false,
+    nativeButton = true,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, focusableWhenDisabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const state = { disabled };
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { className, render, style },
+    { state, ref: [ref, buttonRef], props: [elementProps, getButtonProps] },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/cjs/checkbox-group.cjs

@@ -0,0 +1,165 @@
+"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 checkbox_group_exports = {};
+__export(checkbox_group_exports, {
+  CheckboxGroup: () => CheckboxGroup
+});
+module.exports = __toCommonJS(checkbox_group_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");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useValueChanged = require("./utils/useValueChanged.cjs");
+var import_areArraysEqual = require("./utils/areArraysEqual.cjs");
+var import_useCheckboxGroupParent = require("./utils/useCheckboxGroupParent.cjs");
+var import_CheckboxGroupContext = require("./utils/CheckboxGroupContext.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_checkbox = require("./checkbox.cjs");
+const EMPTY_ARRAY = [];
+function CheckboxGroup(props) {
+  const slot = (0, import_internal.S)("CheckboxGroup");
+  const {
+    allValues,
+    className,
+    defaultValue: defaultValueProp,
+    disabled: disabledProp = false,
+    id: idProp,
+    onValueChange,
+    render,
+    value: externalValue,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const {
+    disabled: fieldDisabled,
+    name: fieldName,
+    state: fieldState,
+    validation,
+    setFilled,
+    setDirty,
+    validityData
+  } = (0, import_FieldRootContext.useFieldRootContext)();
+  const { labelId, getDescriptionProps } = (0, import_LabelableContext.useLabelableContext)();
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const disabled = fieldDisabled || disabledProp;
+  const defaultValue = (0, import_octane.useMemo)(
+    () => {
+      if (externalValue === void 0) {
+        return defaultValueProp ?? [];
+      }
+      return void 0;
+    },
+    [externalValue, defaultValueProp],
+    (0, import_internal.subSlot)(slot, "defaultValue")
+  );
+  const [value, setValueUnwrapped] = (0, import_useControlled.useControlled)(
+    { controlled: externalValue, default: defaultValue, name: "CheckboxGroup", state: "value" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const setValue = (0, import_useStableCallback.useStableCallback)(
+    (v, eventDetails) => {
+      onValueChange?.(v, eventDetails);
+      if (eventDetails.isCanceled) {
+        return;
+      }
+      setValueUnwrapped(v);
+    },
+    (0, import_internal.subSlot)(slot, "setValue")
+  );
+  const parent = (0, import_useCheckboxGroupParent.useCheckboxGroupParent)(
+    { allValues, value, onValueChange: setValue },
+    (0, import_internal.subSlot)(slot, "parent")
+  );
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const controlRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "controlRef"));
+  const registerControlRef = (0, import_octane.useCallback)(
+    (element2) => {
+      if (controlRef.current == null && element2 != null && !element2.hasAttribute(import_checkbox.PARENT_CHECKBOX)) {
+        controlRef.current = element2;
+      }
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "registerControl")
+  );
+  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
+    controlRef,
+    id,
+    value,
+    void 0,
+    !!fieldName && !disabled,
+    fieldName,
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  const resolvedValue = value ?? EMPTY_ARRAY;
+  (0, import_useValueChanged.useValueChanged)(
+    resolvedValue,
+    () => {
+      if (fieldName) {
+        clearErrors(fieldName);
+      }
+      const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : EMPTY_ARRAY;
+      setFilled(resolvedValue.length > 0);
+      setDirty(!(0, import_areArraysEqual.areArraysEqual)(resolvedValue, initialValue));
+      validation.change(resolvedValue);
+    },
+    (0, import_internal.subSlot)(slot, "valueChanged")
+  );
+  const state = { ...fieldState, disabled };
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      allValues,
+      value,
+      defaultValue,
+      setValue,
+      parent,
+      disabled,
+      validation,
+      registerControlRef
+    }),
+    [allValues, value, defaultValue, setValue, parent, disabled, validation, registerControlRef],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [
+        { id: idProp, role: "group", "aria-labelledby": labelId },
+        elementProps,
+        getDescriptionProps
+      ],
+      stateAttributesMapping: import_constants.fieldValidityMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(import_CheckboxGroupContext.CheckboxGroupContext.Provider, { value: contextValue, children: element });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxGroup
+});