@tamagui/core 1.0.0-beta.5 → 1.0.0-beta.6
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/createComponent.js +13 -5
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/getButtonSize.js +48 -0
- package/dist/cjs/helpers/getButtonSize.js.map +7 -0
- package/dist/cjs/helpers/getTextSize.js +56 -0
- package/dist/cjs/helpers/getTextSize.js.map +7 -0
- package/dist/cjs/hooks/useId.js +59 -0
- package/dist/cjs/hooks/useId.js.map +7 -0
- package/dist/cjs/index.js +9 -6
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Slot.js +115 -0
- package/dist/cjs/views/Slot.js.map +7 -0
- package/dist/esm/createComponent.js +12 -5
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/getButtonSize.js +27 -0
- package/dist/esm/helpers/getButtonSize.js.map +7 -0
- package/dist/esm/helpers/getTextSize.js +34 -0
- package/dist/esm/helpers/getTextSize.js.map +7 -0
- package/dist/esm/hooks/useId.js +35 -0
- package/dist/esm/hooks/useId.js.map +7 -0
- package/dist/esm/index.js +9 -6
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/views/Slot.js +63 -0
- package/dist/esm/views/Slot.js.map +7 -0
- package/dist/jsx/createComponent.js +12 -5
- package/dist/jsx/helpers/getButtonSize.js +26 -0
- package/dist/jsx/helpers/getTextSize.js +33 -0
- package/dist/jsx/hooks/useId.js +34 -0
- package/dist/jsx/index.js +9 -6
- package/dist/jsx/views/Slot.js +56 -0
- package/package.json +5 -5
- package/types/createComponent.d.ts.map +1 -1
- package/types/helpers/getButtonSize.d.ts +8 -0
- package/types/helpers/getButtonSize.d.ts.map +1 -0
- package/types/helpers/getTextSize.d.ts +3 -0
- package/types/helpers/getTextSize.d.ts.map +1 -0
- package/types/hooks/useId.d.ts +9 -0
- package/types/hooks/useId.d.ts.map +1 -0
- package/types/index.d.ts +9 -6
- package/types/index.d.ts.map +1 -1
- package/types/types.d.ts +19 -5
- package/types/types.d.ts.map +1 -1
- package/types/views/Slot.d.ts +9 -0
- package/types/views/Slot.d.ts.map +1 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { getVariableValue } from "../createVariable";
|
|
4
|
+
const getTextSize = /* @__PURE__ */ __name((val = "$4", { fonts, theme, props }) => {
|
|
5
|
+
var _a, _b, _c;
|
|
6
|
+
const family = getVariableValue(props.fontFamily) || "$body";
|
|
7
|
+
const font = fonts[family] || fonts["$body"];
|
|
8
|
+
if (!font) {
|
|
9
|
+
console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
const fontFamily = font.family;
|
|
13
|
+
const fontSize = props.fontSize || font.size[val];
|
|
14
|
+
const lineHeight = props.lineHeight || font.lineHeight[val];
|
|
15
|
+
const fontWeight = props.fontWeight || font.weight[val];
|
|
16
|
+
const letterSpacing = props.letterSpacing || font.letterSpacing[val];
|
|
17
|
+
const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
|
|
18
|
+
const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
|
|
19
|
+
const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
|
|
20
|
+
return {
|
|
21
|
+
color,
|
|
22
|
+
fontStyle,
|
|
23
|
+
textTransform,
|
|
24
|
+
fontFamily,
|
|
25
|
+
fontWeight,
|
|
26
|
+
letterSpacing,
|
|
27
|
+
fontSize,
|
|
28
|
+
lineHeight
|
|
29
|
+
};
|
|
30
|
+
}, "getTextSize");
|
|
31
|
+
export {
|
|
32
|
+
getTextSize
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=getTextSize.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/helpers/getTextSize.tsx"],
|
|
4
|
+
"sourcesContent": ["import { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getTextSize: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n val = '$4',\n { fonts, theme, props }\n) => {\n const family = getVariableValue(props.fontFamily) || '$body'\n const font = fonts[family] || fonts['$body']\n if (!font) {\n console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n return\n }\n const fontFamily = font.family\n const fontSize = props.fontSize || font.size[val]\n const lineHeight = props.lineHeight || font.lineHeight[val]\n const fontWeight = props.fontWeight || font.weight[val]\n const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n const fontStyle = props.fontStyle || font.style?.[val]\n const textTransform = props.textTransform || font.transform?.[val]\n const color = props.color || font.color?.[val] || theme.color\n return {\n color,\n fontStyle,\n textTransform,\n fontFamily,\n fontWeight,\n letterSpacing,\n fontSize,\n lineHeight,\n } as any\n}\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAGO,MAAM,cAAgE,wBAC3E,MAAM,MACN,EAAE,OAAO,OAAO,YACb;AANL;AAOE,QAAM,SAAS,iBAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAChF;AAAA,EACF;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,aAAa,YAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,iBAAiB,YAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,SAAS,YAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,GA5B6E;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { useIsomorphicLayoutEffect } from "../constants/platform";
|
|
5
|
+
let serverHandoffComplete = false;
|
|
6
|
+
let id = 0;
|
|
7
|
+
function genId() {
|
|
8
|
+
return ++id;
|
|
9
|
+
}
|
|
10
|
+
__name(genId, "genId");
|
|
11
|
+
function useId(providedId) {
|
|
12
|
+
var _a;
|
|
13
|
+
if (typeof React.useId === "function") {
|
|
14
|
+
let id3 = React.useId(providedId);
|
|
15
|
+
return providedId != null ? providedId : id3;
|
|
16
|
+
}
|
|
17
|
+
let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
|
|
18
|
+
let [id2, setId] = React.useState(initialId);
|
|
19
|
+
useIsomorphicLayoutEffect(() => {
|
|
20
|
+
if (id2 === null) {
|
|
21
|
+
setId(genId());
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
if (serverHandoffComplete === false) {
|
|
26
|
+
serverHandoffComplete = true;
|
|
27
|
+
}
|
|
28
|
+
}, []);
|
|
29
|
+
return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
|
|
30
|
+
}
|
|
31
|
+
__name(useId, "useId");
|
|
32
|
+
export {
|
|
33
|
+
useId
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=useId.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/useId.tsx"],
|
|
4
|
+
"sourcesContent": ["/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n * 1. Accessibility APIs rely heavily on element IDs\n * 2. Requiring developers to put IDs on every element in Reach UI is both\n * cumbersome and error-prone\n * 3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\n\nimport * as React from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\n\nlet serverHandoffComplete = false\nlet id = 0\nfunction genId() {\n return ++id\n}\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\nfunction useId(idFromProps: string): string\nfunction useId(idFromProps: number): number\nfunction useId(idFromProps: string | number): string | number\nfunction useId(idFromProps: string | undefined | null): string | undefined\nfunction useId(idFromProps: number | undefined | null): number | undefined\nfunction useId(idFromProps: string | number | undefined | null): string | number | undefined\nfunction useId(): string | undefined\n\nfunction useId(providedId?: number | string | undefined | null) {\n // TODO: Remove error flag when updating internal deps to React 18. None of\n // our tricks will play well with concurrent rendering anyway.\n // @ts-expect-error\n if (typeof React.useId === 'function') {\n // @ts-expect-error\n let id = React.useId(providedId)\n return providedId != null ? providedId : id\n }\n\n // If this instance isn't part of the initial render, we don't have to do the\n // double render/patch-up dance. We can just generate the ID and return it.\n let initialId = providedId ?? (serverHandoffComplete ? genId() : null)\n let [id, setId] = React.useState(initialId)\n\n useIsomorphicLayoutEffect(() => {\n if (id === null) {\n // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n // rendering flicker, though it'll make the first render slower (unlikely\n // to matter, but you're welcome to measure your app and let us know if\n // it's a problem).\n setId(genId())\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n React.useEffect(() => {\n if (serverHandoffComplete === false) {\n // Flag all future uses of `useId` to skip the update dance. This is in\n // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n // accidentally bail out of the patch-up dance prematurely.\n serverHandoffComplete = true\n }\n }, [])\n\n return providedId ?? id ?? undefined\n}\n\nexport { useId }\n"],
|
|
5
|
+
"mappings": ";;AAwDA;AAEA;AAEA,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAFS;AAyBT,eAAe,YAAiD;AAvFhE;AA2FE,MAAI,OAAO,MAAM,UAAU,YAAY;AAErC,QAAI,MAAK,MAAM,MAAM,UAAU;AAC/B,WAAO,cAAc,OAAO,aAAa;AAAA,EAC3C;AAIA,MAAI,YAAY,kCAAe,wBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,4BAA0B,MAAM;AAC9B,QAAI,QAAO,MAAM;AAKf,YAAM,MAAM,CAAC;AAAA,IACf;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,QAAI,0BAA0B,OAAO;AAInC,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,wCAAc,QAAd,YAAoB;AAC7B;AApCS;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -13,31 +13,34 @@ import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } f
|
|
|
13
13
|
export * from "./constants/constants";
|
|
14
14
|
export * from "./constants/platform";
|
|
15
15
|
export * from "./constants/rnw";
|
|
16
|
+
export * from "./helpers/getButtonSize";
|
|
16
17
|
export * from "./helpers/getExpandedShorthands";
|
|
17
18
|
export * from "./helpers/getSize";
|
|
18
19
|
export * from "./helpers/getSplitStyles";
|
|
19
20
|
export * from "./helpers/getStylesAtomic";
|
|
21
|
+
export * from "./helpers/getTextSize";
|
|
20
22
|
export * from "./helpers/isObj";
|
|
21
23
|
export * from "./helpers/isTamaguiElement";
|
|
22
24
|
export * from "./helpers/matchMedia";
|
|
23
25
|
export * from "./helpers/themeable";
|
|
24
26
|
export * from "./helpers/withStaticProperties";
|
|
25
27
|
export * from "./contexts/ButtonInsideButtonContext";
|
|
26
|
-
export * from "./hooks/useIsTouchDevice";
|
|
27
28
|
export * from "./hooks/useConstant";
|
|
28
|
-
export * from "./hooks/
|
|
29
|
+
export * from "./hooks/useId";
|
|
30
|
+
export * from "./hooks/useIsMounted";
|
|
31
|
+
export * from "./hooks/useIsTouchDevice";
|
|
29
32
|
export * from "./hooks/useMedia";
|
|
33
|
+
export * from "./hooks/usePressable";
|
|
30
34
|
export * from "./hooks/useTheme";
|
|
31
|
-
export * from "./hooks/useIsMounted";
|
|
32
35
|
export * from "./hooks/useUnmountEffect";
|
|
33
|
-
export * from "@tamagui/use-force-update";
|
|
34
36
|
export * from "./views/Stack";
|
|
35
37
|
export * from "./views/Text";
|
|
38
|
+
export * from "./views/TextAncestorContext";
|
|
36
39
|
export * from "./views/Theme";
|
|
37
|
-
export * from "./views/ThemeReset";
|
|
38
40
|
export * from "./views/ThemeInverse";
|
|
39
41
|
export * from "./views/ThemeProvider";
|
|
40
|
-
export * from "./views/
|
|
42
|
+
export * from "./views/ThemeReset";
|
|
43
|
+
export * from "@tamagui/use-force-update";
|
|
41
44
|
export * from "@tamagui/helpers";
|
|
42
45
|
export {
|
|
43
46
|
RNWTextProps,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/
|
|
5
|
-
"mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;",
|
|
4
|
+
"sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/getButtonSize'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
|
|
5
|
+
"mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { composeRefs } from "@tamagui/compose-refs";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
const Slot = React.forwardRef((props, forwardedRef) => {
|
|
6
|
+
const { children, ...slotProps } = props;
|
|
7
|
+
if (React.Children.toArray(children).some(isSlottable)) {
|
|
8
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, React.Children.map(children, (child) => {
|
|
9
|
+
return isSlottable(child) ? /* @__PURE__ */ React.createElement(SlotClone, {
|
|
10
|
+
...slotProps,
|
|
11
|
+
ref: forwardedRef
|
|
12
|
+
}, child.props.children) : child;
|
|
13
|
+
}));
|
|
14
|
+
}
|
|
15
|
+
return /* @__PURE__ */ React.createElement(SlotClone, {
|
|
16
|
+
...slotProps,
|
|
17
|
+
ref: forwardedRef
|
|
18
|
+
}, children);
|
|
19
|
+
});
|
|
20
|
+
Slot.displayName = "Slot";
|
|
21
|
+
const SlotClone = React.forwardRef((props, forwardedRef) => {
|
|
22
|
+
const { children, ...slotProps } = props;
|
|
23
|
+
if (React.isValidElement(children)) {
|
|
24
|
+
return React.cloneElement(children, {
|
|
25
|
+
...mergeProps(slotProps, children.props),
|
|
26
|
+
ref: composeRefs(forwardedRef, children.ref)
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
|
30
|
+
});
|
|
31
|
+
SlotClone.displayName = "SlotClone";
|
|
32
|
+
const Slottable = /* @__PURE__ */ __name(({ children }) => {
|
|
33
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
|
|
34
|
+
}, "Slottable");
|
|
35
|
+
function isSlottable(child) {
|
|
36
|
+
return React.isValidElement(child);
|
|
37
|
+
}
|
|
38
|
+
__name(isSlottable, "isSlottable");
|
|
39
|
+
function mergeProps(slotProps, childProps) {
|
|
40
|
+
const overrideProps = { ...childProps };
|
|
41
|
+
for (const propName in childProps) {
|
|
42
|
+
const slotPropValue = slotProps[propName];
|
|
43
|
+
const childPropValue = childProps[propName];
|
|
44
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
|
45
|
+
if (isHandler) {
|
|
46
|
+
overrideProps[propName] = (...args) => {
|
|
47
|
+
childPropValue == null ? void 0 : childPropValue(...args);
|
|
48
|
+
slotPropValue == null ? void 0 : slotPropValue(...args);
|
|
49
|
+
};
|
|
50
|
+
} else if (propName === "style") {
|
|
51
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
52
|
+
} else if (propName === "className") {
|
|
53
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return { ...slotProps, ...overrideProps };
|
|
57
|
+
}
|
|
58
|
+
__name(mergeProps, "mergeProps");
|
|
59
|
+
export {
|
|
60
|
+
Slot,
|
|
61
|
+
Slottable
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=Slot.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/views/Slot.tsx"],
|
|
4
|
+
"sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props\n\n if (React.Children.toArray(children).some(isSlottable)) {\n return (\n <>\n {React.Children.map(children, (child) => {\n return isSlottable(child) ? (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {child.props.children}\n </SlotClone>\n ) : (\n child\n )\n })}\n </>\n )\n }\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {children}\n </SlotClone>\n )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props\n\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n ref: composeRefs(forwardedRef, (children as any).ref),\n })\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child)\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps }\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName]\n const childPropValue = childProps[propName]\n\n const isHandler = /^on[A-Z]/.test(propName)\n // if it's a handler, modify the override by composing the base handler\n if (isHandler) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue?.(...args)\n slotPropValue?.(...args)\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n }\n }\n\n return { ...slotProps, ...overrideProps }\n}\n"],
|
|
5
|
+
"mappings": ";;AAEA;AACA;AAUO,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,SAAS,QAAQ,QAAQ,EAAE,KAAK,WAAW,GAAG;AACtD,WACE,0DACG,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,aAAO,YAAY,KAAK,IACtB,oCAAC;AAAA,WAAc;AAAA,QAAW,KAAK;AAAA,SAC5B,MAAM,MAAM,QACf,IAEA;AAAA,IAEJ,CAAC,CACH;AAAA,EAEJ;AAEA,SACE,oCAAC;AAAA,OAAc;AAAA,IAAW,KAAK;AAAA,KAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,WAAO,MAAM,aAAa,UAAU;AAAA,SAC/B,WAAW,WAAW,SAAS,KAAK;AAAA,MACvC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,wBAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB,GAFyB;AAQzB,qBAAqB,OAAqD;AACxE,SAAO,MAAM,eAAe,KAAK;AACnC;AAFS;AAIT,oBAAoB,WAAqB,YAAsB;AAE7D,QAAM,gBAAgB,KAAK,WAAW;AAEtC,aAAW,YAAY,YAAY;AACjC,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,UAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,QAAI,WAAW;AACb,oBAAc,YAAY,IAAI,SAAoB;AAChD,yDAAiB,GAAG;AACpB,uDAAgB,GAAG;AAAA,MACrB;AAAA,IACF,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,KAAK,kBAAkB,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,KAAK,cAAc,cAAc;AAC1C;AAzBS;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -29,6 +29,7 @@ import { useFeatures } from "./hooks/useFeatures";
|
|
|
29
29
|
import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
|
|
30
30
|
import { usePressable } from "./hooks/usePressable";
|
|
31
31
|
import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
|
|
32
|
+
import { Slot } from "./views/Slot";
|
|
32
33
|
import { TextAncestorContext } from "./views/TextAncestorContext";
|
|
33
34
|
React["keep"];
|
|
34
35
|
const defaultComponentState = {
|
|
@@ -93,7 +94,7 @@ function createComponent(configIn, ParentComponent) {
|
|
|
93
94
|
__name(addPseudoToStyles, "addPseudoToStyles");
|
|
94
95
|
const component = forwardRef((props, forwardedRef) => {
|
|
95
96
|
var _a, _b, _c, _d;
|
|
96
|
-
props = tamaguiDefaultProps ? { ...tamaguiDefaultProps, ...props } : props;
|
|
97
|
+
props = tamaguiDefaultProps && !props.asChild ? { ...tamaguiDefaultProps, ...props } : props;
|
|
97
98
|
const { Component, componentName, isText, isZStack } = staticConfig;
|
|
98
99
|
if (process.env.NODE_ENV === "development") {
|
|
99
100
|
if (props["debug"]) {
|
|
@@ -108,7 +109,7 @@ function createComponent(configIn, ParentComponent) {
|
|
|
108
109
|
const [state, set_] = useState(defaultComponentState);
|
|
109
110
|
const setStateShallow = createShallowUpdate(set_);
|
|
110
111
|
const shouldAvoidClasses = !!(props.animation && avoidClasses);
|
|
111
|
-
const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
|
|
112
|
+
const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
|
|
112
113
|
const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
|
|
113
114
|
const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
|
|
114
115
|
const isAnimated = !!(useAnimations && props.animation);
|
|
@@ -127,6 +128,7 @@ function createComponent(configIn, ParentComponent) {
|
|
|
127
128
|
const {
|
|
128
129
|
tag,
|
|
129
130
|
hitSlop,
|
|
131
|
+
asChild,
|
|
130
132
|
children,
|
|
131
133
|
pointerEvents,
|
|
132
134
|
onPress,
|
|
@@ -210,7 +212,7 @@ function createComponent(configIn, ParentComponent) {
|
|
|
210
212
|
if (accessibilityRole)
|
|
211
213
|
viewProps.accessibilityRole = accessibilityRole;
|
|
212
214
|
}
|
|
213
|
-
if (isWeb) {
|
|
215
|
+
if (isWeb && !asChild) {
|
|
214
216
|
rnw.useResponderEvents(hostRef, {
|
|
215
217
|
onMoveShouldSetResponder,
|
|
216
218
|
onMoveShouldSetResponderCapture,
|
|
@@ -318,7 +320,7 @@ function createComponent(configIn, ParentComponent) {
|
|
|
318
320
|
const isHoverable = isWeb && !isTouch;
|
|
319
321
|
const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
|
|
320
322
|
const pressEventKey = isStringElement ? "onClick" : "onPress";
|
|
321
|
-
const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
|
|
323
|
+
const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
|
|
322
324
|
const unPress = useCallback(() => {
|
|
323
325
|
if (!internal.current.isMounted)
|
|
324
326
|
return;
|
|
@@ -384,7 +386,7 @@ function createComponent(configIn, ParentComponent) {
|
|
|
384
386
|
onPressOut == null ? void 0 : onPressOut(e);
|
|
385
387
|
} : null
|
|
386
388
|
} : null;
|
|
387
|
-
|
|
389
|
+
const childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
|
|
388
390
|
children,
|
|
389
391
|
space,
|
|
390
392
|
flexDirection: props.flexDirection || ((_b = staticConfig.defaultProps) == null ? void 0 : _b.flexDirection),
|
|
@@ -424,6 +426,11 @@ function createComponent(configIn, ParentComponent) {
|
|
|
424
426
|
Object.assign(viewProps, events);
|
|
425
427
|
}
|
|
426
428
|
}
|
|
429
|
+
if (asChild) {
|
|
430
|
+
ViewComponent = Slot;
|
|
431
|
+
const onlyChild = React.Children.only(children);
|
|
432
|
+
Object.assign(viewProps, onlyChild.props);
|
|
433
|
+
}
|
|
427
434
|
content = createElement(ViewComponent, viewProps, childEls);
|
|
428
435
|
if (isWeb && events && attachHover) {
|
|
429
436
|
content = <span className="tui_Hoverable" style={{
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { getVariableValue, isVariable } from "@tamagui/core";
|
|
4
|
+
const getButtonSize = /* @__PURE__ */ __name((sizeX = 0.9, sizeY = 0.333) => (val, { tokens, props, fonts }) => {
|
|
5
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
6
|
+
const size = (_c = (_b = (_a = tokens.size[val]) != null ? _a : tokens.size["$4"]) != null ? _b : val) != null ? _c : 14;
|
|
7
|
+
const radius = (_e = (_d = tokens.radius[val]) != null ? _d : tokens.radius["$4"]) != null ? _e : size;
|
|
8
|
+
const px = Math.round(+(isVariable(size) ? size.val : size) * sizeX);
|
|
9
|
+
const py = Math.round(+(isVariable(size) ? size.val : size) * sizeY);
|
|
10
|
+
const font = fonts[props.fontFamily] || fonts["$body"];
|
|
11
|
+
const lineHeights = font.lineHeight;
|
|
12
|
+
const lineHeight = (_f = lineHeights[val]) != null ? _f : lineHeights["$4"];
|
|
13
|
+
const minHeight = Math.round(getVariableValue(lineHeight) + py * 2);
|
|
14
|
+
if (process.env.NODE_ENV === "development" && props["debug"]) {
|
|
15
|
+
console.log("getButtonSize", props.fontFamily, { size, py, val, lineHeight, minHeight });
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
minHeight,
|
|
19
|
+
paddingHorizontal: props.circular ? 0 : px,
|
|
20
|
+
paddingVertical: props.circular ? 0 : py,
|
|
21
|
+
borderRadius: props.circular ? 1e5 : (_g = props.borderRadius) != null ? _g : radius
|
|
22
|
+
};
|
|
23
|
+
}, "getButtonSize");
|
|
24
|
+
export {
|
|
25
|
+
getButtonSize
|
|
26
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { getVariableValue } from "../createVariable";
|
|
4
|
+
const getTextSize = /* @__PURE__ */ __name((val = "$4", { fonts, theme, props }) => {
|
|
5
|
+
var _a, _b, _c;
|
|
6
|
+
const family = getVariableValue(props.fontFamily) || "$body";
|
|
7
|
+
const font = fonts[family] || fonts["$body"];
|
|
8
|
+
if (!font) {
|
|
9
|
+
console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
const fontFamily = font.family;
|
|
13
|
+
const fontSize = props.fontSize || font.size[val];
|
|
14
|
+
const lineHeight = props.lineHeight || font.lineHeight[val];
|
|
15
|
+
const fontWeight = props.fontWeight || font.weight[val];
|
|
16
|
+
const letterSpacing = props.letterSpacing || font.letterSpacing[val];
|
|
17
|
+
const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
|
|
18
|
+
const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
|
|
19
|
+
const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
|
|
20
|
+
return {
|
|
21
|
+
color,
|
|
22
|
+
fontStyle,
|
|
23
|
+
textTransform,
|
|
24
|
+
fontFamily,
|
|
25
|
+
fontWeight,
|
|
26
|
+
letterSpacing,
|
|
27
|
+
fontSize,
|
|
28
|
+
lineHeight
|
|
29
|
+
};
|
|
30
|
+
}, "getTextSize");
|
|
31
|
+
export {
|
|
32
|
+
getTextSize
|
|
33
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { useIsomorphicLayoutEffect } from "../constants/platform";
|
|
5
|
+
let serverHandoffComplete = false;
|
|
6
|
+
let id = 0;
|
|
7
|
+
function genId() {
|
|
8
|
+
return ++id;
|
|
9
|
+
}
|
|
10
|
+
__name(genId, "genId");
|
|
11
|
+
function useId(providedId) {
|
|
12
|
+
var _a;
|
|
13
|
+
if (typeof React.useId === "function") {
|
|
14
|
+
let id3 = React.useId(providedId);
|
|
15
|
+
return providedId != null ? providedId : id3;
|
|
16
|
+
}
|
|
17
|
+
let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
|
|
18
|
+
let [id2, setId] = React.useState(initialId);
|
|
19
|
+
useIsomorphicLayoutEffect(() => {
|
|
20
|
+
if (id2 === null) {
|
|
21
|
+
setId(genId());
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
if (serverHandoffComplete === false) {
|
|
26
|
+
serverHandoffComplete = true;
|
|
27
|
+
}
|
|
28
|
+
}, []);
|
|
29
|
+
return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
|
|
30
|
+
}
|
|
31
|
+
__name(useId, "useId");
|
|
32
|
+
export {
|
|
33
|
+
useId
|
|
34
|
+
};
|
package/dist/jsx/index.js
CHANGED
|
@@ -13,31 +13,34 @@ import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } f
|
|
|
13
13
|
export * from "./constants/constants";
|
|
14
14
|
export * from "./constants/platform";
|
|
15
15
|
export * from "./constants/rnw";
|
|
16
|
+
export * from "./helpers/getButtonSize";
|
|
16
17
|
export * from "./helpers/getExpandedShorthands";
|
|
17
18
|
export * from "./helpers/getSize";
|
|
18
19
|
export * from "./helpers/getSplitStyles";
|
|
19
20
|
export * from "./helpers/getStylesAtomic";
|
|
21
|
+
export * from "./helpers/getTextSize";
|
|
20
22
|
export * from "./helpers/isObj";
|
|
21
23
|
export * from "./helpers/isTamaguiElement";
|
|
22
24
|
export * from "./helpers/matchMedia";
|
|
23
25
|
export * from "./helpers/themeable";
|
|
24
26
|
export * from "./helpers/withStaticProperties";
|
|
25
27
|
export * from "./contexts/ButtonInsideButtonContext";
|
|
26
|
-
export * from "./hooks/useIsTouchDevice";
|
|
27
28
|
export * from "./hooks/useConstant";
|
|
28
|
-
export * from "./hooks/
|
|
29
|
+
export * from "./hooks/useId";
|
|
30
|
+
export * from "./hooks/useIsMounted";
|
|
31
|
+
export * from "./hooks/useIsTouchDevice";
|
|
29
32
|
export * from "./hooks/useMedia";
|
|
33
|
+
export * from "./hooks/usePressable";
|
|
30
34
|
export * from "./hooks/useTheme";
|
|
31
|
-
export * from "./hooks/useIsMounted";
|
|
32
35
|
export * from "./hooks/useUnmountEffect";
|
|
33
|
-
export * from "@tamagui/use-force-update";
|
|
34
36
|
export * from "./views/Stack";
|
|
35
37
|
export * from "./views/Text";
|
|
38
|
+
export * from "./views/TextAncestorContext";
|
|
36
39
|
export * from "./views/Theme";
|
|
37
|
-
export * from "./views/ThemeReset";
|
|
38
40
|
export * from "./views/ThemeInverse";
|
|
39
41
|
export * from "./views/ThemeProvider";
|
|
40
|
-
export * from "./views/
|
|
42
|
+
export * from "./views/ThemeReset";
|
|
43
|
+
export * from "@tamagui/use-force-update";
|
|
41
44
|
export * from "@tamagui/helpers";
|
|
42
45
|
export {
|
|
43
46
|
RNWTextProps,
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
import { composeRefs } from "@tamagui/compose-refs";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
const Slot = React.forwardRef((props, forwardedRef) => {
|
|
6
|
+
const { children, ...slotProps } = props;
|
|
7
|
+
if (React.Children.toArray(children).some(isSlottable)) {
|
|
8
|
+
return <>{React.Children.map(children, (child) => {
|
|
9
|
+
return isSlottable(child) ? <SlotClone {...slotProps} ref={forwardedRef}>{child.props.children}</SlotClone> : child;
|
|
10
|
+
})}</>;
|
|
11
|
+
}
|
|
12
|
+
return <SlotClone {...slotProps} ref={forwardedRef}>{children}</SlotClone>;
|
|
13
|
+
});
|
|
14
|
+
Slot.displayName = "Slot";
|
|
15
|
+
const SlotClone = React.forwardRef((props, forwardedRef) => {
|
|
16
|
+
const { children, ...slotProps } = props;
|
|
17
|
+
if (React.isValidElement(children)) {
|
|
18
|
+
return React.cloneElement(children, {
|
|
19
|
+
...mergeProps(slotProps, children.props),
|
|
20
|
+
ref: composeRefs(forwardedRef, children.ref)
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
|
24
|
+
});
|
|
25
|
+
SlotClone.displayName = "SlotClone";
|
|
26
|
+
const Slottable = /* @__PURE__ */ __name(({ children }) => {
|
|
27
|
+
return <>{children}</>;
|
|
28
|
+
}, "Slottable");
|
|
29
|
+
function isSlottable(child) {
|
|
30
|
+
return React.isValidElement(child);
|
|
31
|
+
}
|
|
32
|
+
__name(isSlottable, "isSlottable");
|
|
33
|
+
function mergeProps(slotProps, childProps) {
|
|
34
|
+
const overrideProps = { ...childProps };
|
|
35
|
+
for (const propName in childProps) {
|
|
36
|
+
const slotPropValue = slotProps[propName];
|
|
37
|
+
const childPropValue = childProps[propName];
|
|
38
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
|
39
|
+
if (isHandler) {
|
|
40
|
+
overrideProps[propName] = (...args) => {
|
|
41
|
+
childPropValue == null ? void 0 : childPropValue(...args);
|
|
42
|
+
slotPropValue == null ? void 0 : slotPropValue(...args);
|
|
43
|
+
};
|
|
44
|
+
} else if (propName === "style") {
|
|
45
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
46
|
+
} else if (propName === "className") {
|
|
47
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return { ...slotProps, ...overrideProps };
|
|
51
|
+
}
|
|
52
|
+
__name(mergeProps, "mergeProps");
|
|
53
|
+
export {
|
|
54
|
+
Slot,
|
|
55
|
+
Slottable
|
|
56
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.6",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"dist"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@tamagui/helpers": "^1.0.0-beta.
|
|
22
|
+
"@tamagui/helpers": "^1.0.0-beta.6",
|
|
23
23
|
"@tamagui/ow": "^0.28.1",
|
|
24
|
-
"@tamagui/use-debounce": "^1.0.0-beta.
|
|
25
|
-
"@tamagui/use-force-update": "^1.0.0-beta.
|
|
24
|
+
"@tamagui/use-debounce": "^1.0.0-beta.6",
|
|
25
|
+
"@tamagui/use-force-update": "^1.0.0-beta.6",
|
|
26
26
|
"react": "*",
|
|
27
27
|
"react-dom": "*"
|
|
28
28
|
},
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"react-native-web": "*"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@tamagui/build": "^1.0.0-beta.
|
|
33
|
+
"@tamagui/build": "^1.0.0-beta.6",
|
|
34
34
|
"@types/react": "^17.0.35",
|
|
35
35
|
"csstype": "^3.0.10",
|
|
36
36
|
"esbuild": "^0.14.36",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAiBhE,OAAO,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAKjB,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAiBhE,OAAO,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAKjB,MAAM,SAAS,CAAA;AAgBhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA0B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,IAAI,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EAAE,eAAe,CAAC,EAAE,iBAAiB,4DAsoB1F;AAKD,eAAO,MAAM,MAAM;;;;mBA4CjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,SA2CA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,eAkBtC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { VariantSpreadExtras } from '@tamagui/core';
|
|
2
|
+
export declare const getButtonSize: (sizeX?: number, sizeY?: number) => (val: any, { tokens, props, fonts }: VariantSpreadExtras<any>) => {
|
|
3
|
+
minHeight: number;
|
|
4
|
+
paddingHorizontal: number;
|
|
5
|
+
paddingVertical: number;
|
|
6
|
+
borderRadius: any;
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=getButtonSize.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getButtonSize.d.ts","sourceRoot":"","sources":["../../src/helpers/getButtonSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAgC,MAAM,eAAe,CAAA;AAIjF,eAAO,MAAM,aAAa,4CAElB,GAAG,4BAA4B,oBAAoB,GAAG,CAAC;;;;;CAmB5D,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getTextSize.d.ts","sourceRoot":"","sources":["../../src/helpers/getTextSize.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAE3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,CAAC,SAAS,EAAE,cAAc,CA4BxE,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare function useId(idFromProps: string): string;
|
|
2
|
+
declare function useId(idFromProps: number): number;
|
|
3
|
+
declare function useId(idFromProps: string | number): string | number;
|
|
4
|
+
declare function useId(idFromProps: string | undefined | null): string | undefined;
|
|
5
|
+
declare function useId(idFromProps: number | undefined | null): number | undefined;
|
|
6
|
+
declare function useId(idFromProps: string | number | undefined | null): string | number | undefined;
|
|
7
|
+
declare function useId(): string | undefined;
|
|
8
|
+
export { useId };
|
|
9
|
+
//# sourceMappingURL=useId.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useId.d.ts","sourceRoot":"","sources":["../../src/hooks/useId.tsx"],"names":[],"mappings":"AA+EA,iBAAS,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAA;AAC3C,iBAAS,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAA;AAC3C,iBAAS,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAC7D,iBAAS,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;AAC1E,iBAAS,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;AAC1E,iBAAS,KAAK,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;AAC5F,iBAAS,KAAK,IAAI,MAAM,GAAG,SAAS,CAAA;AAwCpC,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
package/types/index.d.ts
CHANGED
|
@@ -13,30 +13,33 @@ export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } f
|
|
|
13
13
|
export * from './constants/constants';
|
|
14
14
|
export * from './constants/platform';
|
|
15
15
|
export * from './constants/rnw';
|
|
16
|
+
export * from './helpers/getButtonSize';
|
|
16
17
|
export * from './helpers/getExpandedShorthands';
|
|
17
18
|
export * from './helpers/getSize';
|
|
18
19
|
export * from './helpers/getSplitStyles';
|
|
19
20
|
export * from './helpers/getStylesAtomic';
|
|
21
|
+
export * from './helpers/getTextSize';
|
|
20
22
|
export * from './helpers/isObj';
|
|
21
23
|
export * from './helpers/isTamaguiElement';
|
|
22
24
|
export * from './helpers/matchMedia';
|
|
23
25
|
export * from './helpers/themeable';
|
|
24
26
|
export * from './helpers/withStaticProperties';
|
|
25
27
|
export * from './contexts/ButtonInsideButtonContext';
|
|
26
|
-
export * from './hooks/useIsTouchDevice';
|
|
27
28
|
export * from './hooks/useConstant';
|
|
28
|
-
export * from './hooks/
|
|
29
|
+
export * from './hooks/useId';
|
|
30
|
+
export * from './hooks/useIsMounted';
|
|
31
|
+
export * from './hooks/useIsTouchDevice';
|
|
29
32
|
export * from './hooks/useMedia';
|
|
33
|
+
export * from './hooks/usePressable';
|
|
30
34
|
export * from './hooks/useTheme';
|
|
31
|
-
export * from './hooks/useIsMounted';
|
|
32
35
|
export * from './hooks/useUnmountEffect';
|
|
33
|
-
export * from '@tamagui/use-force-update';
|
|
34
36
|
export * from './views/Stack';
|
|
35
37
|
export * from './views/Text';
|
|
38
|
+
export * from './views/TextAncestorContext';
|
|
36
39
|
export * from './views/Theme';
|
|
37
|
-
export * from './views/ThemeReset';
|
|
38
40
|
export * from './views/ThemeInverse';
|
|
39
41
|
export * from './views/ThemeProvider';
|
|
40
|
-
export * from './views/
|
|
42
|
+
export * from './views/ThemeReset';
|
|
43
|
+
export * from '@tamagui/use-force-update';
|
|
41
44
|
export * from '@tamagui/helpers';
|
|
42
45
|
//# sourceMappingURL=index.d.ts.map
|