@tamagui/toggle-group 2.7.7 → 3.0.0-beta.637.1

package/dist/cjs/ToggleGroup.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,37 +6,29 @@ 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
-  });
+	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;
+	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
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ToggleGroup_exports = {};
-__export(ToggleGroup_exports, {
-  ToggleGroup: () => ToggleGroup
-});
+__export(ToggleGroup_exports, { ToggleGroup: () => ToggleGroup });
 module.exports = __toCommonJS(ToggleGroup_exports);
+var import_compose_refs = require("@tamagui/compose-refs");
 var import_constants = require("@tamagui/constants");
 var import_focusable = require("@tamagui/focusable");
 var import_helpers = require("@tamagui/helpers");
@@ -50,196 +43,150 @@ 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
-    })
-  });
+const { Provider: ToggleGroupItemProvider } = (0, import_web.createStyledContext)();
+const { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = (0, import_web.createStyledContext)({});
+const ToggleGroupItem = (0, import_web.createStyledHOC)(import_Toggle.ToggleFrame, (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,
+				tabIndex: disabled ? -1 : 0,
+				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
+const ToggleGroupItemImpl = (0, import_compose_refs.createRefComponent)((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)((0, import_compose_refs.createRefComponent)((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 { Provider: ToggleGroupValueProvider, useStyledContext: useToggleGroupValueContext } = (0, import_web.createStyledContext)();
+const ToggleGroupImplSingle = (0, import_compose_refs.createRefComponent)((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 ToggleGroupImplMultiple = (0, import_compose_refs.createRefComponent)((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 ToggleGroupFrame = (0, import_web.styled)(import_web.View, { displayName: TOGGLE_GROUP_NAME });
+const ToggleGroupImpl = (0, import_web.createStyledHOC)(ToggleGroupFrame, (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
+		})
+	});
 });
-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
-    })
-  });
-});

package/dist/cjs/ToggleGroup.native.cjs

@@ -0,0 +1,208 @@
+"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(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_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_focusable = require("@tamagui/focusable");
+var import_helpers = require("@tamagui/helpers");
+var import_roving_focus = require("@tamagui/roving-focus");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_use_direction = require("@tamagui/use-direction");
+var import_web = require("@tamagui/web");
+var import_react = __toESM(require("react"), 1);
+var import_Toggle = require("./Toggle.native.js");
+var import_context = require("./context.native.js");
+var TOGGLE_GROUP_NAME = "ToggleGroup";
+var TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
+var TOGGLE_GROUP_CONTEXT = "ToggleGroup";
+var { Provider: ToggleGroupItemProvider } = (0, import_web.createStyledContext)();
+var { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = (0, import_web.createStyledContext)({});
+var ToggleGroupItem = (0, import_web.createStyledHOC)(import_Toggle.ToggleFrame, function(props, forwardedRef) {
+	var valueContext = useToggleGroupValueContext(props.__scopeToggleGroup);
+	var context = useToggleGroupContext(props.__scopeToggleGroup);
+	var toggleContext = import_context.context.useStyledContext(props.__scopeToggleGroup);
+	var active = valueContext === null || valueContext === void 0 ? void 0 : valueContext.value.includes(props.value);
+	var color = props.color || toggleContext.color;
+	var disabled = context.disabled || props.disabled || false;
+	var 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,
+				tabIndex: disabled ? -1 : 0,
+				active,
+				children: inner
+			}) : inner
+		})
+	});
+});
+ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
+var ToggleGroupItemImpl = (0, import_compose_refs.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeToggleGroup, value, ...itemProps } = props;
+	var valueContext = useToggleGroupValueContext(__scopeToggleGroup);
+	var singleProps = { "aria-pressed": void 0 };
+	var typeProps = valueContext.type === "single" ? singleProps : void 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Toggle.Toggle, {
+		...typeProps,
+		...itemProps,
+		ref: forwardedRef,
+		onActiveChange: function(pressed) {
+			if (pressed) {
+				valueContext.onItemActivate(value);
+			} else {
+				valueContext.onItemDeactivate(value);
+			}
+		}
+	});
+});
+var ToggleGroup = (0, import_helpers.withStaticProperties)((0, import_compose_refs.createRefComponent)(function(props, forwardedRef) {
+	var { type, ...toggleGroupProps } = props;
+	if (!import_constants.isWeb) {
+		import_react.default.useEffect(function() {
+			if (!props.id) return;
+			return (0, import_focusable.registerFocusable)(props.id, { focus: function() {} });
+		}, [props.id]);
+	}
+	if (type === "single") {
+		var singleProps = toggleGroupProps;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplSingle, {
+			...singleProps,
+			ref: forwardedRef
+		});
+	}
+	if (type === "multiple") {
+		var 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;
+var { Provider: ToggleGroupValueProvider, useStyledContext: useToggleGroupValueContext } = (0, import_web.createStyledContext)();
+var ToggleGroupImplSingle = (0, import_compose_refs.createRefComponent)(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, onValueChange = function() {}, disableDeactivation = false, children, ...toggleGroupSingleProps } = props;
+	var [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(function() {
+			return disableDeactivation ? null : setValue("");
+		}, [setValue, disableDeactivation]),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, {
+			...toggleGroupSingleProps,
+			ref: forwardedRef,
+			children
+		})
+	});
+});
+var ToggleGroupImplMultiple = (0, import_compose_refs.createRefComponent)(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, onValueChange = function() {}, disableDeactivation, children, ...toggleGroupMultipleProps } = props;
+	var [value = [], setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue,
+		onChange: onValueChange
+	});
+	var handleButtonActivate = import_react.default.useCallback(function(itemValue) {
+		return setValue(function() {
+			var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			return [...prevValue, itemValue];
+		});
+	}, [setValue]);
+	var handleButtonDeactivate = import_react.default.useCallback(function(itemValue) {
+		return setValue(function() {
+			var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			return prevValue.filter(function(value2) {
+				return 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
+		})
+	});
+});
+var ToggleGroupFrame = (0, import_web.styled)(import_web.View, { displayName: TOGGLE_GROUP_NAME });
+var ToggleGroupImpl = (0, import_web.createStyledHOC)(ToggleGroupFrame, function(props, forwardedRef) {
+	var { __scopeToggleGroup, disabled = false, orientation = "horizontal", dir, rovingFocus = true, loop = true, color, ...toggleGroupProps } = props;
+	var direction = (0, import_use_direction.useDirection)(dir);
+	var 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
+		})
+	});
+});