@tamagui/toggle-group 2.0.0-1768024799864 → 2.0.0-1768247234371

package/src/Toggle.tsx

@@ -1,12 +1,15 @@
 import { composeEventHandlers } from '@tamagui/helpers'
 import { ThemeableStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
-import type { GetProps, TamaguiElement } from '@tamagui/web'
+import type { GetProps, StackStyleBase, TamaguiElement } from '@tamagui/web'
 import { createStyledContext, styled, Text } from '@tamagui/web'
 import * as React from 'react'
 
+export type ToggleStylesBase = StackStyleBase & { color?: string }
+
 export const context = createStyledContext({
   color: '',
+  toggledStyle: null as null | ToggleStylesBase,
 })
 
 /* -------------------------------------------------------------------------------------------------
@@ -48,24 +51,26 @@ export const ToggleFrame = styled(ThemeableStack, {
       },
     },
 
-    color: {
-      '...color': () => {
-        return {}
-      },
-    },
+    toggledStyle: (val: ToggleStylesBase | null) => ({}),
 
     active: {
-      true: {
-        zIndex: 1,
-
-        hoverStyle: {
-          backgroundColor: '$background',
-        },
-
-        focusStyle: {
-          borderColor: '$borderColor',
-          backgroundColor: '$background',
-        },
+      true: (_, { props, context }: any) => {
+        const toggledStyle = props.toggledStyle || context?.toggledStyle
+        return {
+          zIndex: 1,
+          ...(!props.unstyled &&
+            !toggledStyle && {
+              backgroundColor: '$background',
+              hoverStyle: {
+                backgroundColor: '$background',
+              },
+              focusStyle: {
+                backgroundColor: '$background',
+                borderColor: '$borderColor',
+              },
+            }),
+          ...toggledStyle,
+        }
       },
     },
 
@@ -94,6 +99,7 @@ type ToggleItemExtraProps = {
   pressed?: boolean
   defaultPressed?: boolean
   onPressedChange?(pressed: boolean): void
+  toggledStyle?: ToggleStylesBase | null
 }
 
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps
@@ -119,7 +125,7 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
           theme: pressed ? 'accent' : null,
           themeShallow: true,
         })}
-        active={!props.unstyled ? pressed : undefined}
+        active={pressed}
         aria-pressed={pressed}
         data-state={pressed ? 'on' : 'off'}
         data-disabled={props.disabled ? '' : undefined}
@@ -127,7 +133,7 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
         ref={forwardedRef}
         onPress={composeEventHandlers(props.onPress ?? undefined, () => {
           if (!props.disabled) {
-            setPressed(!pressed)
+            setPressed((prev) => !prev)
           }
         })}
       />

package/src/ToggleGroup.tsx

@@ -10,17 +10,11 @@ import { RovingFocusGroup } from '@tamagui/roving-focus'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import type { FontSizeTokens, GetProps, SizeTokens, TamaguiElement } from '@tamagui/web'
-import {
-  createStyledContext,
-  getVariableValue,
-  styled,
-  usePropsAndStyle,
-  useTheme,
-} from '@tamagui/web'
+import { createStyledContext, getVariableValue, styled, useTheme } from '@tamagui/web'
 import React from 'react'
 
-import type { ToggleProps } from './Toggle'
-import { Toggle, ToggleFrame } from './Toggle'
+import type { ToggleProps, ToggleStylesBase } from './Toggle'
+import { Toggle, ToggleFrame, context as ToggleContext } from './Toggle'
 
 const TOGGLE_GROUP_NAME = 'ToggleGroup'
 
@@ -49,75 +43,89 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
    * Used to disable passing styles down to children.
    */
   disablePassStyles?: boolean
+  toggledStyle?: ToggleStylesBase | null
+  color?: string
 }
-const ToggleGroupItem = ToggleFrame.styleable<
-  TamaguiElement,
-  ScopedProps<ToggleGroupItemProps>
->((props, forwardedRef) => {
-  const [_, { color }] = usePropsAndStyle(props)
-  const { disablePassStyles, ...rest } = props
-  const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
-  const context = useToggleGroupContext(props.__scopeToggleGroup)
-  const pressed = valueContext?.value.includes(props.value)
-  const disabled = context.disabled || props.disabled || false
-  const groupItemProps = useGroupItem({ disabled })
-  const size = props.size ?? context.size
-
-  const sizeProps: Record<string, any> = props.unstyled
-    ? {}
-    : {
-        width: undefined,
-        height: undefined,
-        padding: getVariableValue(size) * 0.6,
-      }
-
-  const iconSize =
-    (typeof size === 'number' ? size * 0.7 : getFontSize(size as FontSizeTokens)) * 1.2
+const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>(
+  (props, forwardedRef) => {
+    const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
+    const context = useToggleGroupContext(props.__scopeToggleGroup)
+    const toggleContext = ToggleContext.useStyledContext(props.__scopeToggleGroup)
+    const pressed = valueContext?.value.includes(props.value)
+    const toggledStyle = props.toggledStyle || toggleContext.toggledStyle
+    const color = (props as any).color || toggleContext.color
+    const { disablePassStyles, toggledStyle: _, ...rest } = props
+    const disabled = context.disabled || props.disabled || false
+    const groupItemProps = useGroupItem({ disabled })
+    const size = props.size ?? context.size
+
+    const sizeProps: Record<string, any> = props.unstyled
+      ? {}
+      : {
+          width: undefined,
+          height: undefined,
+          padding: getVariableValue(size) * 0.6,
+        }
 
-  const theme = useTheme()
-  const getThemedIcon = useGetThemedIcon({
-    size: iconSize,
-    color: color ?? theme.color,
-  })
+    const iconSize =
+      (typeof size === 'number' ? size * 0.7 : getFontSize(size as FontSizeTokens)) * 1.2
 
-  const childrens = React.Children.toArray(props.children)
-  const children = childrens.map((child) => {
-    if (props.disablePassStyles || !React.isValidElement(child)) {
-      return child
-    }
-    return React.cloneElement(getThemedIcon(child), { active: pressed } as any)
-  })
+    const theme = useTheme()
+    const toggledColor = (toggledStyle as ToggleStylesBase)?.color
+    const activeColor = pressed && toggledColor ? toggledColor : color
+    const getThemedIcon = useGetThemedIcon({
+      size: iconSize,
+      color: activeColor || theme.color,
+    })
 
-  const commonProps = { pressed, disabled, ...sizeProps, ...rest, children }
+    const childrens = React.Children.toArray(props.children)
+    const children = childrens.map((child) => {
+      if (props.disablePassStyles || !React.isValidElement(child)) {
+        return child
+      }
+      return React.cloneElement(getThemedIcon(child), { active: pressed } as any)
+    })
 
-  const inner = (
-    <ToggleGroupItemImpl
-      {...commonProps}
-      ref={forwardedRef}
-      // focusable={!disabled}
-      tabIndex={disabled ? -1 : 0}
-      disabled={disabled}
-      {...groupItemProps}
-    />
-  )
+    const commonProps = {
+      pressed,
+      disabled,
+      ...sizeProps,
+      ...rest,
+      children,
+      toggledStyle,
+    }
 
-  return (
-    <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
-      {context.rovingFocus ? (
-        <RovingFocusGroup.Item
-          asChild="except-style"
-          __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
-          focusable={!disabled}
-          active={pressed}
-        >
-          {inner}
-        </RovingFocusGroup.Item>
-      ) : (
-        inner
-      )}
-    </ToggleGroupItemProvider>
-  )
-})
+    const inner = (
+      <ToggleGroupItemImpl
+        {...commonProps}
+        ref={forwardedRef}
+        // focusable={!disabled}
+        tabIndex={disabled ? -1 : 0}
+        disabled={disabled}
+        {...groupItemProps}
+      />
+    )
+
+    return (
+      <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
+        <ToggleContext.Provider color={color} toggledStyle={toggledStyle}>
+          {context.rovingFocus ? (
+            <RovingFocusGroup.Item
+              asChild="except-style"
+              __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+              focusable={!disabled}
+              active={pressed}
+            >
+              {inner}
+            </RovingFocusGroup.Item>
+          ) : (
+            inner
+          )}
+        </ToggleContext.Provider>
+      </ToggleGroupItemProvider>
+    )
+  }
+)
 ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME
 
 /* -----------------------------------------------------------------------------------------------*/
@@ -390,6 +398,8 @@ type ToggleGroupImplProps = GetProps<typeof ToggleGroupImplElementFrame> &
     dir?: RovingFocusGroupProps['dir']
     loop?: RovingFocusGroupProps['loop']
     sizeAdjust?: number
+    toggledStyle?: ToggleStylesBase | null
+    color?: string
   }
 
 const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
@@ -406,6 +416,8 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
     unstyled = false,
     size: sizeProp = '$true',
     sizeAdjust = 0,
+    toggledStyle,
+    color,
     ...toggleGroupProps
   } = props
   const direction = useDirection(dir)
@@ -428,34 +440,36 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
       disabled={disabled}
       size={size}
     >
-      {rovingFocus ? (
-        <RovingFocusGroup
-          asChild="except-style"
-          __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
-          orientation={orientation}
-          dir={direction}
-          loop={loop}
-        >
+      <ToggleContext.Provider color={color} toggledStyle={toggledStyle}>
+        {rovingFocus ? (
+          <RovingFocusGroup
+            asChild="except-style"
+            __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+            orientation={orientation}
+            dir={direction}
+            loop={loop}
+          >
+            <ToggleGroupImplElementFrame
+              aria-orientation={orientation}
+              orientation={orientation}
+              // axis={orientation}
+              ref={forwardedRef}
+              data-disabled={disabled ? '' : undefined}
+              unstyled={unstyled}
+              {...commonProps}
+            />
+          </RovingFocusGroup>
+        ) : (
           <ToggleGroupImplElementFrame
             aria-orientation={orientation}
-            orientation={orientation}
-            // axis={orientation}
             ref={forwardedRef}
+            orientation={orientation}
             data-disabled={disabled ? '' : undefined}
             unstyled={unstyled}
             {...commonProps}
           />
-        </RovingFocusGroup>
-      ) : (
-        <ToggleGroupImplElementFrame
-          aria-orientation={orientation}
-          ref={forwardedRef}
-          orientation={orientation}
-          data-disabled={disabled ? '' : undefined}
-          unstyled={unstyled}
-          {...commonProps}
-        />
-      )}
+        )}
+      </ToggleContext.Provider>
     </ToggleGroupContext>
   )
 })

package/types/Toggle.d.ts

@@ -1,10 +1,13 @@
-import type { GetProps, TamaguiElement } from '@tamagui/web';
+import type { GetProps, StackStyleBase, TamaguiElement } from '@tamagui/web';
 import * as React from 'react';
+export type ToggleStylesBase = StackStyleBase & {
+    color?: string;
+};
 export declare const context: import("@tamagui/web").StyledContext<{
     color: string;
+    toggledStyle: null | ToggleStylesBase;
 }>;
-export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
-    color?: import("@tamagui/web").ColorTokens | undefined;
+export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, StackStyleBase, {
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
@@ -18,8 +21,9 @@ export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    unstyled?: boolean | undefined;
+    toggledStyle?: ToggleStylesBase | null | undefined;
     active?: boolean | undefined;
+    unstyled?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 }, import("@tamagui/web").StaticConfigPublic>;
 type ToggleFrameProps = GetProps<typeof ToggleFrame>;
@@ -29,10 +33,10 @@ type ToggleItemExtraProps = {
     pressed?: boolean;
     defaultPressed?: boolean;
     onPressedChange?(pressed: boolean): void;
+    toggledStyle?: ToggleStylesBase | null;
 };
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "color" | "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "padded" | "elevate" | "bordered" | "chromeless" | "unstyled" | "active" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
-    color?: import("@tamagui/web").ColorTokens | undefined;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof StackStyleBase | "transparent" | "fullscreen" | "circular" | "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "padded" | "elevate" | "bordered" | "chromeless" | "toggledStyle" | "active" | "unstyled" | "orientation"> & import("@tamagui/web").WithThemeValues<StackStyleBase> & {
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
@@ -46,11 +50,11 @@ export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamag
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    unstyled?: boolean | undefined;
+    toggledStyle?: ToggleStylesBase | null | undefined;
     active?: boolean | undefined;
+    unstyled?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
-} & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
-    color?: import("@tamagui/web").ColorTokens | undefined;
+} & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<StackStyleBase> & {
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
@@ -64,11 +68,11 @@ export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamag
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    unstyled?: boolean | undefined;
+    toggledStyle?: ToggleStylesBase | null | undefined;
     active?: boolean | undefined;
+    unstyled?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
-} & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {
-    color?: import("@tamagui/web").ColorTokens | undefined;
+} & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<StackStyleBase, {
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     transparent?: boolean | undefined;
     fullscreen?: boolean | undefined;
@@ -82,8 +86,9 @@ export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamag
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     chromeless?: boolean | "all" | undefined;
-    unstyled?: boolean | undefined;
+    toggledStyle?: ToggleStylesBase | null | undefined;
     active?: boolean | undefined;
+    unstyled?: boolean | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
 }>> & ToggleItemExtraProps & React.RefAttributes<TamaguiElement>>;
 export {};

package/types/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,OAAO;;EAElB,CAAA;AAQF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;6CAqEtB,CAAA;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAmClB,CAAA"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElE,eAAO,MAAM,OAAO;;kBAEI,IAAI,GAAG,gBAAgB;EAC7C,CAAA;AAQF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;6CAuEtB,CAAA;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;IACxC,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAmClB,CAAA"}

package/types/ToggleGroup.d.ts

@@ -2,6 +2,7 @@ import type { GroupProps } from '@tamagui/group';
 import { RovingFocusGroup } from '@tamagui/roving-focus';
 import type { GetProps, SizeTokens, TamaguiElement } from '@tamagui/web';
 import React from 'react';
+import type { ToggleStylesBase } from './Toggle';
 import { ToggleFrame } from './Toggle';
 type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
     value: string;
@@ -12,6 +13,8 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
      * Used to disable passing styles down to children.
      */
     disablePassStyles?: boolean;
+    toggledStyle?: ToggleStylesBase | null;
+    color?: string;
 };
 type ScopedProps<P> = P & {
     __scopeToggleGroup?: string;
@@ -24,8 +27,7 @@ interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
 }
 type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
 declare const ToggleGroup: React.ForwardRefExoticComponent<ScopedProps<ToggleGroupProps> & React.RefAttributes<TamaguiElement>> & {
-    Item: import("@tamagui/web").TamaguiComponent<ScopedProps<ToggleGroupItemProps>, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & TamaguiElement, import("@tamagui/web").StackStyleBase, {
-        color?: import("@tamagui/web").ColorTokens | undefined;
+    Item: import("@tamagui/web").TamaguiComponent<Omit<import("@tamagui/web").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
         elevation?: number | SizeTokens | undefined;
         transparent?: boolean | undefined;
         fullscreen?: boolean | undefined;
@@ -39,8 +41,179 @@ declare const ToggleGroup: React.ForwardRefExoticComponent<ScopedProps<ToggleGro
         elevate?: boolean | undefined;
         bordered?: number | boolean | undefined;
         chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    }>, "color" | `$${string}` | `$${number}` | import("@tamagui/web").GroupMediaKeys | `$theme-${string}` | `$theme-${number}` | keyof import("@tamagui/core").RNTamaguiViewNonStyleProps | "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "padded" | "elevate" | "bordered" | "chromeless" | "toggledStyle" | "active" | "size" | "unstyled" | "orientation" | keyof import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> | "value" | "disablePassStyles" | "__scopeToggleGroup"> & Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "padded" | "elevate" | "bordered" | "chromeless" | "toggledStyle" | "active" | "unstyled" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    }>> & {
+        value: string;
+        id?: string;
+        disabled?: boolean;
+        size?: SizeTokens;
+        /**
+         * Used to disable passing styles down to children.
+         */
+        disablePassStyles?: boolean;
+        toggledStyle?: ToggleStylesBase | null;
+        color?: string;
+    } & {
+        __scopeToggleGroup?: string;
+    }, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "backgrounded" | "radiused" | "hoverTheme" | "pressTheme" | "focusTheme" | "padded" | "elevate" | "bordered" | "chromeless" | "toggledStyle" | "active" | "unstyled" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
+        unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
+        active?: boolean | undefined;
         unstyled?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    }>> & {
+        value: string;
+        id?: string;
+        disabled?: boolean;
+        size?: SizeTokens;
+        /**
+         * Used to disable passing styles down to children.
+         */
+        disablePassStyles?: boolean;
+        toggledStyle?: ToggleStylesBase | null;
+        color?: string;
+    } & {
+        __scopeToggleGroup?: string;
+    }, import("@tamagui/web").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        padded?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        toggledStyle?: ToggleStylesBase | null | undefined;
         active?: boolean | undefined;
+        unstyled?: boolean | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
     }, import("@tamagui/web").StaticConfigPublic>;
 };
@@ -101,6 +274,8 @@ type ToggleGroupImplProps = GetProps<typeof ToggleGroupImplElementFrame> & Group
     dir?: RovingFocusGroupProps['dir'];
     loop?: RovingFocusGroupProps['loop'];
     sizeAdjust?: number;
+    toggledStyle?: ToggleStylesBase | null;
+    color?: string;
 };
 export { ToggleGroup };
 export type { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupProps, ToggleGroupSingleProps, };

package/types/ToggleGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../src/ToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAIhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAGxD,OAAO,KAAK,EAAkB,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAQxF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAoB9C,KAAK,oBAAoB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,GAAG;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAsHD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,UAAU,sBAAuB,SAAQ,0BAA0B;IACjE,IAAI,EAAE,QAAQ,CAAA;CACf;AAED,UAAU,wBAAyB,SAAQ,4BAA4B;IACrE,IAAI,EAAE,UAAU,CAAA;CACjB;AAED,KAAK,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAA;AAEzE,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;CAgChB,CAAA;AAmBD,UAAU,0BAA2B,SAAQ,oBAAoB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAqCD,UAAU,4BAA6B,SAAQ,oBAAoB;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB;;OAEG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IACrC,mBAAmB,CAAC,EAAE,KAAK,CAAA;CAC5B;AAuDD,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEpF,QAAA,MAAM,2BAA2B;;;;;;;;;;;;;;;6CAyB/B,CAAA;AAEF,KAAK,oBAAoB,GAAG,QAAQ,CAAC,OAAO,2BAA2B,CAAC,GACtE,UAAU,GAAG;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,GAAG,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAsEH,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,gBAAgB,EAChB,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../src/ToggleGroup.tsx"],"names":[],"mappings":"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"}