@onlynative/components 0.0.0-alpha.1 → 0.0.0-alpha.2

package/dist/list/index.js

@@ -27,17 +27,11 @@ __export(list_exports, {
 module.exports = __toCommonJS(list_exports);
 
 // src/list/List.tsx
-var import_react = require("react");
-var import_react_native5 = require("react-native");
 var import_core = require("@onlynative/core");
-
-// src/list/styles.ts
-var import_react_native4 = require("react-native");
-
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
+var import_react = require("react");
 var import_react_native3 = require("react-native");
+
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -80,6 +74,9 @@ function blendColor(base, overlay, overlayAlpha) {
   );
   return `rgb(${r}, ${g}, ${b})`;
 }
+
+// ../utils/src/pressable.ts
+var import_react_native = require("react-native");
 function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
   if (typeof style === "function") {
     return (state) => [
@@ -100,6 +97,7 @@ function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, sty
 }
 
 // src/list/styles.ts
+var import_react_native2 = require("react-native");
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -108,7 +106,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native4.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -145,7 +143,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native4.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -200,7 +198,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native4.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -214,13 +212,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function List({ children, style, ...props }) {
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createListStyles(theme), [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.View, { ...props, style: [styles.container, style], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { ...props, style: [styles.container, style], children });
 }
 
 // src/list/ListItem.tsx
-var import_react2 = require("react");
-var import_react_native6 = require("react-native");
 var import_core2 = require("@onlynative/core");
+var import_react2 = require("react");
+var import_react_native4 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
   if (supportingText && overlineText || supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1) {
@@ -256,12 +254,12 @@ function ListItem({
     [theme, lines, containerColor]
   );
   const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { style: styles.leadingContent, children: leadingContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native6.View, { style: styles.textBlock, children: [
-      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.Text, { style: styles.overlineText, numberOfLines: 1, children: overlineText }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.Text, { style: styles.headlineText, numberOfLines: 1, children: headlineText }),
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { style: styles.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: styles.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.Text, { style: styles.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.Text, { style: styles.headlineText, numberOfLines: 1, children: headlineText }),
       supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native6.Text,
+        import_react_native4.Text,
         {
           style: styles.supportingText,
           numberOfLines: supportingTextNumberOfLines,
@@ -269,21 +267,21 @@ function ListItem({
         }
       )
     ] }),
-    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native6.View, { style: styles.trailingBlock, children: [
-      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.Text, { style: styles.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: styles.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.Text, { style: styles.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
       trailingContent
     ] })
   ] });
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { ...props, style: [styles.container, style], children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { ...props, style: [styles.container, style], children: content });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native6.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native6.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvePressableStyle(
@@ -294,15 +292,15 @@ function ListItem({
         isDisabled,
         style
       ),
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native6.View, { style: styles.disabledContentWrapper, children: content }) : content
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { style: styles.disabledContentWrapper, children: content }) : content
     }
   );
 }
 
 // src/list/ListDivider.tsx
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
 var import_core3 = require("@onlynative/core");
+var import_react3 = require("react");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ListDivider({
   inset = false,
@@ -314,7 +312,7 @@ function ListDivider({
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { ...props, style: [styles.divider, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { ...props, style: [styles.divider, style] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/radio/index.js

@@ -25,14 +25,9 @@ __export(radio_exports, {
 module.exports = __toCommonJS(radio_exports);
 
 // src/radio/Radio.tsx
-var import_react = require("react");
-var import_react_native5 = require("react-native");
 var import_core = require("@onlynative/core");
 
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
-var import_react_native3 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -57,6 +52,9 @@ function alphaColor(color, alpha) {
   }
   return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
 }
+
+// ../utils/src/pressable.ts
+var import_react_native = require("react-native");
 function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
   if (typeof style === "function") {
     return (state) => [
@@ -76,8 +74,12 @@ function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, sty
   ];
 }
 
+// src/radio/Radio.tsx
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+
 // src/radio/styles.ts
-var import_react_native4 = require("react-native");
+var import_react_native2 = require("react-native");
 function getColors(theme, selected) {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
@@ -141,7 +143,7 @@ function createStyles(theme, selected, containerColor, contentColor) {
   const outerSize = 20;
   const innerSize = 10;
   const touchTarget = 48;
-  return import_react_native4.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -208,7 +210,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native5.Pressable,
+    import_react_native3.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -216,7 +218,7 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native5.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolvePressableStyle(
@@ -228,11 +230,11 @@ function Radio({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native5.View,
+        import_react_native3.View,
         {
           style: [styles.outer, isDisabled ? styles.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native5.View,
+            import_react_native3.View,
             {
               style: [
                 styles.inner,

package/dist/switch/index.js

@@ -25,22 +25,9 @@ __export(switch_exports, {
 module.exports = __toCommonJS(switch_exports);
 
 // src/switch/Switch.tsx
-var import_react = require("react");
-var import_react_native5 = require("react-native");
 var import_core = require("@onlynative/core");
 
-// ../utils/dist/chunk-OQRDRRQA.mjs
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
-var import_react_native3 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -83,13 +70,15 @@ function blendColor(base, overlay, overlayAlpha) {
   );
   return `rgb(${r}, ${g}, ${b})`;
 }
+
+// ../utils/src/icon.ts
 var _MCIcons = null;
 var _resolved = false;
 function getMaterialCommunityIcons() {
   if (!_resolved) {
     _resolved = true;
     try {
-      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
       _MCIcons = mod.default || mod;
     } catch {
       _MCIcons = null;
@@ -102,6 +91,9 @@ function getMaterialCommunityIcons() {
   }
   return _MCIcons;
 }
+
+// ../utils/src/pressable.ts
+var import_react_native = require("react-native");
 function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
   if (typeof style === "function") {
     return (state) => [
@@ -121,12 +113,16 @@ function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, sty
   ];
 }
 function resolveColorFromStyle(...styles) {
-  const flattened = import_react_native2.StyleSheet.flatten(styles);
+  const flattened = import_react_native.StyleSheet.flatten(styles);
   return typeof (flattened == null ? void 0 : flattened.color) === "string" ? flattened.color : void 0;
 }
 
+// src/switch/Switch.tsx
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+
 // src/switch/styles.ts
-var import_react_native4 = require("react-native");
+var import_react_native2 = require("react-native");
 function getColors(theme, selected) {
   const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
@@ -214,7 +210,7 @@ function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
   const trackHeight = 32;
   const trackPadding = 4;
   const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
-  return import_react_native4.StyleSheet.create({
+  return import_react_native2.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -295,7 +291,7 @@ function Switch({
   const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native5.Pressable,
+    import_react_native3.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -303,7 +299,7 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native5.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolvePressableStyle(
@@ -315,7 +311,7 @@ function Switch({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native5.View,
+        import_react_native3.View,
         {
           style: [styles.thumb, isDisabled ? styles.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/text-field/index.js

@@ -25,22 +25,9 @@ __export(text_field_exports, {
 module.exports = __toCommonJS(text_field_exports);
 
 // src/text-field/TextField.tsx
-var import_react = require("react");
-var import_react_native5 = require("react-native");
 var import_core = require("@onlynative/core");
 
-// ../utils/dist/chunk-OQRDRRQA.mjs
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../utils/dist/index.mjs
-var import_react_native = require("react-native");
-var import_react_native2 = require("react-native");
-var import_react_native3 = require("react-native");
+// ../utils/src/color.ts
 function parseHexColor(color) {
   const normalized = color.replace("#", "");
   if (normalized.length !== 6 && normalized.length !== 8) {
@@ -65,13 +52,15 @@ function alphaColor(color, alpha) {
   }
   return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
 }
+
+// ../utils/src/icon.ts
 var _MCIcons = null;
 var _resolved = false;
 function getMaterialCommunityIcons() {
   if (!_resolved) {
     _resolved = true;
     try {
-      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
       _MCIcons = mod.default || mod;
     } catch {
       _MCIcons = null;
@@ -84,12 +73,19 @@ function getMaterialCommunityIcons() {
   }
   return _MCIcons;
 }
+
+// ../utils/src/rtl.ts
+var import_react_native = require("react-native");
 function transformOrigin(vertical = "top") {
-  return import_react_native3.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+  return import_react_native.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
 }
 
+// src/text-field/TextField.tsx
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+
 // src/text-field/styles.ts
-var import_react_native4 = require("react-native");
+var import_react_native2 = require("react-native");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -148,7 +144,7 @@ function createStyles(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native4.StyleSheet.create({
+    styles: import_react_native2.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -325,13 +321,13 @@ function TextField({
   const isControlled = value !== void 0;
   const hasValue = isControlled ? value !== "" : internalHasText;
   const isLabelFloated = isFocused || hasValue;
-  const labelAnimRef = (0, import_react.useRef)(new import_react_native5.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react.useRef)(new import_react_native3.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react.useEffect)(() => {
-    import_react_native5.Animated.timing(labelAnim, {
+    import_react_native3.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native5.Platform.OS !== "web"
+      useNativeDriver: import_react_native3.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react.useMemo)(() => {
@@ -409,9 +405,9 @@ function TextField({
     [styles, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native5.View, { style: [styles.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native5.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native3.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MaterialCommunityIcons,
         {
           name: leadingIcon,
@@ -420,14 +416,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native5.View,
+        import_react_native3.View,
         {
           style: [
             styles.inputWrapper,
             label ? styles.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native5.TextInput,
+            import_react_native3.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -453,14 +449,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native5.Pressable,
+        import_react_native3.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
           style: styles.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             MaterialCommunityIcons,
             {
               name: trailingIcon,
@@ -471,7 +467,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native5.Animated.Text,
+        import_react_native3.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -491,10 +487,10 @@ function TextField({
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.View, { style: indicatorStyle }) : null
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native5.Text,
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native3.Text,
       {
         style: [
           styles.supportingText,

package/dist/typography/index.js

@@ -25,9 +25,9 @@ __export(typography_exports, {
 module.exports = __toCommonJS(typography_exports);
 
 // src/typography/Typography.tsx
+var import_core = require("@onlynative/core");
 var import_react = require("react");
 var import_react_native = require("react-native");
-var import_core = require("@onlynative/core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var HEADING_VARIANTS = /* @__PURE__ */ new Set([
   "displayLarge",

package/llms.txt

@@ -1,7 +1,7 @@
 # @onlynative/components — MD3 UI Components for React Native
 
-> Version: 0.0.0-alpha.1
-> Peer deps: @onlynative/core >=0.0.0-alpha.1, react >=18, react-native >=0.72, react-native-safe-area-context >=4
+> Version: 0.0.0-alpha.2
+> Peer deps: @onlynative/core >=0.0.0-alpha.2, react >=18, react-native >=0.72, react-native-safe-area-context >=4
 > Optional: @expo/vector-icons >=14 (only needed for icon props)
 
 ## Usage

package/package.json

@@ -1,88 +1,88 @@
 {
   "name": "@onlynative/components",
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.0-alpha.2",
   "description": "Material Design 3 UI components for React Native, part of OnlyNative UI.",
   "private": false,
   "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "react-native": "src/index.ts",
+  "react-native": "dist/index.js",
   "source": "src/index.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "react-native": "./src/index.ts",
+      "react-native": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./typography": {
       "types": "./dist/typography/index.d.ts",
-      "react-native": "./src/typography/index.ts",
+      "react-native": "./dist/typography/index.js",
       "default": "./dist/typography/index.js"
     },
     "./layout": {
       "types": "./dist/layout/index.d.ts",
-      "react-native": "./src/layout/index.ts",
+      "react-native": "./dist/layout/index.js",
       "default": "./dist/layout/index.js"
     },
     "./button": {
       "types": "./dist/button/index.d.ts",
-      "react-native": "./src/button/index.ts",
+      "react-native": "./dist/button/index.js",
       "default": "./dist/button/index.js"
     },
     "./icon-button": {
       "types": "./dist/icon-button/index.d.ts",
-      "react-native": "./src/icon-button/index.ts",
+      "react-native": "./dist/icon-button/index.js",
       "default": "./dist/icon-button/index.js"
     },
     "./appbar": {
       "types": "./dist/appbar/index.d.ts",
-      "react-native": "./src/appbar/index.ts",
+      "react-native": "./dist/appbar/index.js",
       "default": "./dist/appbar/index.js"
     },
     "./card": {
       "types": "./dist/card/index.d.ts",
-      "react-native": "./src/card/index.ts",
+      "react-native": "./dist/card/index.js",
       "default": "./dist/card/index.js"
     },
     "./chip": {
       "types": "./dist/chip/index.d.ts",
-      "react-native": "./src/chip/index.ts",
+      "react-native": "./dist/chip/index.js",
       "default": "./dist/chip/index.js"
     },
     "./checkbox": {
       "types": "./dist/checkbox/index.d.ts",
-      "react-native": "./src/checkbox/index.ts",
+      "react-native": "./dist/checkbox/index.js",
       "default": "./dist/checkbox/index.js"
     },
     "./radio": {
       "types": "./dist/radio/index.d.ts",
-      "react-native": "./src/radio/index.ts",
+      "react-native": "./dist/radio/index.js",
       "default": "./dist/radio/index.js"
     },
     "./switch": {
       "types": "./dist/switch/index.d.ts",
-      "react-native": "./src/switch/index.ts",
+      "react-native": "./dist/switch/index.js",
       "default": "./dist/switch/index.js"
     },
     "./text-field": {
       "types": "./dist/text-field/index.d.ts",
-      "react-native": "./src/text-field/index.ts",
+      "react-native": "./dist/text-field/index.js",
       "default": "./dist/text-field/index.js"
     },
     "./list": {
       "types": "./dist/list/index.d.ts",
-      "react-native": "./src/list/index.ts",
+      "react-native": "./dist/list/index.js",
       "default": "./dist/list/index.js"
     },
     "./keyboard-avoiding-wrapper": {
       "types": "./dist/keyboard-avoiding-wrapper/index.d.ts",
-      "react-native": "./src/keyboard-avoiding-wrapper/index.ts",
+      "react-native": "./dist/keyboard-avoiding-wrapper/index.js",
       "default": "./dist/keyboard-avoiding-wrapper/index.js"
     },
     "./avatar": {
       "types": "./dist/avatar/index.d.ts",
-      "react-native": "./src/avatar/index.ts",
+      "react-native": "./dist/avatar/index.js",
       "default": "./dist/avatar/index.js"
     }
   },
@@ -153,14 +153,9 @@
     "md3",
     "material-you"
   ],
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "jest --passWithNoTests"
-  },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.0.0-alpha.1",
+    "@onlynative/core": ">=0.0.0-alpha.2",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -172,8 +167,6 @@
   },
   "devDependencies": {
     "@react-native/babel-preset": "^0.81.5",
-    "@onlynative/core": "workspace:*",
-    "@onlynative/utils": "workspace:*",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.0.0",
@@ -182,6 +175,13 @@
     "react-native": "0.81.5",
     "react-test-renderer": "19.1.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "@onlynative/core": "0.0.0-alpha.2",
+    "@onlynative/utils": "0.1.0-alpha.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "jest --passWithNoTests"
   }
-}
+}