@octanejs/radix 0.1.32 → 0.1.33

package/dist/cjs/Toggle.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 Toggle_exports = {};
+__export(Toggle_exports, {
+  Root: () => Toggle,
+  Toggle: () => Toggle
+});
+module.exports = __toCommonJS(Toggle_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+function Toggle(props) {
+  const slot = (0, import_internal.S)("Toggle");
+  const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props ?? {};
+  const [pressed, setPressed] = (0, import_useControllableState.useControllableState)(
+    { prop: pressedProp, onChange: onPressedChange, defaultProp: defaultPressed ?? false },
+    (0, import_internal.subSlot)(slot, "pressed")
+  );
+  return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+    type: "button",
+    "aria-pressed": pressed,
+    "data-state": pressed ? "on" : "off",
+    "data-disabled": props?.disabled ? "" : void 0,
+    ...buttonProps,
+    onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, () => {
+      if (!props?.disabled) {
+        setPressed(!pressed);
+      }
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Root,
+  Toggle
+});

package/dist/cjs/ToggleGroup.cjs

@@ -0,0 +1,174 @@
+"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 ToggleGroup_exports = {};
+__export(ToggleGroup_exports, {
+  Item: () => Item,
+  Root: () => Root,
+  ToggleGroup: () => Root,
+  ToggleGroupItem: () => Item,
+  createToggleGroupScope: () => createToggleGroupScope
+});
+module.exports = __toCommonJS(ToggleGroup_exports);
+var import_octane = require("octane");
+var import_context = require("./context.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var import_Toggle = require("./Toggle.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+const [createToggleGroupContext, createToggleGroupScope] = (0, import_context.createContextScope)("ToggleGroup", [
+  import_RovingFocusGroup.createRovingFocusGroupScope
+]);
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext("ToggleGroup");
+const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext("ToggleGroup");
+function Root(props) {
+  const { type, ...toggleGroupProps } = props ?? {};
+  if (type === "single") {
+    return (0, import_octane.createElement)(ImplSingle, { role: "radiogroup", ...toggleGroupProps });
+  }
+  if (type === "multiple") {
+    return (0, import_octane.createElement)(ImplMultiple, { role: "toolbar", ...toggleGroupProps });
+  }
+  throw new Error("Missing prop `type` expected on `ToggleGroup`");
+}
+function ImplSingle(props) {
+  const slot = (0, import_internal.S)("ToggleGroup.Single");
+  const { value: valueProp, defaultValue, onValueChange = () => {
+  }, ...rest } = props;
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    { prop: valueProp, defaultProp: defaultValue ?? "", onChange: onValueChange },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  return (0, import_octane.createElement)(ToggleGroupValueProvider, {
+    scope: props.__scopeToggleGroup,
+    type: "single",
+    value: (0, import_octane.useMemo)(() => value ? [value] : [], [value], (0, import_internal.subSlot)(slot, "arr")),
+    onItemActivate: setValue,
+    onItemDeactivate: (0, import_octane.useCallback)(() => setValue(""), [setValue], (0, import_internal.subSlot)(slot, "off")),
+    children: (0, import_octane.createElement)(Impl, rest)
+  });
+}
+function ImplMultiple(props) {
+  const slot = (0, import_internal.S)("ToggleGroup.Multiple");
+  const { value: valueProp, defaultValue, onValueChange = () => {
+  }, ...rest } = props;
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    { prop: valueProp, defaultProp: defaultValue ?? [], onChange: onValueChange },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const handleButtonActivate = (0, import_octane.useCallback)(
+    (itemValue) => setValue((prev = []) => [...prev, itemValue]),
+    [setValue],
+    (0, import_internal.subSlot)(slot, "on")
+  );
+  const handleButtonDeactivate = (0, import_octane.useCallback)(
+    (itemValue) => setValue((prev = []) => prev.filter((v) => v !== itemValue)),
+    [setValue],
+    (0, import_internal.subSlot)(slot, "off")
+  );
+  return (0, import_octane.createElement)(ToggleGroupValueProvider, {
+    scope: props.__scopeToggleGroup,
+    type: "multiple",
+    value,
+    onItemActivate: handleButtonActivate,
+    onItemDeactivate: handleButtonDeactivate,
+    children: (0, import_octane.createElement)(Impl, rest)
+  });
+}
+function Impl(props) {
+  const slot = (0, import_internal.S)("ToggleGroup.Impl");
+  const {
+    __scopeToggleGroup,
+    disabled = false,
+    rovingFocus = true,
+    orientation,
+    dir,
+    loop = true,
+    ...toggleGroupProps
+  } = props;
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup, (0, import_internal.subSlot)(slot, "rfs"));
+  const direction = dir === "rtl" ? "rtl" : "ltr";
+  const commonProps = { dir: direction, ...toggleGroupProps };
+  return (0, import_octane.createElement)(ToggleGroupContext, {
+    scope: __scopeToggleGroup,
+    rovingFocus,
+    disabled,
+    children: rovingFocus ? (0, import_octane.createElement)(RovingFocusGroup.Root, {
+      asChild: true,
+      ...rovingFocusGroupScope,
+      orientation,
+      dir: direction,
+      loop,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, commonProps)
+    }) : (0, import_octane.createElement)(import_Primitive.Primitive.div, commonProps)
+  });
+}
+function Item(props) {
+  const slot = (0, import_internal.S)("ToggleGroup.Item");
+  const valueContext = useToggleGroupValueContext("ToggleGroupItem", props?.__scopeToggleGroup);
+  const context = useToggleGroupContext("ToggleGroupItem", props?.__scopeToggleGroup);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(
+    props?.__scopeToggleGroup,
+    (0, import_internal.subSlot)(slot, "rfs")
+  );
+  const pressed = valueContext.value.includes(props.value);
+  const disabled = context.disabled || props.disabled;
+  const commonProps = { ...props, pressed, disabled };
+  return context.rovingFocus ? (0, import_octane.createElement)(RovingFocusGroup.Item, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    focusable: !disabled,
+    active: pressed,
+    children: (0, import_octane.createElement)(ItemImpl, commonProps)
+  }) : (0, import_octane.createElement)(ItemImpl, commonProps);
+}
+function ItemImpl(props) {
+  const { __scopeToggleGroup, value, ...itemProps } = props;
+  const valueContext = useToggleGroupValueContext("ToggleGroupItem", __scopeToggleGroup);
+  const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
+  const typeProps = valueContext.type === "single" ? singleProps : void 0;
+  return (0, import_octane.createElement)(import_Toggle.Toggle, {
+    ...typeProps,
+    ...itemProps,
+    onPressedChange: (pressed) => {
+      if (pressed) valueContext.onItemActivate(value);
+      else valueContext.onItemDeactivate(value);
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Item,
+  Root,
+  ToggleGroup,
+  ToggleGroupItem,
+  createToggleGroupScope
+});

package/dist/cjs/Toolbar.cjs

@@ -0,0 +1,165 @@
+"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 Toolbar_exports = {};
+__export(Toolbar_exports, {
+  Button: () => Button,
+  Link: () => Link,
+  Root: () => Root,
+  Separator: () => Separator,
+  ToggleGroup: () => ToggleGroup,
+  ToggleItem: () => ToggleItem,
+  Toolbar: () => Root,
+  ToolbarButton: () => Button,
+  ToolbarLink: () => Link,
+  createToolbarScope: () => createToolbarScope
+});
+module.exports = __toCommonJS(Toolbar_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_Primitive = require("./Primitive.cjs");
+var RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var SeparatorPrimitive = __toESM(require("./Separator.cjs"), 1);
+var ToggleGroupPrimitive = __toESM(require("./ToggleGroup.cjs"), 1);
+var import_ToggleGroup = require("./ToggleGroup.cjs");
+const [createToolbarContext, createToolbarScope] = (0, import_context.createContextScope)("Toolbar", [
+  import_RovingFocusGroup.createRovingFocusGroupScope,
+  import_ToggleGroup.createToggleGroupScope
+]);
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const useToggleGroupScope = (0, import_ToggleGroup.createToggleGroupScope)();
+const [ToolbarProvider, useToolbarContext] = createToolbarContext("Toolbar");
+function Root(props) {
+  const slot = (0, import_internal.S)("Toolbar.Root");
+  const {
+    __scopeToolbar,
+    orientation = "horizontal",
+    dir,
+    loop = true,
+    ...toolbarProps
+  } = props ?? {};
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar, (0, import_internal.subSlot)(slot, "rfs"));
+  const direction = dir === "rtl" ? "rtl" : "ltr";
+  return (0, import_octane.createElement)(ToolbarProvider, {
+    scope: __scopeToolbar,
+    orientation,
+    dir: direction,
+    children: (0, import_octane.createElement)(RovingFocusGroup.Root, {
+      asChild: true,
+      ...rovingFocusGroupScope,
+      orientation,
+      dir: direction,
+      loop,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        role: "toolbar",
+        "aria-orientation": orientation,
+        dir: direction,
+        ...toolbarProps
+      })
+    })
+  });
+}
+function Separator(props) {
+  const { __scopeToolbar, ...separatorProps } = props ?? {};
+  const context = useToolbarContext("ToolbarSeparator", __scopeToolbar);
+  return (0, import_octane.createElement)(SeparatorPrimitive.Root, {
+    orientation: context.orientation === "horizontal" ? "vertical" : "horizontal",
+    ...separatorProps
+  });
+}
+function Button(props) {
+  const slot = (0, import_internal.S)("Toolbar.Button");
+  const { __scopeToolbar, ...buttonProps } = props ?? {};
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar, (0, import_internal.subSlot)(slot, "rfs"));
+  return (0, import_octane.createElement)(RovingFocusGroup.Item, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    focusable: !props?.disabled,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.button, { type: "button", ...buttonProps })
+  });
+}
+function Link(props) {
+  const slot = (0, import_internal.S)("Toolbar.Link");
+  const { __scopeToolbar, ...linkProps } = props ?? {};
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar, (0, import_internal.subSlot)(slot, "rfs"));
+  return (0, import_octane.createElement)(RovingFocusGroup.Item, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    focusable: true,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.a, {
+      ...linkProps,
+      onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+        if (event.key === " ") event.currentTarget.click();
+      })
+    })
+  });
+}
+function ToggleGroup(props) {
+  const slot = (0, import_internal.S)("Toolbar.ToggleGroup");
+  const { __scopeToolbar, ...toggleGroupProps } = props ?? {};
+  const context = useToolbarContext("ToolbarToggleGroup", __scopeToolbar);
+  const toggleGroupScope = useToggleGroupScope(__scopeToolbar, (0, import_internal.subSlot)(slot, "tgs"));
+  return (0, import_octane.createElement)(ToggleGroupPrimitive.Root, {
+    "data-orientation": context.orientation,
+    dir: context.dir,
+    ...toggleGroupScope,
+    ...toggleGroupProps,
+    // The toolbar is the roving group; the embedded toggle group must not compete.
+    rovingFocus: false
+  });
+}
+function ToggleItem(props) {
+  const slot = (0, import_internal.S)("Toolbar.ToggleItem");
+  const { __scopeToolbar, ...toggleItemProps } = props ?? {};
+  const toggleGroupScope = useToggleGroupScope(__scopeToolbar, (0, import_internal.subSlot)(slot, "tgs"));
+  const scope = { __scopeToolbar };
+  return (0, import_octane.createElement)(Button, {
+    asChild: true,
+    ...scope,
+    children: (0, import_octane.createElement)(ToggleGroupPrimitive.Item, {
+      ...toggleGroupScope,
+      ...toggleItemProps
+    })
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Link,
+  Root,
+  Separator,
+  ToggleGroup,
+  ToggleItem,
+  Toolbar,
+  ToolbarButton,
+  ToolbarLink,
+  createToolbarScope
+});