@tamagui/label 1.0.1-beta.151 → 1.0.1-beta.152
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/Label.js +36 -31
- package/dist/cjs/Label.js.map +2 -2
- package/dist/esm/Label.js +32 -30
- package/dist/esm/Label.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Label.js.map +2 -2
- package/dist/jsx/index.js.map +1 -1
- package/package.json +7 -7
package/dist/cjs/Label.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var Label_exports = {};
|
|
23
26
|
__export(Label_exports, {
|
|
@@ -26,6 +29,7 @@ __export(Label_exports, {
|
|
|
26
29
|
useLabelContext: () => useLabelContext
|
|
27
30
|
});
|
|
28
31
|
module.exports = __toCommonJS(Label_exports);
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
33
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
30
34
|
var import_core = require("@tamagui/core");
|
|
31
35
|
var import_create_context = require("@tamagui/create-context");
|
|
@@ -94,40 +98,41 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
|
|
|
94
98
|
}
|
|
95
99
|
}, [id, htmlFor]);
|
|
96
100
|
}
|
|
97
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelProvider, {
|
|
98
102
|
id,
|
|
99
|
-
controlRef
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
onPress: (event) => {
|
|
113
|
-
var _a;
|
|
114
|
-
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
115
|
-
if (import_core.isWeb) {
|
|
116
|
-
if (!controlRef.current || event.defaultPrevented)
|
|
117
|
-
return;
|
|
118
|
-
const isClickingControl = controlRef.current.contains(event.target);
|
|
119
|
-
const isUserClick = event.isTrusted === true;
|
|
120
|
-
if (!isClickingControl && isUserClick) {
|
|
121
|
-
controlRef.current.click();
|
|
122
|
-
controlRef.current.focus();
|
|
103
|
+
controlRef,
|
|
104
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelFrame, {
|
|
105
|
+
role: "label",
|
|
106
|
+
id,
|
|
107
|
+
...labelProps,
|
|
108
|
+
ref: composedRefs,
|
|
109
|
+
onMouseDown: (event) => {
|
|
110
|
+
var _a;
|
|
111
|
+
(_a = props.onMouseDown) == null ? void 0 : _a.call(props, event);
|
|
112
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
113
|
+
event.preventDefault();
|
|
123
114
|
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
115
|
+
},
|
|
116
|
+
onPress: (event) => {
|
|
117
|
+
var _a;
|
|
118
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
119
|
+
if (import_core.isWeb) {
|
|
120
|
+
if (!controlRef.current || event.defaultPrevented)
|
|
121
|
+
return;
|
|
122
|
+
const isClickingControl = controlRef.current.contains(event.target);
|
|
123
|
+
const isUserClick = event.isTrusted === true;
|
|
124
|
+
if (!isClickingControl && isUserClick) {
|
|
125
|
+
controlRef.current.click();
|
|
126
|
+
controlRef.current.focus();
|
|
127
|
+
}
|
|
128
|
+
} else {
|
|
129
|
+
if (props.htmlFor) {
|
|
130
|
+
(0, import_focusable.focusFocusable)(props.htmlFor);
|
|
131
|
+
}
|
|
127
132
|
}
|
|
128
133
|
}
|
|
129
|
-
}
|
|
130
|
-
})
|
|
134
|
+
})
|
|
135
|
+
});
|
|
131
136
|
});
|
|
132
137
|
LabelComponent.displayName = NAME;
|
|
133
138
|
const Label = LabelFrame.extractable((0, import_core.themeable)(LabelComponent), {
|
package/dist/cjs/Label.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Label.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n getButtonSize,\n getFont,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSize(val, extras)\n return {\n ...getFont(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n },\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((props, forwardedRef) => {\n const { htmlFor, id: idProp, ...labelProps } = props\n const controlRef = React.useRef<HTMLElement | null>(null)\n const ref = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const backupId = useId()\n const id = idProp ?? backupId\n\n if (isWeb) {\n React.useEffect(() => {\n if (htmlFor) {\n const element = document.getElementById(htmlFor)\n const label = ref.current\n if (label && element) {\n const getAriaLabel = () => element.getAttribute('aria-labelledby')\n const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n controlRef.current = element\n return () => {\n /**\n * We get the latest attribute value because at the time that this cleanup fires,\n * the values from the closure may have changed.\n */\n if (!id) return\n const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n if (ariaLabelledBy === '') {\n element.removeAttribute('aria-labelledby')\n } else if (ariaLabelledBy) {\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n }\n }\n }\n }\n }, [id, htmlFor])\n }\n\n return (\n <LabelProvider id={id} controlRef={controlRef}>\n <LabelFrame\n // @ts-ignore\n role=\"label\"\n id={id}\n {...labelProps}\n ref={composedRefs}\n onMouseDown={(event) => {\n props.onMouseDown?.(event)\n // prevent text selection when double clicking label\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault()\n }\n }}\n onPress={(event) => {\n props.onPress?.(event)\n\n if (isWeb) {\n if (!controlRef.current || event.defaultPrevented) return\n const isClickingControl = controlRef.current.contains(event.target as any as Node)\n // Ensure event was generated by a user action\n // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n const isUserClick = event.isTrusted === true\n /**\n * When a label is wrapped around the control it labels, we trigger the appropriate events\n * on the control when the label is clicked. We do nothing if the user is already clicking the\n * control inside the label.\n */\n if (!isClickingControl && isUserClick) {\n controlRef.current.click()\n controlRef.current.focus()\n }\n } else {\n if (props.htmlFor) {\n focusFocusable(props.htmlFor)\n }\n }\n }}\n />\n </LabelProvider>\n )\n})\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n neverFlatten: true,\n })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n const context = useLabelContextImpl('LabelConsumer')\n const { controlRef } = context\n\n React.useEffect(() => {\n if (element) controlRef.current = element\n }, [element, controlRef])\n\n return context.id\n}\n\nconst Root = Label\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ariaLabelledBy"]
|
|
7
7
|
}
|
package/dist/esm/Label.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
1
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
3
|
import {
|
|
3
4
|
getButtonSize,
|
|
@@ -73,40 +74,41 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
|
|
|
73
74
|
}
|
|
74
75
|
}, [id, htmlFor]);
|
|
75
76
|
}
|
|
76
|
-
return /* @__PURE__ */
|
|
77
|
+
return /* @__PURE__ */ jsx(LabelProvider, {
|
|
77
78
|
id,
|
|
78
|
-
controlRef
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
onPress: (event) => {
|
|
92
|
-
var _a;
|
|
93
|
-
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
94
|
-
if (isWeb) {
|
|
95
|
-
if (!controlRef.current || event.defaultPrevented)
|
|
96
|
-
return;
|
|
97
|
-
const isClickingControl = controlRef.current.contains(event.target);
|
|
98
|
-
const isUserClick = event.isTrusted === true;
|
|
99
|
-
if (!isClickingControl && isUserClick) {
|
|
100
|
-
controlRef.current.click();
|
|
101
|
-
controlRef.current.focus();
|
|
79
|
+
controlRef,
|
|
80
|
+
children: /* @__PURE__ */ jsx(LabelFrame, {
|
|
81
|
+
role: "label",
|
|
82
|
+
id,
|
|
83
|
+
...labelProps,
|
|
84
|
+
ref: composedRefs,
|
|
85
|
+
onMouseDown: (event) => {
|
|
86
|
+
var _a;
|
|
87
|
+
(_a = props.onMouseDown) == null ? void 0 : _a.call(props, event);
|
|
88
|
+
if (!event.defaultPrevented && event.detail > 1) {
|
|
89
|
+
event.preventDefault();
|
|
102
90
|
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
91
|
+
},
|
|
92
|
+
onPress: (event) => {
|
|
93
|
+
var _a;
|
|
94
|
+
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
95
|
+
if (isWeb) {
|
|
96
|
+
if (!controlRef.current || event.defaultPrevented)
|
|
97
|
+
return;
|
|
98
|
+
const isClickingControl = controlRef.current.contains(event.target);
|
|
99
|
+
const isUserClick = event.isTrusted === true;
|
|
100
|
+
if (!isClickingControl && isUserClick) {
|
|
101
|
+
controlRef.current.click();
|
|
102
|
+
controlRef.current.focus();
|
|
103
|
+
}
|
|
104
|
+
} else {
|
|
105
|
+
if (props.htmlFor) {
|
|
106
|
+
focusFocusable(props.htmlFor);
|
|
107
|
+
}
|
|
106
108
|
}
|
|
107
109
|
}
|
|
108
|
-
}
|
|
109
|
-
})
|
|
110
|
+
})
|
|
111
|
+
});
|
|
110
112
|
});
|
|
111
113
|
LabelComponent.displayName = NAME;
|
|
112
114
|
const Label = LabelFrame.extractable(themeable(LabelComponent), {
|
package/dist/esm/Label.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Label.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n getButtonSize,\n getFont,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSize(val, extras)\n return {\n ...getFont(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n },\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((props, forwardedRef) => {\n const { htmlFor, id: idProp, ...labelProps } = props\n const controlRef = React.useRef<HTMLElement | null>(null)\n const ref = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const backupId = useId()\n const id = idProp ?? backupId\n\n if (isWeb) {\n React.useEffect(() => {\n if (htmlFor) {\n const element = document.getElementById(htmlFor)\n const label = ref.current\n if (label && element) {\n const getAriaLabel = () => element.getAttribute('aria-labelledby')\n const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n controlRef.current = element\n return () => {\n /**\n * We get the latest attribute value because at the time that this cleanup fires,\n * the values from the closure may have changed.\n */\n if (!id) return\n const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n if (ariaLabelledBy === '') {\n element.removeAttribute('aria-labelledby')\n } else if (ariaLabelledBy) {\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n }\n }\n }\n }\n }, [id, htmlFor])\n }\n\n return (\n <LabelProvider id={id} controlRef={controlRef}>\n <LabelFrame\n // @ts-ignore\n role=\"label\"\n id={id}\n {...labelProps}\n ref={composedRefs}\n onMouseDown={(event) => {\n props.onMouseDown?.(event)\n // prevent text selection when double clicking label\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault()\n }\n }}\n onPress={(event) => {\n props.onPress?.(event)\n\n if (isWeb) {\n if (!controlRef.current || event.defaultPrevented) return\n const isClickingControl = controlRef.current.contains(event.target as any as Node)\n // Ensure event was generated by a user action\n // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n const isUserClick = event.isTrusted === true\n /**\n * When a label is wrapped around the control it labels, we trigger the appropriate events\n * on the control when the label is clicked. We do nothing if the user is already clicking the\n * control inside the label.\n */\n if (!isClickingControl && isUserClick) {\n controlRef.current.click()\n controlRef.current.focus()\n }\n } else {\n if (props.htmlFor) {\n focusFocusable(props.htmlFor)\n }\n }\n }}\n />\n </LabelProvider>\n )\n})\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n neverFlatten: true,\n })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n const context = useLabelContextImpl('LabelConsumer')\n const { controlRef } = context\n\n React.useEffect(() => {\n if (element) controlRef.current = element\n }, [element, controlRef])\n\n return context.id\n}\n\nconst Root = Label\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ariaLabelledBy"]
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
package/dist/jsx/Label.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Label.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n ReactComponentWithRef,\n getButtonSize,\n getFont,\n isWeb,\n styled,\n themeable,\n useId,\n} from '@tamagui/core'\nimport { createContext } from '@tamagui/create-context'\nimport { focusFocusable } from '@tamagui/focusable'\nimport { SizableText } from '@tamagui/text'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst NAME = 'Label'\n\ntype LabelContextValue = {\n id?: string\n controlRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst [LabelProvider, useLabelContextImpl] = createContext<LabelContextValue>(NAME, {\n id: undefined,\n controlRef: { current: null },\n})\n\nexport const LabelFrame = styled(SizableText, {\n name: 'Label',\n tag: 'label',\n size: '$4',\n backgroundColor: 'transparent',\n display: 'flex',\n alignItems: 'center',\n selectable: false,\n cursor: 'default',\n pressStyle: {\n color: '$colorPress',\n },\n variants: {\n size: {\n '...size': (val, extras) => {\n const buttonStyle = getButtonSize(val, extras)\n return {\n ...getFont(val, extras),\n height: buttonStyle.height,\n lineHeight: buttonStyle.height,\n }\n },\n },\n },\n})\n\nexport type LabelProps = GetProps<typeof LabelFrame> & {\n htmlFor?: string\n}\n\nconst LabelComponent = React.forwardRef<typeof LabelFrame, LabelProps>((props, forwardedRef) => {\n const { htmlFor, id: idProp, ...labelProps } = props\n const controlRef = React.useRef<HTMLElement | null>(null)\n const ref = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref)\n const backupId = useId()\n const id = idProp ?? backupId\n\n if (isWeb) {\n React.useEffect(() => {\n if (htmlFor) {\n const element = document.getElementById(htmlFor)\n const label = ref.current\n if (label && element) {\n const getAriaLabel = () => element.getAttribute('aria-labelledby')\n const ariaLabelledBy = [id, getAriaLabel()].filter(Boolean).join(' ')\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n controlRef.current = element\n return () => {\n /**\n * We get the latest attribute value because at the time that this cleanup fires,\n * the values from the closure may have changed.\n */\n if (!id) return\n const ariaLabelledBy = getAriaLabel()?.replace(id, '')\n if (ariaLabelledBy === '') {\n element.removeAttribute('aria-labelledby')\n } else if (ariaLabelledBy) {\n element.setAttribute('aria-labelledby', ariaLabelledBy)\n }\n }\n }\n }\n }, [id, htmlFor])\n }\n\n return (\n <LabelProvider id={id} controlRef={controlRef}>\n <LabelFrame\n // @ts-ignore\n role=\"label\"\n id={id}\n {...labelProps}\n ref={composedRefs}\n onMouseDown={(event) => {\n props.onMouseDown?.(event)\n // prevent text selection when double clicking label\n if (!event.defaultPrevented && event.detail > 1) {\n event.preventDefault()\n }\n }}\n onPress={(event) => {\n props.onPress?.(event)\n\n if (isWeb) {\n if (!controlRef.current || event.defaultPrevented) return\n const isClickingControl = controlRef.current.contains(event.target as any as Node)\n // Ensure event was generated by a user action\n // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n const isUserClick = event.isTrusted === true\n /**\n * When a label is wrapped around the control it labels, we trigger the appropriate events\n * on the control when the label is clicked. We do nothing if the user is already clicking the\n * control inside the label.\n */\n if (!isClickingControl && isUserClick) {\n controlRef.current.click()\n controlRef.current.focus()\n }\n } else {\n if (props.htmlFor) {\n focusFocusable(props.htmlFor)\n }\n }\n }}\n />\n </LabelProvider>\n )\n})\n\nLabelComponent.displayName = NAME\n\nexport const Label: ReactComponentWithRef<LabelProps, HTMLButtonElement | View> =\n LabelFrame.extractable(themeable(LabelComponent as any) as any, {\n neverFlatten: true,\n })\n\nexport const useLabelContext = (element?: HTMLElement | null) => {\n const context = useLabelContextImpl('LabelConsumer')\n const { controlRef } = context\n\n React.useEffect(() => {\n if (element) controlRef.current = element\n }, [element, controlRef])\n\n return context.id\n}\n\nconst Root = Label\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ariaLabelledBy"]
|
|
7
7
|
}
|
package/dist/jsx/index.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/label",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.152",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"clean:build": "tamagui-build clean:build"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/focusable": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/text": "^1.0.1-beta.
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.152",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.152",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.152",
|
|
29
|
+
"@tamagui/focusable": "^1.0.1-beta.152",
|
|
30
|
+
"@tamagui/text": "^1.0.1-beta.152"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": "*",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react-native": "*"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
38
|
+
"@tamagui/build": "^1.0.1-beta.152",
|
|
39
39
|
"@types/react-native": "^0.69.2",
|
|
40
40
|
"react": "*",
|
|
41
41
|
"react-dom": "*",
|