@octanejs/radix 0.1.32 → 0.1.34

package/dist/cjs/Progress.cjs

@@ -0,0 +1,111 @@
+"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, {
+  Indicator: () => Indicator,
+  Progress: () => Root,
+  ProgressIndicator: () => Indicator,
+  Root: () => Root,
+  createProgressScope: () => createProgressScope
+});
+module.exports = __toCommonJS(Progress_exports);
+var import_octane = require("octane");
+var import_context = require("./context.cjs");
+var import_Primitive = require("./Primitive.cjs");
+const DEFAULT_MAX = 100;
+const [createProgressContext, createProgressScope] = (0, import_context.createContextScope)("Progress");
+const [ProgressProvider, useProgressContext] = createProgressContext("Progress");
+function Root(props) {
+  const {
+    __scopeProgress,
+    value: valueProp = null,
+    max: maxProp,
+    getValueLabel = defaultGetValueLabel,
+    ...progressProps
+  } = props ?? {};
+  if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {
+    console.error(getInvalidMaxError(`${maxProp}`, "Progress"));
+  }
+  const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
+  if (valueProp !== null && !isValidValueNumber(valueProp, max)) {
+    console.error(getInvalidValueError(`${valueProp}`, "Progress"));
+  }
+  const value = isValidValueNumber(valueProp, max) ? valueProp : null;
+  const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
+  return (0, import_octane.createElement)(ProgressProvider, {
+    scope: __scopeProgress,
+    value,
+    max,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      "aria-valuemax": max,
+      "aria-valuemin": 0,
+      "aria-valuenow": isNumber(value) ? value : void 0,
+      "aria-valuetext": valueLabel,
+      role: "progressbar",
+      "data-state": getProgressState(value, max),
+      "data-value": value ?? void 0,
+      "data-max": max,
+      ...progressProps
+    })
+  });
+}
+function Indicator(props) {
+  const { __scopeProgress, ...indicatorProps } = props ?? {};
+  const context = useProgressContext("ProgressIndicator", __scopeProgress);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "data-state": getProgressState(context.value, context.max),
+    "data-value": context.value ?? void 0,
+    "data-max": context.max,
+    ...indicatorProps
+  });
+}
+function getProgressState(value, maxValue) {
+  return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
+}
+function defaultGetValueLabel(value, max) {
+  return `${Math.round(value / max * 100)}%`;
+}
+function isNumber(value) {
+  return typeof value === "number";
+}
+function isValidMaxNumber(max) {
+  return isNumber(max) && !isNaN(max) && max > 0;
+}
+function isValidValueNumber(value, max) {
+  return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
+}
+function getInvalidMaxError(propValue, componentName) {
+  return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
+}
+function getInvalidValueError(propValue, componentName) {
+  return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
+  - a positive number
+  - less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
+  - \`null\` or \`undefined\` if the progress is indeterminate.
+
+Defaulting to \`null\`.`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Indicator,
+  Progress,
+  ProgressIndicator,
+  Root,
+  createProgressScope
+});

package/dist/cjs/Radio.cjs

@@ -0,0 +1,240 @@
+"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_exports = {};
+__export(Radio_exports, {
+  Radio: () => Radio,
+  RadioBubbleInput: () => RadioBubbleInput,
+  RadioIndicator: () => RadioIndicator,
+  RadioProvider: () => RadioProvider,
+  RadioTrigger: () => RadioTrigger,
+  createRadioScope: () => createRadioScope,
+  useRadioContext: () => useRadioContext
+});
+module.exports = __toCommonJS(Radio_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_previous = require("./use-previous.cjs");
+var import_use_size = require("./use-size.cjs");
+const RADIO_NAME = "Radio";
+const [createRadioContext, createRadioScope] = (0, import_context.createContextScope)(RADIO_NAME);
+const [RadioProviderImpl, useRadioContextImpl] = createRadioContext(RADIO_NAME);
+const useRadioContext = useRadioContextImpl;
+function RadioProvider(props) {
+  const slot = (0, import_internal.S)("Radio.Provider");
+  const {
+    __scopeRadio,
+    checked = false,
+    children,
+    disabled,
+    form,
+    name,
+    onCheck,
+    required,
+    value = "on",
+    internal_do_not_use_render
+  } = props ?? {};
+  const [control, setControl] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "control"));
+  const [bubbleInput, setBubbleInput] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "input")
+  );
+  const hasConsumerStoppedPropagationRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "stopped"));
+  const isFormControl = control ? !!form || !!control.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    true
+  );
+  const context = {
+    checked,
+    disabled,
+    required,
+    name,
+    form,
+    value,
+    control,
+    setControl,
+    hasConsumerStoppedPropagationRef,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput,
+    onCheck: () => onCheck?.()
+  };
+  return (0, import_octane.createElement)(RadioProviderImpl, {
+    scope: __scopeRadio,
+    ...context,
+    children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+  });
+}
+function RadioTrigger(props) {
+  const slot = (0, import_internal.S)("Radio.Trigger");
+  const { __scopeRadio, onClick, ref: forwardedRef, ...radioProps } = props ?? {};
+  const {
+    checked,
+    disabled,
+    value,
+    setControl,
+    onCheck,
+    hasConsumerStoppedPropagationRef,
+    isFormControl,
+    bubbleInput
+  } = useRadioContext("RadioTrigger", __scopeRadio);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setControl, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    type: "button",
+    role: "radio",
+    "aria-checked": checked,
+    "data-state": getState(checked),
+    "data-disabled": disabled ? "" : void 0,
+    disabled,
+    value,
+    ...radioProps,
+    ref: composedRefs,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(onClick, (event) => {
+      if (!checked) onCheck();
+      if (bubbleInput && isFormControl) {
+        hasConsumerStoppedPropagationRef.current = event.cancelBubble;
+        if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+      }
+    })
+  });
+}
+function Radio(props) {
+  const {
+    __scopeRadio,
+    name,
+    checked,
+    required,
+    disabled,
+    value,
+    onCheck,
+    form,
+    ref: forwardedRef,
+    ...radioProps
+  } = props ?? {};
+  return (0, import_octane.createElement)(RadioProvider, {
+    __scopeRadio,
+    checked,
+    disabled,
+    required,
+    onCheck,
+    name,
+    form,
+    value,
+    internal_do_not_use_render: ({ isFormControl }) => [
+      (0, import_octane.createElement)(RadioTrigger, {
+        key: "trigger",
+        ...radioProps,
+        ref: forwardedRef,
+        __scopeRadio
+      }),
+      isFormControl ? (0, import_octane.createElement)(RadioBubbleInput, { key: "bubble", __scopeRadio }) : null
+    ]
+  });
+}
+function RadioIndicator(props) {
+  const { __scopeRadio, forceMount, ...indicatorProps } = props ?? {};
+  const context = useRadioContext("RadioIndicator", __scopeRadio);
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || context.checked,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+      "data-state": getState(context.checked),
+      "data-disabled": context.disabled ? "" : void 0,
+      ...indicatorProps
+    })
+  });
+}
+function RadioBubbleInput(props) {
+  const slot = (0, import_internal.S)("Radio.BubbleInput");
+  const { __scopeRadio, ref: forwardedRef, ...inputProps } = props ?? {};
+  const {
+    control,
+    checked,
+    required,
+    disabled,
+    name,
+    value,
+    form,
+    bubbleInput,
+    setBubbleInput,
+    hasConsumerStoppedPropagationRef
+  } = useRadioContext("RadioBubbleInput", __scopeRadio);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setBubbleInput, (0, import_internal.subSlot)(slot, "refs"));
+  const prevChecked = (0, import_use_previous.usePrevious)(checked, (0, import_internal.subSlot)(slot, "prev"));
+  const controlSize = (0, import_use_size.useSize)(control, (0, import_internal.subSlot)(slot, "size"));
+  (0, import_octane.useEffect)(
+    () => {
+      const input = bubbleInput;
+      if (!input) return;
+      const bubbles = !hasConsumerStoppedPropagationRef.current;
+      if (prevChecked !== checked) {
+        input.dispatchEvent(new Event("click", { bubbles }));
+        input.dispatchEvent(new Event("change", { bubbles }));
+      }
+    },
+    [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef],
+    (0, import_internal.subSlot)(slot, "e:bubble")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.input, {
+    type: "radio",
+    "aria-hidden": true,
+    // Live CONTROLLED checked (octane React-parity — see Checkbox.ts). The runtime's
+    // event-restore also re-syncs radio-group cousins after a dispatched `click`.
+    checked,
+    required,
+    disabled,
+    name,
+    value,
+    form,
+    ...inputProps,
+    tabIndex: -1,
+    ref: composedRefs,
+    style: {
+      ...props?.style,
+      ...controlSize,
+      position: "absolute",
+      pointerEvents: "none",
+      opacity: 0,
+      margin: 0,
+      // We transform because the input is absolutely positioned but we have
+      // rendered it **after** the button. This pulls it back to sit on top
+      // of the button.
+      transform: "translateX(-100%)"
+    }
+  });
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio,
+  RadioBubbleInput,
+  RadioIndicator,
+  RadioProvider,
+  RadioTrigger,
+  createRadioScope,
+  useRadioContext
+});

package/dist/cjs/RadioGroup.cjs

@@ -0,0 +1,216 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RadioGroup_exports = {};
+__export(RadioGroup_exports, {
+  Indicator: () => Indicator,
+  Item: () => Item,
+  RadioGroup: () => Root,
+  RadioGroupIndicator: () => Indicator,
+  RadioGroupItem: () => Item,
+  RadioGroupItemBubbleInput: () => ItemBubbleInput,
+  RadioGroupItemProvider: () => ItemProvider,
+  RadioGroupItemTrigger: () => ItemTrigger,
+  Root: () => Root,
+  createRadioGroupScope: () => createRadioGroupScope
+});
+module.exports = __toCommonJS(RadioGroup_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_direction = require("./direction.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_Radio = require("./Radio.cjs");
+var RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+const RADIO_GROUP_NAME = "RadioGroup";
+const [createRadioGroupContext, createRadioGroupScope] = (0, import_context.createContextScope)(RADIO_GROUP_NAME, [
+  import_RovingFocusGroup.createRovingFocusGroupScope,
+  import_Radio.createRadioScope
+]);
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const useRadioScope = (0, import_Radio.createRadioScope)();
+const [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME);
+function Root(props) {
+  const slot = (0, import_internal.S)("RadioGroup.Root");
+  const {
+    __scopeRadioGroup,
+    name,
+    defaultValue,
+    value: valueProp,
+    required = false,
+    disabled = false,
+    orientation,
+    dir,
+    loop = true,
+    onValueChange,
+    ref: forwardedRef,
+    ...groupProps
+  } = props ?? {};
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup, (0, import_internal.subSlot)(slot, "rfs"));
+  const direction = (0, import_direction.useDirection)(dir);
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    { prop: valueProp, defaultProp: defaultValue ?? null, onChange: onValueChange },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  return (0, import_octane.createElement)(RadioGroupProvider, {
+    scope: __scopeRadioGroup,
+    name,
+    required,
+    disabled,
+    value,
+    onValueChange: setValue,
+    children: (0, import_octane.createElement)(RovingFocusGroup.Root, {
+      asChild: true,
+      ...rovingFocusGroupScope,
+      orientation,
+      dir: direction,
+      loop,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        role: "radiogroup",
+        "aria-required": required,
+        "aria-orientation": orientation,
+        "data-disabled": disabled ? "" : void 0,
+        dir: direction,
+        ...groupProps,
+        ref: forwardedRef
+      })
+    })
+  });
+}
+function ItemProvider(props) {
+  const slot = (0, import_internal.S)("RadioGroup.ItemProvider");
+  const { __scopeRadioGroup, value, disabled, children, internal_do_not_use_render } = props;
+  const context = useRadioGroupContext("RadioGroupItemProvider", __scopeRadioGroup);
+  const radioScope = useRadioScope(__scopeRadioGroup, (0, import_internal.subSlot)(slot, "radio"));
+  const isDisabled = context.disabled || disabled;
+  return (0, import_octane.createElement)(import_Radio.RadioProvider, {
+    ...radioScope,
+    checked: context.value === value,
+    disabled: isDisabled,
+    required: context.required,
+    name: context.name,
+    value,
+    onCheck: () => context.onValueChange(value),
+    internal_do_not_use_render,
+    children
+  });
+}
+function ItemTrigger(props) {
+  const slot = (0, import_internal.S)("RadioGroup.ItemTrigger");
+  const { __scopeRadioGroup, ref: forwardedRef, ...triggerProps } = props;
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup, (0, import_internal.subSlot)(slot, "rfs"));
+  const radioScope = useRadioScope(__scopeRadioGroup, (0, import_internal.subSlot)(slot, "radio"));
+  const { checked, disabled } = (0, import_Radio.useRadioContext)("RadioGroupItemTrigger", radioScope.__scopeRadio);
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
+  const isArrowKeyPressedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "arrow"));
+  (0, import_octane.useEffect)(
+    () => {
+      const handleKeyDown = (event) => {
+        if (ARROW_KEYS.includes(event.key)) {
+          isArrowKeyPressedRef.current = true;
+        }
+      };
+      const handleKeyUp = () => isArrowKeyPressedRef.current = false;
+      document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("keyup", handleKeyUp);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("keyup", handleKeyUp);
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:keys")
+  );
+  return (0, import_octane.createElement)(RovingFocusGroup.Item, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    focusable: !disabled,
+    active: checked,
+    children: (0, import_octane.createElement)(import_Radio.RadioTrigger, {
+      ...radioScope,
+      ...triggerProps,
+      ref: composedRefs,
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(triggerProps.onKeyDown, (event) => {
+        if (event.key === "Enter") event.preventDefault();
+      }),
+      onFocus: (0, import_compose_event_handlers.composeEventHandlers)(triggerProps.onFocus, () => {
+        if (isArrowKeyPressedRef.current) {
+          ref.current?.click();
+        }
+      })
+    })
+  });
+}
+function Item(props) {
+  const { __scopeRadioGroup, value, disabled, ref: forwardedRef, ...itemProps } = props ?? {};
+  return (0, import_octane.createElement)(ItemProvider, {
+    __scopeRadioGroup,
+    value,
+    disabled,
+    internal_do_not_use_render: ({ isFormControl }) => [
+      (0, import_octane.createElement)(ItemTrigger, {
+        key: "trigger",
+        ...itemProps,
+        ref: forwardedRef,
+        __scopeRadioGroup
+      }),
+      isFormControl ? (0, import_octane.createElement)(ItemBubbleInput, { key: "bubble", __scopeRadioGroup }) : null
+    ]
+  });
+}
+function ItemBubbleInput(props) {
+  const slot = (0, import_internal.S)("RadioGroup.ItemBubbleInput");
+  const { __scopeRadioGroup, ...bubbleProps } = props;
+  const radioScope = useRadioScope(__scopeRadioGroup, (0, import_internal.subSlot)(slot, "radio"));
+  return (0, import_octane.createElement)(import_Radio.RadioBubbleInput, { ...radioScope, ...bubbleProps });
+}
+function Indicator(props) {
+  const slot = (0, import_internal.S)("RadioGroup.Indicator");
+  const { __scopeRadioGroup, ...indicatorProps } = props ?? {};
+  const radioScope = useRadioScope(__scopeRadioGroup, (0, import_internal.subSlot)(slot, "radio"));
+  return (0, import_octane.createElement)(import_Radio.RadioIndicator, { ...radioScope, ...indicatorProps });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Indicator,
+  Item,
+  RadioGroup,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupItemBubbleInput,
+  RadioGroupItemProvider,
+  RadioGroupItemTrigger,
+  Root,
+  createRadioGroupScope
+});