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

package/dist/jsx/index.native.cjs

@@ -0,0 +1,28 @@
+"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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
+var import_context = require("./context.native.js");

package/dist/jsx/index.native.js

@@ -5,29 +5,26 @@ 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
-  });
+	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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
-__export(index_exports, {
-  useToggleGroupItem: () => import_context.useToggleGroupItem
-});
+__export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
 var import_context = require("./context.native.js");
+
 //# sourceMappingURL=index.native.js.map

package/dist/jsx/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAA0B","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["jsx/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\n__export(index_exports, {\n  useToggleGroupItem: () => import_context.useToggleGroupItem\n});\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./ToggleGroup\"), module.exports);\nvar import_context = require(\"./context\");\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,SAAS,eAAe,EACtB,0BAA0B,eAAe,mBAC3C,CAAC;AACD,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,yBAAe,GAAG,OAAO,OAAO;AAClE,IAAI,iBAAiB,QAAQ,qBAAW"}

package/dist/jsx/types.mjs

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=types.mjs.map

package/dist/jsx/types.native.cjs

@@ -0,0 +1,18 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/jsx/types.native.js

@@ -5,17 +5,16 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
+
 //# sourceMappingURL=types.native.js.map

package/dist/jsx/types.native.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.native.js","names":[],"sources":["jsx/types.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar types_exports = {};\nmodule.exports = __toCommonJS(types_exports);\n//# sourceMappingURL=types.js.map\n"],"mappings":";;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/toggle-group",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1091.1",
+  "license": "MIT",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -34,23 +35,24 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/create-context": "2.7.7",
-    "@tamagui/focusable": "2.7.7",
-    "@tamagui/get-token": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/helpers-tamagui": "2.7.7",
-    "@tamagui/roving-focus": "2.7.7",
-    "@tamagui/sizable-context": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/use-controllable-state": "2.7.7",
-    "@tamagui/use-direction": "2.7.7",
-    "@tamagui/font-size": "2.7.7",
-    "@tamagui/web": "2.7.7"
+    "@tamagui/compose-refs": "3.0.0-beta.1091.1",
+    "@tamagui/constants": "3.0.0-beta.1091.1",
+    "@tamagui/create-context": "3.0.0-beta.1091.1",
+    "@tamagui/focusable": "3.0.0-beta.1091.1",
+    "@tamagui/font-size": "3.0.0-beta.1091.1",
+    "@tamagui/get-token": "3.0.0-beta.1091.1",
+    "@tamagui/helpers": "3.0.0-beta.1091.1",
+    "@tamagui/helpers-tamagui": "3.0.0-beta.1091.1",
+    "@tamagui/roving-focus": "3.0.0-beta.1091.1",
+    "@tamagui/size": "3.0.0-beta.1091.1",
+    "@tamagui/stacks": "3.0.0-beta.1091.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.1091.1",
+    "@tamagui/use-direction": "3.0.0-beta.1091.1",
+    "@tamagui/web": "3.0.0-beta.1091.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "react": ">=19"
+    "@tamagui/build": "3.0.0-beta.1091.1",
+    "react": "19.2.3"
   },
   "peerDependencies": {
     "react": ">=19"

package/src/Toggle.tsx

@@ -1,6 +1,8 @@
+import { createRefComponent } from '@tamagui/compose-refs'
 import { composeEventHandlers } from '@tamagui/helpers'
+import { resolveSize } from '@tamagui/size'
 import { useControllableState } from '@tamagui/use-controllable-state'
-import type { GetProps, TamaguiElement, ViewStyle } from '@tamagui/web'
+import type { GetProps, StylePiece, TamaguiElement } from '@tamagui/web'
 import { styled, View } from '@tamagui/web'
 import * as React from 'react'
 import { context } from './context'
@@ -11,78 +13,39 @@ import { context } from './context'
 
 const NAME = 'Toggle'
 
-export const ToggleFrame = styled(
-  View,
-  {
-    name: NAME,
-    render: 'button',
-    context,
+// Unstyled Toggle behavior frame: structural layout, the size mechanism
+// (hit-target dimensions), the native button render, and focus reset only. All
+// theme decoration (palette, border, hover/press/focus color styling) and the
+// default "active" appearance live in the tamagui skin
+// (code/ui/tamagui/src/components/ToggleGroup.tsx). The frame still emits the
+// discrete state (aria-pressed / data-state) via the Toggle component below; the
+// skins can supply a plain style prop object that is applied while active.
+export const ToggleFrame = styled(View, {
+  displayName: NAME,
+  render: 'button',
+  context,
+  size: true,
+  alignItems: 'center',
+  justifyContent: 'center',
 
-    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,
-          },
-        },
-      },
+  variants: {
+    size: styled.dynamic<any>((val, env) => {
+      if (!val) return
+      // a square hit target: the control height plus the skin's 1px border
+      const { frame, controlHeight } = resolveSize(val, env)
+      const side = controlHeight + 2
+      return {
+        width: side,
+        height: side,
+        borderRadius: frame.borderRadius,
+      }
+    }),
 
-      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',
-          },
-        },
-      },
-    } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
+    defaultActiveStyle: {
+      true: {},
     },
-  },
-  {
-    accept: {
-      activeStyle: 'style',
-    } as const,
-  }
-)
+  } as const,
+})
 
 type ToggleFrameProps = GetProps<typeof ToggleFrame>
 
@@ -93,13 +56,13 @@ type ToggleItemExtraProps = {
   active?: boolean
   defaultActive?: boolean
   onActiveChange?(active: boolean): void
-  activeStyle?: ViewStyle | null
+  activeStyle?: StylePiece | null
   activeTheme?: string | null
 }
 
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps
 
-export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
+export const Toggle = createRefComponent<TamaguiElement, ToggleProps>(
   function Toggle(props, forwardedRef) {
     const {
       active: activeProp,
@@ -107,7 +70,6 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
       defaultActive = false,
       onActiveChange,
       activeTheme,
-      unstyled = false,
       ...buttonProps
     } = props
 
@@ -123,23 +85,9 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
         aria-pressed={active}
         data-state={active ? 'on' : 'off'}
         data-disabled={props.disabled ? '' : undefined}
-        unstyled={unstyled}
-        {...(active &&
-          !activeStyle &&
-          !unstyled && {
-            defaultActiveStyle: true,
-          })}
+        {...(active && !activeStyle && { defaultActiveStyle: true })}
         {...buttonProps}
-        // spread activeStyle after buttonProps so it wins when active: a styled()
-        // variant (e.g. a resting `backgroundColor`) forwards that value as a plain
-        // prop into buttonProps, which would otherwise clobber the activeStyle merge
-        // on overlapping keys and leave the active item stuck at its resting style.
-        {...(active &&
-          activeStyle && {
-            ...(activeStyle as any),
-            hoverStyle: activeStyle,
-            focusStyle: activeStyle,
-          })}
+        style={[buttonProps.style, active && activeStyle]}
         ref={forwardedRef}
         onPress={composeEventHandlers(props.onPress ?? undefined, () => {
           if (!props.disabled) {

package/src/ToggleGroup.tsx

@@ -1,3 +1,4 @@
+import { createRefComponent } from '@tamagui/compose-refs'
 import { isWeb } from '@tamagui/constants'
 import { registerFocusable } from '@tamagui/focusable'
 import { withStaticProperties } from '@tamagui/helpers'
@@ -5,7 +6,7 @@ import { RovingFocusGroup } from '@tamagui/roving-focus'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import type { GetProps, TamaguiElement } from '@tamagui/web'
-import { createStyledContext, styled, View } from '@tamagui/web'
+import { createStyledHOC, createStyledContext, styled, View } from '@tamagui/web'
 import React from 'react'
 
 import type { ToggleProps } from './Toggle'
@@ -29,13 +30,16 @@ const { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext }
   createStyledContext<ToggleGroupContextValue>({})
 
 type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
+  activeStyle?: ToggleProps['activeStyle']
+  activeTheme?: ToggleProps['activeTheme']
   value: string
   id?: string
   disabled?: boolean
 }
 
-const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>(
-  (props, forwardedRef) => {
+const ToggleGroupItem = createStyledHOC(
+  ToggleFrame,
+  (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {
     const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
     const context = useToggleGroupContext(props.__scopeToggleGroup)
     const toggleContext = ToggleContext.useStyledContext(props.__scopeToggleGroup)
@@ -46,7 +50,11 @@ const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>
     const inner = (
       <ToggleGroupItemImpl
         ref={forwardedRef}
-        tabIndex={disabled ? -1 : 0}
+        // on the roving path the group owns the tab order, so the item carries no
+        // tabIndex of its own: Slot overlays child props over the roving Item's,
+        // so a tabIndex here wins the merge and puts every toggle back in the tab
+        // order. off that path nothing else makes the toggle focusable.
+        {...(context.rovingFocus ? null : { tabIndex: disabled ? -1 : 0 })}
         {...(props as any)}
         active={active}
         disabled={disabled}
@@ -60,7 +68,7 @@ const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>
             <RovingFocusGroup.Item
               asChild="except-style"
               __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
-              focusable={!disabled}
+              tabIndex={disabled ? -1 : 0}
               active={active}
             >
               {inner}
@@ -81,7 +89,7 @@ type ToggleGroupItemImplProps = Omit<ToggleProps, 'defaultActive' | 'onActiveCha
   value: string
 }
 
-const ToggleGroupItemImpl = React.forwardRef<
+const ToggleGroupItemImpl = createRefComponent<
   TamaguiElement,
   ScopedProps<ToggleGroupItemImplProps>
 >((props, forwardedRef) => {
@@ -123,7 +131,7 @@ interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
 type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps
 
 const ToggleGroup = withStaticProperties(
-  React.forwardRef<TamaguiElement, ScopedProps<ToggleGroupProps>>(
+  createRefComponent<TamaguiElement, ScopedProps<ToggleGroupProps>>(
     (props, forwardedRef) => {
       const { type, ...toggleGroupProps } = props
 
@@ -182,7 +190,7 @@ interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
   disableDeactivation?: boolean
 }
 
-const ToggleGroupImplSingle = React.forwardRef<
+const ToggleGroupImplSingle = createRefComponent<
   TamaguiElement,
   ScopedProps<ToggleGroupImplSingleProps>
 >((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {
@@ -230,7 +238,7 @@ interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
   disableDeactivation?: never
 }
 
-const ToggleGroupImplMultiple = React.forwardRef<
+const ToggleGroupImplMultiple = createRefComponent<
   TamaguiElement,
   ToggleGroupImplMultipleProps
 >((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {
@@ -286,7 +294,7 @@ type ToggleGroupContextValue = {
 type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
 
 const ToggleGroupFrame = styled(View, {
-  name: TOGGLE_GROUP_NAME,
+  displayName: TOGGLE_GROUP_NAME,
 })
 
 type ToggleGroupImplProps = GetProps<typeof ToggleGroupFrame> & {
@@ -297,7 +305,8 @@ type ToggleGroupImplProps = GetProps<typeof ToggleGroupFrame> & {
   color?: string
 }
 
-const ToggleGroupImpl = ToggleGroupFrame.styleable<TamaguiElement, ToggleGroupImplProps>(
+const ToggleGroupImpl = createStyledHOC(
+  ToggleGroupFrame,
   (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {
     const {
       __scopeToggleGroup,

package/types/Toggle.d.ts

@@ -1,20 +1,22 @@
-import type { GetProps, TamaguiElement, ViewStyle } from '@tamagui/web';
+import type { GetProps, StylePiece, TamaguiElement } from '@tamagui/web';
 import * as React from 'react';
-export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase & {
-    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
-        accept: {
-            readonly activeStyle: "style";
-        };
-    }>> | undefined;
-}, {
-    unstyled?: boolean | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
+export declare const ToggleFrame: React.FunctionComponent<Omit<import("@tamagui/web").StackNonStyleProps, "active" | "defaultActiveStyle" | "size" | keyof import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithFlatVariantValues<{
+    active?: boolean | undefined;
     defaultActiveStyle?: boolean | undefined;
-}, {
-    accept: {
-        readonly activeStyle: "style";
-    };
-}>;
+    size?: any;
+}> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & {
+    ref?: React.Ref<TamaguiElement> | undefined;
+}> & import("@tamagui/web").StaticComponentObject<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    active?: boolean | undefined;
+    defaultActiveStyle?: boolean | undefined;
+    size?: any;
+}, import("@tamagui/web").StaticConfigPublic> & Omit<import("@tamagui/web").StaticConfigPublic, "staticConfig"> & {
+    __tama: [import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {
+        active?: boolean | undefined;
+        defaultActiveStyle?: boolean | undefined;
+        size?: any;
+    }, import("@tamagui/web").StaticConfigPublic];
+};
 type ToggleFrameProps = GetProps<typeof ToggleFrame>;
 type ToggleItemExtraProps = {
     orientation?: 'horizontal' | 'vertical';
@@ -23,52 +25,10 @@ type ToggleItemExtraProps = {
     active?: boolean;
     defaultActive?: boolean;
     onActiveChange?(active: boolean): void;
-    activeStyle?: ViewStyle | null;
+    activeStyle?: StylePiece | null;
     activeTheme?: string | null;
 };
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/web").StackNonStyleProps, "unstyled" | keyof import("@tamagui/web").StackStyleBase | "size" | "activeStyle" | "defaultActiveStyle"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
-    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
-        accept: {
-            readonly activeStyle: "style";
-        };
-    }>> | undefined;
-}> & {
-    unstyled?: boolean | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
-    defaultActiveStyle?: boolean | undefined;
-} & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
-    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
-        accept: {
-            readonly activeStyle: "style";
-        };
-    }>> | undefined;
-}>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
-    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
-        accept: {
-            readonly activeStyle: "style";
-        };
-    }>> | undefined;
-}> & {
-    unstyled?: boolean | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
-    defaultActiveStyle?: boolean | undefined;
-} & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
-    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
-        accept: {
-            readonly activeStyle: "style";
-        };
-    }>> | undefined;
-}>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase & {
-    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
-        accept: {
-            readonly activeStyle: "style";
-        };
-    }>> | undefined;
-}, {
-    unstyled?: boolean | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
-    defaultActiveStyle?: boolean | undefined;
-}>> & ToggleItemExtraProps & React.RefAttributes<TamaguiElement>>;
+export declare const Toggle: import("@tamagui/compose-refs").RefComponent<TamaguiElement, ToggleProps>;
 export {};
 //# sourceMappingURL=Toggle.d.ts.map

package/types/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAuEvB,CAAA;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAkDlB,CAAA"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAyBtB,CAAA;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM,2EAmClB,CAAA"}