@vellira-ui/react-native 2.98.7 → 2.100.0

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.
Files changed (2) hide show
  1. package/dist/index.js +311 -232
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4,6 +4,59 @@ import { createConsoleOverlayDiagnostics, createOverlayManagerStore, createOverl
4
4
  import { controlSizes, darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
6
  import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
7
+ //#region src/theme/componentTokenOutput.ts
8
+ const componentShadowLevels = [
9
+ "sm",
10
+ "md",
11
+ "lg",
12
+ "xl"
13
+ ];
14
+ function hasExactKeys(candidate, expectedKeys) {
15
+ const actualKeys = Object.keys(candidate);
16
+ return actualKeys.length === expectedKeys.length && actualKeys.every((key) => expectedKeys.includes(key));
17
+ }
18
+ function isComponentPlatformIntent(value) {
19
+ if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
20
+ const candidate = value;
21
+ if (candidate.kind === "shadow") {
22
+ if (candidate.role === "focus-ring" || candidate.role === "none") return hasExactKeys(candidate, ["kind", "role"]);
23
+ return candidate.role === "elevation" && hasExactKeys(candidate, [
24
+ "kind",
25
+ "role",
26
+ "level"
27
+ ]) && typeof candidate.level === "string" && componentShadowLevels.includes(candidate.level);
28
+ }
29
+ return candidate.kind === "viewport-height" && hasExactKeys(candidate, ["kind", "ratio"]) && typeof candidate.ratio === "number" && Number.isFinite(candidate.ratio) && candidate.ratio > 0 && candidate.ratio <= 1;
30
+ }
31
+ function formatPercentage(ratio) {
32
+ const percentage = ratio * 100;
33
+ return Number.isInteger(percentage) ? String(percentage) : String(Number(percentage.toFixed(4)));
34
+ }
35
+ function resolveIntentForWeb(theme, intent) {
36
+ if (intent.kind === "viewport-height") return `${formatPercentage(intent.ratio)}vh`;
37
+ if (intent.role === "focus-ring") return theme.semantic.focus.ring.shadow;
38
+ if (intent.role === "none") return "none";
39
+ return theme.semantic.shadow[intent.level];
40
+ }
41
+ function resolveIntentForReactNative(theme, intent) {
42
+ if (intent.kind === "viewport-height") return `${formatPercentage(intent.ratio)}%`;
43
+ if (intent.role === "focus-ring" || intent.role === "none") return null;
44
+ const nativeLevel = intent.level === "xl" ? "lg" : intent.level;
45
+ return theme.tokens.shadows[nativeLevel];
46
+ }
47
+ function adaptComponentTokenTree(value, resolveIntent) {
48
+ if (isComponentPlatformIntent(value)) return resolveIntent(value);
49
+ if (Array.isArray(value)) return value.map((entry) => adaptComponentTokenTree(entry, resolveIntent));
50
+ if (typeof value === "object" && value !== null) return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, adaptComponentTokenTree(entry, resolveIntent)]));
51
+ return value;
52
+ }
53
+ function resolveComponentTokenPlatformOutputs(theme, componentTokens) {
54
+ return {
55
+ web: adaptComponentTokenTree(componentTokens, (intent) => resolveIntentForWeb(theme, intent)),
56
+ reactNative: adaptComponentTokenTree(componentTokens, (intent) => resolveIntentForReactNative(theme, intent))
57
+ };
58
+ }
59
+ //#endregion
7
60
  //#region src/theme/fontWeight.ts
8
61
  const nativeFontWeights = /* @__PURE__ */ new Set([
9
62
  "normal",
@@ -936,82 +989,88 @@ DropdownContext.displayName = "DropdownContext";
936
989
  //#endregion
937
990
  //#region src/components/Dropdown/Content/DropdownContent.styles.ts
938
991
  const getDropdownBackdropBackgroundColor = (theme, presentation) => presentation === "popover" ? "transparent" : theme.semantic.overlay.backdrop;
939
- const createStyles$22 = (theme) => StyleSheet.create({
940
- modalRoot: { flex: 1 },
941
- sheet: { justifyContent: "flex-end" },
942
- modal: {
943
- alignItems: "center",
944
- justifyContent: "center",
945
- padding: theme.tokens.spacing[4]
946
- },
947
- popover: { flex: 1 },
948
- backdrop: { ...StyleSheet.absoluteFill },
949
- menu: {
950
- maxHeight: "50%",
951
- overflow: "hidden",
952
- padding: theme.tokens.spacing[1],
953
- backgroundColor: theme.components.dropdown.content.bg,
954
- borderColor: theme.components.dropdown.content.border,
955
- borderTopLeftRadius: theme.tokens.radius.lg,
956
- borderTopRightRadius: theme.tokens.radius.lg,
957
- borderWidth: 1,
958
- ...Platform.select({
959
- web: { boxShadow: theme.components.dropdown.content.shadow },
960
- default: {
961
- shadowColor: theme.tokens.shadows.lg.color,
962
- shadowOffset: {
963
- width: theme.tokens.shadows.lg.x,
964
- height: -theme.tokens.shadows.lg.y
965
- },
966
- shadowOpacity: theme.tokens.shadows.lg.opacity,
967
- shadowRadius: theme.tokens.shadows.lg.blur,
968
- elevation: theme.tokens.shadows.lg.elevation
969
- }
970
- })
971
- },
972
- sheetMenu: {
973
- width: "100%",
974
- maxHeight: "70%",
975
- borderTopLeftRadius: theme.tokens.radius.lg,
976
- borderTopRightRadius: theme.tokens.radius.lg
977
- },
978
- modalMenu: {
979
- width: "100%",
980
- maxWidth: 420,
981
- maxHeight: "70%",
982
- borderRadius: theme.tokens.radius.lg
983
- },
984
- popoverMenu: {
985
- width: "100%",
986
- maxWidth: 360,
987
- maxHeight: "60%",
988
- borderRadius: theme.tokens.radius.md
989
- },
990
- searchWrap: {
991
- minHeight: 40,
992
- flexDirection: "row",
993
- alignItems: "center",
994
- gap: theme.tokens.spacing[2],
995
- paddingHorizontal: theme.tokens.spacing[3],
996
- borderBottomWidth: 1,
997
- borderBottomColor: theme.components.dropdown.separator.bg
998
- },
999
- searchIcon: {
1000
- width: 16,
1001
- height: 16,
1002
- alignItems: "center",
1003
- justifyContent: "center"
1004
- },
1005
- searchInput: {
1006
- flex: 1,
1007
- minWidth: 0,
1008
- paddingVertical: theme.tokens.spacing[2],
1009
- color: theme.components.dropdown.content.fg,
1010
- fontFamily: theme.tokens.typography.family.regular,
1011
- fontSize: theme.tokens.typography.size.sm,
1012
- lineHeight: theme.tokens.typography.lineHeight.sm
1013
- }
1014
- });
992
+ const createStyles$22 = (theme) => {
993
+ const canonical = theme.components.dropdown.content;
994
+ const output = resolveComponentTokenPlatformOutputs(theme, canonical);
995
+ const nativeShadow = output.reactNative.shadow;
996
+ if (nativeShadow === null || typeof nativeShadow === "string") throw new Error("Dropdown content shadow must resolve to a structured React Native shadow.");
997
+ return StyleSheet.create({
998
+ modalRoot: { flex: 1 },
999
+ sheet: { justifyContent: "flex-end" },
1000
+ modal: {
1001
+ alignItems: "center",
1002
+ justifyContent: "center",
1003
+ padding: theme.tokens.spacing[4]
1004
+ },
1005
+ popover: { flex: 1 },
1006
+ backdrop: { ...StyleSheet.absoluteFill },
1007
+ menu: {
1008
+ maxHeight: "50%",
1009
+ overflow: "hidden",
1010
+ padding: theme.tokens.spacing[1],
1011
+ backgroundColor: canonical.bg,
1012
+ borderColor: canonical.border,
1013
+ borderTopLeftRadius: theme.tokens.radius.lg,
1014
+ borderTopRightRadius: theme.tokens.radius.lg,
1015
+ borderWidth: 1,
1016
+ ...Platform.select({
1017
+ web: { boxShadow: output.web.shadow },
1018
+ default: {
1019
+ shadowColor: nativeShadow.color,
1020
+ shadowOffset: {
1021
+ width: nativeShadow.x,
1022
+ height: -nativeShadow.y
1023
+ },
1024
+ shadowOpacity: nativeShadow.opacity,
1025
+ shadowRadius: nativeShadow.blur,
1026
+ elevation: nativeShadow.elevation
1027
+ }
1028
+ })
1029
+ },
1030
+ sheetMenu: {
1031
+ width: "100%",
1032
+ maxHeight: "70%",
1033
+ borderTopLeftRadius: theme.tokens.radius.lg,
1034
+ borderTopRightRadius: theme.tokens.radius.lg
1035
+ },
1036
+ modalMenu: {
1037
+ width: "100%",
1038
+ maxWidth: 420,
1039
+ maxHeight: "70%",
1040
+ borderRadius: theme.tokens.radius.lg
1041
+ },
1042
+ popoverMenu: {
1043
+ width: "100%",
1044
+ maxWidth: 360,
1045
+ maxHeight: "60%",
1046
+ borderRadius: theme.tokens.radius.md
1047
+ },
1048
+ searchWrap: {
1049
+ minHeight: 40,
1050
+ flexDirection: "row",
1051
+ alignItems: "center",
1052
+ gap: theme.tokens.spacing[2],
1053
+ paddingHorizontal: theme.tokens.spacing[3],
1054
+ borderBottomWidth: 1,
1055
+ borderBottomColor: theme.components.dropdown.separator.bg
1056
+ },
1057
+ searchIcon: {
1058
+ width: 16,
1059
+ height: 16,
1060
+ alignItems: "center",
1061
+ justifyContent: "center"
1062
+ },
1063
+ searchInput: {
1064
+ flex: 1,
1065
+ minWidth: 0,
1066
+ paddingVertical: theme.tokens.spacing[2],
1067
+ color: theme.components.dropdown.content.fg,
1068
+ fontFamily: theme.tokens.typography.family.regular,
1069
+ fontSize: theme.tokens.typography.size.sm,
1070
+ lineHeight: theme.tokens.typography.lineHeight.sm
1071
+ }
1072
+ });
1073
+ };
1015
1074
  //#endregion
1016
1075
  //#region src/components/Dropdown/Content/DropdownContent.tsx
1017
1076
  const nativePointerEventsBoxNone$1 = Platform.OS === "web" ? void 0 : { pointerEvents: "box-none" };
@@ -2201,30 +2260,38 @@ const ModalClose = ({ asChild = false, children, accessibilityLabel, style }) =>
2201
2260
  ModalClose.displayName = "Modal.Close";
2202
2261
  //#endregion
2203
2262
  //#region src/components/Modal/Content/ModalContent.styles.ts
2204
- const createStyles$14 = (theme) => StyleSheet.create({ content: {
2205
- width: "100%",
2206
- maxWidth: theme.components.modal.content.size.md,
2207
- maxHeight: theme.components.modal.content.nativeMaxHeight,
2208
- padding: theme.components.modal.content.padding,
2209
- gap: theme.components.modal.content.gap,
2210
- backgroundColor: theme.components.modal.content.bg,
2211
- borderColor: theme.components.modal.content.border,
2212
- borderRadius: theme.components.modal.content.radius,
2213
- borderWidth: theme.components.modal.content.borderWidth,
2214
- ...Platform.select({
2215
- web: { boxShadow: theme.components.modal.content.shadow },
2216
- default: {
2217
- shadowColor: theme.tokens.shadows.lg.color,
2218
- shadowOffset: {
2219
- width: theme.tokens.shadows.lg.x,
2220
- height: theme.tokens.shadows.lg.y
2221
- },
2222
- shadowOpacity: theme.tokens.shadows.lg.opacity,
2223
- shadowRadius: theme.tokens.shadows.lg.blur,
2224
- elevation: theme.tokens.shadows.lg.elevation
2225
- }
2226
- })
2227
- } });
2263
+ const createStyles$14 = (theme) => {
2264
+ const canonical = theme.components.modal.content;
2265
+ const output = resolveComponentTokenPlatformOutputs(theme, canonical);
2266
+ const nativeShadow = output.reactNative.shadow;
2267
+ return StyleSheet.create({ content: {
2268
+ width: "100%",
2269
+ maxWidth: canonical.size.md,
2270
+ maxHeight: Platform.select({
2271
+ web: output.web.maxHeight,
2272
+ default: output.reactNative.maxHeight
2273
+ }),
2274
+ padding: canonical.padding,
2275
+ gap: canonical.gap,
2276
+ backgroundColor: canonical.bg,
2277
+ borderColor: canonical.border,
2278
+ borderRadius: canonical.radius,
2279
+ borderWidth: canonical.borderWidth,
2280
+ ...Platform.select({
2281
+ web: { boxShadow: output.web.shadow },
2282
+ default: {
2283
+ shadowColor: nativeShadow.color,
2284
+ shadowOffset: {
2285
+ width: nativeShadow.x,
2286
+ height: nativeShadow.y
2287
+ },
2288
+ shadowOpacity: nativeShadow.opacity,
2289
+ shadowRadius: nativeShadow.blur,
2290
+ elevation: nativeShadow.elevation
2291
+ }
2292
+ })
2293
+ } });
2294
+ };
2228
2295
  //#endregion
2229
2296
  //#region src/components/Modal/Content/ModalContent.tsx
2230
2297
  const ModalContent = ({ children, style }) => {
@@ -2701,26 +2768,27 @@ const styles = StyleSheet.create({
2701
2768
  content: { position: "absolute" }
2702
2769
  });
2703
2770
  function createPopoverContentStyles(theme) {
2704
- const tokens = theme.components.popover.content;
2705
- const shadow = tokens.shadow.native;
2771
+ const canonical = theme.components.popover.content;
2772
+ const output = resolveComponentTokenPlatformOutputs(theme, canonical);
2773
+ const nativeShadow = output.reactNative.shadow;
2706
2774
  return StyleSheet.create({ content: {
2707
- minWidth: tokens.minWidth,
2708
- maxWidth: tokens.maxWidth,
2709
- padding: tokens.padding,
2710
- gap: tokens.gap,
2711
- backgroundColor: tokens.bg,
2712
- borderColor: tokens.border,
2713
- borderWidth: tokens.borderWidth,
2714
- borderRadius: tokens.radius,
2715
- ...Platform.OS === "web" ? { boxShadow: tokens.shadow.web } : {
2716
- shadowColor: shadow.color,
2717
- shadowOpacity: shadow.opacity,
2718
- shadowRadius: shadow.blur,
2775
+ minWidth: canonical.minWidth,
2776
+ maxWidth: canonical.maxWidth,
2777
+ padding: canonical.padding,
2778
+ gap: canonical.gap,
2779
+ backgroundColor: canonical.bg,
2780
+ borderColor: canonical.border,
2781
+ borderWidth: canonical.borderWidth,
2782
+ borderRadius: canonical.radius,
2783
+ ...Platform.OS === "web" ? { boxShadow: output.web.shadow } : {
2784
+ shadowColor: nativeShadow.color,
2785
+ shadowOpacity: nativeShadow.opacity,
2786
+ shadowRadius: nativeShadow.blur,
2719
2787
  shadowOffset: {
2720
- width: shadow.x,
2721
- height: shadow.y
2788
+ width: nativeShadow.x,
2789
+ height: nativeShadow.y
2722
2790
  },
2723
- elevation: shadow.elevation
2791
+ elevation: nativeShadow.elevation
2724
2792
  }
2725
2793
  } });
2726
2794
  }
@@ -3991,87 +4059,93 @@ const SelectLoadingState = () => {
3991
4059
  SelectLoadingState.displayName = "Select.LoadingState";
3992
4060
  //#endregion
3993
4061
  //#region src/components/Select/Presentation/SelectPresentation.styles.ts
3994
- const createPresentationStyles = (theme) => StyleSheet.create({
3995
- modalRoot: { flex: 1 },
3996
- sheetRoot: { justifyContent: "flex-end" },
3997
- modalPresentationRoot: {
3998
- alignItems: "center",
3999
- justifyContent: "center",
4000
- padding: theme.tokens.spacing[4]
4001
- },
4002
- backdrop: {
4003
- ...StyleSheet.absoluteFill,
4004
- backgroundColor: theme.semantic.overlay.backdrop
4005
- },
4006
- content: {
4007
- overflow: "hidden",
4008
- backgroundColor: theme.components.select.dropdown.bg,
4009
- borderColor: theme.components.select.dropdown.border,
4010
- borderWidth: 1
4011
- },
4012
- surface: { ...Platform.select({
4013
- web: { boxShadow: theme.components.select.dropdown.shadow },
4014
- default: {
4015
- shadowColor: theme.tokens.shadows.lg.color,
4016
- shadowOffset: {
4017
- width: theme.tokens.shadows.lg.x,
4018
- height: theme.tokens.shadows.lg.y
4019
- },
4020
- shadowOpacity: theme.tokens.shadows.lg.opacity,
4021
- shadowRadius: theme.tokens.shadows.lg.blur,
4022
- elevation: theme.tokens.shadows.lg.elevation
4023
- }
4024
- }) },
4025
- sheetSurface: {
4026
- borderTopLeftRadius: theme.tokens.radius.lg,
4027
- borderTopRightRadius: theme.tokens.radius.lg,
4028
- ...Platform.select({
4029
- web: { boxShadow: `0 -${theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px color-mix(in srgb, ${theme.tokens.shadows.lg.color} ${theme.tokens.shadows.lg.opacity * 100}%, transparent)` },
4062
+ const createPresentationStyles = (theme) => {
4063
+ const canonical = theme.components.select.dropdown;
4064
+ const output = resolveComponentTokenPlatformOutputs(theme, canonical);
4065
+ const nativeShadow = output.reactNative.shadow;
4066
+ if (nativeShadow === null || typeof nativeShadow === "string") throw new Error("Select dropdown shadow must resolve to a structured React Native shadow.");
4067
+ return StyleSheet.create({
4068
+ modalRoot: { flex: 1 },
4069
+ sheetRoot: { justifyContent: "flex-end" },
4070
+ modalPresentationRoot: {
4071
+ alignItems: "center",
4072
+ justifyContent: "center",
4073
+ padding: theme.tokens.spacing[4]
4074
+ },
4075
+ backdrop: {
4076
+ ...StyleSheet.absoluteFill,
4077
+ backgroundColor: theme.semantic.overlay.backdrop
4078
+ },
4079
+ content: {
4080
+ overflow: "hidden",
4081
+ backgroundColor: canonical.bg,
4082
+ borderColor: canonical.border,
4083
+ borderWidth: 1
4084
+ },
4085
+ surface: { ...Platform.select({
4086
+ web: { boxShadow: output.web.shadow },
4030
4087
  default: {
4031
- shadowColor: theme.tokens.shadows.lg.color,
4088
+ shadowColor: nativeShadow.color,
4032
4089
  shadowOffset: {
4033
- width: theme.tokens.shadows.lg.x,
4034
- height: -theme.tokens.shadows.lg.y
4090
+ width: nativeShadow.x,
4091
+ height: nativeShadow.y
4035
4092
  },
4036
- shadowOpacity: theme.tokens.shadows.lg.opacity,
4037
- shadowRadius: theme.tokens.shadows.lg.blur,
4038
- elevation: theme.tokens.shadows.lg.elevation
4093
+ shadowOpacity: nativeShadow.opacity,
4094
+ shadowRadius: nativeShadow.blur,
4095
+ elevation: nativeShadow.elevation
4039
4096
  }
4040
- })
4041
- },
4042
- modalSurface: {
4043
- width: "100%",
4044
- maxWidth: 420,
4045
- borderRadius: theme.tokens.radius.lg
4046
- },
4047
- popoverSurface: { borderRadius: theme.tokens.radius.lg },
4048
- sheet: {
4049
- maxHeight: "74%",
4050
- borderTopLeftRadius: theme.tokens.radius.lg,
4051
- borderTopRightRadius: theme.tokens.radius.lg,
4052
- borderBottomWidth: 0
4053
- },
4054
- modalPresentation: {
4055
- width: "100%",
4056
- maxWidth: 420,
4057
- maxHeight: "74%",
4058
- borderRadius: theme.tokens.radius.lg
4059
- },
4060
- popover: {
4061
- maxHeight: "60%",
4062
- borderRadius: theme.tokens.radius.lg
4063
- },
4064
- handleWrap: {
4065
- alignItems: "center",
4066
- paddingTop: theme.tokens.spacing[3]
4067
- },
4068
- handle: {
4069
- width: 44,
4070
- height: 4,
4071
- borderRadius: 999,
4072
- backgroundColor: theme.semantic.border.muted
4073
- }
4074
- });
4097
+ }) },
4098
+ sheetSurface: {
4099
+ borderTopLeftRadius: theme.tokens.radius.lg,
4100
+ borderTopRightRadius: theme.tokens.radius.lg,
4101
+ ...Platform.select({
4102
+ web: { boxShadow: `0 -${theme.tokens.shadows.lg.y}px ${theme.tokens.shadows.lg.blur}px color-mix(in srgb, ${theme.tokens.shadows.lg.color} ${theme.tokens.shadows.lg.opacity * 100}%, transparent)` },
4103
+ default: {
4104
+ shadowColor: theme.tokens.shadows.lg.color,
4105
+ shadowOffset: {
4106
+ width: theme.tokens.shadows.lg.x,
4107
+ height: -theme.tokens.shadows.lg.y
4108
+ },
4109
+ shadowOpacity: theme.tokens.shadows.lg.opacity,
4110
+ shadowRadius: theme.tokens.shadows.lg.blur,
4111
+ elevation: theme.tokens.shadows.lg.elevation
4112
+ }
4113
+ })
4114
+ },
4115
+ modalSurface: {
4116
+ width: "100%",
4117
+ maxWidth: 420,
4118
+ borderRadius: theme.tokens.radius.lg
4119
+ },
4120
+ popoverSurface: { borderRadius: theme.tokens.radius.lg },
4121
+ sheet: {
4122
+ maxHeight: "74%",
4123
+ borderTopLeftRadius: theme.tokens.radius.lg,
4124
+ borderTopRightRadius: theme.tokens.radius.lg,
4125
+ borderBottomWidth: 0
4126
+ },
4127
+ modalPresentation: {
4128
+ width: "100%",
4129
+ maxWidth: 420,
4130
+ maxHeight: "74%",
4131
+ borderRadius: theme.tokens.radius.lg
4132
+ },
4133
+ popover: {
4134
+ maxHeight: "60%",
4135
+ borderRadius: theme.tokens.radius.lg
4136
+ },
4137
+ handleWrap: {
4138
+ alignItems: "center",
4139
+ paddingTop: theme.tokens.spacing[3]
4140
+ },
4141
+ handle: {
4142
+ width: 44,
4143
+ height: 4,
4144
+ borderRadius: 999,
4145
+ backgroundColor: theme.semantic.border.muted
4146
+ }
4147
+ });
4148
+ };
4075
4149
  //#endregion
4076
4150
  //#region src/components/Select/Presentation/SelectBackdrop.tsx
4077
4151
  const SelectBackdrop = ({ outsidePressProps }) => {
@@ -6112,44 +6186,49 @@ function TooltipArrow() {
6112
6186
  }
6113
6187
  //#endregion
6114
6188
  //#region src/components/Tooltip/Tooltip.styles.ts
6115
- const createStyles$4 = (theme) => StyleSheet.create({
6116
- root: { alignSelf: Platform.select({
6117
- web: "auto",
6118
- default: "flex-start"
6119
- }) },
6120
- overlay: { ...StyleSheet.absoluteFill },
6121
- bubble: {
6122
- position: "absolute",
6123
- maxWidth: theme.components.tooltip.content.maxWidth,
6124
- paddingHorizontal: theme.components.tooltip.content.paddingX,
6125
- paddingVertical: theme.components.tooltip.content.paddingY,
6126
- backgroundColor: theme.components.tooltip.content.bg,
6127
- borderColor: theme.components.tooltip.content.border,
6128
- borderRadius: theme.components.tooltip.content.radius,
6129
- borderWidth: theme.components.tooltip.content.borderWidth,
6130
- ...Platform.select({
6131
- web: { boxShadow: theme.components.tooltip.content.shadow },
6132
- default: {
6133
- shadowColor: theme.tokens.shadows.md.color,
6134
- shadowOffset: {
6135
- width: theme.tokens.shadows.md.x,
6136
- height: theme.tokens.shadows.md.y
6137
- },
6138
- shadowOpacity: theme.tokens.shadows.md.opacity,
6139
- shadowRadius: theme.tokens.shadows.md.blur,
6140
- elevation: theme.tokens.shadows.md.elevation
6141
- }
6142
- })
6143
- },
6144
- text: {
6145
- flexShrink: 1,
6146
- color: theme.components.tooltip.content.fg,
6147
- fontFamily: theme.tokens.typography.family.regular,
6148
- fontSize: theme.components.tooltip.content.fontSize,
6149
- lineHeight: theme.components.tooltip.content.lineHeight,
6150
- textAlign: "center"
6151
- }
6152
- });
6189
+ const createStyles$4 = (theme) => {
6190
+ const canonical = theme.components.tooltip.content;
6191
+ const output = resolveComponentTokenPlatformOutputs(theme, canonical);
6192
+ const nativeShadow = output.reactNative.shadow;
6193
+ return StyleSheet.create({
6194
+ root: { alignSelf: Platform.select({
6195
+ web: "auto",
6196
+ default: "flex-start"
6197
+ }) },
6198
+ overlay: { ...StyleSheet.absoluteFill },
6199
+ bubble: {
6200
+ position: "absolute",
6201
+ maxWidth: canonical.maxWidth,
6202
+ paddingHorizontal: canonical.paddingX,
6203
+ paddingVertical: canonical.paddingY,
6204
+ backgroundColor: canonical.bg,
6205
+ borderColor: canonical.border,
6206
+ borderRadius: canonical.radius,
6207
+ borderWidth: canonical.borderWidth,
6208
+ ...Platform.select({
6209
+ web: { boxShadow: output.web.shadow },
6210
+ default: {
6211
+ shadowColor: nativeShadow.color,
6212
+ shadowOffset: {
6213
+ width: nativeShadow.x,
6214
+ height: nativeShadow.y
6215
+ },
6216
+ shadowOpacity: nativeShadow.opacity,
6217
+ shadowRadius: nativeShadow.blur,
6218
+ elevation: nativeShadow.elevation
6219
+ }
6220
+ })
6221
+ },
6222
+ text: {
6223
+ flexShrink: 1,
6224
+ color: canonical.fg,
6225
+ fontFamily: theme.tokens.typography.family.regular,
6226
+ fontSize: canonical.fontSize,
6227
+ lineHeight: canonical.lineHeight,
6228
+ textAlign: "center"
6229
+ }
6230
+ });
6231
+ };
6153
6232
  //#endregion
6154
6233
  //#region src/components/Tooltip/Content/TooltipContent.tsx
6155
6234
  const TooltipContent = ({ children, forceMount = false, withArrow = false, style, textStyle }) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vellira-ui/react-native",
3
- "version": "2.98.7",
3
+ "version": "2.100.0",
4
4
  "description": "React Native components for Vellira Design System",
5
5
  "keywords": [
6
6
  "vellira",