@hanzogui/toggle-group 7.0.0 → 7.3.0

package/LICENSE

@@ -1,21 +1,42 @@
-MIT License
+BSD 3-Clause License
+
+Copyright (c) 2026-present, Hanzo AI, Inc.
+
+Portions of this software are derived from upstream code originally licensed under
+the MIT License, with the following copyright notices retained per its terms:
 
   Copyright (c) 2020 Nate Wienert
-  
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included in all
-  copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-  SOFTWARE.
+  Copyright (c) 2015-present, Nicolas Gallagher.
+  Copyright (c) 2015-present, Facebook, Inc.
+  Copyright (c) 2021 Radix
+  Copyright (c) 2017 Carmelo Pullara
+  Copyright (c) 2018 Framer B.V.
+  Copyright (c) 2022 WorkOS
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

package/dist/cjs/Toggle.cjs

@@ -0,0 +1,150 @@
+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 Toggle_exports = {};
+__export(Toggle_exports, {
+  Toggle: () => Toggle,
+  ToggleFrame: () => ToggleFrame
+});
+module.exports = __toCommonJS(Toggle_exports);
+var import_helpers = require("@hanzogui/helpers");
+var import_use_controllable_state = require("@hanzogui/use-controllable-state");
+var import_web = require("@hanzogui/web");
+var React = __toESM(require("react"), 1);
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const NAME = "Toggle";
+const ToggleFrame = (0, import_web.styled)(import_web.View, {
+  name: NAME,
+  render: "button",
+  context: import_context.context,
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        backgroundColor: "$background",
+        borderColor: "$borderColor",
+        borderWidth: 1,
+        margin: -1,
+        hoverStyle: {
+          backgroundColor: "$backgroundHover",
+          borderColor: "$borderColorHover"
+        },
+        pressStyle: {
+          backgroundColor: "$backgroundPress",
+          borderColor: "$borderColorPress"
+        },
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid",
+          zIndex: 10
+        }
+      }
+    },
+    size: {
+      "...size": (val, {
+        tokens
+      }) => {
+        if (!val) return;
+        return {
+          width: tokens.size[val],
+          height: tokens.size[val]
+        };
+      },
+      ":number": val => ({
+        width: val,
+        height: val
+      })
+    },
+    defaultActiveStyle: {
+      true: {
+        backgroundColor: "$backgroundActive",
+        hoverStyle: {
+          backgroundColor: "$backgroundActive"
+        },
+        focusStyle: {
+          backgroundColor: "$backgroundActive"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+}, {
+  accept: {
+    activeStyle: "style"
+  }
+});
+const Toggle = React.forwardRef(function Toggle2(props, forwardedRef) {
+  const {
+    active: activeProp,
+    activeStyle,
+    defaultActive = false,
+    onActiveChange,
+    activeTheme,
+    unstyled = false,
+    ...buttonProps
+  } = props;
+  const [active = false, setActive] = (0, import_use_controllable_state.useControllableState)({
+    prop: activeProp,
+    onChange: onActiveChange,
+    defaultProp: defaultActive
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleFrame, {
+    theme: activeTheme ?? null,
+    "aria-pressed": active,
+    "data-state": active ? "on" : "off",
+    "data-disabled": props.disabled ? "" : void 0,
+    unstyled,
+    ...(active && !activeStyle && !unstyled && {
+      defaultActiveStyle: true
+    }),
+    ...(active && activeStyle && {
+      ...activeStyle,
+      hoverStyle: activeStyle,
+      focusStyle: activeStyle
+    }),
+    ...buttonProps,
+    ref: forwardedRef,
+    onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, () => {
+      if (!props.disabled) {
+        setActive(prev => !prev);
+      }
+    })
+  });
+});

package/dist/cjs/Toggle.native.js

@@ -0,0 +1,159 @@
+"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 Toggle_exports = {};
+__export(Toggle_exports, {
+  Toggle: () => Toggle,
+  ToggleFrame: () => ToggleFrame
+});
+module.exports = __toCommonJS(Toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("@hanzogui/helpers");
+var import_use_controllable_state = require("@hanzogui/use-controllable-state");
+var import_web = require("@hanzogui/web");
+var React = __toESM(require("react"), 1);
+var import_context = require("./context.native.js");
+var NAME = "Toggle";
+var ToggleFrame = (0, import_web.styled)(import_web.View, {
+  name: NAME,
+  render: "button",
+  context: import_context.context,
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        backgroundColor: "$background",
+        borderColor: "$borderColor",
+        borderWidth: 1,
+        margin: -1,
+        hoverStyle: {
+          backgroundColor: "$backgroundHover",
+          borderColor: "$borderColorHover"
+        },
+        pressStyle: {
+          backgroundColor: "$backgroundPress",
+          borderColor: "$borderColorPress"
+        },
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid",
+          zIndex: 10
+        }
+      }
+    },
+    size: {
+      "...size": function (val, param) {
+        var {
+          tokens
+        } = param;
+        if (!val) return;
+        return {
+          width: tokens.size[val],
+          height: tokens.size[val]
+        };
+      },
+      ":number": function (val) {
+        return {
+          width: val,
+          height: val
+        };
+      }
+    },
+    defaultActiveStyle: {
+      true: {
+        backgroundColor: "$backgroundActive",
+        hoverStyle: {
+          backgroundColor: "$backgroundActive"
+        },
+        focusStyle: {
+          backgroundColor: "$backgroundActive"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+}, {
+  accept: {
+    activeStyle: "style"
+  }
+});
+var Toggle = /* @__PURE__ */React.forwardRef(function Toggle2(props, forwardedRef) {
+  var {
+    active: activeProp,
+    activeStyle,
+    defaultActive = false,
+    onActiveChange,
+    activeTheme,
+    unstyled = false,
+    ...buttonProps
+  } = props;
+  var [active = false, setActive] = (0, import_use_controllable_state.useControllableState)({
+    prop: activeProp,
+    onChange: onActiveChange,
+    defaultProp: defaultActive
+  });
+  var _props_onPress;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleFrame, {
+    theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
+    "aria-pressed": active,
+    "data-state": active ? "on" : "off",
+    "data-disabled": props.disabled ? "" : void 0,
+    unstyled,
+    ...(active && !activeStyle && !unstyled && {
+      defaultActiveStyle: true
+    }),
+    ...(active && activeStyle && {
+      ...activeStyle,
+      hoverStyle: activeStyle,
+      focusStyle: activeStyle
+    }),
+    ...buttonProps,
+    ref: forwardedRef,
+    onPress: (0, import_helpers.composeEventHandlers)((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function () {
+      if (!props.disabled) {
+        setActive(function (prev) {
+          return !prev;
+        });
+      }
+    })
+  });
+});
+//# sourceMappingURL=Toggle.native.js.map

package/dist/cjs/Toggle.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Toggle_exports","__export","Toggle","ToggleFrame","module","exports","import_jsx_runtime","require","import_helpers","import_use_controllable_state","import_web","React","__toESM","import_context","NAME","styled","View","name","render","context","variants","unstyled","false","size","alignItems","justifyContent","display","backgroundColor","borderColor","borderWidth","margin","hoverStyle","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","zIndex","...size","val","param","tokens","width","height",":number","defaultActiveStyle","true","focusStyle","defaultVariants","process","env","GUI_HEADLESS","accept","activeStyle","forwardRef","Toggle2","props","forwardedRef","active","activeProp","defaultActive","onActiveChange","activeTheme","buttonProps","setActive","useControllableState","prop","onChange","defaultProp","_props_onPress","jsx","theme","disabled","ref","onPress","composeEventHandlers","prev"],"sources":["../../src/Toggle.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/ToggleGroup.cjs

@@ -0,0 +1,245 @@
+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, {
+  ToggleGroup: () => ToggleGroup
+});
+module.exports = __toCommonJS(ToggleGroup_exports);
+var import_constants = require("@hanzogui/constants");
+var import_focusable = require("@hanzogui/focusable");
+var import_helpers = require("@hanzogui/helpers");
+var import_roving_focus = require("@hanzogui/roving-focus");
+var import_use_controllable_state = require("@hanzogui/use-controllable-state");
+var import_use_direction = require("@hanzogui/use-direction");
+var import_web = require("@hanzogui/web");
+var import_react = __toESM(require("react"), 1);
+var import_Toggle = require("./Toggle.cjs");
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const TOGGLE_GROUP_NAME = "ToggleGroup";
+const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
+const TOGGLE_GROUP_CONTEXT = "ToggleGroup";
+const {
+  Provider: ToggleGroupItemProvider
+} = (0, import_web.createStyledContext)();
+const {
+  Provider: ToggleGroupContext,
+  useStyledContext: useToggleGroupContext
+} = (0, import_web.createStyledContext)({});
+const ToggleGroupItem = import_Toggle.ToggleFrame.styleable((props, forwardedRef) => {
+  const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup);
+  const context = useToggleGroupContext(props.__scopeToggleGroup);
+  const toggleContext = import_context.context.useStyledContext(props.__scopeToggleGroup);
+  const active = valueContext?.value.includes(props.value);
+  const color = props.color || toggleContext.color;
+  const disabled = context.disabled || props.disabled || false;
+  const inner = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, {
+    ref: forwardedRef,
+    tabIndex: disabled ? -1 : 0,
+    ...props,
+    active,
+    disabled
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, {
+    scope: props.__scopeToggleGroup,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.context.Provider, {
+      color,
+      active,
+      children: context.rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        asChild: "except-style",
+        __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+        focusable: !disabled,
+        active,
+        children: inner
+      }) : inner
+    })
+  });
+});
+ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
+const ToggleGroupItemImpl = import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeToggleGroup,
+    value,
+    ...itemProps
+  } = props;
+  const valueContext = useToggleGroupValueContext(__scopeToggleGroup);
+  const singleProps = {
+    "aria-pressed": void 0
+  };
+  const typeProps = valueContext.type === "single" ? singleProps : void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Toggle.Toggle, {
+    ...typeProps,
+    ...itemProps,
+    ref: forwardedRef,
+    onActiveChange: pressed => {
+      if (pressed) {
+        valueContext.onItemActivate(value);
+      } else {
+        valueContext.onItemDeactivate(value);
+      }
+    }
+  });
+});
+const ToggleGroup = (0, import_helpers.withStaticProperties)(import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    type,
+    ...toggleGroupProps
+  } = props;
+  if (!import_constants.isWeb) {
+    import_react.default.useEffect(() => {
+      if (!props.id) return;
+      return (0, import_focusable.registerFocusable)(props.id, {
+        focus: () => {}
+      });
+    }, [props.id]);
+  }
+  if (type === "single") {
+    const singleProps = toggleGroupProps;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplSingle, {
+      ...singleProps,
+      ref: forwardedRef
+    });
+  }
+  if (type === "multiple") {
+    const multipleProps = toggleGroupProps;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplMultiple, {
+      ...multipleProps,
+      ref: forwardedRef
+    });
+  }
+  throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
+}), {
+  Item: ToggleGroupItem
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+const {
+  Provider: ToggleGroupValueProvider,
+  useStyledContext: useToggleGroupValueContext
+} = (0, import_web.createStyledContext)();
+const ToggleGroupImplSingle = import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {},
+    disableDeactivation = false,
+    children,
+    ...toggleGroupSingleProps
+  } = props;
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupValueProvider, {
+    scope: props.__scopeToggleGroup,
+    type: "single",
+    value: value ? [value] : [],
+    defaultValue: value,
+    onItemActivate: setValue,
+    onItemDeactivate: import_react.default.useCallback(() => disableDeactivation ? null : setValue(""), [setValue, disableDeactivation]),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImpl, {
+      ...toggleGroupSingleProps,
+      ref: forwardedRef,
+      children
+    })
+  });
+});
+const ToggleGroupImplMultiple = import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {},
+    disableDeactivation,
+    children,
+    ...toggleGroupMultipleProps
+  } = props;
+  const [value = [], setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  const handleButtonActivate = import_react.default.useCallback(itemValue => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
+  const handleButtonDeactivate = import_react.default.useCallback(itemValue => setValue((prevValue = []) => prevValue.filter(value2 => value2 !== itemValue)), [setValue]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupValueProvider, {
+    scope: props.__scopeToggleGroup,
+    type: "multiple",
+    value,
+    defaultValue: value,
+    onItemActivate: handleButtonActivate,
+    onItemDeactivate: handleButtonDeactivate,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImpl, {
+      ...toggleGroupMultipleProps,
+      ref: forwardedRef,
+      children
+    })
+  });
+});
+const ToggleGroupFrame = (0, import_web.styled)(import_web.View, {
+  name: TOGGLE_GROUP_NAME
+});
+const ToggleGroupImpl = ToggleGroupFrame.styleable((props, forwardedRef) => {
+  const {
+    __scopeToggleGroup,
+    disabled = false,
+    orientation = "horizontal",
+    dir,
+    rovingFocus = true,
+    loop = true,
+    color,
+    ...toggleGroupProps
+  } = props;
+  const direction = (0, import_use_direction.useDirection)(dir);
+  const content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupFrame, {
+    role: "group",
+    ref: forwardedRef,
+    "data-disabled": disabled ? "" : void 0,
+    ...toggleGroupProps
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupContext, {
+    scope: __scopeToggleGroup,
+    rovingFocus,
+    disabled,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.context.Provider, {
+      color,
+      children: rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+        asChild: "except-style",
+        __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+        orientation,
+        dir: direction,
+        loop,
+        children: content
+      }) : content
+    })
+  });
+});