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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/dist/cjs/Toggle.cjs +65 -130
  2. package/dist/cjs/Toggle.native.cjs +100 -0
  3. package/dist/cjs/Toggle.native.js +75 -136
  4. package/dist/cjs/Toggle.native.js.map +1 -1
  5. package/dist/cjs/ToggleGroup.cjs +158 -211
  6. package/dist/cjs/ToggleGroup.native.cjs +208 -0
  7. package/dist/cjs/ToggleGroup.native.js +173 -225
  8. package/dist/cjs/ToggleGroup.native.js.map +1 -1
  9. package/dist/cjs/context.cjs +19 -20
  10. package/dist/cjs/context.native.cjs +37 -0
  11. package/dist/cjs/context.native.js +20 -20
  12. package/dist/cjs/context.native.js.map +1 -1
  13. package/dist/cjs/index.cjs +15 -18
  14. package/dist/cjs/index.native.cjs +29 -0
  15. package/dist/cjs/index.native.js +15 -17
  16. package/dist/cjs/index.native.js.map +1 -1
  17. package/dist/cjs/types.cjs +10 -11
  18. package/dist/cjs/types.native.cjs +19 -0
  19. package/dist/cjs/types.native.js +10 -10
  20. package/dist/cjs/types.native.js.map +1 -1
  21. package/dist/esm/Toggle.mjs +53 -104
  22. package/dist/esm/Toggle.mjs.map +1 -1
  23. package/dist/esm/Toggle.native.js +61 -115
  24. package/dist/esm/Toggle.native.js.map +1 -1
  25. package/dist/esm/ToggleGroup.mjs +145 -188
  26. package/dist/esm/ToggleGroup.mjs.map +1 -1
  27. package/dist/esm/ToggleGroup.native.js +160 -203
  28. package/dist/esm/ToggleGroup.native.js.map +1 -1
  29. package/dist/esm/context.mjs +5 -3
  30. package/dist/esm/context.mjs.map +1 -1
  31. package/dist/esm/context.native.js +6 -4
  32. package/dist/esm/context.native.js.map +1 -1
  33. package/dist/esm/index.js +4 -3
  34. package/dist/esm/index.mjs +4 -3
  35. package/dist/esm/index.native.js +4 -3
  36. package/dist/esm/types.mjs +0 -2
  37. package/dist/esm/types.native.js +0 -2
  38. package/dist/jsx/Toggle.mjs +53 -104
  39. package/dist/jsx/Toggle.mjs.map +1 -1
  40. package/dist/jsx/Toggle.native.cjs +100 -0
  41. package/dist/jsx/Toggle.native.js +75 -136
  42. package/dist/jsx/Toggle.native.js.map +1 -1
  43. package/dist/jsx/ToggleGroup.mjs +145 -188
  44. package/dist/jsx/ToggleGroup.mjs.map +1 -1
  45. package/dist/jsx/ToggleGroup.native.cjs +208 -0
  46. package/dist/jsx/ToggleGroup.native.js +173 -225
  47. package/dist/jsx/ToggleGroup.native.js.map +1 -1
  48. package/dist/jsx/context.mjs +5 -3
  49. package/dist/jsx/context.mjs.map +1 -1
  50. package/dist/jsx/context.native.cjs +37 -0
  51. package/dist/jsx/context.native.js +20 -20
  52. package/dist/jsx/context.native.js.map +1 -1
  53. package/dist/jsx/index.js +4 -3
  54. package/dist/jsx/index.mjs +4 -3
  55. package/dist/jsx/index.native.cjs +29 -0
  56. package/dist/jsx/index.native.js +15 -17
  57. package/dist/jsx/index.native.js.map +1 -1
  58. package/dist/jsx/types.mjs +0 -2
  59. package/dist/jsx/types.native.cjs +19 -0
  60. package/dist/jsx/types.native.js +10 -10
  61. package/dist/jsx/types.native.js.map +1 -1
  62. package/package.json +16 -15
  63. package/src/Toggle.tsx +27 -66
  64. package/src/ToggleGroup.tsx +13 -10
  65. package/types/Toggle.d.ts +45 -49
  66. package/types/Toggle.d.ts.map +1 -1
  67. package/types/ToggleGroup.d.ts +26 -87
  68. package/types/ToggleGroup.d.ts.map +1 -1
  69. package/types/context.d.ts +1 -1
  70. package/types/context.d.ts.map +1 -1
  71. package/dist/esm/index.js.map +0 -1
  72. package/dist/esm/index.mjs.map +0 -1
  73. package/dist/esm/index.native.js.map +0 -1
  74. package/dist/esm/types.mjs.map +0 -1
  75. package/dist/esm/types.native.js.map +0 -1
  76. package/dist/jsx/index.js.map +0 -1
  77. package/dist/jsx/index.mjs.map +0 -1
  78. package/dist/jsx/types.mjs.map +0 -1
@@ -1,4 +1,5 @@
1
- export * from "./ToggleGroup.mjs";
2
1
  import { useToggleGroupItem } from "./context.mjs";
3
- export { useToggleGroupItem };
4
- //# sourceMappingURL=index.mjs.map
2
+
3
+ export * from "./ToggleGroup.mjs"
4
+
5
+ export { useToggleGroupItem };
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all) __defProp(target, name, {
10
+ get: all[name],
11
+ enumerable: true
12
+ });
13
+ };
14
+ var __copyProps = (to, from, except, desc) => {
15
+ if (from && typeof from === "object" || typeof from === "function") {
16
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
17
+ get: () => from[key],
18
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
19
+ });
20
+ }
21
+ return to;
22
+ };
23
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
24
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
25
+ var index_exports = {};
26
+ __export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
27
+ module.exports = __toCommonJS(index_exports);
28
+ __reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
29
+ var import_context = require("./context.native.js");
@@ -1,33 +1,31 @@
1
1
  "use strict";
2
2
 
3
+
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
8
  var __export = (target, all) => {
8
- for (var name in all) __defProp(target, name, {
9
- get: all[name],
10
- enumerable: true
11
- });
9
+ for (var name in all) __defProp(target, name, {
10
+ get: all[name],
11
+ enumerable: true
12
+ });
12
13
  };
13
14
  var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
16
- get: () => from[key],
17
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
18
- });
19
- }
20
- return to;
15
+ if (from && typeof from === "object" || typeof from === "function") {
16
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
17
+ get: () => from[key],
18
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
19
+ });
20
+ }
21
+ return to;
21
22
  };
22
23
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
23
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
24
- value: true
25
- }), mod);
24
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
26
25
  var index_exports = {};
27
- __export(index_exports, {
28
- useToggleGroupItem: () => import_context.useToggleGroupItem
29
- });
26
+ __export(index_exports, { useToggleGroupItem: () => import_context.useToggleGroupItem });
30
27
  module.exports = __toCommonJS(index_exports);
31
28
  __reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
32
29
  var import_context = require("./context.native.js");
30
+
33
31
  //# sourceMappingURL=index.native.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["__defProp","Object","defineProperty"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAA0B","ignoreList":[]}
1
+ {"version":3,"file":"index.native.js","names":[],"sources":["jsx/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\n__export(index_exports, {\n useToggleGroupItem: () => import_context.useToggleGroupItem\n});\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./ToggleGroup\"), module.exports);\nvar import_context = require(\"./context\");\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,SAAS,eAAe,EACtB,0BAA0B,eAAe,mBAC3C,CAAC;AACD,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,yBAAe,GAAG,OAAO,OAAO;AAClE,IAAI,iBAAiB,QAAQ,qBAAW"}
@@ -1,2 +0,0 @@
1
-
2
- //# sourceMappingURL=types.mjs.map
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __copyProps = (to, from, except, desc) => {
9
+ if (from && typeof from === "object" || typeof from === "function") {
10
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
11
+ get: () => from[key],
12
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
13
+ });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var types_exports = {};
19
+ module.exports = __toCommonJS(types_exports);
@@ -1,21 +1,21 @@
1
1
  "use strict";
2
2
 
3
+
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
8
  var __copyProps = (to, from, except, desc) => {
8
- if (from && typeof from === "object" || typeof from === "function") {
9
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
10
- get: () => from[key],
11
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
12
- });
13
- }
14
- return to;
9
+ if (from && typeof from === "object" || typeof from === "function") {
10
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
11
+ get: () => from[key],
12
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
13
+ });
14
+ }
15
+ return to;
15
16
  };
16
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
17
- value: true
18
- }), mod);
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
18
  var types_exports = {};
20
19
  module.exports = __toCommonJS(types_exports);
20
+
21
21
  //# sourceMappingURL=types.native.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"types.native.js","names":[],"sources":["jsx/types.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar types_exports = {};\nmodule.exports = __toCommonJS(types_exports);\n//# sourceMappingURL=types.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/toggle-group",
3
- "version": "2.7.7",
3
+ "version": "3.0.0-beta.643.1",
4
4
  "source": "src/index.ts",
5
5
  "files": [
6
6
  "src",
@@ -34,22 +34,23 @@
34
34
  "clean:build": "tamagui-build clean:build"
35
35
  },
36
36
  "dependencies": {
37
- "@tamagui/constants": "2.7.7",
38
- "@tamagui/create-context": "2.7.7",
39
- "@tamagui/focusable": "2.7.7",
40
- "@tamagui/get-token": "2.7.7",
41
- "@tamagui/helpers": "2.7.7",
42
- "@tamagui/helpers-tamagui": "2.7.7",
43
- "@tamagui/roving-focus": "2.7.7",
44
- "@tamagui/sizable-context": "2.7.7",
45
- "@tamagui/stacks": "2.7.7",
46
- "@tamagui/use-controllable-state": "2.7.7",
47
- "@tamagui/use-direction": "2.7.7",
48
- "@tamagui/font-size": "2.7.7",
49
- "@tamagui/web": "2.7.7"
37
+ "@tamagui/compose-refs": "3.0.0-beta.643.1",
38
+ "@tamagui/constants": "3.0.0-beta.643.1",
39
+ "@tamagui/create-context": "3.0.0-beta.643.1",
40
+ "@tamagui/focusable": "3.0.0-beta.643.1",
41
+ "@tamagui/font-size": "3.0.0-beta.643.1",
42
+ "@tamagui/get-token": "3.0.0-beta.643.1",
43
+ "@tamagui/helpers": "3.0.0-beta.643.1",
44
+ "@tamagui/helpers-tamagui": "3.0.0-beta.643.1",
45
+ "@tamagui/roving-focus": "3.0.0-beta.643.1",
46
+ "@tamagui/size": "3.0.0-beta.643.1",
47
+ "@tamagui/stacks": "3.0.0-beta.643.1",
48
+ "@tamagui/use-controllable-state": "3.0.0-beta.643.1",
49
+ "@tamagui/use-direction": "3.0.0-beta.643.1",
50
+ "@tamagui/web": "3.0.0-beta.643.1"
50
51
  },
51
52
  "devDependencies": {
52
- "@tamagui/build": "2.7.7",
53
+ "@tamagui/build": "3.0.0-beta.643.1",
53
54
  "react": ">=19"
54
55
  },
55
56
  "peerDependencies": {
package/src/Toggle.tsx CHANGED
@@ -1,4 +1,6 @@
1
+ import { createRefComponent } from '@tamagui/compose-refs'
1
2
  import { composeEventHandlers } from '@tamagui/helpers'
3
+ import { resolveSizeToken } from '@tamagui/size'
2
4
  import { useControllableState } from '@tamagui/use-controllable-state'
3
5
  import type { GetProps, TamaguiElement, ViewStyle } from '@tamagui/web'
4
6
  import { styled, View } from '@tamagui/web'
@@ -11,71 +13,45 @@ import { context } from './context'
11
13
 
12
14
  const NAME = 'Toggle'
13
15
 
16
+ // Unstyled Toggle behavior frame: structural layout, the size mechanism
17
+ // (hit-target dimensions), the native button render, and focus reset only. All
18
+ // theme decoration (palette, border, hover/press/focus color styling) and the
19
+ // default "active" appearance live in the tamagui skin
20
+ // (code/ui/tamagui/src/components/ToggleGroup.tsx). The frame still emits the
21
+ // discrete state (aria-pressed / data-state) via the Toggle component below; the
22
+ // skins can supply a plain style prop object that is applied while active.
14
23
  export const ToggleFrame = styled(
15
24
  View,
16
25
  {
17
- name: NAME,
26
+ displayName: NAME,
18
27
  render: 'button',
19
28
  context,
29
+ size: true,
30
+ alignItems: 'center',
31
+ justifyContent: 'center',
32
+ display: 'flex',
20
33
 
21
34
  variants: {
22
- unstyled: {
23
- false: {
24
- size: '$true',
25
- alignItems: 'center',
26
- justifyContent: 'center',
27
- display: 'flex',
28
- backgroundColor: '$background',
29
- borderColor: '$borderColor',
30
- borderWidth: 1,
31
- margin: -1,
32
- hoverStyle: {
33
- backgroundColor: '$backgroundHover',
34
- borderColor: '$borderColorHover',
35
- },
36
- pressStyle: {
37
- backgroundColor: '$backgroundPress',
38
- borderColor: '$borderColorPress',
39
- },
40
- focusVisibleStyle: {
41
- outlineColor: '$outlineColor',
42
- outlineWidth: 2,
43
- outlineStyle: 'solid',
44
- zIndex: 10,
45
- },
46
- },
47
- },
48
-
49
35
  size: {
50
- '...size': (val, { tokens }) => {
36
+ number: (val) => ({
37
+ width: val,
38
+ height: val,
39
+ }),
40
+ Size: (val, { tokens }) => {
51
41
  if (!val) return
42
+ const sizeToken = resolveSizeToken(val, 'size')
43
+ const size = typeof sizeToken === 'number' ? sizeToken : tokens.size[sizeToken]
52
44
  return {
53
- width: tokens.size[val],
54
- height: tokens.size[val],
45
+ width: size,
46
+ height: size,
55
47
  }
56
48
  },
57
- ':number': (val) => ({
58
- width: val,
59
- height: val,
60
- }),
61
49
  },
62
50
 
63
51
  defaultActiveStyle: {
64
- true: {
65
- backgroundColor: '$backgroundActive',
66
- hoverStyle: {
67
- backgroundColor: '$backgroundActive',
68
- },
69
- focusStyle: {
70
- backgroundColor: '$backgroundActive',
71
- },
72
- },
52
+ true: {},
73
53
  },
74
54
  } as const,
75
-
76
- defaultVariants: {
77
- unstyled: process.env.TAMAGUI_HEADLESS === '1',
78
- },
79
55
  },
80
56
  {
81
57
  accept: {
@@ -99,7 +75,7 @@ type ToggleItemExtraProps = {
99
75
 
100
76
  export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps
101
77
 
102
- export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
78
+ export const Toggle = createRefComponent<TamaguiElement, ToggleProps>(
103
79
  function Toggle(props, forwardedRef) {
104
80
  const {
105
81
  active: activeProp,
@@ -107,7 +83,6 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
107
83
  defaultActive = false,
108
84
  onActiveChange,
109
85
  activeTheme,
110
- unstyled = false,
111
86
  ...buttonProps
112
87
  } = props
113
88
 
@@ -123,23 +98,9 @@ export const Toggle = React.forwardRef<TamaguiElement, ToggleProps>(
123
98
  aria-pressed={active}
124
99
  data-state={active ? 'on' : 'off'}
125
100
  data-disabled={props.disabled ? '' : undefined}
126
- unstyled={unstyled}
127
- {...(active &&
128
- !activeStyle &&
129
- !unstyled && {
130
- defaultActiveStyle: true,
131
- })}
101
+ {...(active && !activeStyle && { defaultActiveStyle: true })}
132
102
  {...buttonProps}
133
- // spread activeStyle after buttonProps so it wins when active: a styled()
134
- // variant (e.g. a resting `backgroundColor`) forwards that value as a plain
135
- // prop into buttonProps, which would otherwise clobber the activeStyle merge
136
- // on overlapping keys and leave the active item stuck at its resting style.
137
- {...(active &&
138
- activeStyle && {
139
- ...(activeStyle as any),
140
- hoverStyle: activeStyle,
141
- focusStyle: activeStyle,
142
- })}
103
+ {...(active && activeStyle ? (activeStyle as any) : undefined)}
143
104
  ref={forwardedRef}
144
105
  onPress={composeEventHandlers(props.onPress ?? undefined, () => {
145
106
  if (!props.disabled) {
@@ -1,3 +1,4 @@
1
+ import { createRefComponent } from '@tamagui/compose-refs'
1
2
  import { isWeb } from '@tamagui/constants'
2
3
  import { registerFocusable } from '@tamagui/focusable'
3
4
  import { withStaticProperties } from '@tamagui/helpers'
@@ -5,7 +6,7 @@ import { RovingFocusGroup } from '@tamagui/roving-focus'
5
6
  import { useControllableState } from '@tamagui/use-controllable-state'
6
7
  import { useDirection } from '@tamagui/use-direction'
7
8
  import type { GetProps, TamaguiElement } from '@tamagui/web'
8
- import { createStyledContext, styled, View } from '@tamagui/web'
9
+ import { createStyledHOC, createStyledContext, styled, View } from '@tamagui/web'
9
10
  import React from 'react'
10
11
 
11
12
  import type { ToggleProps } from './Toggle'
@@ -34,8 +35,9 @@ type ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {
34
35
  disabled?: boolean
35
36
  }
36
37
 
37
- const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>(
38
- (props, forwardedRef) => {
38
+ const ToggleGroupItem = createStyledHOC(
39
+ ToggleFrame,
40
+ (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {
39
41
  const valueContext = useToggleGroupValueContext(props.__scopeToggleGroup)
40
42
  const context = useToggleGroupContext(props.__scopeToggleGroup)
41
43
  const toggleContext = ToggleContext.useStyledContext(props.__scopeToggleGroup)
@@ -60,7 +62,7 @@ const ToggleGroupItem = ToggleFrame.styleable<ScopedProps<ToggleGroupItemProps>>
60
62
  <RovingFocusGroup.Item
61
63
  asChild="except-style"
62
64
  __scopeRovingFocusGroup={props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT}
63
- focusable={!disabled}
65
+ tabIndex={disabled ? -1 : 0}
64
66
  active={active}
65
67
  >
66
68
  {inner}
@@ -81,7 +83,7 @@ type ToggleGroupItemImplProps = Omit<ToggleProps, 'defaultActive' | 'onActiveCha
81
83
  value: string
82
84
  }
83
85
 
84
- const ToggleGroupItemImpl = React.forwardRef<
86
+ const ToggleGroupItemImpl = createRefComponent<
85
87
  TamaguiElement,
86
88
  ScopedProps<ToggleGroupItemImplProps>
87
89
  >((props, forwardedRef) => {
@@ -123,7 +125,7 @@ interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
123
125
  type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps
124
126
 
125
127
  const ToggleGroup = withStaticProperties(
126
- React.forwardRef<TamaguiElement, ScopedProps<ToggleGroupProps>>(
128
+ createRefComponent<TamaguiElement, ScopedProps<ToggleGroupProps>>(
127
129
  (props, forwardedRef) => {
128
130
  const { type, ...toggleGroupProps } = props
129
131
 
@@ -182,7 +184,7 @@ interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
182
184
  disableDeactivation?: boolean
183
185
  }
184
186
 
185
- const ToggleGroupImplSingle = React.forwardRef<
187
+ const ToggleGroupImplSingle = createRefComponent<
186
188
  TamaguiElement,
187
189
  ScopedProps<ToggleGroupImplSingleProps>
188
190
  >((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {
@@ -230,7 +232,7 @@ interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
230
232
  disableDeactivation?: never
231
233
  }
232
234
 
233
- const ToggleGroupImplMultiple = React.forwardRef<
235
+ const ToggleGroupImplMultiple = createRefComponent<
234
236
  TamaguiElement,
235
237
  ToggleGroupImplMultipleProps
236
238
  >((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {
@@ -286,7 +288,7 @@ type ToggleGroupContextValue = {
286
288
  type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>
287
289
 
288
290
  const ToggleGroupFrame = styled(View, {
289
- name: TOGGLE_GROUP_NAME,
291
+ displayName: TOGGLE_GROUP_NAME,
290
292
  })
291
293
 
292
294
  type ToggleGroupImplProps = GetProps<typeof ToggleGroupFrame> & {
@@ -297,7 +299,8 @@ type ToggleGroupImplProps = GetProps<typeof ToggleGroupFrame> & {
297
299
  color?: string
298
300
  }
299
301
 
300
- const ToggleGroupImpl = ToggleGroupFrame.styleable<TamaguiElement, ToggleGroupImplProps>(
302
+ const ToggleGroupImpl = createStyledHOC(
303
+ ToggleGroupFrame,
301
304
  (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {
302
305
  const {
303
306
  __scopeToggleGroup,
package/types/Toggle.d.ts CHANGED
@@ -1,20 +1,58 @@
1
1
  import type { GetProps, TamaguiElement, ViewStyle } from '@tamagui/web';
2
2
  import * as React from 'react';
3
- export declare const ToggleFrame: import("@tamagui/web").TamaguiComponent<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase & {
3
+ export declare const ToggleFrame: React.FunctionComponent<Omit<import("@tamagui/web").StackNonStyleProps, "active" | "activeStyle" | "defaultActiveStyle" | "size" | keyof import("@tamagui/web").StackStyleBase> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
4
4
  readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
5
5
  accept: {
6
- readonly activeStyle: "style";
6
+ readonly activeStyle: 'style';
7
+ };
8
+ }>> | undefined;
9
+ }> & {
10
+ active?: boolean | undefined;
11
+ defaultActiveStyle?: boolean | undefined;
12
+ size?: number | import("@tamagui/web").Size | undefined;
13
+ } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
14
+ readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
15
+ accept: {
16
+ readonly activeStyle: 'style';
17
+ };
18
+ }>> | undefined;
19
+ }>> & {
20
+ ref?: React.Ref<TamaguiElement> | undefined;
21
+ }> & import("@tamagui/web").StaticComponentObject<import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase & {
22
+ readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
23
+ accept: {
24
+ readonly activeStyle: 'style';
7
25
  };
8
26
  }>> | undefined;
9
27
  }, {
10
- unstyled?: boolean | undefined;
11
- size?: number | import("@tamagui/web").SizeTokens | undefined;
28
+ active?: boolean | undefined;
12
29
  defaultActiveStyle?: boolean | undefined;
30
+ size?: number | import("@tamagui/web").Size | undefined;
13
31
  }, {
14
32
  accept: {
15
- readonly activeStyle: "style";
33
+ readonly activeStyle: 'style';
16
34
  };
17
- }>;
35
+ }> & Omit<{
36
+ accept: {
37
+ readonly activeStyle: 'style';
38
+ };
39
+ }, "staticConfig"> & {
40
+ __tama: [import("@tamagui/web").TamaDefer, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase & {
41
+ readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
42
+ accept: {
43
+ readonly activeStyle: 'style';
44
+ };
45
+ }>> | undefined;
46
+ }, {
47
+ active?: boolean | undefined;
48
+ defaultActiveStyle?: boolean | undefined;
49
+ size?: number | import("@tamagui/web").Size | undefined;
50
+ }, {
51
+ accept: {
52
+ readonly activeStyle: 'style';
53
+ };
54
+ }];
55
+ };
18
56
  type ToggleFrameProps = GetProps<typeof ToggleFrame>;
19
57
  type ToggleItemExtraProps = {
20
58
  orientation?: 'horizontal' | 'vertical';
@@ -27,48 +65,6 @@ type ToggleItemExtraProps = {
27
65
  activeTheme?: string | null;
28
66
  };
29
67
  export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps;
30
- export declare const Toggle: React.ForwardRefExoticComponent<Omit<import("@tamagui/web").StackNonStyleProps, "unstyled" | keyof import("@tamagui/web").StackStyleBase | "size" | "activeStyle" | "defaultActiveStyle"> & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
31
- readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
32
- accept: {
33
- readonly activeStyle: "style";
34
- };
35
- }>> | undefined;
36
- }> & {
37
- unstyled?: boolean | undefined;
38
- size?: number | import("@tamagui/web").SizeTokens | undefined;
39
- defaultActiveStyle?: boolean | undefined;
40
- } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
41
- readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
42
- accept: {
43
- readonly activeStyle: "style";
44
- };
45
- }>> | undefined;
46
- }>> & import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
47
- readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
48
- accept: {
49
- readonly activeStyle: "style";
50
- };
51
- }>> | undefined;
52
- }> & {
53
- unstyled?: boolean | undefined;
54
- size?: number | import("@tamagui/web").SizeTokens | undefined;
55
- defaultActiveStyle?: boolean | undefined;
56
- } & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase & {
57
- readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
58
- accept: {
59
- readonly activeStyle: "style";
60
- };
61
- }>> | undefined;
62
- }>>> & import("@tamagui/web").WithMediaProps<import("@tamagui/web").WithThemeShorthandsAndPseudos<import("@tamagui/web").StackStyleBase & {
63
- readonly activeStyle?: Partial<import("@tamagui/web").InferStyleProps<import("@tamagui/web").TamaguiComponent<import("@tamagui/web").ViewProps, TamaguiElement, import("@tamagui/web").StackNonStyleProps, import("@tamagui/web").StackStyleBase, {}, {}>, {
64
- accept: {
65
- readonly activeStyle: "style";
66
- };
67
- }>> | undefined;
68
- }, {
69
- unstyled?: boolean | undefined;
70
- size?: number | import("@tamagui/web").SizeTokens | undefined;
71
- defaultActiveStyle?: boolean | undefined;
72
- }>> & ToggleItemExtraProps & React.RefAttributes<TamaguiElement>>;
68
+ export declare const Toggle: import("@tamagui/compose-refs").RefComponent<TamaguiElement, ToggleProps>;
73
69
  export {};
74
70
  //# sourceMappingURL=Toggle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAuEvB,CAAA;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEAkDlB,CAAA"}
1
+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,eAAO,MAAM,WAAW;;;qBAmClB,WAAW,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAApB,WAAW,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;CAGzB,CAAA;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,oBAAoB,CAAA;AAEjE,eAAO,MAAM,MAAM,2EAmClB,CAAA"}