@tamagui/toggle-group 1.122.7 → 1.123.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/toggle-group",
-  "version": "1.122.7",
+  "version": "1.123.0",
   "sideEffects": [
     "*.css"
   ],
@@ -36,22 +36,22 @@
     }
   },
   "dependencies": {
-    "@tamagui/constants": "1.122.7",
-    "@tamagui/create-context": "1.122.7",
-    "@tamagui/focusable": "1.122.7",
-    "@tamagui/font-size": "1.122.7",
-    "@tamagui/get-token": "1.122.7",
-    "@tamagui/group": "1.122.7",
-    "@tamagui/helpers": "1.122.7",
-    "@tamagui/helpers-tamagui": "1.122.7",
-    "@tamagui/roving-focus": "1.122.7",
-    "@tamagui/stacks": "1.122.7",
-    "@tamagui/use-controllable-state": "1.122.7",
-    "@tamagui/use-direction": "1.122.7",
-    "@tamagui/web": "1.122.7"
+    "@tamagui/constants": "1.123.0",
+    "@tamagui/create-context": "1.123.0",
+    "@tamagui/focusable": "1.123.0",
+    "@tamagui/font-size": "1.123.0",
+    "@tamagui/get-token": "1.123.0",
+    "@tamagui/group": "1.123.0",
+    "@tamagui/helpers": "1.123.0",
+    "@tamagui/helpers-tamagui": "1.123.0",
+    "@tamagui/roving-focus": "1.123.0",
+    "@tamagui/stacks": "1.123.0",
+    "@tamagui/use-controllable-state": "1.123.0",
+    "@tamagui/use-direction": "1.123.0",
+    "@tamagui/web": "1.123.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.122.7",
+    "@tamagui/build": "1.123.0",
     "react": "*"
   },
   "publishConfig": {

package/src/Toggle.tsx

@@ -2,9 +2,13 @@ import { composeEventHandlers } from '@tamagui/helpers'
 import { ThemeableStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import type { GetProps } from '@tamagui/web'
-import { styled } from '@tamagui/web'
+import { createStyledContext, styled, Text } from '@tamagui/web'
 import * as React from 'react'
 
+export const context = createStyledContext({
+  color: '',
+})
+
 /* -------------------------------------------------------------------------------------------------
  * Toggle
  * -----------------------------------------------------------------------------------------------*/
@@ -18,6 +22,7 @@ export type ToggleElement = TamaguiButtonElement
 export const ToggleFrame = styled(ThemeableStack, {
   name: NAME,
   tag: 'button',
+  context,
 
   variants: {
     unstyled: {
@@ -47,6 +52,12 @@ export const ToggleFrame = styled(ThemeableStack, {
       },
     },
 
+    color: {
+      '...color': () => {
+        return {}
+      },
+    },
+
     active: {
       true: {
         zIndex: 1,

package/src/ToggleGroup.tsx

@@ -10,7 +10,13 @@ import { RovingFocusGroup } from '@tamagui/roving-focus'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import type { FontSizeTokens, GetProps, SizeTokens } from '@tamagui/web'
-import { createStyledContext, getVariableValue, styled, useTheme } from '@tamagui/web'
+import {
+  createStyledContext,
+  getVariableValue,
+  styled,
+  usePropsAndStyle,
+  useTheme,
+} from '@tamagui/web'
 import React from 'react'
 
 import type { ToggleProps } from './Toggle'
@@ -49,6 +55,7 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
 const ToggleGroupItem = ToggleFrame.extractable(
   React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(
     (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {
+      const [_, { color }] = usePropsAndStyle(props)
       const { disablePassStyles, ...rest } = props
       const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
       const context = useToggleGroupContext(props.__scopeToggleGroup)
@@ -70,7 +77,10 @@ const ToggleGroupItem = ToggleFrame.extractable(
         1.2
 
       const theme = useTheme()
-      const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })
+      const getThemedIcon = useGetThemedIcon({
+        size: iconSize,
+        color: color ?? theme.color,
+      })
 
       const childrens = React.Children.toArray(props.children)
       const children = childrens.map((child) => {
@@ -86,7 +96,8 @@ const ToggleGroupItem = ToggleFrame.extractable(
         <ToggleGroupItemImpl
           {...commonProps}
           ref={forwardedRef}
-          focusable={!disabled}
+          // focusable={!disabled}
+          tabIndex={disabled ? -1 : 0}
           disabled={disabled}
           {...groupItemProps}
         />

package/types/Toggle.d.ts

@@ -1,8 +1,12 @@
 import type { GetProps } from '@tamagui/web';
 import * as React from 'react';
+export declare const context: import("@tamagui/web").StyledContext<{
+    color: string;
+}>;
 type TamaguiButtonElement = HTMLButtonElement;
 export type ToggleElement = TamaguiButtonElement;
 export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import("@tamagui/web").TamaDefer, import("@tamagui/web").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    color?: import("@tamagui/web").ColorTokens | undefined;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     inset?: number | import("@tamagui/web").SizeTokens | {
         top?: number;
@@ -35,7 +39,8 @@ type ToggleItemExtraProps = {
     onPressedChange?(pressed: boolean): void;
 };
 export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "hoverTheme" | "pressTheme" | "focusTheme" | "elevate" | "bordered" | "backgrounded" | "radiused" | "padded" | "chromeless" | "unstyled" | "active" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "color" | "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "hoverTheme" | "pressTheme" | "focusTheme" | "elevate" | "bordered" | "backgrounded" | "radiused" | "padded" | "chromeless" | "unstyled" | "active" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+    color?: import("@tamagui/web").ColorTokens | undefined;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     inset?: number | import("@tamagui/web").SizeTokens | {
         top?: number;
@@ -59,6 +64,7 @@ export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamag
     active?: 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;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     inset?: number | import("@tamagui/web").SizeTokens | {
         top?: number;
@@ -82,6 +88,7 @@ export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamag
     active?: 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;
     elevation?: number | import("@tamagui/web").SizeTokens | undefined;
     inset?: number | import("@tamagui/web").SizeTokens | {
         top?: number;

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,MAAM,cAAc,CAAA;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAA;AAEhD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;6CA8DtB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAmClB,CAAA"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,OAAO;;EAElB,CAAA;AAQF,KAAK,oBAAoB,GAAG,iBAAiB,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAA;AAEhD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAmClB,CAAA"}

package/types/ToggleGroup.d.ts

@@ -24,7 +24,8 @@ interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
 }
 type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
 declare const ToggleGroup: React.ForwardRefExoticComponent<ScopedProps<ToggleGroupProps> & React.RefAttributes<HTMLElement>> & {
-    Item: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "hoverTheme" | "pressTheme" | "focusTheme" | "elevate" | "bordered" | "backgrounded" | "radiused" | "padded" | "chromeless" | "unstyled" | "active" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+    Item: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "color" | "elevation" | keyof import("@tamagui/web").StackStyleBase | "transparent" | "fullscreen" | "circular" | "hoverTheme" | "pressTheme" | "focusTheme" | "elevate" | "bordered" | "backgrounded" | "radiused" | "padded" | "chromeless" | "unstyled" | "active" | "orientation"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+        color?: import("@tamagui/web").ColorTokens | undefined;
         elevation?: number | SizeTokens | undefined;
         inset?: number | SizeTokens | {
             top?: number;
@@ -48,6 +49,7 @@ declare const ToggleGroup: React.ForwardRefExoticComponent<ScopedProps<ToggleGro
         active?: 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;
         elevation?: number | SizeTokens | undefined;
         inset?: number | SizeTokens | {
             top?: number;
@@ -71,6 +73,7 @@ declare const ToggleGroup: React.ForwardRefExoticComponent<ScopedProps<ToggleGro
         active?: 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;
         elevation?: number | SizeTokens | undefined;
         inset?: number | SizeTokens | {
             top?: number;

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,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAsB9C,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;AAoHD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAIzD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA1IR,MAAM;aACR,MAAM;mBACA,OAAO;eACX,UAAU;QACjB;;WAEG;4BACiB,OAAO;;CAmK5B,CAAA;AAoBD,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;AAsCD,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;AAIpF,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;AAuEH,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":"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,MAAM,cAAc,CAAA;AAQxE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAsB9C,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;AAyHD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAIzD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA/IR,MAAM;aACR,MAAM;mBACA,OAAO;eACX,UAAU;QACjB;;WAEG;4BACiB,OAAO;;CAwK5B,CAAA;AAoBD,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;AAsCD,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;AAIpF,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;AAuEH,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,gBAAgB,EAChB,sBAAsB,GACvB,CAAA"}