@octanejs/radix 0.1.31 → 0.1.33

package/dist/cjs/Slot.cjs

@@ -0,0 +1,97 @@
+"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 Slot_exports = {};
+__export(Slot_exports, {
+  Slot: () => Slot,
+  Slottable: () => Slottable
+});
+module.exports = __toCommonJS(Slot_exports);
+var import_octane = require("octane");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_internal = require("./internal.cjs");
+function Slottable(props) {
+  return props.children;
+}
+function isSlottable(child) {
+  return (0, import_octane.isValidElement)(child) && child.type === Slottable;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className" || propName === "class") {
+      overrideProps[propName] = (0, import_octane.normalizeClass)([slotPropValue, childPropValue]);
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function Slot(props) {
+  const slot = (0, import_internal.S)("Slot");
+  const { children, ...slotProps } = props ?? {};
+  const childrenArray = import_octane.Children.toArray(children);
+  const slottable = childrenArray.find(isSlottable);
+  let targetChild = children;
+  if (!slottable && Array.isArray(children) && childrenArray.length === 1) {
+    targetChild = childrenArray[0];
+  }
+  let newChildren = null;
+  let hasSlottable = false;
+  if (slottable) {
+    hasSlottable = true;
+    const newElement = slottable.props.children;
+    newChildren = import_octane.Children.map(children, (child) => {
+      if (child === slottable) {
+        if (import_octane.Children.count(newElement) > 1) return import_octane.Children.only(null);
+        return (0, import_octane.isValidElement)(newElement) ? newElement.props.children : null;
+      }
+      return child;
+    });
+    targetChild = (0, import_octane.isValidElement)(newElement) ? (0, import_octane.cloneElement)(newElement, void 0, newChildren) : null;
+  }
+  const childIsElement = (0, import_octane.isValidElement)(targetChild);
+  const childRef = childIsElement ? targetChild.props?.ref : void 0;
+  const slotRef = slotProps.ref;
+  const composedRef = (0, import_compose_refs.useComposedRefs)(slotRef, childRef, (0, import_internal.subSlot)(slot, "refs"));
+  if (childIsElement) {
+    const merged = mergeProps(slotProps, targetChild.props ?? {});
+    merged.ref = slotRef !== void 0 ? composedRef : childRef;
+    if (hasSlottable) merged.children = newChildren;
+    return (0, import_octane.cloneElement)(targetChild, merged);
+  }
+  return import_octane.Children.count(targetChild) > 1 ? import_octane.Children.only(targetChild) : null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slot,
+  Slottable
+});

package/dist/cjs/Switch.cjs

@@ -0,0 +1,253 @@
+"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 Switch_exports = {};
+__export(Switch_exports, {
+  BubbleInput: () => BubbleInput,
+  Provider: () => Provider,
+  Root: () => Root,
+  Switch: () => Root,
+  SwitchBubbleInput: () => BubbleInput,
+  SwitchProvider: () => Provider,
+  SwitchThumb: () => Thumb,
+  SwitchTrigger: () => Trigger,
+  Thumb: () => Thumb,
+  Trigger: () => Trigger,
+  createSwitchScope: () => createSwitchScope
+});
+module.exports = __toCommonJS(Switch_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_Primitive = require("./Primitive.cjs");
+var import_use_previous = require("./use-previous.cjs");
+var import_use_size = require("./use-size.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+const SWITCH_NAME = "Switch";
+const [createSwitchContext, createSwitchScope] = (0, import_context.createContextScope)(SWITCH_NAME);
+const [SwitchProviderImpl, useSwitchContext] = createSwitchContext(SWITCH_NAME);
+function Provider(props) {
+  const slot = (0, import_internal.S)("Switch.Provider");
+  const {
+    __scopeSwitch,
+    checked: checkedProp,
+    children,
+    defaultChecked,
+    disabled,
+    form,
+    name,
+    onCheckedChange,
+    required,
+    value = "on",
+    internal_do_not_use_render
+  } = props ?? {};
+  const [checked, setChecked] = (0, import_useControllableState.useControllableState)(
+    { prop: checkedProp, defaultProp: defaultChecked ?? false, onChange: onCheckedChange },
+    (0, import_internal.subSlot)(slot, "checked")
+  );
+  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,
+    setChecked,
+    disabled,
+    control,
+    setControl,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    defaultChecked,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput
+  };
+  return (0, import_octane.createElement)(SwitchProviderImpl, {
+    scope: __scopeSwitch,
+    ...context,
+    children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+  });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Switch.Trigger");
+  const { __scopeSwitch, onClick, ref: forwardedRef, ...switchProps } = props ?? {};
+  const {
+    value,
+    disabled,
+    checked,
+    required,
+    setControl,
+    setChecked,
+    hasConsumerStoppedPropagationRef,
+    isFormControl,
+    bubbleInput
+  } = useSwitchContext("SwitchTrigger", __scopeSwitch);
+  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: "switch",
+    "aria-checked": checked,
+    "aria-required": required,
+    "data-state": getState(checked),
+    "data-disabled": disabled ? "" : void 0,
+    disabled,
+    value,
+    ...switchProps,
+    ref: composedRefs,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(onClick, (event) => {
+      setChecked((prevChecked) => !prevChecked);
+      if (bubbleInput && isFormControl) {
+        hasConsumerStoppedPropagationRef.current = event.cancelBubble;
+        if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+      }
+    })
+  });
+}
+function Root(props) {
+  const {
+    __scopeSwitch,
+    name,
+    checked,
+    defaultChecked,
+    required,
+    disabled,
+    value,
+    onCheckedChange,
+    form,
+    ref: forwardedRef,
+    ...switchProps
+  } = props ?? {};
+  return (0, import_octane.createElement)(Provider, {
+    __scopeSwitch,
+    checked,
+    defaultChecked,
+    disabled,
+    required,
+    onCheckedChange,
+    name,
+    form,
+    value,
+    internal_do_not_use_render: ({ isFormControl }) => [
+      (0, import_octane.createElement)(Trigger, {
+        key: "trigger",
+        ...switchProps,
+        ref: forwardedRef,
+        __scopeSwitch
+      }),
+      isFormControl ? (0, import_octane.createElement)(BubbleInput, { key: "bubble", __scopeSwitch }) : null
+    ]
+  });
+}
+function Thumb(props) {
+  const { __scopeSwitch, ...thumbProps } = props ?? {};
+  const context = useSwitchContext("SwitchThumb", __scopeSwitch);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
+    "data-state": getState(context.checked),
+    "data-disabled": context.disabled ? "" : void 0,
+    ...thumbProps
+  });
+}
+function BubbleInput(props) {
+  const slot = (0, import_internal.S)("Switch.BubbleInput");
+  const { __scopeSwitch, ref: forwardedRef, ...inputProps } = props ?? {};
+  const {
+    control,
+    hasConsumerStoppedPropagationRef,
+    checked,
+    required,
+    disabled,
+    name,
+    value,
+    form,
+    bubbleInput,
+    setBubbleInput
+  } = useSwitchContext("SwitchBubbleInput", __scopeSwitch);
+  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: "checkbox",
+    "aria-hidden": true,
+    // Live CONTROLLED checked (octane React-parity — see Checkbox.ts).
+    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 = {
+  BubbleInput,
+  Provider,
+  Root,
+  Switch,
+  SwitchBubbleInput,
+  SwitchProvider,
+  SwitchThumb,
+  SwitchTrigger,
+  Thumb,
+  Trigger,
+  createSwitchScope
+});

package/dist/cjs/Tabs.cjs

@@ -0,0 +1,195 @@
+"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 Tabs_exports = {};
+__export(Tabs_exports, {
+  Content: () => Content,
+  List: () => List,
+  Root: () => Root,
+  Tabs: () => Root,
+  Trigger: () => Trigger,
+  createTabsScope: () => createTabsScope
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.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 RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const [createTabsContext, createTabsScope] = (0, import_context.createContextScope)("Tabs", [
+  import_RovingFocusGroup.createRovingFocusGroupScope
+]);
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const [TabsProvider, useTabsContext] = createTabsContext("Tabs");
+function Root(props) {
+  const slot = (0, import_internal.S)("Tabs.Root");
+  const {
+    __scopeTabs,
+    value: valueProp,
+    onValueChange,
+    defaultValue,
+    orientation = "horizontal",
+    dir,
+    activationMode = "automatic",
+    ...tabsProps
+  } = props ?? {};
+  const direction = dir === "rtl" ? "rtl" : "ltr";
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    { prop: valueProp, onChange: onValueChange, defaultProp: defaultValue ?? "" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  return (0, import_octane.createElement)(TabsProvider, {
+    scope: __scopeTabs,
+    baseId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id")),
+    value,
+    onValueChange: setValue,
+    orientation,
+    dir: direction,
+    activationMode,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      dir: direction,
+      "data-orientation": orientation,
+      ...tabsProps
+    })
+  });
+}
+function List(props) {
+  const slot = (0, import_internal.S)("Tabs.List");
+  const { __scopeTabs, loop = true, ...listProps } = props ?? {};
+  const context = useTabsContext("TabsList", __scopeTabs);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs, (0, import_internal.subSlot)(slot, "rfs"));
+  return (0, import_octane.createElement)(RovingFocusGroup.Root, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    orientation: context.orientation,
+    dir: context.dir,
+    loop,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      role: "tablist",
+      "aria-orientation": context.orientation,
+      ...listProps
+    })
+  });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Tabs.Trigger");
+  const { __scopeTabs, value, disabled = false, ...triggerProps } = props ?? {};
+  const context = useTabsContext("TabsTrigger", __scopeTabs);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs, (0, import_internal.subSlot)(slot, "rfs"));
+  const triggerId = makeTriggerId(context.baseId, value);
+  const contentId = makeContentId(context.baseId, value);
+  const isSelected = value === context.value;
+  return (0, import_octane.createElement)(RovingFocusGroup.Item, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    focusable: !disabled,
+    active: isSelected,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+      type: "button",
+      role: "tab",
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-disabled": disabled ? "" : void 0,
+      disabled,
+      id: triggerId,
+      ...triggerProps,
+      onMouseDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onMouseDown, (event) => {
+        if (!disabled && event.button === 0 && event.ctrlKey === false) {
+          context.onValueChange(value);
+        } else {
+          event.preventDefault();
+        }
+      }),
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+        if ([" ", "Enter"].includes(event.key)) context.onValueChange(value);
+      }),
+      onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocus, () => {
+        const isAutomaticActivation = context.activationMode !== "manual";
+        if (!isSelected && !disabled && isAutomaticActivation) {
+          context.onValueChange(value);
+        }
+      })
+    })
+  });
+}
+function Content(props) {
+  const slot = (0, import_internal.S)("Tabs.Content");
+  const { __scopeTabs, value, forceMount, children, ...contentProps } = props ?? {};
+  const context = useTabsContext("TabsContent", __scopeTabs);
+  const triggerId = makeTriggerId(context.baseId, value);
+  const contentId = makeContentId(context.baseId, value);
+  const isSelected = value === context.value;
+  const isMountAnimationPreventedRef = (0, import_octane.useRef)(isSelected, (0, import_internal.subSlot)(slot, "prevent"));
+  (0, import_octane.useEffect)(
+    () => {
+      const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+      return () => cancelAnimationFrame(rAF);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:mount")
+  );
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || isSelected,
+    children: ({ present }) => (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      "data-state": isSelected ? "active" : "inactive",
+      "data-orientation": context.orientation,
+      role: "tabpanel",
+      "aria-labelledby": triggerId,
+      hidden: !present,
+      id: contentId,
+      tabIndex: 0,
+      ...contentProps,
+      style: {
+        ...props.style,
+        animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
+      },
+      children: present ? children : null
+    })
+  });
+}
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Content,
+  List,
+  Root,
+  Tabs,
+  Trigger,
+  createTabsScope
+});