@tamagui/core 1.0.0-beta.5 → 1.0.0-beta.8
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/createPropMapper.js +2 -1
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/fixNativeShadow.native.js +3 -0
- package/dist/cjs/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/cjs/helpers/getButtonSize.js +45 -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/helpers/insertStyleRule.js +1 -0
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- 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/styled.js +5 -1
- package/dist/cjs/styled.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/createPropMapper.js +2 -1
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/fixNativeShadow.native.js +3 -0
- package/dist/esm/helpers/fixNativeShadow.native.js.map +2 -2
- package/dist/esm/helpers/getButtonSize.js +24 -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/helpers/insertStyleRule.js +1 -0
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- 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/styled.js +5 -1
- package/dist/esm/styled.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/createPropMapper.js +2 -1
- package/dist/jsx/helpers/fixNativeShadow.native.js +3 -0
- package/dist/jsx/helpers/getButtonSize.js +23 -0
- package/dist/jsx/helpers/getTextSize.js +33 -0
- package/dist/jsx/helpers/insertStyleRule.js +1 -0
- package/dist/jsx/hooks/useId.js +34 -0
- package/dist/jsx/index.js +9 -6
- package/dist/jsx/styled.js +5 -1
- 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/helpers/insertStyleRule.d.ts.map +1 -1
- 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/styled.d.ts.map +1 -1
- package/types/types.d.ts +20 -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
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n GetProps,\n GetVariantValues,\n MediaProps,\n PseudoProps,\n StaticConfig,\n StylableComponent,\n TamaguiComponent,\n VariantDefinitions,\n VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n name?: string\n variants?: VariantDefinitions<ParentComponent> | undefined\n defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n ParentComponent extends StylableComponent,\n Variants extends VariantDefinitions<ParentComponent> | symbol =\n | VariantDefinitions<ParentComponent>\n | symbol\n>(\n Component: ParentComponent,\n // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n options?: GetProps<ParentComponent> & {\n name?: string\n variants?: Variants | undefined\n // thought i had this typed, but can't get it linked\n defaultVariants?: { [key: string]: any }\n },\n staticExtractionOptions?: Partial<StaticConfig>\n) {\n const staticConfigProps = (() => {\n if (options) {\n const { variants, name, defaultVariants, ...defaultProps } = options\n if (defaultVariants) {\n Object.assign(defaultProps, defaultVariants)\n }\n const isReactNativeWeb =\n 'staticConfig' in Component\n ? Component.staticConfig.isReactNativeWeb\n : RNComponents.has(Component)\n const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n const Comp = Component as any\n const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n const conf: Partial<StaticConfig> = {\n ...staticExtractionOptions,\n ...(!isTamagui && {\n Component: Comp,\n }),\n isTamagui,\n // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n // take away the Partial<> and it's fine\n variants,\n defaultProps,\n defaultVariants,\n componentName: name,\n isReactNativeWeb,\n isInput,\n isText,\n isImage,\n }\n return conf\n }\n return {}\n })()\n\n const component = createComponent(staticConfigProps, Component)\n\n // get parent props without pseudos and medias so we can rebuild both with new variants\n type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n ? P\n : GetProps<ParentComponent>\n type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n type OurVariants = Variants extends symbol\n ? {}\n : {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n }\n\n type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n type OurPropsBase = ParentPropsBase & VariantProps\n\n type Props = Variants extends void | symbol\n ? GetProps<ParentComponent>\n : // start with base props\n OurPropsBase &\n // add in media (+ pseudos nested)\n MediaProps<Partial<OurPropsBase>> &\n // add in pseudos\n PseudoProps<Partial<OurPropsBase>>\n\n return component as TamaguiComponent<\n Props,\n // TODO infer ref\n any,\n ParentPropsBase,\n ParentVariants & OurVariants\n >\n}\n\n// test types:\n// // variants\n// export const XStack = styled(Stack, {\n// flexDirection: 'row',\n// name: 'XStack',\n// variants: {\n// fullscreen: {\n// true: {},\n// },\n// elevation: {\n// '...size': (val) => ({}),\n// },\n// },\n// })\n// const InBetween = styled(XStack, {})\n// type INBVariants = typeof InBetween extends TamaguiComponent<any, any, any, infer Variants> ? Variants: never\n// const SwitchFrame = styled(InBetween, {\n// name: 'Switch',\n// tag: 'button',\n// borderRadius: 100,\n// borderWidth: 0,\n// variants: {\n// name: {\n// true: {\n// backgroundColor: 'aliceblue'\n// },\n// // 1: {\n\n// // },\n// // ':number': (val) => {\n// // return {}\n// // },\n// // \"...fontSize\": (val) => {\n// // return {}\n// // },\n// // \"...color\": (val) => {\n// // return {}\n// // }\n// }\n// },\n// defaultVariants: {\n// size: '$4',\n// },\n// })\n// const x = <XStack fullscreen />\n// const y = <XStack fullscreen />\n// const z = <SwitchFrame fullscreen name />\n\n// depth:\n// export const SizableText = styled(Stack, {\n// name: 'SizableText',\n// backgroundColor: 'red',\n// variants: {\n// size: {\n// '...fontSize': (val, { props }) => {\n// return {\n// backgroundColor: '',\n// }\n// },\n// },\n// },\n// })\n// export const Heading = styled(SizableText, {\n// tag: 'span',\n// name: 'Heading',\n// accessibilityRole: 'header',\n// size: '$8',\n// margin: 0,\n// })\n// export const Paragraph = styled(SizableText, {\n// tag: 'p',\n// margin: 10,\n// variants: {\n// another: {\n// true: {},\n// },\n// },\n// })\n// export const Paragraph2 = styled(Paragraph, {\n// tag: 'p',\n// variants: {\n// another: {\n// '...color': (val) => ({\n// backgroundColor: 'red',\n// }),\n// },\n// },\n// })\n// const a = <SizableText size=\"$10\" />\n// const b = <Paragraph size=\"$10\" another />\n// const c = <Paragraph2 size=\"$10\" another=\"aliceblue\" />\n// export const SizableText2 = styled(SizableText, {\n// })\n// const xx = <SizableText2 abc />\n// export const Paragraph = styled(SizableText, {\n// name: 'Paragraph',\n// })\n// export const Heading = styled(Paragraph, {\n// tag: 'span',\n// margin: 0,\n// })\n// export const H2 = styled(Heading, {\n// name: 'H2',\n// })\n// const x = <H2 color=\"red\" />\n"],
|
|
5
|
-
"mappings": ";;AAAA;AAEA;AACA;AAoBO,gBAML,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;
|
|
4
|
+
"sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n GetProps,\n GetVariantValues,\n MediaProps,\n PseudoProps,\n StaticConfig,\n StylableComponent,\n TamaguiComponent,\n VariantDefinitions,\n VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n name?: string\n variants?: VariantDefinitions<ParentComponent> | undefined\n defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n ParentComponent extends StylableComponent,\n Variants extends VariantDefinitions<ParentComponent> | symbol =\n | VariantDefinitions<ParentComponent>\n | symbol\n>(\n Component: ParentComponent,\n // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n options?: GetProps<ParentComponent> & {\n name?: string\n variants?: Variants | undefined\n // thought i had this typed, but can't get it linked\n defaultVariants?: { [key: string]: any }\n },\n staticExtractionOptions?: Partial<StaticConfig>\n) {\n const staticConfigProps = (() => {\n if (options) {\n const { variants, name, defaultVariants, ...defaultProps } = options\n if (defaultVariants) {\n Object.assign(defaultProps, defaultVariants)\n }\n const isReactNativeWeb =\n 'staticConfig' in Component\n ? Component.staticConfig.isReactNativeWeb\n : RNComponents.has(Component)\n const reactNativeWebComponent = isReactNativeWeb\n ? Component['staticConfig']?.reactNativeWebComponent || Component\n : null\n const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n const Comp = reactNativeWebComponent || (Component as any)\n const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n const conf: Partial<StaticConfig> = {\n ...staticExtractionOptions,\n ...(!isTamagui && {\n Component: Comp,\n }),\n isTamagui,\n // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n // take away the Partial<> and it's fine\n variants,\n defaultProps,\n defaultVariants,\n componentName: name,\n isReactNativeWeb,\n // for nesting multiple levels of rnw styled() need keep use the OG component\n reactNativeWebComponent,\n isInput,\n isText,\n isImage,\n }\n\n console.log('makeme', name, Comp, conf)\n\n return conf\n }\n return {}\n })()\n\n const component = createComponent(staticConfigProps, Component)\n\n // get parent props without pseudos and medias so we can rebuild both with new variants\n type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n ? P\n : GetProps<ParentComponent>\n type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n type OurVariants = Variants extends symbol\n ? {}\n : {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n }\n\n type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n type OurPropsBase = ParentPropsBase & VariantProps\n\n type Props = Variants extends void | symbol\n ? GetProps<ParentComponent>\n : // start with base props\n OurPropsBase &\n // add in media (+ pseudos nested)\n MediaProps<Partial<OurPropsBase>> &\n // add in pseudos\n PseudoProps<Partial<OurPropsBase>>\n\n return component as TamaguiComponent<\n Props,\n // TODO infer ref\n any,\n ParentPropsBase,\n ParentVariants & OurVariants\n >\n}\n\n// test types:\n// // variants\n// export const XStack = styled(Stack, {\n// flexDirection: 'row',\n// name: 'XStack',\n// variants: {\n// fullscreen: {\n// true: {},\n// },\n// elevation: {\n// '...size': (val) => ({}),\n// },\n// },\n// })\n// const InBetween = styled(XStack, {})\n// type INBVariants = typeof InBetween extends TamaguiComponent<any, any, any, infer Variants> ? Variants: never\n// const SwitchFrame = styled(InBetween, {\n// name: 'Switch',\n// tag: 'button',\n// borderRadius: 100,\n// borderWidth: 0,\n// variants: {\n// name: {\n// true: {\n// backgroundColor: 'aliceblue'\n// },\n// // 1: {\n\n// // },\n// // ':number': (val) => {\n// // return {}\n// // },\n// // \"...fontSize\": (val) => {\n// // return {}\n// // },\n// // \"...color\": (val) => {\n// // return {}\n// // }\n// }\n// },\n// defaultVariants: {\n// size: '$4',\n// },\n// })\n// const x = <XStack fullscreen />\n// const y = <XStack fullscreen />\n// const z = <SwitchFrame fullscreen name />\n\n// depth:\n// export const SizableText = styled(Stack, {\n// name: 'SizableText',\n// backgroundColor: 'red',\n// variants: {\n// size: {\n// '...fontSize': (val, { props }) => {\n// return {\n// backgroundColor: '',\n// }\n// },\n// },\n// },\n// })\n// export const Heading = styled(SizableText, {\n// tag: 'span',\n// name: 'Heading',\n// accessibilityRole: 'header',\n// size: '$8',\n// margin: 0,\n// })\n// export const Paragraph = styled(SizableText, {\n// tag: 'p',\n// margin: 10,\n// variants: {\n// another: {\n// true: {},\n// },\n// },\n// })\n// export const Paragraph2 = styled(Paragraph, {\n// tag: 'p',\n// variants: {\n// another: {\n// '...color': (val) => ({\n// backgroundColor: 'red',\n// }),\n// },\n// },\n// })\n// const a = <SizableText size=\"$10\" />\n// const b = <Paragraph size=\"$10\" another />\n// const c = <Paragraph2 size=\"$10\" another=\"aliceblue\" />\n// export const SizableText2 = styled(SizableText, {\n// })\n// const xx = <SizableText2 abc />\n// export const Paragraph = styled(SizableText, {\n// name: 'Paragraph',\n// })\n// export const Heading = styled(Paragraph, {\n// tag: 'span',\n// margin: 0,\n// })\n// export const H2 = styled(Heading, {\n// name: 'H2',\n// })\n// const x = <H2 color=\"red\" />\n"],
|
|
5
|
+
"mappings": ";;AAAA;AAEA;AACA;AAoBO,gBAML,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAvCnC;AAwCI,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAClF,YAAM,OAA8B;AAAA,WAC/B;AAAA,WACC,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,cAAQ,IAAI,UAAU,MAAM,MAAM,IAAI;AAEtC,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AAhGgB;",
|
|
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={{
|
|
@@ -209,7 +209,8 @@ const expand = {
|
|
|
209
209
|
paddingVertical: sidesY.map((x) => `padding${x}`),
|
|
210
210
|
margin: sidesXY.map((x) => `margin${x}`),
|
|
211
211
|
marginHorizontal: sidesX.map((x) => `margin${x}`),
|
|
212
|
-
marginVertical: sidesY.map((x) => `margin${x}`)
|
|
212
|
+
marginVertical: sidesY.map((x) => `margin${x}`),
|
|
213
|
+
borderWidth: sidesXY.map((x) => `border${x}Width`)
|
|
213
214
|
};
|
|
214
215
|
function expansions(styleObj) {
|
|
215
216
|
var _a, _b;
|
|
@@ -2,6 +2,9 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
const matchRgbaHsla = /(rgba|hsla)\(\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,})\s*\)$/;
|
|
4
4
|
function fixNativeShadow(styles) {
|
|
5
|
+
if (!styles) {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
5
8
|
const color = styles.find((x) => x[0] === "shadowColor");
|
|
6
9
|
if (!color) {
|
|
7
10
|
return;
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
return {
|
|
15
|
+
minHeight,
|
|
16
|
+
paddingHorizontal: props.circular ? 0 : px,
|
|
17
|
+
paddingVertical: props.circular ? 0 : py,
|
|
18
|
+
borderRadius: props.circular ? 1e5 : (_g = props.borderRadius) != null ? _g : radius
|
|
19
|
+
};
|
|
20
|
+
}, "getButtonSize");
|
|
21
|
+
export {
|
|
22
|
+
getButtonSize
|
|
23
|
+
};
|
|
@@ -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
|
+
};
|
|
@@ -79,6 +79,7 @@ function insertStyleRule(identifier, rule) {
|
|
|
79
79
|
return;
|
|
80
80
|
hasInsertedSinceUpdate = true;
|
|
81
81
|
updateInsertedCache(identifier, rule);
|
|
82
|
+
allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
|
|
82
83
|
sheet == null ? void 0 : sheet.insertRule(rule, sheet.cssRules.length);
|
|
83
84
|
}
|
|
84
85
|
__name(insertStyleRule, "insertStyleRule");
|
|
@@ -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,
|
package/dist/jsx/styled.js
CHANGED
|
@@ -5,14 +5,16 @@ import { createComponent } from "./createComponent";
|
|
|
5
5
|
import { RNComponents } from "./helpers/RNComponents";
|
|
6
6
|
function styled(Component, options, staticExtractionOptions) {
|
|
7
7
|
const staticConfigProps = (() => {
|
|
8
|
+
var _a;
|
|
8
9
|
if (options) {
|
|
9
10
|
const { variants, name, defaultVariants, ...defaultProps } = options;
|
|
10
11
|
if (defaultVariants) {
|
|
11
12
|
Object.assign(defaultProps, defaultVariants);
|
|
12
13
|
}
|
|
13
14
|
const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
|
|
15
|
+
const reactNativeWebComponent = isReactNativeWeb ? ((_a = Component["staticConfig"]) == null ? void 0 : _a.reactNativeWebComponent) || Component : null;
|
|
14
16
|
const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
|
|
15
|
-
const Comp = Component;
|
|
17
|
+
const Comp = reactNativeWebComponent || Component;
|
|
16
18
|
const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
|
|
17
19
|
const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false));
|
|
18
20
|
const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false));
|
|
@@ -27,10 +29,12 @@ function styled(Component, options, staticExtractionOptions) {
|
|
|
27
29
|
defaultVariants,
|
|
28
30
|
componentName: name,
|
|
29
31
|
isReactNativeWeb,
|
|
32
|
+
reactNativeWebComponent,
|
|
30
33
|
isInput,
|
|
31
34
|
isText,
|
|
32
35
|
isImage
|
|
33
36
|
};
|
|
37
|
+
console.log("makeme", name, Comp, conf);
|
|
34
38
|
return conf;
|
|
35
39
|
}
|
|
36
40
|
return {};
|
|
@@ -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.8",
|
|
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.8",
|
|
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.8",
|
|
25
|
+
"@tamagui/use-force-update": "^1.0.0-beta.8",
|
|
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.8",
|
|
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;;;;;CAgB5D,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,UAAqB,CAAA;AACjD,eAAO,MAAM,gBAAgB,iBAAyC,CAAA;AACtE,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AAgCxD,wBAAgB,cAAc,SA6B7B;AAMD,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAMnE;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,UAAqB,CAAA;AACjD,eAAO,MAAM,gBAAgB,iBAAyC,CAAA;AACtE,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AAgCxD,wBAAgB,cAAc,SA6B7B;AAMD,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAMnE;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAM/D"}
|
|
@@ -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
|
package/types/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAE5F,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAE/B,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAE9C,cAAc,sCAAsC,CAAA;AAEpD,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAE5F,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAE/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAE9C,cAAc,sCAAsC,CAAA;AAEpD,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AAExC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAElC,cAAc,2BAA2B,CAAA;AACzC,cAAc,kBAAkB,CAAA"}
|
package/types/styled.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,oBAAY,aAAa,CAAC,eAAe,SAAS,iBAAiB,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,GAAG,SAAS,CAAA;IAC1D,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACzC,CAAA;AAED,wBAAgB,MAAM,CACpB,eAAe,SAAS,iBAAiB,EACzC,QAAQ,SAAS,kBAAkB,CAAC,eAAe,CAAC,GAAG,MAAM,GACzD,kBAAkB,CAAC,eAAe,CAAC,GACnC,MAAM,EAEV,SAAS,EAAE,eAAe,EAE1B,OAAO,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE/B,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACzC,EACD,uBAAuB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,oBAAY,aAAa,CAAC,eAAe,SAAS,iBAAiB,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,GAAG,SAAS,CAAA;IAC1D,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACzC,CAAA;AAED,wBAAgB,MAAM,CACpB,eAAe,SAAS,iBAAiB,EACzC,QAAQ,SAAS,kBAAkB,CAAC,eAAe,CAAC,GAAG,MAAM,GACzD,kBAAkB,CAAC,eAAe,CAAC,GACnC,MAAM,EAEV,SAAS,EAAE,eAAe,EAE1B,OAAO,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE/B,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACzC,EACD,uBAAuB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,qnEAkFhD"}
|