@onlynative/components 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/switch/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/switch/index.ts
@@ -35,11 +25,31 @@ __export(switch_exports, {
 module.exports = __toCommonJS(switch_exports);
 
 // src/switch/Switch.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native2 = require("react-native");
 var import_core = require("@onlynative/core");
 
+// src/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/switch/styles.ts
 var import_react_native = require("react-native");
 
@@ -271,6 +281,7 @@ function Switch({
     }
   };
   const iconName = isSelected ? selectedIcon : unselectedIcon;
+  const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native2.Pressable,
@@ -297,7 +308,7 @@ function Switch({
         {
           style: [styles.thumb, isDisabled ? styles.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_MaterialCommunityIcons.default,
+            MaterialCommunityIcons,
             {
               name: iconName,
               size: iconSize,

package/dist/text-field/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/text-field/index.ts
@@ -35,11 +25,31 @@ __export(text_field_exports, {
 module.exports = __toCommonJS(text_field_exports);
 
 // src/text-field/TextField.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native3 = require("react-native");
 var import_core = require("@onlynative/core");
 
+// src/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/text-field/styles.ts
 var import_react_native2 = require("react-native");
 
@@ -298,6 +308,7 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const { colors, styles } = (0, import_react.useMemo)(
     () => createStyles(theme, variant),
     [theme, variant]
@@ -397,7 +408,7 @@ function TextField({
   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)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: leadingIcon,
           size: ICON_SIZE2,
@@ -446,7 +457,7 @@ function TextField({
           hitSlop: 12,
           style: styles.trailingIconPressable,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_MaterialCommunityIcons.default,
+            MaterialCommunityIcons,
             {
               name: trailingIcon,
               size: ICON_SIZE2,

package/dist/typography/index.js

@@ -25,6 +25,7 @@ __export(typography_exports, {
 module.exports = __toCommonJS(typography_exports);
 
 // src/typography/Typography.tsx
+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");
@@ -48,6 +49,13 @@ function Typography({
   const theme = (0, import_core.useTheme)();
   const typographyStyle = theme.typography[variant];
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  const lineHeightFix = (0, import_react.useMemo)(() => {
+    if (!style) return void 0;
+    const flat = import_react_native.StyleSheet.flatten(style);
+    if (!(flat == null ? void 0 : flat.fontSize) || flat.lineHeight) return void 0;
+    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize;
+    return { lineHeight: Math.ceil(flat.fontSize * ratio) };
+  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component,
     {
@@ -57,6 +65,7 @@ function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : void 0
       ],
       children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlynative/components",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "Material Design 3 UI components for React Native — Button, Card, Chip, TextField, and more.",
   "private": false,
   "sideEffects": false,
@@ -146,7 +146,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.1.0-alpha.2",
+    "@onlynative/core": ">=0.1.0-alpha.3",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"

package/src/button/Button.tsx

@@ -1,4 +1,3 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable } from 'react-native'
 import { StyleSheet } from 'react-native'
@@ -6,6 +5,7 @@ import { Text } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles } from './styles'
 import type { ButtonProps } from './types'
 
@@ -75,6 +75,9 @@ export function Button({
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor],
   )
 
+  const MaterialCommunityIcons =
+    leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null
+
   const resolvedIconColor = useMemo(() => {
     const base = StyleSheet.flatten([
       styles.label,

package/src/checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable, StyleSheet, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles } from './styles'
 import type { CheckboxProps } from './types'
 
@@ -55,6 +55,10 @@ export function Checkbox({
   const isDisabled = Boolean(disabled)
   const isChecked = Boolean(value)
 
+  const MaterialCommunityIcons = isChecked
+    ? getMaterialCommunityIcons()
+    : null
+
   const theme = useTheme()
   const styles = useMemo(
     () => createStyles(theme, isChecked, containerColor, contentColor),

package/src/chip/Chip.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles } from './styles'
 import type { ChipProps } from './types'
 
@@ -72,6 +72,12 @@ export function Chip({
       (variant === 'filter' && isSelected),
   )
 
+  const needsIcons =
+    Boolean(leadingIcon) || (variant === 'filter' && isSelected) || showCloseIcon
+  const MaterialCommunityIcons = needsIcons
+    ? getMaterialCommunityIcons()
+    : null
+
   const theme = useTheme()
   const styles = useMemo(
     () =>

package/src/icon-button/IconButton.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Pressable } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles } from './styles'
 import type {
   IconButtonProps,
@@ -263,6 +263,7 @@ export function IconButton({
   accessibilityLabel,
   ...props
 }: IconButtonProps) {
+  const MaterialCommunityIcons = getMaterialCommunityIcons()
   const theme = useTheme()
   const styles = useMemo(() => createStyles(theme), [theme])
   const isDisabled = Boolean(disabled)

package/src/switch/Switch.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable, StyleSheet, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles } from './styles'
 import type { SwitchProps } from './types'
 
@@ -80,6 +80,9 @@ export function Switch({
   }
 
   const iconName = isSelected ? selectedIcon : unselectedIcon
+  const MaterialCommunityIcons = iconName
+    ? getMaterialCommunityIcons()
+    : null
   const iconSize = 16
 
   return (

package/src/text-field/TextField.tsx

@@ -1,4 +1,3 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Animated,
@@ -11,6 +10,7 @@ import {
 import type { NativeSyntheticEvent, TargetedEvent } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles, labelPositions } from './styles'
 import type { TextFieldProps } from './types'
 
@@ -46,6 +46,9 @@ export function TextField({
   const isFilled = variant === 'filled'
   const hasLeadingIcon = Boolean(leadingIcon)
 
+  const MaterialCommunityIcons =
+    leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null
+
   const { colors, styles } = useMemo(
     () => createStyles(theme, variant),
     [theme, variant],

package/src/typography/Typography.tsx

@@ -1,6 +1,7 @@
+import { useMemo } from 'react'
 import type { ComponentType, ReactNode } from 'react'
 import type { StyleProp, TextProps, TextStyle } from 'react-native'
-import { Text } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 import { useTheme } from '@onlynative/core'
 import type { MaterialTheme } from '@onlynative/core'
 
@@ -48,6 +49,16 @@ export function Typography({
   const resolvedRole =
     accessibilityRole ?? (HEADING_VARIANTS.has(variant) ? 'header' : undefined)
 
+  // When the consumer overrides fontSize via style, auto-adjust lineHeight
+  // proportionally so text isn't clipped inside overflow:hidden containers.
+  const lineHeightFix = useMemo(() => {
+    if (!style) return undefined
+    const flat = StyleSheet.flatten(style)
+    if (!flat?.fontSize || flat.lineHeight) return undefined
+    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize
+    return { lineHeight: Math.ceil(flat.fontSize * ratio) }
+  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight])
+
   return (
     <Component
       {...textProps}
@@ -56,6 +67,7 @@ export function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : undefined,
       ]}
     >

package/src/utils/icon.ts

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let _MCIcons: any = null
+let _resolved = false
+
+/**
+ * Lazily resolves MaterialCommunityIcons from `@expo/vector-icons`.
+ *
+ * Called at render time (not module load) so that components can be
+ * imported without `@expo/vector-icons` installed — the error only
+ * fires when an icon is actually rendered.
+ */
+export function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const mod = require('@expo/vector-icons/MaterialCommunityIcons')
+      _MCIcons = mod.default || mod
+    } catch {
+      _MCIcons = null
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      '@expo/vector-icons is required for icon support. ' +
+        'Install it with: npx expo install @expo/vector-icons',
+    )
+  }
+  return _MCIcons
+}