@tamagui/toggle-group 1.14.0 → 1.14.2

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.ts"],
   "sourcesContent": ["export * from './ToggleGroup'\n"],
-  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,yBAAd",
-  "names": ["src_exports", "__toCommonJS", "__reExport"]
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;",
+  "names": []
 }

package/dist/esm/Toggle.js

@@ -1,2 +1,96 @@
-import{jsx as n}from"react/jsx-runtime";import{ThemeableStack as u}from"@tamagui/stacks";import{useControllableState as p}from"@tamagui/use-controllable-state";import{Theme as b,composeEventHandlers as f,styled as m}from"@tamagui/web";import*as P from"react";const s="Toggle",r=m(u,{name:s,tag:"button",variants:{unstyled:{false:{pressTheme:!0,backgroundColor:"$background",alignItems:"center",justifyContent:"center",display:"flex",borderColor:"$borderColor",borderWidth:"1px",margin:"-1px",hoverStyle:{backgroundColor:"$backgroundHover"},pressStyle:{backgroundColor:"$backgroundPress"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},active:{true:{zIndex:1,hoverStyle:{backgroundColor:"$background"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},orientation:{horizontal:{flexDirection:"row",spaceDirection:"horizontal"},vertical:{flexDirection:"column",spaceDirection:"vertical"}}},defaultVariants:{unstyled:!1}}),t=r.extractable(P.forwardRef((e,a)=>{const{pressed:l,defaultPressed:d=!1,onPressedChange:i,...g}=e,[o=!1,c]=p({prop:l,onChange:i,defaultProp:d});return n(b,{forceClassName:!0,name:o?"active":null,children:n(r,{active:e.unstyled?void 0:o,"aria-pressed":o,"data-state":o?"on":"off","data-disabled":e.disabled?"":void 0,...g,ref:a,onPress:f(e.onPress??void 0,y=>{e.disabled||c(!o)})})})}));t.displayName=s;export{t as Toggle,r as ToggleFrame};
+import { jsx } from "react/jsx-runtime";
+import { ThemeableStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { Theme, composeEventHandlers, styled } from "@tamagui/web";
+import * as React from "react";
+const NAME = "Toggle";
+const ToggleFrame = styled(ThemeableStack, {
+  name: NAME,
+  tag: "button",
+  variants: {
+    unstyled: {
+      false: {
+        pressTheme: true,
+        backgroundColor: "$background",
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        borderColor: "$borderColor",
+        borderWidth: "1px",
+        margin: "-1px",
+        hoverStyle: {
+          backgroundColor: "$backgroundHover"
+        },
+        pressStyle: {
+          backgroundColor: "$backgroundPress"
+        },
+        focusStyle: {
+          borderColor: "$borderColorPress",
+          backgroundColor: "$backgroundPress"
+        }
+      }
+    },
+    active: {
+      true: {
+        zIndex: 1,
+        hoverStyle: {
+          backgroundColor: "$background"
+        },
+        focusStyle: {
+          borderColor: "$borderColorPress",
+          backgroundColor: "$backgroundPress"
+        }
+      }
+    },
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        spaceDirection: "horizontal"
+      },
+      vertical: {
+        flexDirection: "column",
+        spaceDirection: "vertical"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const Toggle = ToggleFrame.extractable(
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      pressed: pressedProp,
+      defaultPressed = false,
+      onPressedChange,
+      ...buttonProps
+    } = props;
+    const [pressed = false, setPressed] = useControllableState({
+      prop: pressedProp,
+      onChange: onPressedChange,
+      defaultProp: defaultPressed
+    });
+    return /* @__PURE__ */ jsx(Theme, { forceClassName: true, name: pressed ? "active" : null, children: /* @__PURE__ */ jsx(
+      ToggleFrame,
+      {
+        active: !props.unstyled ? pressed : void 0,
+        "aria-pressed": pressed,
+        "data-state": pressed ? "on" : "off",
+        "data-disabled": props.disabled ? "" : void 0,
+        ...buttonProps,
+        ref: forwardedRef,
+        onPress: composeEventHandlers(props.onPress ?? void 0, (event) => {
+          if (!props.disabled) {
+            setPressed(!pressed);
+          }
+        })
+      }
+    ) });
+  })
+);
+Toggle.displayName = NAME;
+export {
+  Toggle,
+  ToggleFrame
+};
 //# sourceMappingURL=Toggle.js.map

package/dist/esm/Toggle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/Toggle.tsx"],
   "sourcesContent": ["import { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { GetProps, Theme, composeEventHandlers, isWeb, styled } from '@tamagui/web'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Toggle'\n\ntype TamaguiButtonElement = HTMLButtonElement\n\ntype ToggleElement = TamaguiButtonElement\n\nconst ToggleFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        pressTheme: true,\n        backgroundColor: '$background',\n        alignItems: 'center',\n        justifyContent: 'center',\n        display: 'flex',\n        borderColor: '$borderColor',\n        borderWidth: '1px',\n        margin: '-1px',\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n        focusStyle: {\n          borderColor: '$borderColorPress',\n          backgroundColor: '$backgroundPress',\n        },\n      },\n    },\n    active: {\n      true: {\n        zIndex: 1,\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n        focusStyle: {\n          borderColor: '$borderColorPress',\n          backgroundColor: '$backgroundPress',\n        },\n      },\n    },\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        spaceDirection: 'horizontal',\n      },\n      vertical: {\n        flexDirection: 'column',\n        spaceDirection: 'vertical',\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype ToggleFrameProps = GetProps<typeof ToggleFrame>\n\ntype ToggleProps = ToggleFrameProps & {\n  defaultValue?: string\n  disabled?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  onPressedChange?(pressed: boolean): void\n}\n\nconst Toggle = ToggleFrame.extractable(\n  React.forwardRef<ToggleElement, ToggleProps>((props, forwardedRef) => {\n    const {\n      pressed: pressedProp,\n      defaultPressed = false,\n      onPressedChange,\n      ...buttonProps\n    } = props\n\n    const [pressed = false, setPressed] = useControllableState({\n      prop: pressedProp,\n      onChange: onPressedChange,\n      defaultProp: defaultPressed,\n    })\n\n    return (\n      <Theme forceClassName name={pressed ? 'active' : null}>\n        <ToggleFrame\n          active={!props.unstyled ? pressed : undefined}\n          aria-pressed={pressed}\n          data-state={pressed ? 'on' : 'off'}\n          data-disabled={props.disabled ? '' : undefined}\n          {...buttonProps}\n          ref={forwardedRef}\n          onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n            if (!props.disabled) {\n              setPressed(!pressed)\n            }\n          })}\n          // caught by onPress - no need for this\n          // {...(isWeb && {\n          //   onKeyDown: composeEventHandlers(\n          //     (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n          //     (event) => {\n          //       if ([' ', 'Enter'].includes(event.key)) {\n          //         if (!props.disabled) {\n          //           setPressed(!pressed)\n          //         }\n          //       }\n          //     }\n          //   ),\n          // })}\n        />\n      </Theme>\n    )\n  })\n)\nToggle.displayName = NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport { Toggle, ToggleFrame }\nexport type { ToggleProps }\n"],
-  "mappings": "AAiGQ,cAAAA,MAAA,oBAjGR,OAAS,kBAAAC,MAAsB,kBAC/B,OAAS,wBAAAC,MAA4B,kCACrC,OAAmB,SAAAC,EAAO,wBAAAC,EAA6B,UAAAC,MAAc,eACrE,UAAYC,MAAW,QAMvB,MAAMC,EAAO,SAMPC,EAAcH,EAAOJ,EAAgB,CACzC,KAAMM,EACN,IAAK,SAEL,SAAU,CACR,SAAU,CACR,MAAO,CACL,WAAY,GACZ,gBAAiB,cACjB,WAAY,SACZ,eAAgB,SAChB,QAAS,OACT,YAAa,eACb,YAAa,MACb,OAAQ,OACR,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,OAAQ,EACR,WAAY,CACV,gBAAiB,aACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,YAAa,CACX,WAAY,CACV,cAAe,MACf,eAAgB,YAClB,EACA,SAAU,CACR,cAAe,SACf,eAAgB,UAClB,CACF,CACF,EACA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAYKE,EAASD,EAAY,YACzBF,EAAM,WAAuC,CAACI,EAAOC,IAAiB,CACpE,KAAM,CACJ,QAASC,EACT,eAAAC,EAAiB,GACjB,gBAAAC,EACA,GAAGC,CACL,EAAIL,EAEE,CAACM,EAAU,GAAOC,CAAU,EAAIf,EAAqB,CACzD,KAAMU,EACN,SAAUE,EACV,YAAaD,CACf,CAAC,EAED,OACEb,EAACG,EAAA,CAAM,eAAc,GAAC,KAAMa,EAAU,SAAW,KAC/C,SAAAhB,EAACQ,EAAA,CACC,OAASE,EAAM,SAAqB,OAAVM,EAC1B,eAAcA,EACd,aAAYA,EAAU,KAAO,MAC7B,gBAAeN,EAAM,SAAW,GAAK,OACpC,GAAGK,EACJ,IAAKJ,EACL,QAASP,EAAqBM,EAAM,SAAW,OAAYQ,GAAU,CAC9DR,EAAM,UACTO,EAAW,CAACD,CAAO,CAEvB,CAAC,EAcH,EACF,CAEJ,CAAC,CACH,EACAP,EAAO,YAAcF",
-  "names": ["jsx", "ThemeableStack", "useControllableState", "Theme", "composeEventHandlers", "styled", "React", "NAME", "ToggleFrame", "Toggle", "props", "forwardedRef", "pressedProp", "defaultPressed", "onPressedChange", "buttonProps", "pressed", "setPressed", "event"]
+  "mappings": "AAiGQ;AAjGR,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAmB,OAAO,sBAA6B,cAAc;AACrE,YAAY,WAAW;AAMvB,MAAM,OAAO;AAMb,MAAM,cAAc,OAAO,gBAAgB;AAAA,EACzC,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,aAAa;AAAA,QACb,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAYD,MAAM,SAAS,YAAY;AAAA,EACzB,MAAM,WAAuC,CAAC,OAAO,iBAAiB;AACpE,UAAM;AAAA,MACJ,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,MACzD,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAED,WACE,oBAAC,SAAM,gBAAc,MAAC,MAAM,UAAU,WAAW,MAC/C;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC,MAAM,WAAW,UAAU;AAAA,QACpC,gBAAc;AAAA,QACd,cAAY,UAAU,OAAO;AAAA,QAC7B,iBAAe,MAAM,WAAW,KAAK;AAAA,QACpC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,SAAS,qBAAqB,MAAM,WAAW,QAAW,CAAC,UAAU;AACnE,cAAI,CAAC,MAAM,UAAU;AACnB,uBAAW,CAAC,OAAO;AAAA,UACrB;AAAA,QACF,CAAC;AAAA;AAAA,IAcH,GACF;AAAA,EAEJ,CAAC;AACH;AACA,OAAO,cAAc;",
+  "names": []
 }

package/dist/esm/Toggle.mjs

@@ -1,2 +1,96 @@
-import{jsx as n}from"react/jsx-runtime";import{ThemeableStack as u}from"@tamagui/stacks";import{useControllableState as p}from"@tamagui/use-controllable-state";import{Theme as b,composeEventHandlers as f,styled as m}from"@tamagui/web";import*as P from"react";const s="Toggle",r=m(u,{name:s,tag:"button",variants:{unstyled:{false:{pressTheme:!0,backgroundColor:"$background",alignItems:"center",justifyContent:"center",display:"flex",borderColor:"$borderColor",borderWidth:"1px",margin:"-1px",hoverStyle:{backgroundColor:"$backgroundHover"},pressStyle:{backgroundColor:"$backgroundPress"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},active:{true:{zIndex:1,hoverStyle:{backgroundColor:"$background"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},orientation:{horizontal:{flexDirection:"row",spaceDirection:"horizontal"},vertical:{flexDirection:"column",spaceDirection:"vertical"}}},defaultVariants:{unstyled:!1}}),t=r.extractable(P.forwardRef((e,a)=>{const{pressed:l,defaultPressed:d=!1,onPressedChange:i,...g}=e,[o=!1,c]=p({prop:l,onChange:i,defaultProp:d});return n(b,{forceClassName:!0,name:o?"active":null,children:n(r,{active:e.unstyled?void 0:o,"aria-pressed":o,"data-state":o?"on":"off","data-disabled":e.disabled?"":void 0,...g,ref:a,onPress:f(e.onPress??void 0,y=>{e.disabled||c(!o)})})})}));t.displayName=s;export{t as Toggle,r as ToggleFrame};
+import { jsx } from "react/jsx-runtime";
+import { ThemeableStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { Theme, composeEventHandlers, styled } from "@tamagui/web";
+import * as React from "react";
+const NAME = "Toggle";
+const ToggleFrame = styled(ThemeableStack, {
+  name: NAME,
+  tag: "button",
+  variants: {
+    unstyled: {
+      false: {
+        pressTheme: true,
+        backgroundColor: "$background",
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        borderColor: "$borderColor",
+        borderWidth: "1px",
+        margin: "-1px",
+        hoverStyle: {
+          backgroundColor: "$backgroundHover"
+        },
+        pressStyle: {
+          backgroundColor: "$backgroundPress"
+        },
+        focusStyle: {
+          borderColor: "$borderColorPress",
+          backgroundColor: "$backgroundPress"
+        }
+      }
+    },
+    active: {
+      true: {
+        zIndex: 1,
+        hoverStyle: {
+          backgroundColor: "$background"
+        },
+        focusStyle: {
+          borderColor: "$borderColorPress",
+          backgroundColor: "$backgroundPress"
+        }
+      }
+    },
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        spaceDirection: "horizontal"
+      },
+      vertical: {
+        flexDirection: "column",
+        spaceDirection: "vertical"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const Toggle = ToggleFrame.extractable(
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      pressed: pressedProp,
+      defaultPressed = false,
+      onPressedChange,
+      ...buttonProps
+    } = props;
+    const [pressed = false, setPressed] = useControllableState({
+      prop: pressedProp,
+      onChange: onPressedChange,
+      defaultProp: defaultPressed
+    });
+    return /* @__PURE__ */ jsx(Theme, { forceClassName: true, name: pressed ? "active" : null, children: /* @__PURE__ */ jsx(
+      ToggleFrame,
+      {
+        active: !props.unstyled ? pressed : void 0,
+        "aria-pressed": pressed,
+        "data-state": pressed ? "on" : "off",
+        "data-disabled": props.disabled ? "" : void 0,
+        ...buttonProps,
+        ref: forwardedRef,
+        onPress: composeEventHandlers(props.onPress ?? void 0, (event) => {
+          if (!props.disabled) {
+            setPressed(!pressed);
+          }
+        })
+      }
+    ) });
+  })
+);
+Toggle.displayName = NAME;
+export {
+  Toggle,
+  ToggleFrame
+};
 //# sourceMappingURL=Toggle.mjs.map

package/dist/esm/Toggle.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/Toggle.tsx"],
   "sourcesContent": ["import { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { GetProps, Theme, composeEventHandlers, isWeb, styled } from '@tamagui/web'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Toggle'\n\ntype TamaguiButtonElement = HTMLButtonElement\n\ntype ToggleElement = TamaguiButtonElement\n\nconst ToggleFrame = styled(ThemeableStack, {\n  name: NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        pressTheme: true,\n        backgroundColor: '$background',\n        alignItems: 'center',\n        justifyContent: 'center',\n        display: 'flex',\n        borderColor: '$borderColor',\n        borderWidth: '1px',\n        margin: '-1px',\n        hoverStyle: {\n          backgroundColor: '$backgroundHover',\n        },\n        pressStyle: {\n          backgroundColor: '$backgroundPress',\n        },\n        focusStyle: {\n          borderColor: '$borderColorPress',\n          backgroundColor: '$backgroundPress',\n        },\n      },\n    },\n    active: {\n      true: {\n        zIndex: 1,\n        hoverStyle: {\n          backgroundColor: '$background',\n        },\n        focusStyle: {\n          borderColor: '$borderColorPress',\n          backgroundColor: '$backgroundPress',\n        },\n      },\n    },\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        spaceDirection: 'horizontal',\n      },\n      vertical: {\n        flexDirection: 'column',\n        spaceDirection: 'vertical',\n      },\n    },\n  } as const,\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype ToggleFrameProps = GetProps<typeof ToggleFrame>\n\ntype ToggleProps = ToggleFrameProps & {\n  defaultValue?: string\n  disabled?: boolean\n  pressed?: boolean\n  defaultPressed?: boolean\n  onPressedChange?(pressed: boolean): void\n}\n\nconst Toggle = ToggleFrame.extractable(\n  React.forwardRef<ToggleElement, ToggleProps>((props, forwardedRef) => {\n    const {\n      pressed: pressedProp,\n      defaultPressed = false,\n      onPressedChange,\n      ...buttonProps\n    } = props\n\n    const [pressed = false, setPressed] = useControllableState({\n      prop: pressedProp,\n      onChange: onPressedChange,\n      defaultProp: defaultPressed,\n    })\n\n    return (\n      <Theme forceClassName name={pressed ? 'active' : null}>\n        <ToggleFrame\n          active={!props.unstyled ? pressed : undefined}\n          aria-pressed={pressed}\n          data-state={pressed ? 'on' : 'off'}\n          data-disabled={props.disabled ? '' : undefined}\n          {...buttonProps}\n          ref={forwardedRef}\n          onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n            if (!props.disabled) {\n              setPressed(!pressed)\n            }\n          })}\n          // caught by onPress - no need for this\n          // {...(isWeb && {\n          //   onKeyDown: composeEventHandlers(\n          //     (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n          //     (event) => {\n          //       if ([' ', 'Enter'].includes(event.key)) {\n          //         if (!props.disabled) {\n          //           setPressed(!pressed)\n          //         }\n          //       }\n          //     }\n          //   ),\n          // })}\n        />\n      </Theme>\n    )\n  })\n)\nToggle.displayName = NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport { Toggle, ToggleFrame }\nexport type { ToggleProps }\n"],
-  "mappings": "AAiGQ,cAAAA,MAAA,oBAjGR,OAAS,kBAAAC,MAAsB,kBAC/B,OAAS,wBAAAC,MAA4B,kCACrC,OAAmB,SAAAC,EAAO,wBAAAC,EAA6B,UAAAC,MAAc,eACrE,UAAYC,MAAW,QAMvB,MAAMC,EAAO,SAMPC,EAAcH,EAAOJ,EAAgB,CACzC,KAAMM,EACN,IAAK,SAEL,SAAU,CACR,SAAU,CACR,MAAO,CACL,WAAY,GACZ,gBAAiB,cACjB,WAAY,SACZ,eAAgB,SAChB,QAAS,OACT,YAAa,eACb,YAAa,MACb,OAAQ,OACR,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,OAAQ,EACR,WAAY,CACV,gBAAiB,aACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,YAAa,CACX,WAAY,CACV,cAAe,MACf,eAAgB,YAClB,EACA,SAAU,CACR,cAAe,SACf,eAAgB,UAClB,CACF,CACF,EACA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAYKE,EAASD,EAAY,YACzBF,EAAM,WAAuC,CAACI,EAAOC,IAAiB,CACpE,KAAM,CACJ,QAASC,EACT,eAAAC,EAAiB,GACjB,gBAAAC,EACA,GAAGC,CACL,EAAIL,EAEE,CAACM,EAAU,GAAOC,CAAU,EAAIf,EAAqB,CACzD,KAAMU,EACN,SAAUE,EACV,YAAaD,CACf,CAAC,EAED,OACEb,EAACG,EAAA,CAAM,eAAc,GAAC,KAAMa,EAAU,SAAW,KAC/C,SAAAhB,EAACQ,EAAA,CACC,OAASE,EAAM,SAAqB,OAAVM,EAC1B,eAAcA,EACd,aAAYA,EAAU,KAAO,MAC7B,gBAAeN,EAAM,SAAW,GAAK,OACpC,GAAGK,EACJ,IAAKJ,EACL,QAASP,EAAqBM,EAAM,SAAW,OAAYQ,GAAU,CAC9DR,EAAM,UACTO,EAAW,CAACD,CAAO,CAEvB,CAAC,EAcH,EACF,CAEJ,CAAC,CACH,EACAP,EAAO,YAAcF",
-  "names": ["jsx", "ThemeableStack", "useControllableState", "Theme", "composeEventHandlers", "styled", "React", "NAME", "ToggleFrame", "Toggle", "props", "forwardedRef", "pressedProp", "defaultPressed", "onPressedChange", "buttonProps", "pressed", "setPressed", "event"]
+  "mappings": "AAiGQ;AAjGR,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAmB,OAAO,sBAA6B,cAAc;AACrE,YAAY,WAAW;AAMvB,MAAM,OAAO;AAMb,MAAM,cAAc,OAAO,gBAAgB;AAAA,EACzC,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,aAAa;AAAA,QACb,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,QAAQ;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAYD,MAAM,SAAS,YAAY;AAAA,EACzB,MAAM,WAAuC,CAAC,OAAO,iBAAiB;AACpE,UAAM;AAAA,MACJ,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,MACzD,MAAM;AAAA,MACN,UAAU;AAAA,MACV,aAAa;AAAA,IACf,CAAC;AAED,WACE,oBAAC,SAAM,gBAAc,MAAC,MAAM,UAAU,WAAW,MAC/C;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC,MAAM,WAAW,UAAU;AAAA,QACpC,gBAAc;AAAA,QACd,cAAY,UAAU,OAAO;AAAA,QAC7B,iBAAe,MAAM,WAAW,KAAK;AAAA,QACpC,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,SAAS,qBAAqB,MAAM,WAAW,QAAW,CAAC,UAAU;AACnE,cAAI,CAAC,MAAM,UAAU;AACnB,uBAAW,CAAC,OAAO;AAAA,UACrB;AAAA,QACF,CAAC;AAAA;AAAA,IAcH,GACF;AAAA,EAEJ,CAAC;AACH;AACA,OAAO,cAAc;",
+  "names": []
 }

package/dist/esm/ToggleGroup.js

@@ -1,2 +1,313 @@
-import{jsx as l}from"react/jsx-runtime";import{createContextScope as V}from"@tamagui/create-context";import{registerFocusable as O}from"@tamagui/focusable";import{getFontSize as N}from"@tamagui/font-size";import{stepTokenUpOrDown as L}from"@tamagui/get-size";import{Group as U,useGroupItem as $}from"@tamagui/group";import{useGetThemedIcon as j}from"@tamagui/helpers-tamagui";import{RovingFocusGroup as z,createRovingFocusGroupScope as _}from"@tamagui/roving-focus";import{useControllableState as F}from"@tamagui/use-controllable-state";import{useDirection as B}from"@tamagui/use-direction";import{getVariableValue as I,isWeb as H,styled as W,useTheme as q,withStaticProperties as J}from"@tamagui/web";import s from"react";import{Toggle as K,ToggleFrame as v}from"./Toggle";const m="ToggleGroup",[S,Q]=V(m,[_]),G="ToggleGroupItem",[ve,X]=V(G),[Y,ye]=S(m),be=X(),R=v.extractable(s.forwardRef((e,p)=>{const n=w(G,e.__scopeToggleGroup),t=te(G,e.__scopeToggleGroup),r=e.__scopeToggleGroup,u=D(e.__scopeToggleGroup),i=n.value.includes(e.value),o=t.disabled||e.disabled||!1,g=s.useRef(null),T=$({disabled:o}),a=e.size??t.size,c={width:void 0,height:void 0,padding:I(a)*.6};e.orientation==="horizontal"?c.height=I(a)*2.4:c.width=I(a)*2.4;const d=(typeof a=="number"?a*.7:N(a))*1.2,P=q(),f=j({size:d,color:P.color}),y=s.Children.toArray(e.children).map(b=>e.disablePassStyles||!s.isValidElement(b)?b:f(b)),x={...e,pressed:i,disabled:o,...c,children:y};return l(Y,{scope:r,children:t.rovingFocus?l(z.Item,{asChild:!0,...u,focusable:!o,active:i,children:l(v,{asChild:!0,focusable:!o,disabled:o,ref:g,...T,children:l(M,{...x,ref:p})})}):l(v,{asChild:!0,focusable:!o,disabled:o,ref:g,children:l(M,{...x,ref:p})})})}));R.displayName=G;const M=v.extractable(s.forwardRef((e,p)=>{const{__scopeToggleGroup:n,value:t,...r}=e,u=w(G,n),i={"aria-pressed":void 0},o=u.type==="single"?i:void 0;return l(K,{...o,...r,ref:p,onPressedChange:g=>{g?u.onItemActivate(t):u.onItemDeactivate(t)}})})),D=_(),h=J(s.forwardRef((e,p)=>{const{type:n,...t}=e;if(H||s.useEffect(()=>{if(e.id)return O(e.id,{focus:()=>{}})},[e.id]),n==="single")return l(Z,{...t,ref:p});if(n==="multiple")return l(ee,{...t,ref:p});throw new Error(`Missing prop \`type\` expected on \`${m}\``)}),{Item:R});h.displayName=m;const[k,w]=S(m),Z=s.forwardRef((e,p)=>{const{value:n,defaultValue:t,onValueChange:r=()=>{},disableDeactivation:u=!1,...i}=e,[o,g]=F({prop:n,defaultProp:t,onChange:r});return l(k,{scope:e.__scopeToggleGroup,type:"single",value:o?[o]:[],defaultValue:o,onItemActivate:g,onItemDeactivate:s.useCallback(()=>u?null:g(""),[g,u]),children:l(A,{...i,ref:p})})}),ee=s.forwardRef((e,p)=>{const{value:n,defaultValue:t,onValueChange:r=()=>{},...u}=e,[i=[],o]=F({prop:n,defaultProp:t,onChange:r}),g=s.useCallback(a=>o((c=[])=>[...c,a]),[o]),T=s.useCallback(a=>o((c=[])=>c.filter(d=>d!==a)),[o]);return l(k,{scope:e.__scopeToggleGroup,type:"multiple",value:i,defaultValue:i,onItemActivate:g,onItemDeactivate:T,children:l(A,{...u,ref:p})})});h.displayName=m;const[oe,te]=S(m),C=W(U,{name:m,variants:{unstyled:{false:{backgroundColor:"$background"}},orientation:{vertical:{flexDirection:"column",spaceDirection:"vertical"},horizontal:{flexDirection:"row",spaceDirection:"horizontal"}}},defaultVariants:{unstyled:!1}}),A=C.extractable(s.forwardRef((e,p)=>{const{__scopeToggleGroup:n,disabled:t=!1,orientation:r="horizontal",dir:u,rovingFocus:i=!0,loop:o=!0,unstyled:g=!1,size:T="$true",sizeAdjust:a=0,...c}=e,d=D(n),P=B(u),f={role:"togglegroup",dir:P,...c},E=I(L("size",e.size,a)),y=Math.round(E*.45);return l(oe,{scope:n,rovingFocus:i,disabled:t,size:y,children:i?l(z,{asChild:!0,...d,orientation:r,dir:P,loop:o,children:l(C,{"aria-orientation":r,orientation:r,axis:r,ref:p,"data-disabled":t?"":void 0,unstyled:g,...f})}):l(C,{"aria-orientation":r,ref:p,orientation:r,"data-disabled":t?"":void 0,unstyled:g,...f})})}));export{h as ToggleGroup,Q as createToggleGroupScope};
+import { jsx } from "react/jsx-runtime";
+import { createContextScope } from "@tamagui/create-context";
+import { registerFocusable } from "@tamagui/focusable";
+import { getFontSize } from "@tamagui/font-size";
+import { stepTokenUpOrDown } from "@tamagui/get-size";
+import { Group, useGroupItem } from "@tamagui/group";
+import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
+import { RovingFocusGroup, createRovingFocusGroupScope } from "@tamagui/roving-focus";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { useDirection } from "@tamagui/use-direction";
+import {
+  getVariableValue,
+  isWeb,
+  styled,
+  useTheme,
+  withStaticProperties
+} from "@tamagui/web";
+import React from "react";
+import { Toggle, ToggleFrame } from "./Toggle";
+const TOGGLE_GROUP_NAME = "ToggleGroup";
+const [createToggleGroupContext, createToggleGroupScope] = createContextScope(
+  TOGGLE_GROUP_NAME,
+  [createRovingFocusGroupScope]
+);
+const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
+const [createToggleGroupItemContext, createToggleGroupItemScope] = createContextScope(TOGGLE_GROUP_ITEM_NAME);
+const [ToggleGroupItemProvider, useToggleGroupItemContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+const useToggleGroupItemScope = createToggleGroupItemScope();
+const ToggleGroupItem = ToggleFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      const valueContext = useToggleGroupValueContext(
+        TOGGLE_GROUP_ITEM_NAME,
+        props.__scopeToggleGroup
+      );
+      const context = useToggleGroupContext(
+        TOGGLE_GROUP_ITEM_NAME,
+        props.__scopeToggleGroup
+      );
+      const __scopeToggleGroup = props.__scopeToggleGroup;
+      const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
+      const pressed = valueContext.value.includes(props.value);
+      const disabled = context.disabled || props.disabled || false;
+      const ref = React.useRef(null);
+      const groupItemProps = useGroupItem({ disabled });
+      const size = props.size ?? context.size;
+      const sizeProps = {
+        width: void 0,
+        height: void 0,
+        padding: getVariableValue(size) * 0.6
+      };
+      if (props.orientation === "horizontal")
+        sizeProps.height = getVariableValue(size) * 2.4;
+      else
+        sizeProps.width = getVariableValue(size) * 2.4;
+      const iconSize = (typeof size === "number" ? size * 0.7 : getFontSize(size)) * 1.2;
+      const theme = useTheme();
+      const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color });
+      const childrens = React.Children.toArray(props.children);
+      const children = childrens.map((child) => {
+        if (props.disablePassStyles || !React.isValidElement(child)) {
+          return child;
+        }
+        return getThemedIcon(child);
+      });
+      const commonProps = { ...props, pressed, disabled, ...sizeProps, children };
+      return /* @__PURE__ */ jsx(ToggleGroupItemProvider, { scope: __scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ jsx(
+        RovingFocusGroup.Item,
+        {
+          asChild: true,
+          ...rovingFocusGroupScope,
+          focusable: !disabled,
+          active: pressed,
+          children: /* @__PURE__ */ jsx(
+            ToggleFrame,
+            {
+              asChild: true,
+              focusable: !disabled,
+              disabled,
+              ref,
+              ...groupItemProps,
+              children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(ToggleFrame, { asChild: true, focusable: !disabled, disabled, ref, children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef }) }) });
+    }
+  )
+);
+ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
+const ToggleGroupItemImpl = ToggleFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopeToggleGroup, value, ...itemProps } = props;
+      const valueContext = useToggleGroupValueContext(
+        TOGGLE_GROUP_ITEM_NAME,
+        __scopeToggleGroup
+      );
+      const singleProps = {
+        "aria-pressed": void 0
+      };
+      const typeProps = valueContext.type === "single" ? singleProps : void 0;
+      return /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          ...typeProps,
+          ...itemProps,
+          ref: forwardedRef,
+          onPressedChange: (pressed) => {
+            if (pressed) {
+              valueContext.onItemActivate(value);
+            } else {
+              valueContext.onItemDeactivate(value);
+            }
+          }
+        }
+      );
+    }
+  )
+);
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+const ToggleGroup = withStaticProperties(
+  React.forwardRef((props, forwardedRef) => {
+    const { type, ...toggleGroupProps } = props;
+    if (!isWeb) {
+      React.useEffect(() => {
+        if (!props.id)
+          return;
+        return registerFocusable(props.id, {
+          // TODO: would be nice to focus on the first child later - could be done with reforest
+          // for now leaving it empty
+          focus: () => {
+          }
+        });
+      }, [props.id]);
+    }
+    if (type === "single") {
+      const singleProps = toggleGroupProps;
+      return /* @__PURE__ */ jsx(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
+    }
+    if (type === "multiple") {
+      const multipleProps = toggleGroupProps;
+      return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
+    }
+    throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
+  }),
+  {
+    Item: ToggleGroupItem
+  }
+);
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+const [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+const ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    disableDeactivation = false,
+    ...toggleGroupSingleProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(
+    ToggleGroupValueProvider,
+    {
+      scope: props.__scopeToggleGroup,
+      type: "single",
+      value: value ? [value] : [],
+      defaultValue: value,
+      onItemActivate: setValue,
+      onItemDeactivate: React.useCallback(() => disableDeactivation ? null : setValue(""), [setValue, disableDeactivation]),
+      children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
+    }
+  );
+});
+const ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    ...toggleGroupMultipleProps
+  } = props;
+  const [value = [], setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  const handleButtonActivate = React.useCallback(
+    (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
+    [setValue]
+  );
+  const handleButtonDeactivate = React.useCallback(
+    (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
+    [setValue]
+  );
+  return /* @__PURE__ */ jsx(
+    ToggleGroupValueProvider,
+    {
+      scope: props.__scopeToggleGroup,
+      type: "multiple",
+      value,
+      defaultValue: value,
+      onItemActivate: handleButtonActivate,
+      onItemDeactivate: handleButtonDeactivate,
+      children: /* @__PURE__ */ jsx(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
+    }
+  );
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+const ToggleGroupImplElementFrame = styled(Group, {
+  name: TOGGLE_GROUP_NAME,
+  variants: {
+    unstyled: {
+      false: {
+        backgroundColor: "$background"
+      }
+    },
+    orientation: {
+      vertical: {
+        flexDirection: "column",
+        spaceDirection: "vertical"
+      },
+      horizontal: {
+        flexDirection: "row",
+        spaceDirection: "horizontal"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      const {
+        __scopeToggleGroup,
+        disabled = false,
+        orientation = "horizontal",
+        dir,
+        rovingFocus = true,
+        loop = true,
+        unstyled = false,
+        size: sizeProp = "$true",
+        sizeAdjust = 0,
+        ...toggleGroupProps
+      } = props;
+      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
+      const direction = useDirection(dir);
+      const commonProps = {
+        role: "togglegroup",
+        dir: direction,
+        ...toggleGroupProps
+      };
+      const adjustedSize = getVariableValue(
+        stepTokenUpOrDown("size", props.size, sizeAdjust)
+      );
+      const size = Math.round(adjustedSize * 0.45);
+      return /* @__PURE__ */ jsx(
+        ToggleGroupContext,
+        {
+          scope: __scopeToggleGroup,
+          rovingFocus,
+          disabled,
+          size,
+          children: rovingFocus ? /* @__PURE__ */ jsx(
+            RovingFocusGroup,
+            {
+              asChild: true,
+              ...rovingFocusGroupScope,
+              orientation,
+              dir: direction,
+              loop,
+              children: /* @__PURE__ */ jsx(
+                ToggleGroupImplElementFrame,
+                {
+                  "aria-orientation": orientation,
+                  orientation,
+                  axis: orientation,
+                  ref: forwardedRef,
+                  "data-disabled": disabled ? "" : void 0,
+                  unstyled,
+                  ...commonProps
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            ToggleGroupImplElementFrame,
+            {
+              "aria-orientation": orientation,
+              ref: forwardedRef,
+              orientation,
+              "data-disabled": disabled ? "" : void 0,
+              unstyled,
+              ...commonProps
+            }
+          )
+        }
+      );
+    }
+  )
+);
+export {
+  ToggleGroup,
+  createToggleGroupScope
+};
 //# sourceMappingURL=ToggleGroup.js.map