@tamagui/switch 1.0.1-beta.106 → 1.0.1-beta.109
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/Switch.js +24 -61
- package/dist/cjs/Switch.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Switch.js +23 -63
- package/dist/esm/Switch.js.map +1 -1
- package/package.json +9 -9
- package/dist/cjs/Card.js +0 -144
- package/dist/cjs/Card.js.map +0 -7
- package/dist/esm/Card.js +0 -119
- package/dist/esm/Card.js.map +0 -7
- package/dist/jsx/Card.js +0 -87
- package/dist/jsx/Card.js.map +0 -7
package/dist/cjs/Switch.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -90,16 +62,16 @@ const SwitchThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
90
62
|
}
|
|
91
63
|
});
|
|
92
64
|
const SwitchThumb = SwitchThumbFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
93
|
-
const
|
|
65
|
+
const { __scopeSwitch, ...thumbProps } = props;
|
|
94
66
|
const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch);
|
|
95
|
-
return /* @__PURE__ */ React.createElement(SwitchThumbFrame,
|
|
67
|
+
return /* @__PURE__ */ React.createElement(SwitchThumbFrame, {
|
|
96
68
|
size,
|
|
97
69
|
"data-state": getState(checked),
|
|
98
|
-
"data-disabled": disabled ? "" : void 0
|
|
99
|
-
|
|
70
|
+
"data-disabled": disabled ? "" : void 0,
|
|
71
|
+
...thumbProps,
|
|
100
72
|
x: checked ? (0, import_core.getVariableValue)(getSwitchWidth(size)) - (0, import_core.getVariableValue)(getSwitchHeight(size)) : 0,
|
|
101
73
|
ref: forwardedRef
|
|
102
|
-
})
|
|
74
|
+
});
|
|
103
75
|
}));
|
|
104
76
|
SwitchThumb.displayName = THUMB_NAME;
|
|
105
77
|
const SwitchFrame = (0, import_core.styled)(import_stacks.XStack, {
|
|
@@ -130,7 +102,7 @@ const SwitchFrame = (0, import_core.styled)(import_stacks.XStack, {
|
|
|
130
102
|
}
|
|
131
103
|
});
|
|
132
104
|
const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
133
|
-
const
|
|
105
|
+
const {
|
|
134
106
|
__scopeSwitch,
|
|
135
107
|
labeledBy: ariaLabelledby,
|
|
136
108
|
name,
|
|
@@ -140,19 +112,9 @@ const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(Rea
|
|
|
140
112
|
disabled,
|
|
141
113
|
value = "on",
|
|
142
114
|
onCheckedChange,
|
|
143
|
-
size = "$4"
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
"labeledBy",
|
|
147
|
-
"name",
|
|
148
|
-
"checked",
|
|
149
|
-
"defaultChecked",
|
|
150
|
-
"required",
|
|
151
|
-
"disabled",
|
|
152
|
-
"value",
|
|
153
|
-
"onCheckedChange",
|
|
154
|
-
"size"
|
|
155
|
-
]);
|
|
115
|
+
size = "$4",
|
|
116
|
+
...switchProps
|
|
117
|
+
} = props;
|
|
156
118
|
const [button, setButton] = React.useState(null);
|
|
157
119
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => setButton(node));
|
|
158
120
|
const labelId = (0, import_label.useLabelContext)(button);
|
|
@@ -180,7 +142,7 @@ const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(Rea
|
|
|
180
142
|
checked,
|
|
181
143
|
disabled,
|
|
182
144
|
size
|
|
183
|
-
}, /* @__PURE__ */ React.createElement(SwitchFrame,
|
|
145
|
+
}, /* @__PURE__ */ React.createElement(SwitchFrame, {
|
|
184
146
|
size,
|
|
185
147
|
role: "switch",
|
|
186
148
|
"aria-checked": checked,
|
|
@@ -192,12 +154,12 @@ const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(Rea
|
|
|
192
154
|
theme: checked ? "active" : null,
|
|
193
155
|
themeShallow: true,
|
|
194
156
|
tabIndex: disabled ? void 0 : 0,
|
|
195
|
-
value
|
|
196
|
-
|
|
157
|
+
value,
|
|
158
|
+
...switchProps,
|
|
197
159
|
ref: composedRefs,
|
|
198
160
|
onPress: (event) => {
|
|
199
|
-
var
|
|
200
|
-
(
|
|
161
|
+
var _a;
|
|
162
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
201
163
|
setChecked((prevChecked) => !prevChecked);
|
|
202
164
|
if (import_core.isWeb && isFormControl) {
|
|
203
165
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
@@ -205,7 +167,7 @@ const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(Rea
|
|
|
205
167
|
event.stopPropagation();
|
|
206
168
|
}
|
|
207
169
|
}
|
|
208
|
-
})
|
|
170
|
+
}), import_core.isWeb && isFormControl && /* @__PURE__ */ React.createElement(BubbleInput, {
|
|
209
171
|
control: button,
|
|
210
172
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
211
173
|
name,
|
|
@@ -219,7 +181,7 @@ const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(Rea
|
|
|
219
181
|
Thumb: SwitchThumb
|
|
220
182
|
});
|
|
221
183
|
const BubbleInput = (props) => {
|
|
222
|
-
const
|
|
184
|
+
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
223
185
|
const ref = React.useRef(null);
|
|
224
186
|
const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
|
|
225
187
|
React.useEffect(() => {
|
|
@@ -233,20 +195,21 @@ const BubbleInput = (props) => {
|
|
|
233
195
|
input.dispatchEvent(event);
|
|
234
196
|
}
|
|
235
197
|
}, [prevChecked, checked, bubbles]);
|
|
236
|
-
return /* @__PURE__ */ React.createElement("input",
|
|
198
|
+
return /* @__PURE__ */ React.createElement("input", {
|
|
237
199
|
type: "checkbox",
|
|
238
200
|
"aria-hidden": true,
|
|
239
|
-
defaultChecked: checked
|
|
240
|
-
|
|
201
|
+
defaultChecked: checked,
|
|
202
|
+
...inputProps,
|
|
241
203
|
tabIndex: -1,
|
|
242
204
|
ref,
|
|
243
|
-
style:
|
|
205
|
+
style: {
|
|
206
|
+
...props.style,
|
|
244
207
|
position: "absolute",
|
|
245
208
|
pointerEvents: "none",
|
|
246
209
|
opacity: 0,
|
|
247
210
|
margin: 0
|
|
248
|
-
}
|
|
249
|
-
})
|
|
211
|
+
}
|
|
212
|
+
});
|
|
250
213
|
};
|
|
251
214
|
function getState(checked) {
|
|
252
215
|
return checked ? "checked" : "unchecked";
|
package/dist/cjs/Switch.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Switch.tsx"],
|
|
4
4
|
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Switch.js
CHANGED
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
1
|
import { usePrevious } from "@radix-ui/react-use-previous";
|
|
33
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
34
3
|
import {
|
|
@@ -70,16 +39,16 @@ const SwitchThumbFrame = styled(ThemeableStack, {
|
|
|
70
39
|
}
|
|
71
40
|
});
|
|
72
41
|
const SwitchThumb = SwitchThumbFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
73
|
-
const
|
|
42
|
+
const { __scopeSwitch, ...thumbProps } = props;
|
|
74
43
|
const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch);
|
|
75
|
-
return /* @__PURE__ */ React.createElement(SwitchThumbFrame,
|
|
44
|
+
return /* @__PURE__ */ React.createElement(SwitchThumbFrame, {
|
|
76
45
|
size,
|
|
77
46
|
"data-state": getState(checked),
|
|
78
|
-
"data-disabled": disabled ? "" : void 0
|
|
79
|
-
|
|
47
|
+
"data-disabled": disabled ? "" : void 0,
|
|
48
|
+
...thumbProps,
|
|
80
49
|
x: checked ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size)) : 0,
|
|
81
50
|
ref: forwardedRef
|
|
82
|
-
})
|
|
51
|
+
});
|
|
83
52
|
}));
|
|
84
53
|
SwitchThumb.displayName = THUMB_NAME;
|
|
85
54
|
const SwitchFrame = styled(XStack, {
|
|
@@ -110,7 +79,7 @@ const SwitchFrame = styled(XStack, {
|
|
|
110
79
|
}
|
|
111
80
|
});
|
|
112
81
|
const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
113
|
-
const
|
|
82
|
+
const {
|
|
114
83
|
__scopeSwitch,
|
|
115
84
|
labeledBy: ariaLabelledby,
|
|
116
85
|
name,
|
|
@@ -120,19 +89,9 @@ const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((pr
|
|
|
120
89
|
disabled,
|
|
121
90
|
value = "on",
|
|
122
91
|
onCheckedChange,
|
|
123
|
-
size = "$4"
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
"labeledBy",
|
|
127
|
-
"name",
|
|
128
|
-
"checked",
|
|
129
|
-
"defaultChecked",
|
|
130
|
-
"required",
|
|
131
|
-
"disabled",
|
|
132
|
-
"value",
|
|
133
|
-
"onCheckedChange",
|
|
134
|
-
"size"
|
|
135
|
-
]);
|
|
92
|
+
size = "$4",
|
|
93
|
+
...switchProps
|
|
94
|
+
} = props;
|
|
136
95
|
const [button, setButton] = React.useState(null);
|
|
137
96
|
const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
|
|
138
97
|
const labelId = useLabelContext(button);
|
|
@@ -160,7 +119,7 @@ const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((pr
|
|
|
160
119
|
checked,
|
|
161
120
|
disabled,
|
|
162
121
|
size
|
|
163
|
-
}, /* @__PURE__ */ React.createElement(SwitchFrame,
|
|
122
|
+
}, /* @__PURE__ */ React.createElement(SwitchFrame, {
|
|
164
123
|
size,
|
|
165
124
|
role: "switch",
|
|
166
125
|
"aria-checked": checked,
|
|
@@ -172,12 +131,12 @@ const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((pr
|
|
|
172
131
|
theme: checked ? "active" : null,
|
|
173
132
|
themeShallow: true,
|
|
174
133
|
tabIndex: disabled ? void 0 : 0,
|
|
175
|
-
value
|
|
176
|
-
|
|
134
|
+
value,
|
|
135
|
+
...switchProps,
|
|
177
136
|
ref: composedRefs,
|
|
178
137
|
onPress: (event) => {
|
|
179
|
-
var
|
|
180
|
-
(
|
|
138
|
+
var _a;
|
|
139
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
181
140
|
setChecked((prevChecked) => !prevChecked);
|
|
182
141
|
if (isWeb && isFormControl) {
|
|
183
142
|
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
@@ -185,7 +144,7 @@ const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((pr
|
|
|
185
144
|
event.stopPropagation();
|
|
186
145
|
}
|
|
187
146
|
}
|
|
188
|
-
})
|
|
147
|
+
}), isWeb && isFormControl && /* @__PURE__ */ React.createElement(BubbleInput, {
|
|
189
148
|
control: button,
|
|
190
149
|
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
191
150
|
name,
|
|
@@ -199,7 +158,7 @@ const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((pr
|
|
|
199
158
|
Thumb: SwitchThumb
|
|
200
159
|
});
|
|
201
160
|
const BubbleInput = (props) => {
|
|
202
|
-
const
|
|
161
|
+
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
203
162
|
const ref = React.useRef(null);
|
|
204
163
|
const prevChecked = usePrevious(checked);
|
|
205
164
|
React.useEffect(() => {
|
|
@@ -213,20 +172,21 @@ const BubbleInput = (props) => {
|
|
|
213
172
|
input.dispatchEvent(event);
|
|
214
173
|
}
|
|
215
174
|
}, [prevChecked, checked, bubbles]);
|
|
216
|
-
return /* @__PURE__ */ React.createElement("input",
|
|
175
|
+
return /* @__PURE__ */ React.createElement("input", {
|
|
217
176
|
type: "checkbox",
|
|
218
177
|
"aria-hidden": true,
|
|
219
|
-
defaultChecked: checked
|
|
220
|
-
|
|
178
|
+
defaultChecked: checked,
|
|
179
|
+
...inputProps,
|
|
221
180
|
tabIndex: -1,
|
|
222
181
|
ref,
|
|
223
|
-
style:
|
|
182
|
+
style: {
|
|
183
|
+
...props.style,
|
|
224
184
|
position: "absolute",
|
|
225
185
|
pointerEvents: "none",
|
|
226
186
|
opacity: 0,
|
|
227
187
|
margin: 0
|
|
228
|
-
}
|
|
229
|
-
})
|
|
188
|
+
}
|
|
189
|
+
});
|
|
230
190
|
};
|
|
231
191
|
function getState(checked) {
|
|
232
192
|
return checked ? "checked" : "unchecked";
|
package/dist/esm/Switch.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Switch.tsx"],
|
|
4
4
|
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc;AAGpB,MAAM,kBAAkB,CAAC,QAAoB,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,IAAI;AAC7F,MAAM,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI;AAEnE,MAAM,gBAAgB,mBAAmB,WAAW;AACpD,MAAM,CAAC,uBAAuB;AACvB,MAAM,oBAAoB,cAAc;AAE/C,MAAM,CAAC,gBAAgB,oBAAoB,oBAIxC,WAAW;AAMd,MAAM,aAAa;AAEZ,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EACrD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAS;AAAA,QACnB,QAAQ,gBAAgB,GAAG;AAAA,QAC3B,OAAO,gBAAgB,GAAG;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAIM,MAAM,cAAc,iBAAiB,YAC1C,MAAM,WACJ,CAAC,OAAgD,iBAAiB;AAChE,QAAM,EAAE,kBAAkB,eAAe;AACzC,QAAM,EAAE,MAAM,UAAU,YAAY,iBAAiB,YAAY,aAAa;AAC9E,SACE,oCAAC;AAAA,IACC;AAAA,IACA,cAAY,SAAS,OAAO;AAAA,IAC5B,iBAAe,WAAW,KAAK;AAAA,IAC9B,GAAG;AAAA,IACJ,GACE,UACI,iBAAiB,eAAe,IAAI,CAAC,IAAI,iBAAiB,gBAAgB,IAAI,CAAC,IAC/E;AAAA,IAEN,KAAK;AAAA,GACP;AAEJ,CACF,CACF;AAEA,YAAY,cAAc;AAMnB,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA,EAEjB,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,SAAS,KAAK,gBAAgB,GAAG,GAAG,KAAK,CAAC;AAChD,cAAM,QAAQ,KAAK,eAAe,GAAG,GAAG,KAAK,CAAC;AAC9C,eAAO;AAAA,UACL;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAcM,MAAM,SAAS,qBACpB,YAAY,YACV,MAAM,WACJ,CAAC,OAA2C,iBAAiB;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,OACJ;AAAA,MACD;AACJ,QAAM,CAAC,QAAQ,aAAa,MAAM,SAAmC,IAAI;AACzE,QAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAW,CAAC;AACnF,QAAM,UAAU,gBAAgB,MAAM;AACtC,QAAM,aAAa,kBAAkB;AACrC,QAAM,mCAAmC,MAAM,OAAO,KAAK;AAE3D,QAAM,gBAAgB,QAAS,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI,OAAQ;AAClF,QAAM,CAAC,UAAU,OAAO,cAAc,qBAAqB;AAAA,IACzD,MAAM;AAAA,IACN,aAAa,kBAAkB;AAAA,IAC/B,UAAU;AAAA,EACZ,CAAC;AAED,MAAI,CAAC,OAAO;AAEV,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM;AAAI;AACf,aAAO,kBAAkB,MAAM,IAAI;AAAA,QACjC,OAAO,MAAM;AACX,qBAAW,CAAC,MAAM,CAAC,CAAC;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,IAAI,UAAU,CAAC;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAe,OAAO;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,KAC1E,oCAAC;AAAA,IACC;AAAA,IAEA,MAAK;AAAA,IACL,gBAAc;AAAA,IACd,mBAAiB;AAAA,IACjB,iBAAe;AAAA,IACf,cAAY,SAAS,OAAO;AAAA,IAC5B,iBAAe,WAAW,KAAK;AAAA,IAC/B;AAAA,IACA,OAAO,UAAU,WAAW;AAAA,IAC5B,cAAY;AAAA,IAEZ,UAAU,WAAW,SAAY;AAAA,IAEjC;AAAA,IACC,GAAG;AAAA,IACJ,KAAK;AAAA,IACL,SAAS,CAAC,UAAU;AAxMlC;AAyMgB,kBAAM,YAAN,+BAAgB;AAChB,iBAAW,CAAC,gBAAgB,CAAC,WAAW;AACxC,UAAI,SAAS,eAAe;AAC1B,yCAAiC,UAAU,MAAM,qBAAqB;AAItE,YAAI,CAAC,iCAAiC;AAAS,gBAAM,gBAAgB;AAAA,MACvE;AAAA,IACF;AAAA,GACF,GACC,SAAS,iBACR,oCAAC;AAAA,IACC,SAAS;AAAA,IACT,SAAS,CAAC,iCAAiC;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAIA,OAAO,EAAE,WAAW,oBAAoB;AAAA,GAC1C,CAEJ;AAEJ,CACF,CACF,GACA;AAAA,EACE,OAAO;AACT,CACF;AAYA,MAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,SAAS,UAAU,SAAS,eAAe;AAC5D,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO,yBAAyB,YAAY,SAAS;AACxE,UAAM,aAAa,WAAW;AAC9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,iBAAW,KAAK,OAAO,OAAO;AAC9B,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAW;AAAA,IACX,gBAAgB;AAAA,IACf,GAAG;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,GAAG,MAAM;AAAA,MAET,UAAU;AAAA,MACV,eAAe;AAAA,MACf,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,GACF;AAEJ;AAEA,kBAAkB,SAAkB;AAClC,SAAO,UAAU,YAAY;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/switch",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.109",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
25
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/focusable": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/label": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
25
|
+
"@tamagui/compose-refs": "^1.0.1-beta.109",
|
|
26
|
+
"@tamagui/core": "^1.0.1-beta.109",
|
|
27
|
+
"@tamagui/create-context": "^1.0.1-beta.109",
|
|
28
|
+
"@tamagui/focusable": "^1.0.1-beta.109",
|
|
29
|
+
"@tamagui/label": "^1.0.1-beta.109",
|
|
30
|
+
"@tamagui/stacks": "^1.0.1-beta.109",
|
|
31
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.109"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "*",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-native": "*"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
39
|
+
"@tamagui/build": "^1.0.1-beta.109",
|
|
40
40
|
"@types/react-native": "^0.69.2",
|
|
41
41
|
"react": "*",
|
|
42
42
|
"react-dom": "*",
|
package/dist/cjs/Card.js
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
-
var __spreadValues = (a, b) => {
|
|
11
|
-
for (var prop in b || (b = {}))
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
|
-
var __export = (target, all) => {
|
|
34
|
-
for (var name in all)
|
|
35
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
36
|
-
};
|
|
37
|
-
var __copyProps = (to, from, except, desc) => {
|
|
38
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
39
|
-
for (let key of __getOwnPropNames(from))
|
|
40
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
41
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
42
|
-
}
|
|
43
|
-
return to;
|
|
44
|
-
};
|
|
45
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
46
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
47
|
-
var Card_exports = {};
|
|
48
|
-
__export(Card_exports, {
|
|
49
|
-
Card: () => Card,
|
|
50
|
-
CardBackground: () => CardBackground,
|
|
51
|
-
CardFooter: () => CardFooter,
|
|
52
|
-
CardFrame: () => CardFrame,
|
|
53
|
-
CardHeader: () => CardHeader,
|
|
54
|
-
createCardScope: () => createCardScope,
|
|
55
|
-
useCardContext: () => useCardContext
|
|
56
|
-
});
|
|
57
|
-
module.exports = __toCommonJS(Card_exports);
|
|
58
|
-
var import_core = require("@tamagui/core");
|
|
59
|
-
var import_create_context = require("@tamagui/create-context");
|
|
60
|
-
var import_stacks = require("@tamagui/stacks");
|
|
61
|
-
var import_react = __toESM(require("react"));
|
|
62
|
-
import_react.default["createElement"];
|
|
63
|
-
const CARD_NAME = "CARD";
|
|
64
|
-
const [createCardContext, createCardScope] = (0, import_create_context.createContextScope)(CARD_NAME);
|
|
65
|
-
const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
|
|
66
|
-
const CardFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
67
|
-
name: "Card",
|
|
68
|
-
backgroundColor: "$background",
|
|
69
|
-
position: "relative",
|
|
70
|
-
overflow: "hidden",
|
|
71
|
-
variants: {
|
|
72
|
-
size: {
|
|
73
|
-
"...size": (val, { tokens }) => {
|
|
74
|
-
return {
|
|
75
|
-
borderRadius: tokens.radius[val] ?? val
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
defaultVariants: {
|
|
81
|
-
size: "$4"
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
const CardHeader = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
85
|
-
name: "CardHeader",
|
|
86
|
-
zIndex: 10,
|
|
87
|
-
backgroundColor: "transparent",
|
|
88
|
-
marginBottom: "auto",
|
|
89
|
-
variants: {
|
|
90
|
-
size: {
|
|
91
|
-
"...size": (val, { tokens }) => {
|
|
92
|
-
return {
|
|
93
|
-
padding: tokens.space[val] ?? val
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
const CardFooter = (0, import_core.styled)(CardHeader, {
|
|
100
|
-
name: "CardFooter",
|
|
101
|
-
zIndex: 5,
|
|
102
|
-
flexDirection: "row",
|
|
103
|
-
marginTop: "auto",
|
|
104
|
-
marginBottom: 0
|
|
105
|
-
});
|
|
106
|
-
const CardBackground = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
107
|
-
name: "CardBackground",
|
|
108
|
-
zIndex: 0,
|
|
109
|
-
fullscreen: true,
|
|
110
|
-
overflow: "hidden",
|
|
111
|
-
pointerEvents: "none",
|
|
112
|
-
padding: 0
|
|
113
|
-
});
|
|
114
|
-
const Card = (0, import_core.withStaticProperties)(CardFrame.extractable((0, import_core.themeable)((0, import_react.forwardRef)((_a, ref) => {
|
|
115
|
-
var _b = _a, { size, __scopeCard, children } = _b, props = __objRest(_b, ["size", "__scopeCard", "children"]);
|
|
116
|
-
return /* @__PURE__ */ import_react.default.createElement(CardProvider, {
|
|
117
|
-
scope: __scopeCard,
|
|
118
|
-
size
|
|
119
|
-
}, /* @__PURE__ */ import_react.default.createElement(CardFrame, __spreadValues({
|
|
120
|
-
ref
|
|
121
|
-
}, props), import_react.default.Children.map(children, (child) => {
|
|
122
|
-
if ((0, import_core.isTamaguiElement)(child) && !child.props.size) {
|
|
123
|
-
return (0, import_react.cloneElement)(child, {
|
|
124
|
-
size
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
return child;
|
|
128
|
-
})));
|
|
129
|
-
}))), {
|
|
130
|
-
Header: CardHeader,
|
|
131
|
-
Footer: CardFooter,
|
|
132
|
-
Background: CardBackground
|
|
133
|
-
});
|
|
134
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
135
|
-
0 && (module.exports = {
|
|
136
|
-
Card,
|
|
137
|
-
CardBackground,
|
|
138
|
-
CardFooter,
|
|
139
|
-
CardFrame,
|
|
140
|
-
CardHeader,
|
|
141
|
-
createCardScope,
|
|
142
|
-
useCardContext
|
|
143
|
-
});
|
|
144
|
-
//# sourceMappingURL=Card.js.map
|
package/dist/cjs/Card.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/Card.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n isTamaguiElement,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n name: 'Card',\n backgroundColor: '$background',\n position: 'relative',\n overflow: 'hidden',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n borderRadius: tokens.radius[val] ?? val,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n name: 'CardHeader',\n zIndex: 10,\n backgroundColor: 'transparent',\n marginBottom: 'auto',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val] ?? val,\n }\n },\n },\n },\n})\n\nexport const CardFooter = styled(CardHeader, {\n name: 'CardFooter',\n zIndex: 5,\n flexDirection: 'row',\n marginTop: 'auto',\n marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n name: 'CardBackground',\n zIndex: 0,\n fullscreen: true,\n overflow: 'hidden',\n pointerEvents: 'none',\n padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\n themeable(\n forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(\n ({ size, __scopeCard, children, ...props }, ref) => {\n return (\n <CardProvider scope={__scopeCard} size={size}>\n <CardFrame ref={ref} {...props}>\n {React.Children.map(children, (child) => {\n if (isTamaguiElement(child) && !child.props.size) {\n return cloneElement(child, {\n size,\n })\n }\n return child\n })}\n </CardFrame>\n </CardProvider>\n )\n }\n )\n )\n ),\n {\n Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\nexport { createCardScope, useCardContext }\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOO;AACP,4BAAgD;AAChD,oBAA+B;AAC/B,mBAAgD;AAIhD,qBAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,8CAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,wBAAO,8BAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,wBAAO,8BAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,wBAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,wBAAO,8BAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,sCAClB,UAAU,YACR,2BACE,6BACE,CAAC,IAA2C,QAAQ;AAAnD,eAAE,QAAM,aAAa,aAArB,IAAkC,kBAAlC,IAAkC,CAAhC,QAAM,eAAa;AACpB,SACE,mDAAC;AAAA,IAAa,OAAO;AAAA,IAAa;AAAA,KAChC,mDAAC;AAAA,IAAU;AAAA,KAAc,QACtB,qBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,kCAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,+BAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,CACH,CACF;AAEJ,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/Card.js
DELETED
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
var __objRest = (source, exclude) => {
|
|
18
|
-
var target = {};
|
|
19
|
-
for (var prop in source)
|
|
20
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
-
target[prop] = source[prop];
|
|
22
|
-
if (source != null && __getOwnPropSymbols)
|
|
23
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
}
|
|
27
|
-
return target;
|
|
28
|
-
};
|
|
29
|
-
import {
|
|
30
|
-
isTamaguiElement,
|
|
31
|
-
styled,
|
|
32
|
-
themeable,
|
|
33
|
-
withStaticProperties
|
|
34
|
-
} from "@tamagui/core";
|
|
35
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
36
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
37
|
-
import React, { cloneElement, forwardRef } from "react";
|
|
38
|
-
React["createElement"];
|
|
39
|
-
const CARD_NAME = "CARD";
|
|
40
|
-
const [createCardContext, createCardScope] = createContextScope(CARD_NAME);
|
|
41
|
-
const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
|
|
42
|
-
const CardFrame = styled(ThemeableStack, {
|
|
43
|
-
name: "Card",
|
|
44
|
-
backgroundColor: "$background",
|
|
45
|
-
position: "relative",
|
|
46
|
-
overflow: "hidden",
|
|
47
|
-
variants: {
|
|
48
|
-
size: {
|
|
49
|
-
"...size": (val, { tokens }) => {
|
|
50
|
-
return {
|
|
51
|
-
borderRadius: tokens.radius[val] ?? val
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
defaultVariants: {
|
|
57
|
-
size: "$4"
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
const CardHeader = styled(ThemeableStack, {
|
|
61
|
-
name: "CardHeader",
|
|
62
|
-
zIndex: 10,
|
|
63
|
-
backgroundColor: "transparent",
|
|
64
|
-
marginBottom: "auto",
|
|
65
|
-
variants: {
|
|
66
|
-
size: {
|
|
67
|
-
"...size": (val, { tokens }) => {
|
|
68
|
-
return {
|
|
69
|
-
padding: tokens.space[val] ?? val
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
const CardFooter = styled(CardHeader, {
|
|
76
|
-
name: "CardFooter",
|
|
77
|
-
zIndex: 5,
|
|
78
|
-
flexDirection: "row",
|
|
79
|
-
marginTop: "auto",
|
|
80
|
-
marginBottom: 0
|
|
81
|
-
});
|
|
82
|
-
const CardBackground = styled(ThemeableStack, {
|
|
83
|
-
name: "CardBackground",
|
|
84
|
-
zIndex: 0,
|
|
85
|
-
fullscreen: true,
|
|
86
|
-
overflow: "hidden",
|
|
87
|
-
pointerEvents: "none",
|
|
88
|
-
padding: 0
|
|
89
|
-
});
|
|
90
|
-
const Card = withStaticProperties(CardFrame.extractable(themeable(forwardRef((_a, ref) => {
|
|
91
|
-
var _b = _a, { size, __scopeCard, children } = _b, props = __objRest(_b, ["size", "__scopeCard", "children"]);
|
|
92
|
-
return /* @__PURE__ */ React.createElement(CardProvider, {
|
|
93
|
-
scope: __scopeCard,
|
|
94
|
-
size
|
|
95
|
-
}, /* @__PURE__ */ React.createElement(CardFrame, __spreadValues({
|
|
96
|
-
ref
|
|
97
|
-
}, props), React.Children.map(children, (child) => {
|
|
98
|
-
if (isTamaguiElement(child) && !child.props.size) {
|
|
99
|
-
return cloneElement(child, {
|
|
100
|
-
size
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
return child;
|
|
104
|
-
})));
|
|
105
|
-
}))), {
|
|
106
|
-
Header: CardHeader,
|
|
107
|
-
Footer: CardFooter,
|
|
108
|
-
Background: CardBackground
|
|
109
|
-
});
|
|
110
|
-
export {
|
|
111
|
-
Card,
|
|
112
|
-
CardBackground,
|
|
113
|
-
CardFooter,
|
|
114
|
-
CardFrame,
|
|
115
|
-
CardHeader,
|
|
116
|
-
createCardScope,
|
|
117
|
-
useCardContext
|
|
118
|
-
};
|
|
119
|
-
//# sourceMappingURL=Card.js.map
|
package/dist/esm/Card.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/Card.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n isTamaguiElement,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n name: 'Card',\n backgroundColor: '$background',\n position: 'relative',\n overflow: 'hidden',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n borderRadius: tokens.radius[val] ?? val,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n name: 'CardHeader',\n zIndex: 10,\n backgroundColor: 'transparent',\n marginBottom: 'auto',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val] ?? val,\n }\n },\n },\n },\n})\n\nexport const CardFooter = styled(CardHeader, {\n name: 'CardFooter',\n zIndex: 5,\n flexDirection: 'row',\n marginTop: 'auto',\n marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n name: 'CardBackground',\n zIndex: 0,\n fullscreen: true,\n overflow: 'hidden',\n pointerEvents: 'none',\n padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\n themeable(\n forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(\n ({ size, __scopeCard, children, ...props }, ref) => {\n return (\n <CardProvider scope={__scopeCard} size={size}>\n <CardFrame ref={ref} {...props}>\n {React.Children.map(children, (child) => {\n if (isTamaguiElement(child) && !child.props.size) {\n return cloneElement(child, {\n size,\n })\n }\n return child\n })}\n </CardFrame>\n </CardProvider>\n )\n }\n )\n )\n ),\n {\n Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\nexport { createCardScope, useCardContext }\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAIA,MAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,mBAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,QAAQ;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,OAAO,gBAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,qBAClB,UAAU,YACR,UACE,WACE,CAAC,IAA2C,QAAQ;AAAnD,eAAE,QAAM,aAAa,aAArB,IAAkC,kBAAlC,IAAkC,CAAhC,QAAM,eAAa;AACpB,SACE,oCAAC;AAAA,IAAa,OAAO;AAAA,IAAa;AAAA,KAChC,oCAAC;AAAA,IAAU;AAAA,KAAc,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,CACH,CACF;AAEJ,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/jsx/Card.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
isTamaguiElement,
|
|
3
|
-
styled,
|
|
4
|
-
themeable,
|
|
5
|
-
withStaticProperties
|
|
6
|
-
} from "@tamagui/core";
|
|
7
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
8
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
9
|
-
import React, { cloneElement, forwardRef } from "react";
|
|
10
|
-
React["createElement"];
|
|
11
|
-
const CARD_NAME = "CARD";
|
|
12
|
-
const [createCardContext, createCardScope] = createContextScope(CARD_NAME);
|
|
13
|
-
const [CardProvider, useCardContext] = createCardContext(CARD_NAME);
|
|
14
|
-
const CardFrame = styled(ThemeableStack, {
|
|
15
|
-
name: "Card",
|
|
16
|
-
backgroundColor: "$background",
|
|
17
|
-
position: "relative",
|
|
18
|
-
overflow: "hidden",
|
|
19
|
-
variants: {
|
|
20
|
-
size: {
|
|
21
|
-
"...size": (val, { tokens }) => {
|
|
22
|
-
var _a;
|
|
23
|
-
return {
|
|
24
|
-
borderRadius: (_a = tokens.radius[val]) != null ? _a : val
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
defaultVariants: {
|
|
30
|
-
size: "$4"
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
const CardHeader = styled(ThemeableStack, {
|
|
34
|
-
name: "CardHeader",
|
|
35
|
-
zIndex: 10,
|
|
36
|
-
backgroundColor: "transparent",
|
|
37
|
-
marginBottom: "auto",
|
|
38
|
-
variants: {
|
|
39
|
-
size: {
|
|
40
|
-
"...size": (val, { tokens }) => {
|
|
41
|
-
var _a;
|
|
42
|
-
return {
|
|
43
|
-
padding: (_a = tokens.space[val]) != null ? _a : val
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
const CardFooter = styled(CardHeader, {
|
|
50
|
-
name: "CardFooter",
|
|
51
|
-
zIndex: 5,
|
|
52
|
-
flexDirection: "row",
|
|
53
|
-
marginTop: "auto",
|
|
54
|
-
marginBottom: 0
|
|
55
|
-
});
|
|
56
|
-
const CardBackground = styled(ThemeableStack, {
|
|
57
|
-
name: "CardBackground",
|
|
58
|
-
zIndex: 0,
|
|
59
|
-
fullscreen: true,
|
|
60
|
-
overflow: "hidden",
|
|
61
|
-
pointerEvents: "none",
|
|
62
|
-
padding: 0
|
|
63
|
-
});
|
|
64
|
-
const Card = withStaticProperties(CardFrame.extractable(themeable(forwardRef(({ size, __scopeCard, children, ...props }, ref) => {
|
|
65
|
-
return <CardProvider scope={__scopeCard} size={size}><CardFrame ref={ref} {...props}>{React.Children.map(children, (child) => {
|
|
66
|
-
if (isTamaguiElement(child) && !child.props.size) {
|
|
67
|
-
return cloneElement(child, {
|
|
68
|
-
size
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
return child;
|
|
72
|
-
})}</CardFrame></CardProvider>;
|
|
73
|
-
}))), {
|
|
74
|
-
Header: CardHeader,
|
|
75
|
-
Footer: CardFooter,
|
|
76
|
-
Background: CardBackground
|
|
77
|
-
});
|
|
78
|
-
export {
|
|
79
|
-
Card,
|
|
80
|
-
CardBackground,
|
|
81
|
-
CardFooter,
|
|
82
|
-
CardFrame,
|
|
83
|
-
CardHeader,
|
|
84
|
-
createCardScope,
|
|
85
|
-
useCardContext
|
|
86
|
-
};
|
|
87
|
-
//# sourceMappingURL=Card.js.map
|
package/dist/jsx/Card.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/Card.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n GetProps,\n SizeTokens,\n isTamaguiElement,\n styled,\n themeable,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport React, { cloneElement, forwardRef } from 'react'\nimport { View } from 'react-native'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nconst CARD_NAME = 'CARD'\n\ntype CardContextValue = {\n size?: SizeTokens\n}\n\nconst [createCardContext, createCardScope] = createContextScope(CARD_NAME)\nconst [CardProvider, useCardContext] = createCardContext<CardContextValue>(CARD_NAME)\n\nexport const CardFrame = styled(ThemeableStack, {\n name: 'Card',\n backgroundColor: '$background',\n position: 'relative',\n overflow: 'hidden',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n borderRadius: tokens.radius[val] ?? val,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const CardHeader = styled(ThemeableStack, {\n name: 'CardHeader',\n zIndex: 10,\n backgroundColor: 'transparent',\n marginBottom: 'auto',\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val] ?? val,\n }\n },\n },\n },\n})\n\nexport const CardFooter = styled(CardHeader, {\n name: 'CardFooter',\n zIndex: 5,\n flexDirection: 'row',\n marginTop: 'auto',\n marginBottom: 0,\n})\n\nexport const CardBackground = styled(ThemeableStack, {\n name: 'CardBackground',\n zIndex: 0,\n fullscreen: true,\n overflow: 'hidden',\n pointerEvents: 'none',\n padding: 0,\n})\n\nexport type CardHeaderProps = GetProps<typeof CardHeader>\nexport type CardFooterProps = GetProps<typeof CardFooter>\n\nexport type CardProps = GetProps<typeof CardFrame>\n\nexport const Card = withStaticProperties(\n CardFrame.extractable(\n themeable(\n forwardRef<HTMLElement | View, ScopedProps<CardProps, 'Card'>>(\n ({ size, __scopeCard, children, ...props }, ref) => {\n return (\n <CardProvider scope={__scopeCard} size={size}>\n <CardFrame ref={ref} {...props}>\n {React.Children.map(children, (child) => {\n if (isTamaguiElement(child) && !child.props.size) {\n return cloneElement(child, {\n size,\n })\n }\n return child\n })}\n </CardFrame>\n </CardProvider>\n )\n }\n )\n )\n ),\n {\n Header: CardHeader,\n Footer: CardFooter,\n Background: CardBackground,\n }\n)\n\nexport { createCardScope, useCardContext }\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAIA,MAAM;AAEN,MAAM,YAAY;AAMlB,MAAM,CAAC,mBAAmB,mBAAmB,mBAAmB,SAAS;AACzE,MAAM,CAAC,cAAc,kBAAkB,kBAAoC,SAAS;AAE7E,MAAM,YAAY,OAAO,gBAAgB;AAAA,EAC9C,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAjCtC;AAkCQ,eAAO;AAAA,UACL,cAAc,aAAO,OAAO,SAAd,YAAsB;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,gBAAgB;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAtDtC;AAuDQ,eAAO;AAAA,UACL,SAAS,aAAO,MAAM,SAAb,YAAqB;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,OAAO,YAAY;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAChB,CAAC;AAEM,MAAM,iBAAiB,OAAO,gBAAgB;AAAA,EACnD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AACX,CAAC;AAOM,MAAM,OAAO,qBAClB,UAAU,YACR,UACE,WACE,CAAC,EAAE,MAAM,aAAa,aAAa,SAAS,QAAQ;AAClD,SACE,CAAC,aAAa,OAAO,aAAa,MAAM,MACtC,CAAC,UAAU,KAAK,SAAS,QACtB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,iBAAiB,KAAK,KAAK,CAAC,MAAM,MAAM,MAAM;AAChD,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC,EACH,EATC,UAUH,EAXC;AAaL,CACF,CACF,CACF,GACA;AAAA,EACE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AACd,CACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|