@octanejs/radix 0.1.32 → 0.1.34

package/dist/cjs/AccessibleIcon.cjs

@@ -0,0 +1,56 @@
+"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 AccessibleIcon_exports = {};
+__export(AccessibleIcon_exports, {
+  AccessibleIcon: () => Root,
+  Root: () => Root
+});
+module.exports = __toCommonJS(AccessibleIcon_exports);
+var import_octane = require("octane");
+var VisuallyHiddenPrimitive = __toESM(require("./VisuallyHidden.cjs"), 1);
+function Root(props) {
+  const { children, label } = props ?? {};
+  const array = import_octane.Children.toArray(children);
+  const child = array.length === 1 ? array[0] : import_octane.Children.only(children);
+  return [
+    (0, import_octane.cloneElement)(child, {
+      // accessibility
+      "aria-hidden": "true",
+      focusable: "false",
+      // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+      key: "icon"
+    }),
+    (0, import_octane.createElement)(VisuallyHiddenPrimitive.Root, { key: "label", children: label })
+  ];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccessibleIcon,
+  Root
+});

package/dist/cjs/Accordion.cjs

@@ -0,0 +1,272 @@
+"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 Accordion_exports = {};
+__export(Accordion_exports, {
+  Accordion: () => Root,
+  Content: () => Content,
+  Header: () => Header,
+  Item: () => Item,
+  Root: () => Root,
+  Trigger: () => Trigger,
+  createAccordionScope: () => createAccordionScope
+});
+module.exports = __toCommonJS(Accordion_exports);
+var import_octane = require("octane");
+var Collapsible = __toESM(require("./Collapsible.cjs"), 1);
+var import_Collapsible = require("./Collapsible.cjs");
+var import_collection = require("./collection.cjs");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_useId = require("./useId.cjs");
+const ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const [Collection, useCollection] = (0, import_collection.createCollection)("Accordion");
+const [createAccordionContext, createAccordionScope] = (0, import_context.createContextScope)("Accordion", [
+  import_Collapsible.createCollapsibleScope
+]);
+const useCollapsibleScope = (0, import_Collapsible.createCollapsibleScope)();
+const [AccordionValueProvider, useAccordionValueContext] = createAccordionContext("Accordion");
+const [AccordionImplProvider, useAccordionImplContext] = createAccordionContext("Accordion");
+const [AccordionItemProvider, useAccordionItemContext] = createAccordionContext("AccordionItem");
+function getState(open) {
+  return open ? "open" : "closed";
+}
+function Root(props) {
+  const slot = (0, import_internal.S)("Accordion.Root");
+  const {
+    __scopeAccordion,
+    type,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    collapsible = false,
+    disabled,
+    dir,
+    orientation = "vertical",
+    ...rest
+  } = props ?? {};
+  const isMultiple = type === "multiple";
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    {
+      prop: valueProp,
+      defaultProp: defaultValue ?? (isMultiple ? [] : void 0),
+      onChange: onValueChange
+    },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const valueArray = isMultiple ? value ?? [] : value != null && value !== "" ? [value] : [];
+  const onItemOpen = (0, import_octane.useCallback)(
+    (itemValue) => {
+      if (isMultiple) setValue((prev) => [...prev ?? [], itemValue]);
+      else setValue(itemValue);
+    },
+    [isMultiple],
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  const onItemClose = (0, import_octane.useCallback)(
+    (itemValue) => {
+      if (isMultiple) setValue((prev) => (prev ?? []).filter((v) => v !== itemValue));
+      else if (collapsible) setValue("");
+    },
+    [isMultiple, collapsible],
+    (0, import_internal.subSlot)(slot, "close")
+  );
+  return (0, import_octane.createElement)(Collection.Provider, {
+    scope: __scopeAccordion,
+    children: (0, import_octane.createElement)(AccordionValueProvider, {
+      scope: __scopeAccordion,
+      value: valueArray,
+      onItemOpen,
+      onItemClose,
+      children: (0, import_octane.createElement)(AccordionImplProvider, {
+        scope: __scopeAccordion,
+        disabled,
+        orientation,
+        collapsible,
+        isMultiple,
+        children: (0, import_octane.createElement)(AccordionImpl, {
+          __scopeAccordion,
+          disabled,
+          dir,
+          orientation,
+          ...rest
+        })
+      })
+    })
+  });
+}
+function AccordionImpl(props) {
+  const slot = (0, import_internal.S)("Accordion.Impl");
+  const { __scopeAccordion, disabled, dir, orientation, ...accordionProps } = props;
+  const getItems = useCollection(__scopeAccordion, (0, import_internal.subSlot)(slot, "items"));
+  const isDirectionLTR = (dir ?? "ltr") === "ltr";
+  const handleKeyDown = (0, import_compose_event_handlers.composeEventHandlers)(accordionProps.onKeyDown, (event) => {
+    if (!ACCORDION_KEYS.includes(event.key)) return;
+    const target = event.target;
+    const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
+    const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
+    const triggerCount = triggerCollection.length;
+    if (triggerIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = triggerIndex;
+    const homeIndex = 0;
+    const endIndex = triggerCount - 1;
+    const moveNext = () => {
+      nextIndex = triggerIndex + 1;
+      if (nextIndex > endIndex) nextIndex = homeIndex;
+    };
+    const movePrev = () => {
+      nextIndex = triggerIndex - 1;
+      if (nextIndex < homeIndex) nextIndex = endIndex;
+    };
+    switch (event.key) {
+      case "Home":
+        nextIndex = homeIndex;
+        break;
+      case "End":
+        nextIndex = endIndex;
+        break;
+      case "ArrowRight":
+        if (orientation === "horizontal") {
+          if (isDirectionLTR) moveNext();
+          else movePrev();
+        }
+        break;
+      case "ArrowDown":
+        if (orientation === "vertical") moveNext();
+        break;
+      case "ArrowLeft":
+        if (orientation === "horizontal") {
+          if (isDirectionLTR) movePrev();
+          else moveNext();
+        }
+        break;
+      case "ArrowUp":
+        if (orientation === "vertical") movePrev();
+        break;
+    }
+    triggerCollection[nextIndex % triggerCount].ref.current?.focus();
+  });
+  return (0, import_octane.createElement)(Collection.Slot, {
+    scope: __scopeAccordion,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      ...accordionProps,
+      "data-orientation": orientation,
+      onKeyDown: disabled ? void 0 : handleKeyDown
+    })
+  });
+}
+function Item(props) {
+  const slot = (0, import_internal.S)("Accordion.Item");
+  const { __scopeAccordion, value: itemValue, disabled: itemDisabled, ...rest } = props ?? {};
+  const impl = useAccordionImplContext("AccordionItem", __scopeAccordion);
+  const valueCtx = useAccordionValueContext("AccordionItem", __scopeAccordion);
+  const collapsibleScope = useCollapsibleScope(__scopeAccordion, (0, import_internal.subSlot)(slot, "cscope"));
+  const triggerId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
+  const open = itemValue != null && valueCtx.value.includes(itemValue) || false;
+  const disabled = impl.disabled || itemDisabled || false;
+  return (0, import_octane.createElement)(AccordionItemProvider, {
+    scope: __scopeAccordion,
+    open,
+    disabled,
+    triggerId,
+    children: (0, import_octane.createElement)(Collapsible.Root, {
+      "data-orientation": impl.orientation,
+      "data-state": getState(open),
+      ...collapsibleScope,
+      ...rest,
+      disabled,
+      open,
+      onOpenChange: (isOpen) => {
+        if (isOpen) valueCtx.onItemOpen(itemValue);
+        else valueCtx.onItemClose(itemValue);
+      }
+    })
+  });
+}
+function Header(props) {
+  const { __scopeAccordion, ...rest } = props ?? {};
+  const impl = useAccordionImplContext("AccordionHeader", __scopeAccordion);
+  const item = useAccordionItemContext("AccordionHeader", __scopeAccordion);
+  return (0, import_octane.createElement)(import_Primitive.Primitive.h3, {
+    "data-orientation": impl.orientation,
+    "data-state": getState(item.open),
+    "data-disabled": item.disabled ? "" : void 0,
+    ...rest
+  });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("Accordion.Trigger");
+  const { __scopeAccordion, ...rest } = props ?? {};
+  const impl = useAccordionImplContext("AccordionTrigger", __scopeAccordion);
+  const item = useAccordionItemContext("AccordionTrigger", __scopeAccordion);
+  const collapsibleScope = useCollapsibleScope(__scopeAccordion, (0, import_internal.subSlot)(slot, "cscope"));
+  const ariaDisabled = item.open && !impl.isMultiple && !impl.collapsible || void 0;
+  return (0, import_octane.createElement)(Collection.ItemSlot, {
+    scope: __scopeAccordion,
+    children: (0, import_octane.createElement)(Collapsible.Trigger, {
+      "aria-disabled": ariaDisabled,
+      "data-orientation": impl.orientation,
+      id: item.triggerId,
+      ...collapsibleScope,
+      ...rest
+    })
+  });
+}
+function Content(props) {
+  const slot = (0, import_internal.S)("Accordion.Content");
+  const { __scopeAccordion, style, ...rest } = props ?? {};
+  const impl = useAccordionImplContext("AccordionContent", __scopeAccordion);
+  const item = useAccordionItemContext("AccordionContent", __scopeAccordion);
+  const collapsibleScope = useCollapsibleScope(__scopeAccordion, (0, import_internal.subSlot)(slot, "cscope"));
+  return (0, import_octane.createElement)(Collapsible.Content, {
+    role: "region",
+    "aria-labelledby": item.triggerId,
+    "data-orientation": impl.orientation,
+    ...collapsibleScope,
+    ...rest,
+    style: {
+      "--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
+      "--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
+      ...style
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Content,
+  Header,
+  Item,
+  Root,
+  Trigger,
+  createAccordionScope
+});

package/dist/cjs/AlertDialog.cjs

@@ -0,0 +1,144 @@
+"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 AlertDialog_exports = {};
+__export(AlertDialog_exports, {
+  Action: () => Action,
+  AlertDialog: () => Root,
+  Cancel: () => Cancel,
+  Content: () => Content,
+  Description: () => Description,
+  Overlay: () => Overlay,
+  Portal: () => Portal,
+  Root: () => Root,
+  Title: () => Title,
+  Trigger: () => Trigger,
+  createAlertDialogScope: () => createAlertDialogScope
+});
+module.exports = __toCommonJS(AlertDialog_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 DialogPrimitive = __toESM(require("./Dialog.cjs"), 1);
+var import_Dialog = require("./Dialog.cjs");
+var import_internal = require("./internal.cjs");
+const [createAlertDialogContext, createAlertDialogScope] = (0, import_context.createContextScope)("AlertDialog", [
+  import_Dialog.createDialogScope
+]);
+const useDialogScope = (0, import_Dialog.createDialogScope)();
+const [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext("AlertDialogContent");
+function Root(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Root");
+  const { __scopeAlertDialog, ...alertDialogProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Root, { ...dialogScope, ...alertDialogProps, modal: true });
+}
+function Trigger(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Trigger");
+  const { __scopeAlertDialog, ...triggerProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Trigger, { ...dialogScope, ...triggerProps });
+}
+function Portal(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Portal");
+  const { __scopeAlertDialog, ...portalProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Portal, { ...dialogScope, ...portalProps });
+}
+function Overlay(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Overlay");
+  const { __scopeAlertDialog, ...overlayProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Overlay, { ...dialogScope, ...overlayProps });
+}
+function Content(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Content");
+  const { __scopeAlertDialog, children, ref: forwardedRef, ...contentProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "content"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef, (0, import_internal.subSlot)(slot, "refs"));
+  const cancelRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "cancel"));
+  return (0, import_octane.createElement)(AlertDialogContentProvider, {
+    scope: __scopeAlertDialog,
+    cancelRef,
+    children: (0, import_octane.createElement)(DialogPrimitive.Content, {
+      role: "alertdialog",
+      ...dialogScope,
+      ...contentProps,
+      ref: composedRefs,
+      onOpenAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(contentProps.onOpenAutoFocus, (event) => {
+        event.preventDefault();
+        cancelRef.current?.focus({ preventScroll: true });
+      }),
+      onPointerDownOutside: (event) => event.preventDefault(),
+      onInteractOutside: (event) => event.preventDefault(),
+      children
+    })
+  });
+}
+function Title(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Title");
+  const { __scopeAlertDialog, ...titleProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Title, { ...dialogScope, ...titleProps });
+}
+function Description(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Description");
+  const { __scopeAlertDialog, ...descriptionProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Description, { ...dialogScope, ...descriptionProps });
+}
+function Action(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Action");
+  const { __scopeAlertDialog, ...actionProps } = props ?? {};
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  return (0, import_octane.createElement)(DialogPrimitive.Close, { ...dialogScope, ...actionProps });
+}
+function Cancel(props) {
+  const slot = (0, import_internal.S)("AlertDialog.Cancel");
+  const { __scopeAlertDialog, ref: forwardedRef, ...cancelProps } = props ?? {};
+  const { cancelRef } = useAlertDialogContentContext("AlertDialogCancel", __scopeAlertDialog);
+  const dialogScope = useDialogScope(__scopeAlertDialog, (0, import_internal.subSlot)(slot, "scope"));
+  const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, cancelRef, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)(DialogPrimitive.Close, { ...dialogScope, ...cancelProps, ref });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action,
+  AlertDialog,
+  Cancel,
+  Content,
+  Description,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger,
+  createAlertDialogScope
+});

package/dist/cjs/Arrow.cjs

@@ -0,0 +1,43 @@
+"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 Arrow_exports = {};
+__export(Arrow_exports, {
+  Arrow: () => Arrow,
+  Root: () => Arrow
+});
+module.exports = __toCommonJS(Arrow_exports);
+var import_octane = require("octane");
+var import_Primitive = require("./Primitive.cjs");
+function Arrow(props) {
+  const { children, width = 10, height = 5, ...arrowProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.svg, {
+    ...arrowProps,
+    width,
+    height,
+    viewBox: "0 0 30 10",
+    preserveAspectRatio: "none",
+    // We use their children if they're slotting to replace the whole svg.
+    children: props?.asChild ? children : (0, import_octane.createElement)("polygon", { points: "0,0 30,0 15,10" })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Arrow,
+  Root
+});

package/dist/cjs/AspectRatio.cjs

@@ -0,0 +1,56 @@
+"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 AspectRatio_exports = {};
+__export(AspectRatio_exports, {
+  AspectRatio: () => AspectRatio,
+  Root: () => AspectRatio
+});
+module.exports = __toCommonJS(AspectRatio_exports);
+var import_octane = require("octane");
+var import_Primitive = require("./Primitive.cjs");
+function AspectRatio(props) {
+  const { ratio = 1 / 1, style, ...aspectRatioProps } = props ?? {};
+  return (0, import_octane.createElement)("div", {
+    style: {
+      // ensures inner element is contained
+      position: "relative",
+      // ensures padding bottom trick maths works
+      width: "100%",
+      paddingBottom: `${100 / ratio}%`
+    },
+    "data-radix-aspect-ratio-wrapper": "",
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+      ...aspectRatioProps,
+      style: {
+        ...style,
+        // ensures children expand in ratio
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      }
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AspectRatio,
+  Root
+});