radix-native-ui 0.1.1 → 0.1.3

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/index.mjs CHANGED
@@ -3932,10 +3932,10 @@ AnimatedPressable.displayName = "AnimatedPressable";
3932
3932
  //#endregion
3933
3933
  //#region src/components/layout/Box.tsx
3934
3934
  const areEqual$12 = (prevProps, nextProps) => {
3935
- if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.display === nextProps.display && prevProps.flexDirection === nextProps.flexDirection && prevProps.opacity === nextProps.opacity && prevProps.radius === nextProps.radius) return true;
3935
+ if (prevProps.children === nextProps.children && prevProps.style === nextProps.style && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.display === nextProps.display && prevProps.flexDirection === nextProps.flexDirection && prevProps.flex === nextProps.flex && prevProps.opacity === nextProps.opacity && prevProps.radius === nextProps.radius) return true;
3936
3936
  return false;
3937
3937
  };
3938
- const Box = React.memo(React.forwardRef(({ asChild = false, children, style, backgroundColor, radius, display, flexDirection, justifyContent, alignItems, flexWrap, flexGrow, flexShrink, flexBasis, alignSelf, width, height, minWidth, maxWidth, minHeight, maxHeight, position, top, right, bottom, left, zIndex, overflow, margin, marginTop, marginBottom, marginLeft, marginRight, marginHorizontal, marginVertical, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical, borderWidth, borderRadius: borderRadiusProp, borderColor, opacity, elevation, ...rest }, ref) => {
3938
+ const Box = React.memo(React.forwardRef(({ asChild = false, children, style, backgroundColor, radius, display, flexDirection, justifyContent, alignItems, flexWrap, flex, flexGrow, flexShrink, flexBasis, alignSelf, width, height, minWidth, maxWidth, minHeight, maxHeight, position, top, right, bottom, left, zIndex, overflow, margin, marginTop, marginBottom, marginLeft, marginRight, marginHorizontal, marginVertical, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingHorizontal, paddingVertical, borderWidth, borderRadius: borderRadiusProp, borderColor, opacity, elevation, ...rest }, ref) => {
3939
3939
  const theme = useTheme$1();
3940
3940
  const colors = theme.colors.gray;
3941
3941
  const radii = theme.radii;
@@ -3959,6 +3959,7 @@ const Box = React.memo(React.forwardRef(({ asChild = false, children, style, bac
3959
3959
  justifyContent,
3960
3960
  alignItems,
3961
3961
  flexWrap,
3962
+ flex,
3962
3963
  flexGrow,
3963
3964
  flexShrink,
3964
3965
  flexBasis,
@@ -4001,6 +4002,7 @@ const Box = React.memo(React.forwardRef(({ asChild = false, children, style, bac
4001
4002
  justifyContent,
4002
4003
  alignItems,
4003
4004
  flexWrap,
4005
+ flex,
4004
4006
  flexGrow,
4005
4007
  flexShrink,
4006
4008
  flexBasis,
@@ -4481,21 +4483,20 @@ Separator.displayName = "Separator";
4481
4483
  * </Stack>
4482
4484
  */
4483
4485
  const Stack = React.memo(({ children, direction = "vertical", gap, align, justify, wrap = "nowrap", asChild = false, style, width, height, flexGrow, flexShrink, padding, backgroundColor }) => {
4484
- const theme = useTheme$1();
4485
4486
  const stackStyle = useMemo(() => {
4486
4487
  const baseStyle = {
4487
4488
  display: "flex",
4488
4489
  flexDirection: direction === "horizontal" ? "row" : "column",
4489
4490
  flexWrap: wrap
4490
4491
  };
4491
- if (gap !== void 0) baseStyle.gap = theme.space[gap];
4492
+ if (gap !== void 0) baseStyle.gap = gap;
4492
4493
  if (align !== void 0) baseStyle.alignItems = align;
4493
4494
  if (justify !== void 0) baseStyle.justifyContent = justify;
4494
4495
  if (width !== void 0) baseStyle.width = width;
4495
4496
  if (height !== void 0) baseStyle.height = height;
4496
4497
  if (flexGrow !== void 0) baseStyle.flexGrow = flexGrow;
4497
4498
  if (flexShrink !== void 0) baseStyle.flexShrink = flexShrink;
4498
- if (padding !== void 0) baseStyle.padding = theme.space[padding];
4499
+ if (padding !== void 0) baseStyle.padding = padding;
4499
4500
  if (backgroundColor !== void 0) baseStyle.backgroundColor = backgroundColor;
4500
4501
  return baseStyle;
4501
4502
  }, [
@@ -4509,8 +4510,7 @@ const Stack = React.memo(({ children, direction = "vertical", gap, align, justif
4509
4510
  flexGrow,
4510
4511
  flexShrink,
4511
4512
  padding,
4512
- backgroundColor,
4513
- theme.space
4513
+ backgroundColor
4514
4514
  ]);
4515
4515
  return /* @__PURE__ */ jsx(asChild ? Slot : RnView, {
4516
4516
  style: [stackStyle, style],
@@ -5382,8 +5382,8 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
5382
5382
  const variantColors = getVariantColors(theme, activeColor, mode, variant || "outline", highContrast || false);
5383
5383
  const [isFocused, setIsFocused] = React.useState(false);
5384
5384
  const getSizeValues = () => {
5385
- switch (size) {
5386
- case "1": return {
5385
+ switch (Number(size)) {
5386
+ case 1: return {
5387
5387
  fontSize: theme.typography.fontSizes[4].fontSize,
5388
5388
  paddingVertical: theme.space[2],
5389
5389
  paddingHorizontal: theme.space[3],
@@ -5391,7 +5391,7 @@ const TextFieldRoot = React.forwardRef(({ children, ...props }, ref) => {
5391
5391
  height: multiline ? void 0 : 36,
5392
5392
  slotPadding: theme.space[1]
5393
5393
  };
5394
- case "3": return {
5394
+ case 3: return {
5395
5395
  fontSize: theme.typography.fontSizes[6].fontSize,
5396
5396
  paddingVertical: theme.space[4],
5397
5397
  paddingHorizontal: theme.space[4],
@@ -5654,13 +5654,13 @@ const TextAreaRoot = React.forwardRef(({ children, ...props }, ref) => {
5654
5654
  const variantColors = getVariantColors(theme, activeColor, mode, variant, highContrast);
5655
5655
  const accentColorScale = getColorScale(theme, activeColor, mode);
5656
5656
  const getSizeValues = () => {
5657
- switch (size) {
5658
- case "1": return {
5657
+ switch (Number(size)) {
5658
+ case 1: return {
5659
5659
  fontSize: theme.typography.fontSizes[4].fontSize,
5660
5660
  padding: theme.space[2],
5661
5661
  height: 100
5662
5662
  };
5663
- case "3": return {
5663
+ case 3: return {
5664
5664
  fontSize: theme.typography.fontSizes[6].fontSize,
5665
5665
  padding: theme.space[4],
5666
5666
  height: 140
@@ -5824,8 +5824,8 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
5824
5824
  getContrast(theme, activeColor, mode, highContrast);
5825
5825
  const variantColors = getVariantColors(theme, activeColor, mode, variant, highContrast);
5826
5826
  const getSizeValues = () => {
5827
- switch (size) {
5828
- case "1": return {
5827
+ switch (Number(size)) {
5828
+ case 1: return {
5829
5829
  boxSize: 20,
5830
5830
  iconSize: 11,
5831
5831
  fontSize: theme.typography.fontSizes[1].fontSize,
@@ -5833,7 +5833,7 @@ const Checkbox = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
5833
5833
  borderWidth: 1,
5834
5834
  height: 2.5
5835
5835
  };
5836
- case "3": return {
5836
+ case 3: return {
5837
5837
  boxSize: 28,
5838
5838
  iconSize: 16,
5839
5839
  fontSize: theme.typography.fontSizes[3].fontSize,
@@ -6050,15 +6050,15 @@ const CheckboxCardsItem = React.forwardRef(({ value, side: itemSide, disabled: i
6050
6050
  getAccentColor(theme, mode);
6051
6051
  const variantColors = getVariantColors(theme, color || theme.accentColor, mode, variant, highContrast);
6052
6052
  const getSizeValues = () => {
6053
- switch (size) {
6054
- case "1": return {
6053
+ switch (Number(size)) {
6054
+ case 1: return {
6055
6055
  padding: theme.space[3],
6056
6056
  indicatorSize: 18,
6057
6057
  innerIndicatorSize: 6,
6058
6058
  borderWidth: 1,
6059
6059
  checkHeight: 2.2
6060
6060
  };
6061
- case "3": return {
6061
+ case 3: return {
6062
6062
  padding: theme.space[5],
6063
6063
  indicatorSize: 26,
6064
6064
  innerIndicatorSize: 10,
@@ -6157,15 +6157,15 @@ const Radio = React.forwardRef(({ defaultChecked, value, selected, onSelect, dis
6157
6157
  const [isInternallySelected, setIsInternallySelected] = React.useState(defaultChecked ?? false);
6158
6158
  const isSelected = selected !== void 0 ? selected : isInternallySelected;
6159
6159
  const getSizeValues = () => {
6160
- switch (size) {
6161
- case "1": return {
6160
+ switch (Number(size)) {
6161
+ case 1: return {
6162
6162
  boxSize: 18,
6163
6163
  innerSize: 6,
6164
6164
  iconSize: 8,
6165
6165
  fontSize: theme.typography.fontSizes[1].fontSize,
6166
6166
  gap: theme.space[1]
6167
6167
  };
6168
- case "3": return {
6168
+ case 3: return {
6169
6169
  boxSize: 28,
6170
6170
  innerSize: 12,
6171
6171
  iconSize: 16,
@@ -6388,14 +6388,14 @@ const RadioCardsItem = React.forwardRef(({ value, side: itemSide, disabled: item
6388
6388
  getAccentColor(theme, mode);
6389
6389
  const variantColors = getVariantColors(theme, color || theme.accentColor, mode, variant, highContrast);
6390
6390
  const getSizeValues = () => {
6391
- switch (size) {
6392
- case "1": return {
6391
+ switch (Number(size)) {
6392
+ case 1: return {
6393
6393
  padding: theme.space[3],
6394
6394
  indicatorSize: 18,
6395
6395
  innerIndicatorSize: 8,
6396
6396
  borderWidth: 1
6397
6397
  };
6398
- case "3": return {
6398
+ case 3: return {
6399
6399
  padding: theme.space[5],
6400
6400
  indicatorSize: 26,
6401
6401
  innerIndicatorSize: 12,
@@ -6523,15 +6523,15 @@ const Switch = React.forwardRef(({ defaultChecked, checked, onCheckedChange, dis
6523
6523
  }).start();
6524
6524
  }, [isChecked]);
6525
6525
  const getSizeValues = () => {
6526
- switch (size) {
6527
- case "1": return {
6526
+ switch (Number(size)) {
6527
+ case 1: return {
6528
6528
  trackWidth: 32,
6529
6529
  trackHeight: 20,
6530
6530
  thumbSize: 14,
6531
6531
  gap: theme.space[1],
6532
6532
  fontSize: theme.typography.fontSizes[1].fontSize
6533
6533
  };
6534
- case "3": return {
6534
+ case 3: return {
6535
6535
  trackWidth: 58,
6536
6536
  trackHeight: 32,
6537
6537
  thumbSize: 26,
@@ -7574,18 +7574,18 @@ const Slider = React.forwardRef(({ value: controlledValue, defaultValue, onValue
7574
7574
  };
7575
7575
  const thumbAnimations = useRef(values.map((v) => new Animated.Value(getInitialPosition(v)))).current;
7576
7576
  const sizeValues = useMemo(() => {
7577
- switch (size) {
7578
- case "1": return {
7577
+ switch (Number(size)) {
7578
+ case 1: return {
7579
7579
  trackHeight: 4,
7580
7580
  thumbSize: 16,
7581
7581
  fontSize: theme.typography.fontSizes[1].fontSize
7582
7582
  };
7583
- case "3": return {
7583
+ case 3: return {
7584
7584
  trackHeight: 8,
7585
7585
  thumbSize: 28,
7586
7586
  fontSize: theme.typography.fontSizes[3].fontSize
7587
7587
  };
7588
- case "4": return {
7588
+ case 4: return {
7589
7589
  trackHeight: 10,
7590
7590
  thumbSize: 34,
7591
7591
  fontSize: theme.typography.fontSizes[4].fontSize
@@ -11917,7 +11917,7 @@ const FancyList = ({ data, renderItem, keyExtractor, style, showDividers = true,
11917
11917
  const backgroundColor = isDark ? grayAlpha["2"] : grayAlpha["1"];
11918
11918
  const defaultKeyExtractor = (item, index) => {
11919
11919
  if (keyExtractor) return keyExtractor(item, index);
11920
- if ("id" in item) return String(item.id);
11920
+ if (item && typeof item === "object" && "id" in item) return String(item.id);
11921
11921
  return String(index);
11922
11922
  };
11923
11923
  const renderListItem = (info) => {
@@ -12173,11 +12173,9 @@ const PULSE_ANIMATION = {
12173
12173
  duration: 1e3,
12174
12174
  useNativeDriver: true
12175
12175
  };
12176
- const SKELEON_COLORS = {
12177
- light: "#E5E7EB",
12178
- dark: "#D1D5DB"
12179
- };
12180
12176
  const Skeleton = React.forwardRef(({ children, loading = true, style, textStyle, width, height, accessibilityLabel = "Loading", testID }, ref) => {
12177
+ const theme = useTheme$1();
12178
+ const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
12181
12179
  const pulseAnim = useRef(new Animated.Value(0)).current;
12182
12180
  useEffect(() => {
12183
12181
  const animation = Animated.loop(Animated.sequence([Animated.timing(pulseAnim, {
@@ -12194,7 +12192,7 @@ const Skeleton = React.forwardRef(({ children, loading = true, style, textStyle,
12194
12192
  }, [pulseAnim]);
12195
12193
  const pulseStyle = { backgroundColor: pulseAnim.interpolate({
12196
12194
  inputRange: [0, 1],
12197
- outputRange: [SKELEON_COLORS.light, SKELEON_COLORS.dark]
12195
+ outputRange: [grayScale[3], grayScale[5]]
12198
12196
  }) };
12199
12197
  if (!loading) return /* @__PURE__ */ jsx(Fragment, { children });
12200
12198
  if (!React.isValidElement(children) && typeof children === "string") return /* @__PURE__ */ jsx(Animated.Text, {
@@ -12340,12 +12338,12 @@ const TableColumnHeaderCell = React.forwardRef(({ children, width, align = "left
12340
12338
  const theme = useTheme$1();
12341
12339
  const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
12342
12340
  const getSizePadding = () => {
12343
- switch (context.size) {
12344
- case "1": return {
12341
+ switch (Number(context.size)) {
12342
+ case 1: return {
12345
12343
  paddingVertical: theme.space[2],
12346
12344
  paddingHorizontal: theme.space[3]
12347
12345
  };
12348
- case "3": return {
12346
+ case 3: return {
12349
12347
  paddingVertical: theme.space[4],
12350
12348
  paddingHorizontal: theme.space[5]
12351
12349
  };
@@ -12356,9 +12354,9 @@ const TableColumnHeaderCell = React.forwardRef(({ children, width, align = "left
12356
12354
  }
12357
12355
  };
12358
12356
  const getSizeFont = () => {
12359
- switch (context.size) {
12360
- case "1": return { fontSize: theme.typography.fontSizes[1].fontSize };
12361
- case "3": return { fontSize: theme.typography.fontSizes[3].fontSize };
12357
+ switch (Number(context.size)) {
12358
+ case 1: return { fontSize: theme.typography.fontSizes[1].fontSize };
12359
+ case 3: return { fontSize: theme.typography.fontSizes[3].fontSize };
12362
12360
  default: return { fontSize: theme.typography.fontSizes[2].fontSize };
12363
12361
  }
12364
12362
  };
@@ -12395,12 +12393,12 @@ const TableCell = React.forwardRef(({ children, align = "left", style }, ref) =>
12395
12393
  const theme = useTheme$1();
12396
12394
  const grayScale = useThemeMode$1() === "dark" ? theme.colors.gray.dark : theme.colors.gray;
12397
12395
  const getSizePadding = () => {
12398
- switch (context.size) {
12399
- case "1": return {
12396
+ switch (Number(context.size)) {
12397
+ case 1: return {
12400
12398
  paddingVertical: theme.space[2],
12401
12399
  paddingHorizontal: theme.space[3]
12402
12400
  };
12403
- case "3": return {
12401
+ case 3: return {
12404
12402
  paddingVertical: theme.space[4],
12405
12403
  paddingHorizontal: theme.space[5]
12406
12404
  };
@@ -12411,9 +12409,9 @@ const TableCell = React.forwardRef(({ children, align = "left", style }, ref) =>
12411
12409
  }
12412
12410
  };
12413
12411
  const getSizeFont = () => {
12414
- switch (context.size) {
12415
- case "1": return { fontSize: theme.typography.fontSizes[1].fontSize };
12416
- case "3": return { fontSize: theme.typography.fontSizes[3].fontSize };
12412
+ switch (Number(context.size)) {
12413
+ case 1: return { fontSize: theme.typography.fontSizes[1].fontSize };
12414
+ case 3: return { fontSize: theme.typography.fontSizes[3].fontSize };
12417
12415
  default: return { fontSize: theme.typography.fontSizes[2].fontSize };
12418
12416
  }
12419
12417
  };
@@ -13081,15 +13079,15 @@ const AccordionTrigger = React.forwardRef(({ children, style, icon, hapticFeedba
13081
13079
  }).start();
13082
13080
  }, [open, rotationAnim]);
13083
13081
  const getSizeStyles = () => {
13084
- switch (size) {
13085
- case "1": return {
13082
+ switch (Number(size)) {
13083
+ case 1: return {
13086
13084
  paddingVertical: theme.space[2],
13087
13085
  paddingHorizontal: theme.space[3],
13088
13086
  fontSize: theme.typography.fontSizes[1].fontSize,
13089
13087
  lineHeight: theme.typography.fontSizes[1].lineHeight,
13090
13088
  iconSize: 14
13091
13089
  };
13092
- case "3": return {
13090
+ case 3: return {
13093
13091
  paddingVertical: theme.space[4],
13094
13092
  paddingHorizontal: theme.space[5],
13095
13093
  fontSize: theme.typography.fontSizes[4].fontSize,
@@ -13195,9 +13193,9 @@ const AccordionContent = React.forwardRef(({ children, style }, ref) => {
13195
13193
  const heightAnim = useRef(new Animated.Value(0)).current;
13196
13194
  const opacityAnim = useRef(new Animated.Value(0)).current;
13197
13195
  const getContentPadding = () => {
13198
- switch (size) {
13199
- case "1": return theme.space[2];
13200
- case "3": return theme.space[5];
13196
+ switch (Number(size)) {
13197
+ case 1: return theme.space[2];
13198
+ case 3: return theme.space[5];
13201
13199
  default: return theme.space[4];
13202
13200
  }
13203
13201
  };
@@ -13324,4 +13322,13 @@ const useResponsive = (breakpoints = defaultBreakpoints) => {
13324
13322
  };
13325
13323
 
13326
13324
  //#endregion
13327
- export { AbsoluteCenter, Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, RnActivityIndicator as ActivityIndicator, AlertDialogComponent as AlertDialog, AnimatedPressable, AspectRatio, Avatar, Badge, Blockquote, BottomSheet, Box, Button, ButtonIcon, ButtonLabel, Callout, CalloutIcon, CalloutRoot, CalloutText, Card, Center, Checkbox, CheckboxCards, CheckboxCardsItem, CheckboxCardsRoot, CheckboxGroup, Code, Container, ContextMenu, DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DropdownMenu, Em, FancyList, RnFlatList as FlatList, Flex, Grid, HCenter, HStack, Heading, IconButton, RnImage as Image, Inset, Kbd, Link, ManagedPortal, Popover, Portal, PortalProvider, RnPressable as Pressable, RnText as PrimitiveText, Progress, Radio, RadioCards, RadioCardsItem, RadioCardsRoot, RadioGroup, RadioGroupItem, RadioGroupRoot, ScrollArea, RnScrollView as ScrollView, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectOverlay, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, Skeleton, Slider, Slot, Spacer, Spinner, Stack, Strong, Switch, TabNav, Table, Tabs, TextComponent as Text, TextArea, TextField, RnTextInput as TextInput, ThemeProvider, Toast, TooltipExport as Tooltip, RnTouchableHighlight as TouchableHighlight, RnTouchableOpacity as TouchableOpacity, VCenter, VStack, RnView as View, VisuallyHidden, addColorSchemeListener, amber, amberAlpha, black, blackAlpha, blue, blueAlpha, bronze, bronzeAlpha, brown, brownAlpha, calculatePopoverPosition, createTheme, crimson, crimsonAlpha, cyan, cyanAlpha, defaultTheme, fontFamilies, getAccentAlpha, getAccentAlphaScale, getAccentColor, getAccentContrast, getAccentScale, getAccentTextColor, getActiveColors, getColorAlpha, getColorScale, getColorScheme, getContrast, getDisabledColors, getExtendedAccentScale, getFocusColor, getForegroundColor, getGrayAlpha, getGrayScale, getHighContrastBackground, getHighContrastTextColor, getHoverColors, getRadii, getSelectionColor, getShadow, getShadows, getSpace, getThemeColors, getThemeShadow, getTypography, getVariantColors, gold, goldAlpha, grass, grassAlpha, gray, grayAlpha, green, greenAlpha, indigo, indigoAlpha, iris, irisAlpha, jade, jadeAlpha, lime, limeAlpha, mauve, mauveAlpha, mint, mintAlpha, needsDarkText, olive, oliveAlpha, orange, orangeAlpha, pink, pinkAlpha, plum, plumAlpha, purple, purpleAlpha, radii, radiusFactors, red, redAlpha, ruby, rubyAlpha, sage, sageAlpha, sand, sandAlpha, scalingOptions, shadows, sky, skyAlpha, slate, slateAlpha, space, teal, tealAlpha, tomato, tomatoAlpha, typography, useAnchorPosition, useDeviceColorScheme, useHaptics, usePortal, useResponsive, useTheme, useThemeActions, useThemeColors, useThemeContext, useThemeMode, useToast, useToastContext, violet, violetAlpha, white, whiteAlpha, yellow, yellowAlpha };
13325
+ //#region src/utils/size.ts
13326
+ /**
13327
+ * Normalize a SizeInput to its canonical numeric form.
13328
+ * Returns the value unchanged when already numeric, the parsed number for
13329
+ * legacy string inputs, or `undefined` when absent.
13330
+ */
13331
+ const toNumericSize = (size) => size === void 0 ? void 0 : Number(size);
13332
+
13333
+ //#endregion
13334
+ export { AbsoluteCenter, Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, RnActivityIndicator as ActivityIndicator, AlertDialogComponent as AlertDialog, AnimatedPressable, AspectRatio, Avatar, Badge, Blockquote, BottomSheet, Box, Button, ButtonIcon, ButtonLabel, Callout, CalloutIcon, CalloutRoot, CalloutText, Card, Center, Checkbox, CheckboxCards, CheckboxCardsItem, CheckboxCardsRoot, CheckboxGroup, Code, Container, ContextMenu, DataList, DataListItem, DataListLabel, DataListRoot, DataListValue, Dialog, DropdownMenu, Em, FancyList, RnFlatList as FlatList, Flex, Grid, HCenter, HStack, Heading, IconButton, RnImage as Image, Inset, Kbd, Link, ManagedPortal, Popover, Portal, PortalProvider, RnPressable as Pressable, RnText as PrimitiveText, Progress, Radio, RadioCards, RadioCardsItem, RadioCardsRoot, RadioGroup, RadioGroupItem, RadioGroupRoot, ScrollArea, RnScrollView as ScrollView, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectOverlay, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, Skeleton, Slider, Slot, Spacer, Spinner, Stack, Strong, Switch, TabNav, Table, Tabs, TextComponent as Text, TextArea, TextField, RnTextInput as TextInput, ThemeProvider, Toast, TooltipExport as Tooltip, RnTouchableHighlight as TouchableHighlight, RnTouchableOpacity as TouchableOpacity, VCenter, VStack, RnView as View, VisuallyHidden, addColorSchemeListener, amber, amberAlpha, black, blackAlpha, blue, blueAlpha, bronze, bronzeAlpha, brown, brownAlpha, calculatePopoverPosition, createTheme, crimson, crimsonAlpha, cyan, cyanAlpha, defaultTheme, fontFamilies, getAccentAlpha, getAccentAlphaScale, getAccentColor, getAccentContrast, getAccentScale, getAccentTextColor, getActiveColors, getColorAlpha, getColorScale, getColorScheme, getContrast, getDisabledColors, getExtendedAccentScale, getFocusColor, getForegroundColor, getGrayAlpha, getGrayScale, getHighContrastBackground, getHighContrastTextColor, getHoverColors, getRadii, getSelectionColor, getShadow, getShadows, getSpace, getThemeColors, getThemeShadow, getTypography, getVariantColors, gold, goldAlpha, grass, grassAlpha, gray, grayAlpha, green, greenAlpha, indigo, indigoAlpha, iris, irisAlpha, jade, jadeAlpha, lime, limeAlpha, mauve, mauveAlpha, mint, mintAlpha, needsDarkText, olive, oliveAlpha, orange, orangeAlpha, pink, pinkAlpha, plum, plumAlpha, purple, purpleAlpha, radii, radiusFactors, red, redAlpha, ruby, rubyAlpha, sage, sageAlpha, sand, sandAlpha, scalingOptions, shadows, sky, skyAlpha, slate, slateAlpha, space, teal, tealAlpha, toNumericSize, tomato, tomatoAlpha, typography, useAnchorPosition, useDeviceColorScheme, useHaptics, usePortal, useResponsive, useTheme, useThemeActions, useThemeColors, useThemeContext, useThemeMode, useToast, useToastContext, violet, violetAlpha, white, whiteAlpha, yellow, yellowAlpha };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "radix-native-ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "A React Native component library inspired by the Radix Themes design system",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
@@ -8,14 +8,31 @@
8
8
  "type": "module",
9
9
  "exports": {
10
10
  ".": {
11
- "types": "./dist/index.d.ts",
12
- "import": "./dist/index.mjs",
13
- "require": "./dist/index.cjs"
11
+ "import": {
12
+ "types": "./dist/index.d.mts",
13
+ "default": "./dist/index.mjs"
14
+ },
15
+ "require": {
16
+ "types": "./dist/index.d.cts",
17
+ "default": "./dist/index.cjs"
18
+ }
14
19
  }
15
20
  },
16
21
  "files": [
17
22
  "dist"
18
23
  ],
24
+ "scripts": {
25
+ "build": "tsdown",
26
+ "dev": "tsdown --watch",
27
+ "build:tsdown": "tsdown",
28
+ "dev:tsdown": "tsdown --watch",
29
+ "test": "jest",
30
+ "clean": "rm -rf dist .turbo coverage",
31
+ "yalc:publish": "yalc publish",
32
+ "yalc:push": "yalc push",
33
+ "yalc:watch": "yalc publish --watch",
34
+ "dev:for-demo-app": "pnpm dev:tsdown && pnpm yalc:watch"
35
+ },
19
36
  "peerDependencies": {
20
37
  "expo": ">=48",
21
38
  "expo-haptics": "^55.0.8",
@@ -23,14 +40,13 @@
23
40
  "react-native": ">=0.70"
24
41
  },
25
42
  "devDependencies": {
26
- "@react-native/babel-preset": "^0.73.11",
27
- "@testing-library/jest-native": "^5.4.3",
28
- "@testing-library/react-native": "^12.4.0",
29
- "@types/react": "^19.0.2",
43
+ "@react-native/babel-preset": "^0.81.5",
44
+ "@testing-library/react-native": "^13.3.3",
45
+ "@types/react": "19.1.17",
30
46
  "jest": "^29.6.0",
31
- "react": "^18.2.0",
32
- "react-native": "^0.73.0",
33
- "react-test-renderer": "^18.2.0",
47
+ "react": "^19.1.0",
48
+ "react-native": "^0.81.5",
49
+ "react-test-renderer": "^19.1.0",
34
50
  "tsdown": "^0.20.1",
35
51
  "typescript": "^5.1.0"
36
52
  },
@@ -50,17 +66,5 @@
50
66
  "bugs": {
51
67
  "url": "https://github.com/Copy-Labs/radix-native-ui/issues"
52
68
  },
53
- "homepage": "https://github.com/Copy-Labs/radix-native-ui#readme",
54
- "scripts": {
55
- "build": "tsdown",
56
- "dev": "tsdown --watch",
57
- "build:tsdown": "tsdown",
58
- "dev:tsdown": "tsdown --watch",
59
- "test": "jest",
60
- "clean": "rm -rf dist .turbo coverage",
61
- "yalc:publish": "yalc publish",
62
- "yalc:push": "yalc push",
63
- "yalc:watch": "yalc publish --watch",
64
- "dev:for-demo-app": "pnpm dev:tsdown && pnpm yalc:watch"
65
- }
66
- }
69
+ "homepage": "https://github.com/Copy-Labs/radix-native-ui#readme"
70
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2023 WorkOS
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.