@tamagui/toggle-group 2.0.0-1768741592663 → 2.0.0-1768781784925

package/src/ToggleGroup.tsx

@@ -1,20 +1,20 @@
 import { isWeb } from '@tamagui/constants'
 import { registerFocusable } from '@tamagui/focusable'
-import { getFontSize } from '@tamagui/font-size'
-import { getSize } from '@tamagui/get-token'
 import type { GroupProps } from '@tamagui/group'
 import { Group, useGroupItem } from '@tamagui/group'
 import { withStaticProperties } from '@tamagui/helpers'
-import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
 import { RovingFocusGroup } from '@tamagui/roving-focus'
+import { SizableContext } from '@tamagui/sizable-context'
 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, useTheme } from '@tamagui/web'
+import type { GetProps, SizeTokens, TamaguiElement } from '@tamagui/web'
+import { createStyledContext, styled } from '@tamagui/web'
 import React from 'react'
 
-import type { ToggleProps, ToggleStylesBase } from './Toggle'
-import { Toggle, ToggleFrame, context as ToggleContext } from './Toggle'
+import type { ToggleProps } from './Toggle'
+import { Toggle, ToggleFrame } from './Toggle'
+import { context as ToggleContext } from './context'
+import type { ToggleStylesBase } from './types'
 
 const TOGGLE_GROUP_NAME = 'ToggleGroup'
 
@@ -32,7 +32,9 @@ const { Provider: ToggleGroupItemProvider } =
   createStyledContext<ToggleGroupItemContextValue>()
 
 const { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } =
-  createStyledContext<ToggleGroupContextValue>()
+  createStyledContext<ToggleGroupContextValue>({
+    size: undefined,
+  })
 
 type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
   value: string
@@ -43,7 +45,7 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
    * Used to disable passing styles down to children.
    */
   disablePassStyles?: boolean
-  toggledStyle?: ToggleStylesBase | null
+  activeStyle?: ToggleStylesBase | null
   color?: string
 }
 const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>(
@@ -51,70 +53,35 @@ const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>
     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 active = valueContext?.value.includes(props.value)
     const color = (props as any).color || toggleContext.color
-    const { disablePassStyles, toggledStyle: _, ...rest } = props
+    const { disablePassStyles, ...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 iconSize =
-      (typeof size === 'number' ? size * 0.7 : getFontSize(size as FontSizeTokens)) * 1.2
-
-    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 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 commonProps = {
-      pressed,
-      disabled,
-      ...sizeProps,
-      ...rest,
-      children,
-      toggledStyle,
-    }
-
     const inner = (
       <ToggleGroupItemImpl
-        {...commonProps}
+        {...groupItemProps}
         ref={forwardedRef}
+        size={size}
         // focusable={!disabled}
         tabIndex={disabled ? -1 : 0}
+        {...rest}
         disabled={disabled}
-        {...groupItemProps}
+        active={active}
       />
     )
 
     return (
       <ToggleGroupItemProvider scope={props.__scopeToggleGroup}>
-        <ToggleContext.Provider color={color} toggledStyle={toggledStyle}>
+        <ToggleContext.Provider size={size} color={color} active={active}>
           {context.rovingFocus ? (
             <RovingFocusGroup.Item
               asChild="except-style"
               __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
               focusable={!disabled}
-              active={pressed}
+              active={active}
             >
               {inner}
             </RovingFocusGroup.Item>
@@ -158,7 +125,7 @@ const ToggleGroupItemImpl = React.forwardRef<
       {...typeProps}
       {...itemProps}
       ref={forwardedRef}
-      onPressedChange={(pressed) => {
+      onActiveChange={(pressed) => {
         if (pressed) {
           valueContext.onItemActivate(value)
         } else {
@@ -358,9 +325,9 @@ ToggleGroup.displayName = TOGGLE_GROUP_NAME
 /* -----------------------------------------------------------------------------------------------*/
 
 type ToggleGroupContextValue = {
-  rovingFocus: boolean
-  disabled: boolean
-  size: SizeTokens
+  rovingFocus?: boolean
+  disabled?: boolean
+  size?: SizeTokens
 }
 
 type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
@@ -387,7 +354,7 @@ type ToggleGroupImplProps = GetProps<typeof ToggleGroupImplElementFrame> &
     dir?: RovingFocusGroupProps['dir']
     loop?: RovingFocusGroupProps['loop']
     sizeAdjust?: number
-    toggledStyle?: ToggleStylesBase | null
+    activeStyle?: ToggleStylesBase | null
     color?: string
   }
 
@@ -405,7 +372,7 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
     unstyled = false,
     size: sizeProp = '$true',
     sizeAdjust = 0,
-    toggledStyle,
+    activeStyle,
     color,
     ...toggleGroupProps
   } = props
@@ -415,51 +382,46 @@ const ToggleGroupImpl = ToggleGroupImplElementFrame.styleable<
     dir: direction,
     ...toggleGroupProps,
   }
-  const adjustedSize = getVariableValue(
-    getSize(sizeProp, {
-      shift: sizeAdjust,
-    })
-  )
-  const size = Math.round(adjustedSize * 0.45)
 
   return (
-    <ToggleGroupContext
-      scope={__scopeToggleGroup}
-      rovingFocus={rovingFocus}
-      disabled={disabled}
-      size={size}
-    >
-      <ToggleContext.Provider color={color} toggledStyle={toggledStyle}>
-        {rovingFocus ? (
-          <RovingFocusGroup
-            asChild="except-style"
-            __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
-            orientation={orientation}
-            dir={direction}
-            loop={loop}
-          >
+    <SizableContext.Provider size={sizeProp}>
+      <ToggleGroupContext
+        scope={__scopeToggleGroup}
+        rovingFocus={rovingFocus}
+        disabled={disabled}
+        size={sizeProp}
+      >
+        <ToggleContext.Provider size={sizeProp} color={color}>
+          {rovingFocus ? (
+            <RovingFocusGroup
+              asChild="except-style"
+              __scopeRovingFocusGroup={__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
+              orientation={orientation}
+              dir={direction}
+              loop={loop}
+            >
+              <ToggleGroupImplElementFrame
+                aria-orientation={orientation}
+                orientation={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>
+          )}
+        </ToggleContext.Provider>
+      </ToggleGroupContext>
+    </SizableContext.Provider>
   )
 })
 

package/src/context.tsx

@@ -0,0 +1,7 @@
+import { createStyledContext, type SizeTokens } from '@tamagui/web'
+
+export const context = createStyledContext({
+  size: undefined as SizeTokens | undefined,
+  color: '',
+  active: false,
+})

package/src/index.ts

@@ -1 +1,2 @@
 export * from './ToggleGroup'
+export { useToggleGroupItem } from './useToggleGroupItem'

package/src/types.tsx

@@ -0,0 +1,3 @@
+import type { ViewStyle } from '@tamagui/web'
+
+export type ToggleStylesBase = ViewStyle & { color?: string }

package/src/useToggleGroupItem.ts

@@ -0,0 +1,3 @@
+import { context } from './context'
+
+export const useToggleGroupItem = context.useStyledContext

package/types/Toggle.d.ts

@@ -1,95 +1,73 @@
-import type { GetProps, StackStyleBase, TamaguiElement } from '@tamagui/web';
+import type { GetProps, TamaguiElement, ViewStyle } 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, StackStyleBase, {
-    elevation?: number | import("@tamagui/web").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;
+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").StackProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}, {
+    size?: number | import("@tamagui/web").SizeTokens | undefined;
     unstyled?: boolean | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
-}, import("@tamagui/web").StaticConfigPublic>;
+    defaultActiveStyle?: boolean | undefined;
+}, {
+    accept: {
+        readonly activeStyle: "style";
+    };
+}>;
 type ToggleFrameProps = GetProps<typeof ToggleFrame>;
 type ToggleItemExtraProps = {
     defaultValue?: string;
     disabled?: boolean;
-    pressed?: boolean;
-    defaultPressed?: boolean;
-    onPressedChange?(pressed: boolean): void;
-    toggledStyle?: ToggleStylesBase | null;
+    active?: boolean;
+    defaultActive?: boolean;
+    onActiveChange?(active: boolean): void;
+    activeStyle?: ViewStyle | null;
+    activeTheme?: string | null;
 };
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
-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;
-    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;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/web").StackNonStyleProps, "size" | keyof import("@tamagui/web").StackStyleBase | "activeStyle" | "unstyled" | "defaultActiveStyle"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
+    readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").StackProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}> & {
+    size?: number | import("@tamagui/web").SizeTokens | undefined;
     unstyled?: boolean | undefined;
-    orientation?: "horizontal" | "vertical" | 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;
-    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;
+    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").StackProps, 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").StackProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}> & {
+    size?: number | import("@tamagui/web").SizeTokens | undefined;
     unstyled?: boolean | undefined;
-    orientation?: "horizontal" | "vertical" | 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;
-    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;
+    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").StackProps, 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").StackProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
+        accept: {
+            readonly activeStyle: "style";
+        };
+    }>> | undefined;
+}, {
+    size?: number | import("@tamagui/web").SizeTokens | undefined;
     unstyled?: boolean | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
+    defaultActiveStyle?: boolean | undefined;
 }>> & ToggleItemExtraProps & React.RefAttributes<TamaguiElement>>;
 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":"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"}
+{"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;;;;;;;;;;;;;;EAwEvB,CAAA;AAED,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA8ClB,CAAA"}