@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.
- 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/Toggle.mjs
CHANGED
|
@@ -1,113 +1,62 @@
|
|
|
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
|
-
import {
|
|
4
|
-
import * as React from "react";
|
|
5
|
+
import { View, styled } from "@tamagui/web";
|
|
5
6
|
import { context } from "./context.mjs";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
|
|
7
9
|
const NAME = "Toggle";
|
|
8
10
|
const ToggleFrame = styled(View, {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
hoverStyle: {
|
|
58
|
-
backgroundColor: "$backgroundActive"
|
|
59
|
-
},
|
|
60
|
-
focusStyle: {
|
|
61
|
-
backgroundColor: "$backgroundActive"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
defaultVariants: {
|
|
67
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
68
|
-
}
|
|
69
|
-
}, {
|
|
70
|
-
accept: {
|
|
71
|
-
activeStyle: "style"
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
const Toggle = React.forwardRef(function Toggle2(props, forwardedRef) {
|
|
75
|
-
const {
|
|
76
|
-
active: activeProp,
|
|
77
|
-
activeStyle,
|
|
78
|
-
defaultActive = false,
|
|
79
|
-
onActiveChange,
|
|
80
|
-
activeTheme,
|
|
81
|
-
unstyled = false,
|
|
82
|
-
...buttonProps
|
|
83
|
-
} = props;
|
|
84
|
-
const [active = false, setActive] = useControllableState({
|
|
85
|
-
prop: activeProp,
|
|
86
|
-
onChange: onActiveChange,
|
|
87
|
-
defaultProp: defaultActive
|
|
88
|
-
});
|
|
89
|
-
return /* @__PURE__ */jsx(ToggleFrame, {
|
|
90
|
-
theme: activeTheme ?? null,
|
|
91
|
-
"aria-pressed": active,
|
|
92
|
-
"data-state": active ? "on" : "off",
|
|
93
|
-
"data-disabled": props.disabled ? "" : void 0,
|
|
94
|
-
unstyled,
|
|
95
|
-
...(active && !activeStyle && !unstyled && {
|
|
96
|
-
defaultActiveStyle: true
|
|
97
|
-
}),
|
|
98
|
-
...buttonProps,
|
|
99
|
-
...(active && activeStyle && {
|
|
100
|
-
...activeStyle,
|
|
101
|
-
hoverStyle: activeStyle,
|
|
102
|
-
focusStyle: activeStyle
|
|
103
|
-
}),
|
|
104
|
-
ref: forwardedRef,
|
|
105
|
-
onPress: composeEventHandlers(props.onPress ?? void 0, () => {
|
|
106
|
-
if (!props.disabled) {
|
|
107
|
-
setActive(prev => !prev);
|
|
108
|
-
}
|
|
109
|
-
})
|
|
110
|
-
});
|
|
11
|
+
displayName: NAME,
|
|
12
|
+
render: "button",
|
|
13
|
+
context,
|
|
14
|
+
size: true,
|
|
15
|
+
alignItems: "center",
|
|
16
|
+
justifyContent: "center",
|
|
17
|
+
display: "flex",
|
|
18
|
+
variants: {
|
|
19
|
+
size: {
|
|
20
|
+
number: (val) => ({
|
|
21
|
+
width: val,
|
|
22
|
+
height: val
|
|
23
|
+
}),
|
|
24
|
+
Size: (val, { tokens }) => {
|
|
25
|
+
if (!val) return;
|
|
26
|
+
const sizeToken = resolveSizeToken(val, "size");
|
|
27
|
+
const size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
|
|
28
|
+
return {
|
|
29
|
+
width: size,
|
|
30
|
+
height: size
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultActiveStyle: { true: {} }
|
|
35
|
+
}
|
|
36
|
+
}, { accept: { activeStyle: "style" } });
|
|
37
|
+
const Toggle = createRefComponent(function Toggle2(props, forwardedRef) {
|
|
38
|
+
const { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;
|
|
39
|
+
const [active = false, setActive] = useControllableState({
|
|
40
|
+
prop: activeProp,
|
|
41
|
+
onChange: onActiveChange,
|
|
42
|
+
defaultProp: defaultActive
|
|
43
|
+
});
|
|
44
|
+
return /* @__PURE__ */ jsx(ToggleFrame, {
|
|
45
|
+
theme: activeTheme ?? null,
|
|
46
|
+
"aria-pressed": active,
|
|
47
|
+
"data-state": active ? "on" : "off",
|
|
48
|
+
"data-disabled": props.disabled ? "" : void 0,
|
|
49
|
+
...active && !activeStyle && { defaultActiveStyle: true },
|
|
50
|
+
...buttonProps,
|
|
51
|
+
...active && activeStyle ? activeStyle : void 0,
|
|
52
|
+
ref: forwardedRef,
|
|
53
|
+
onPress: composeEventHandlers(props.onPress ?? void 0, () => {
|
|
54
|
+
if (!props.disabled) {
|
|
55
|
+
setActive((prev) => !prev);
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
});
|
|
111
59
|
});
|
|
60
|
+
|
|
112
61
|
export { Toggle, ToggleFrame };
|
|
113
62
|
//# sourceMappingURL=Toggle.mjs.map
|
package/dist/jsx/Toggle.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Toggle.js","names":[],"sources":["jsx/Toggle.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport { resolveSizeToken } from \"@tamagui/size\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport { styled, View } from \"@tamagui/web\";\nimport { context } from \"./context\";\nimport { jsx } from \"react/jsx-runtime\";\nconst NAME = \"Toggle\";\nconst ToggleFrame = styled(\n View,\n {\n displayName: NAME,\n render: \"button\",\n context,\n size: true,\n alignItems: \"center\",\n justifyContent: \"center\",\n display: \"flex\",\n variants: {\n size: {\n number: (val) => ({\n width: val,\n height: val\n }),\n Size: (val, { tokens }) => {\n if (!val) return;\n const sizeToken = resolveSizeToken(val, \"size\");\n const size = typeof sizeToken === \"number\" ? sizeToken : tokens.size[sizeToken];\n return {\n width: size,\n height: size\n };\n }\n },\n defaultActiveStyle: {\n true: {}\n }\n }\n },\n {\n accept: {\n activeStyle: \"style\"\n }\n }\n);\nconst Toggle = createRefComponent(\n function Toggle2(props, forwardedRef) {\n const {\n active: activeProp,\n activeStyle,\n defaultActive = false,\n onActiveChange,\n activeTheme,\n ...buttonProps\n } = props;\n const [active = false, setActive] = useControllableState({\n prop: activeProp,\n onChange: onActiveChange,\n defaultProp: defaultActive\n });\n return /* @__PURE__ */ jsx(\n ToggleFrame,\n {\n theme: activeTheme ?? null,\n \"aria-pressed\": active,\n \"data-state\": active ? \"on\" : \"off\",\n \"data-disabled\": props.disabled ? \"\" : void 0,\n ...active && !activeStyle && { defaultActiveStyle: true },\n ...buttonProps,\n ...active && activeStyle ? activeStyle : void 0,\n ref: forwardedRef,\n onPress: composeEventHandlers(props.onPress ?? void 0, () => {\n if (!props.disabled) {\n setActive((prev) => !prev);\n }\n })\n }\n );\n }\n);\nexport {\n Toggle,\n ToggleFrame\n};\n//# sourceMappingURL=Toggle.js.map\n"],"mappings":";;;;;;;;;AAOA,MAAM,OAAO;AACb,MAAM,cAAc,OAClB,MACA;CACE,aAAa;CACb,QAAQ;CACR;CACA,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,SAAS;CACT,UAAU;EACR,MAAM;GACJ,SAAS,SAAS;IAChB,OAAO;IACP,QAAQ;GACV;GACA,OAAO,KAAK,EAAE,aAAa;IACzB,IAAI,CAAC,KAAK;IACV,MAAM,YAAY,iBAAiB,KAAK,MAAM;IAC9C,MAAM,OAAO,OAAO,cAAc,WAAW,YAAY,OAAO,KAAK;IACrE,OAAO;KACL,OAAO;KACP,QAAQ;IACV;GACF;EACF;EACA,oBAAoB,EAClB,MAAM,CAAC,EACT;CACF;AACF,GACA,EACE,QAAQ,EACN,aAAa,QACf,EACF,CACF;AACA,MAAM,SAAS,mBACb,SAAS,QAAQ,OAAO,cAAc;CACpC,MAAM,EACJ,QAAQ,YACR,aACA,gBAAgB,OAChB,gBACA,aACA,GAAG,gBACD;CACJ,MAAM,CAAC,SAAS,OAAO,aAAa,qBAAqB;EACvD,MAAM;EACN,UAAU;EACV,aAAa;CACf,CAAC;CACD,OAAuB,oBACrB,aACA;EACE,OAAO,eAAe;EACtB,gBAAgB;EAChB,cAAc,SAAS,OAAO;EAC9B,iBAAiB,MAAM,WAAW,KAAK,KAAK;EAC5C,GAAG,UAAU,CAAC,eAAe,EAAE,oBAAoB,KAAK;EACxD,GAAG;EACH,GAAG,UAAU,cAAc,cAAc,KAAK;EAC9C,KAAK;EACL,SAAS,qBAAqB,MAAM,WAAW,KAAK,SAAS;GAC3D,IAAI,CAAC,MAAM,UAAU;IACnB,WAAW,SAAS,CAAC,IAAI;GAC3B;EACF,CAAC;CACH,CACF;AACF,CACF"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
24
|
+
};
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
28
|
+
}) : target, mod));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var Toggle_exports = {};
|
|
31
|
+
__export(Toggle_exports, {
|
|
32
|
+
Toggle: () => Toggle,
|
|
33
|
+
ToggleFrame: () => ToggleFrame
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(Toggle_exports);
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var import_compose_refs = require("@tamagui/compose-refs");
|
|
38
|
+
var import_helpers = require("@tamagui/helpers");
|
|
39
|
+
var import_size = require("@tamagui/size");
|
|
40
|
+
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
41
|
+
var import_web = require("@tamagui/web");
|
|
42
|
+
var React = __toESM(require("react"), 1);
|
|
43
|
+
var import_context = require("./context.native.js");
|
|
44
|
+
var NAME = "Toggle";
|
|
45
|
+
var ToggleFrame = (0, import_web.styled)(import_web.View, {
|
|
46
|
+
displayName: NAME,
|
|
47
|
+
render: "button",
|
|
48
|
+
context: import_context.context,
|
|
49
|
+
size: true,
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
justifyContent: "center",
|
|
52
|
+
display: "flex",
|
|
53
|
+
variants: {
|
|
54
|
+
size: {
|
|
55
|
+
number: function(val) {
|
|
56
|
+
return {
|
|
57
|
+
width: val,
|
|
58
|
+
height: val
|
|
59
|
+
};
|
|
60
|
+
},
|
|
61
|
+
Size: function(val, param) {
|
|
62
|
+
var { tokens } = param;
|
|
63
|
+
if (!val) return;
|
|
64
|
+
var sizeToken = (0, import_size.resolveSizeToken)(val, "size");
|
|
65
|
+
var size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
|
|
66
|
+
return {
|
|
67
|
+
width: size,
|
|
68
|
+
height: size
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
defaultActiveStyle: { true: {} }
|
|
73
|
+
}
|
|
74
|
+
}, { accept: { activeStyle: "style" } });
|
|
75
|
+
var Toggle = (0, import_compose_refs.createRefComponent)(function Toggle2(props, forwardedRef) {
|
|
76
|
+
var { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;
|
|
77
|
+
var [active = false, setActive] = (0, import_use_controllable_state.useControllableState)({
|
|
78
|
+
prop: activeProp,
|
|
79
|
+
onChange: onActiveChange,
|
|
80
|
+
defaultProp: defaultActive
|
|
81
|
+
});
|
|
82
|
+
var _props_onPress;
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleFrame, {
|
|
84
|
+
theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
|
|
85
|
+
"aria-pressed": active,
|
|
86
|
+
"data-state": active ? "on" : "off",
|
|
87
|
+
"data-disabled": props.disabled ? "" : void 0,
|
|
88
|
+
...active && !activeStyle && { defaultActiveStyle: true },
|
|
89
|
+
...buttonProps,
|
|
90
|
+
...active && activeStyle ? activeStyle : void 0,
|
|
91
|
+
ref: forwardedRef,
|
|
92
|
+
onPress: (0, import_helpers.composeEventHandlers)((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function() {
|
|
93
|
+
if (!props.disabled) {
|
|
94
|
+
setActive(function(prev) {
|
|
95
|
+
return !prev;
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
})
|
|
99
|
+
});
|
|
100
|
+
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
var __create = Object.create;
|
|
4
5
|
var __defProp = Object.defineProperty;
|
|
5
6
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -7,157 +8,95 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
7
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
8
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
10
|
var __export = (target, all) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
14
15
|
};
|
|
15
16
|
var __copyProps = (to, from, except, desc) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
23
24
|
};
|
|
24
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
30
|
-
value: mod,
|
|
31
|
-
enumerable: true
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
32
28
|
}) : target, mod));
|
|
33
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
34
|
-
value: true
|
|
35
|
-
}), mod);
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
36
30
|
var Toggle_exports = {};
|
|
37
31
|
__export(Toggle_exports, {
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
Toggle: () => Toggle,
|
|
33
|
+
ToggleFrame: () => ToggleFrame
|
|
40
34
|
});
|
|
41
35
|
module.exports = __toCommonJS(Toggle_exports);
|
|
42
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var import_compose_refs = require("@tamagui/compose-refs");
|
|
43
38
|
var import_helpers = require("@tamagui/helpers");
|
|
39
|
+
var import_size = require("@tamagui/size");
|
|
44
40
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
45
41
|
var import_web = require("@tamagui/web");
|
|
46
42
|
var React = __toESM(require("react"), 1);
|
|
47
43
|
var import_context = require("./context.native.js");
|
|
48
44
|
var NAME = "Toggle";
|
|
49
45
|
var ToggleFrame = (0, import_web.styled)(import_web.View, {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
focusStyle: {
|
|
105
|
-
backgroundColor: "$backgroundActive"
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
defaultVariants: {
|
|
111
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
112
|
-
}
|
|
113
|
-
}, {
|
|
114
|
-
accept: {
|
|
115
|
-
activeStyle: "style"
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
var Toggle = /* @__PURE__ */React.forwardRef(function Toggle2(props, forwardedRef) {
|
|
119
|
-
var {
|
|
120
|
-
active: activeProp,
|
|
121
|
-
activeStyle,
|
|
122
|
-
defaultActive = false,
|
|
123
|
-
onActiveChange,
|
|
124
|
-
activeTheme,
|
|
125
|
-
unstyled = false,
|
|
126
|
-
...buttonProps
|
|
127
|
-
} = props;
|
|
128
|
-
var [active = false, setActive] = (0, import_use_controllable_state.useControllableState)({
|
|
129
|
-
prop: activeProp,
|
|
130
|
-
onChange: onActiveChange,
|
|
131
|
-
defaultProp: defaultActive
|
|
132
|
-
});
|
|
133
|
-
var _props_onPress;
|
|
134
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleFrame, {
|
|
135
|
-
theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
|
|
136
|
-
"aria-pressed": active,
|
|
137
|
-
"data-state": active ? "on" : "off",
|
|
138
|
-
"data-disabled": props.disabled ? "" : void 0,
|
|
139
|
-
unstyled,
|
|
140
|
-
...(active && !activeStyle && !unstyled && {
|
|
141
|
-
defaultActiveStyle: true
|
|
142
|
-
}),
|
|
143
|
-
...buttonProps,
|
|
144
|
-
// spread activeStyle after buttonProps so it wins when active: a styled()
|
|
145
|
-
// variant (e.g. a resting `backgroundColor`) forwards that value as a plain
|
|
146
|
-
// prop into buttonProps, which would otherwise clobber the activeStyle merge
|
|
147
|
-
// on overlapping keys and leave the active item stuck at its resting style.
|
|
148
|
-
...(active && activeStyle && {
|
|
149
|
-
...activeStyle,
|
|
150
|
-
hoverStyle: activeStyle,
|
|
151
|
-
focusStyle: activeStyle
|
|
152
|
-
}),
|
|
153
|
-
ref: forwardedRef,
|
|
154
|
-
onPress: (0, import_helpers.composeEventHandlers)((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function () {
|
|
155
|
-
if (!props.disabled) {
|
|
156
|
-
setActive(function (prev) {
|
|
157
|
-
return !prev;
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
})
|
|
161
|
-
});
|
|
46
|
+
displayName: NAME,
|
|
47
|
+
render: "button",
|
|
48
|
+
context: import_context.context,
|
|
49
|
+
size: true,
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
justifyContent: "center",
|
|
52
|
+
display: "flex",
|
|
53
|
+
variants: {
|
|
54
|
+
size: {
|
|
55
|
+
number: function(val) {
|
|
56
|
+
return {
|
|
57
|
+
width: val,
|
|
58
|
+
height: val
|
|
59
|
+
};
|
|
60
|
+
},
|
|
61
|
+
Size: function(val, param) {
|
|
62
|
+
var { tokens } = param;
|
|
63
|
+
if (!val) return;
|
|
64
|
+
var sizeToken = (0, import_size.resolveSizeToken)(val, "size");
|
|
65
|
+
var size = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
|
|
66
|
+
return {
|
|
67
|
+
width: size,
|
|
68
|
+
height: size
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
defaultActiveStyle: { true: {} }
|
|
73
|
+
}
|
|
74
|
+
}, { accept: { activeStyle: "style" } });
|
|
75
|
+
var Toggle = (0, import_compose_refs.createRefComponent)(function Toggle2(props, forwardedRef) {
|
|
76
|
+
var { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;
|
|
77
|
+
var [active = false, setActive] = (0, import_use_controllable_state.useControllableState)({
|
|
78
|
+
prop: activeProp,
|
|
79
|
+
onChange: onActiveChange,
|
|
80
|
+
defaultProp: defaultActive
|
|
81
|
+
});
|
|
82
|
+
var _props_onPress;
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleFrame, {
|
|
84
|
+
theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
|
|
85
|
+
"aria-pressed": active,
|
|
86
|
+
"data-state": active ? "on" : "off",
|
|
87
|
+
"data-disabled": props.disabled ? "" : void 0,
|
|
88
|
+
...active && !activeStyle && { defaultActiveStyle: true },
|
|
89
|
+
...buttonProps,
|
|
90
|
+
...active && activeStyle ? activeStyle : void 0,
|
|
91
|
+
ref: forwardedRef,
|
|
92
|
+
onPress: (0, import_helpers.composeEventHandlers)((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function() {
|
|
93
|
+
if (!props.disabled) {
|
|
94
|
+
setActive(function(prev) {
|
|
95
|
+
return !prev;
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
})
|
|
99
|
+
});
|
|
162
100
|
});
|
|
101
|
+
|
|
163
102
|
//# sourceMappingURL=Toggle.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Toggle.native.js","names":[],"sources":["jsx/Toggle.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Toggle_exports = {};\n__export(Toggle_exports, {\n Toggle: () => Toggle,\n ToggleFrame: () => ToggleFrame\n});\nmodule.exports = __toCommonJS(Toggle_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_compose_refs = require(\"@tamagui/compose-refs\");\nvar import_helpers = require(\"@tamagui/helpers\");\nvar import_size = require(\"@tamagui/size\");\nvar import_use_controllable_state = require(\"@tamagui/use-controllable-state\");\nvar import_web = require(\"@tamagui/web\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_context = require(\"./context\");\nvar NAME = \"Toggle\";\nvar ToggleFrame = (0, import_web.styled)(import_web.View, {\n displayName: NAME,\n render: \"button\",\n context: import_context.context,\n size: true,\n alignItems: \"center\",\n justifyContent: \"center\",\n display: \"flex\",\n variants: {\n size: {\n number: function(val) {\n return {\n width: val,\n height: val\n };\n },\n Size: function(val, param) {\n var { tokens } = param;\n if (!val) return;\n var sizeToken = (0, import_size.resolveSizeToken)(val, \"size\");\n var size = typeof sizeToken === \"number\" ? sizeToken : tokens.size[sizeToken];\n return {\n width: size,\n height: size\n };\n }\n },\n defaultActiveStyle: {\n true: {}\n }\n }\n}, {\n accept: {\n activeStyle: \"style\"\n }\n});\nvar Toggle = (0, import_compose_refs.createRefComponent)(function Toggle2(props, forwardedRef) {\n var { active: activeProp, activeStyle, defaultActive = false, onActiveChange, activeTheme, ...buttonProps } = props;\n var [active = false, setActive] = (0, import_use_controllable_state.useControllableState)({\n prop: activeProp,\n onChange: onActiveChange,\n defaultProp: defaultActive\n });\n var _props_onPress;\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleFrame, {\n theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,\n \"aria-pressed\": active,\n \"data-state\": active ? \"on\" : \"off\",\n \"data-disabled\": props.disabled ? \"\" : void 0,\n ...active && !activeStyle && {\n defaultActiveStyle: true\n },\n ...buttonProps,\n ...active && activeStyle ? activeStyle : void 0,\n ref: forwardedRef,\n onPress: (0, import_helpers.composeEventHandlers)((_props_onPress = props.onPress) !== null && _props_onPress !== void 0 ? _props_onPress : void 0, function() {\n if (!props.disabled) {\n setActive(function(prev) {\n return !prev;\n });\n }\n })\n });\n});\n//# sourceMappingURL=Toggle.js.map\n"],"mappings":"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"}
|