@tamagui/toggle-group 2.7.7 → 3.0.0-beta.637.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.
- package/dist/cjs/Toggle.cjs +65 -130
- package/dist/cjs/Toggle.native.cjs +100 -0
- package/dist/cjs/Toggle.native.js +75 -136
- package/dist/cjs/Toggle.native.js.map +1 -1
- package/dist/cjs/ToggleGroup.cjs +158 -211
- package/dist/cjs/ToggleGroup.native.cjs +208 -0
- package/dist/cjs/ToggleGroup.native.js +173 -225
- package/dist/cjs/ToggleGroup.native.js.map +1 -1
- package/dist/cjs/context.cjs +19 -20
- package/dist/cjs/context.native.cjs +37 -0
- package/dist/cjs/context.native.js +20 -20
- package/dist/cjs/context.native.js.map +1 -1
- package/dist/cjs/index.cjs +15 -18
- package/dist/cjs/index.native.cjs +29 -0
- package/dist/cjs/index.native.js +15 -17
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/types.cjs +10 -11
- package/dist/cjs/types.native.cjs +19 -0
- package/dist/cjs/types.native.js +10 -10
- package/dist/cjs/types.native.js.map +1 -1
- package/dist/esm/Toggle.mjs +53 -104
- package/dist/esm/Toggle.mjs.map +1 -1
- package/dist/esm/Toggle.native.js +61 -115
- package/dist/esm/Toggle.native.js.map +1 -1
- package/dist/esm/ToggleGroup.mjs +145 -188
- package/dist/esm/ToggleGroup.mjs.map +1 -1
- package/dist/esm/ToggleGroup.native.js +160 -203
- package/dist/esm/ToggleGroup.native.js.map +1 -1
- package/dist/esm/context.mjs +5 -3
- package/dist/esm/context.mjs.map +1 -1
- package/dist/esm/context.native.js +6 -4
- package/dist/esm/context.native.js.map +1 -1
- package/dist/esm/index.js +4 -3
- package/dist/esm/index.mjs +4 -3
- package/dist/esm/index.native.js +4 -3
- package/dist/esm/types.mjs +0 -2
- package/dist/esm/types.native.js +0 -2
- package/dist/jsx/Toggle.mjs +53 -104
- package/dist/jsx/Toggle.mjs.map +1 -1
- package/dist/jsx/Toggle.native.cjs +100 -0
- package/dist/jsx/Toggle.native.js +75 -136
- package/dist/jsx/Toggle.native.js.map +1 -1
- package/dist/jsx/ToggleGroup.mjs +145 -188
- package/dist/jsx/ToggleGroup.mjs.map +1 -1
- package/dist/jsx/ToggleGroup.native.cjs +208 -0
- package/dist/jsx/ToggleGroup.native.js +173 -225
- package/dist/jsx/ToggleGroup.native.js.map +1 -1
- package/dist/jsx/context.mjs +5 -3
- package/dist/jsx/context.mjs.map +1 -1
- package/dist/jsx/context.native.cjs +37 -0
- package/dist/jsx/context.native.js +20 -20
- package/dist/jsx/context.native.js.map +1 -1
- package/dist/jsx/index.js +4 -3
- package/dist/jsx/index.mjs +4 -3
- package/dist/jsx/index.native.cjs +29 -0
- package/dist/jsx/index.native.js +15 -17
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/types.mjs +0 -2
- package/dist/jsx/types.native.cjs +19 -0
- package/dist/jsx/types.native.js +10 -10
- package/dist/jsx/types.native.js.map +1 -1
- package/package.json +16 -15
- package/src/Toggle.tsx +27 -66
- package/src/ToggleGroup.tsx +13 -10
- package/types/Toggle.d.ts +45 -49
- package/types/Toggle.d.ts.map +1 -1
- package/types/ToggleGroup.d.ts +26 -87
- package/types/ToggleGroup.d.ts.map +1 -1
- package/types/context.d.ts +1 -1
- package/types/context.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/esm/types.mjs.map +0 -1
- package/dist/esm/types.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
- package/dist/jsx/types.mjs.map +0 -1
package/dist/jsx/index.mjs
CHANGED
|
@@ -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");
|
package/dist/jsx/index.native.js
CHANGED
|
@@ -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
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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,"
|
|
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"}
|
package/dist/jsx/types.mjs
CHANGED
|
@@ -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);
|
package/dist/jsx/types.native.js
CHANGED
|
@@ -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
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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":[
|
|
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": "
|
|
3
|
+
"version": "3.0.0-beta.637.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/
|
|
38
|
-
"@tamagui/
|
|
39
|
-
"@tamagui/
|
|
40
|
-
"@tamagui/
|
|
41
|
-
"@tamagui/
|
|
42
|
-
"@tamagui/
|
|
43
|
-
"@tamagui/
|
|
44
|
-
"@tamagui/
|
|
45
|
-
"@tamagui/
|
|
46
|
-
"@tamagui/
|
|
47
|
-
"@tamagui/
|
|
48
|
-
"@tamagui/
|
|
49
|
-
"@tamagui/
|
|
37
|
+
"@tamagui/compose-refs": "3.0.0-beta.637.1",
|
|
38
|
+
"@tamagui/constants": "3.0.0-beta.637.1",
|
|
39
|
+
"@tamagui/create-context": "3.0.0-beta.637.1",
|
|
40
|
+
"@tamagui/focusable": "3.0.0-beta.637.1",
|
|
41
|
+
"@tamagui/font-size": "3.0.0-beta.637.1",
|
|
42
|
+
"@tamagui/get-token": "3.0.0-beta.637.1",
|
|
43
|
+
"@tamagui/helpers": "3.0.0-beta.637.1",
|
|
44
|
+
"@tamagui/helpers-tamagui": "3.0.0-beta.637.1",
|
|
45
|
+
"@tamagui/roving-focus": "3.0.0-beta.637.1",
|
|
46
|
+
"@tamagui/size": "3.0.0-beta.637.1",
|
|
47
|
+
"@tamagui/stacks": "3.0.0-beta.637.1",
|
|
48
|
+
"@tamagui/use-controllable-state": "3.0.0-beta.637.1",
|
|
49
|
+
"@tamagui/use-direction": "3.0.0-beta.637.1",
|
|
50
|
+
"@tamagui/web": "3.0.0-beta.637.1"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "
|
|
53
|
+
"@tamagui/build": "3.0.0-beta.637.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
|
-
|
|
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
|
-
|
|
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:
|
|
54
|
-
height:
|
|
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 =
|
|
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
|
-
|
|
127
|
-
{...(active &&
|
|
128
|
-
!activeStyle &&
|
|
129
|
-
!unstyled && {
|
|
130
|
-
defaultActiveStyle: true,
|
|
131
|
-
})}
|
|
101
|
+
{...(active && !activeStyle && { defaultActiveStyle: true })}
|
|
132
102
|
{...buttonProps}
|
|
133
|
-
|
|
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) {
|
package/src/ToggleGroup.tsx
CHANGED
|
@@ -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 =
|
|
38
|
-
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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 =
|
|
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 =
|
|
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
|
-
|
|
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 =
|
|
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").
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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
|
package/types/Toggle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"
|
|
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"}
|