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

package/dist/layout/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { StyleProp, ViewStyle, ViewProps, FlexAlignType } from 'react-native';
 import { Edge } from 'react-native-safe-area-context';
-import { Theme } from '@onlynative/core';
+import { MaterialTheme } from '@onlynative/core';
 
 interface LayoutProps extends PropsWithChildren {
     /**
@@ -18,7 +18,7 @@ interface LayoutProps extends PropsWithChildren {
 declare function Layout({ immersive, edges, children, style }: LayoutProps): react_jsx_runtime.JSX.Element;
 
 /** A theme spacing token name or a raw numeric value in dp. */
-type SpacingValue = keyof Theme['spacing'] | number;
+type SpacingValue = keyof MaterialTheme['spacing'] | number;
 interface BoxProps extends ViewProps {
     /** Padding on all sides */
     p?: SpacingValue;

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.d.ts

@@ -13,9 +13,9 @@ interface TypographyProps extends Omit<TextProps, 'children' | 'style'> {
      * @default 'bodyMedium'
      */
     variant?: TypographyVariant;
-    /** Override the text color. Defaults to the theme's `onSurface` color. */
+    /** Override the text color. Takes priority over `style.color`. Defaults to the theme's `onSurface` color. */
     color?: string;
-    /** Additional text styles merged after the theme typography styles. */
+    /** Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set. */
     style?: StyleProp<TextStyle>;
     /**
      * Override the underlying text component (e.g. Animated.Text).

package/dist/typography/index.js

@@ -48,17 +48,26 @@ function Typography({
 }) {
   const theme = (0, import_core.useTheme)();
   const typographyStyle = theme.typography[variant];
-  const colorStyle = (0, import_react.useMemo)(
-    () => ({ color: color != null ? color : theme.colors.onSurface }),
-    [color, theme.colors.onSurface]
-  );
   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,
     {
       ...textProps,
       accessibilityRole: resolvedRole,
-      style: [typographyStyle, colorStyle, style],
+      style: [
+        { 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.0",
+  "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,
@@ -117,7 +117,8 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "files": [
     "dist",
@@ -145,11 +146,16 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.1.0-alpha.0",
+    "@onlynative/core": ">=0.1.0-alpha.3",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"
   },
+  "peerDependenciesMeta": {
+    "@expo/vector-icons": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@react-native/babel-preset": "^0.81.5",
     "@onlynative/core": "workspace:*",

package/src/appbar/styles.ts

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native'
 import { defaultTopAppBarTokens } from '@onlynative/core'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
-export function createStyles(theme: Theme) {
+export function createStyles(theme: MaterialTheme) {
   const topAppBar = theme.topAppBar ?? defaultTopAppBarTokens
 
   return StyleSheet.create({

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/button/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { ButtonVariant } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -17,7 +17,7 @@ interface VariantColors {
   disabledBorderColor: string
 }
 
-function getVariantColors(theme: Theme, variant: ButtonVariant): VariantColors {
+function getVariantColors(theme: MaterialTheme, variant: ButtonVariant): VariantColors {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
   const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38)
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
@@ -129,7 +129,7 @@ function getVariantColors(theme: Theme, variant: ButtonVariant): VariantColors {
 }
 
 function getHorizontalPadding(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ButtonVariant,
   hasLeadingIcon: boolean,
   hasTrailingIcon: boolean,
@@ -154,7 +154,7 @@ function getHorizontalPadding(
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: VariantColors,
   containerColor?: string,
   contentColor?: string,
@@ -209,7 +209,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ButtonVariant,
   hasLeadingIcon: boolean,
   hasTrailingIcon: boolean,

package/src/card/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { CardVariant } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -15,7 +15,7 @@ interface VariantColors {
   disabledBorderColor: string
 }
 
-function getVariantColors(theme: Theme, variant: CardVariant): VariantColors {
+function getVariantColors(theme: MaterialTheme, variant: CardVariant): VariantColors {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
 
@@ -78,7 +78,7 @@ function getVariantColors(theme: Theme, variant: CardVariant): VariantColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: VariantColors,
   containerColor?: string,
 ): VariantColors {
@@ -103,7 +103,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: CardVariant,
   containerColor?: string,
 ) {

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/checkbox/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import { alphaColor, blendColor } from '../utils/color'
 
@@ -16,7 +16,7 @@ interface BoxColors {
   disabledIconColor: string
 }
 
-function getColors(theme: Theme, checked: boolean): BoxColors {
+function getColors(theme: MaterialTheme, checked: boolean): BoxColors {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
 
   if (checked) {
@@ -63,7 +63,7 @@ function getColors(theme: Theme, checked: boolean): BoxColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: BoxColors,
   containerColor?: string,
   contentColor?: string,
@@ -96,7 +96,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   checked: boolean,
   containerColor?: string,
   contentColor?: string,

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/chip/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { ChipVariant } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -18,7 +18,7 @@ interface VariantColors {
 }
 
 function getVariantColors(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ChipVariant,
   elevated: boolean,
   selected: boolean,
@@ -106,7 +106,7 @@ function getVariantColors(
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: VariantColors,
   containerColor?: string,
   contentColor?: string,
@@ -161,7 +161,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ChipVariant,
   elevated: boolean,
   selected: boolean,

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/icon-button/styles.ts

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 import { alphaColor, blendColor } from '../utils/color'
 
-export function createStyles(theme: Theme) {
+export function createStyles(theme: MaterialTheme) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest

package/src/layout/resolveSpacing.ts

@@ -1,8 +1,8 @@
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 import type { SpacingValue } from './types'
 
 export function resolveSpacing(
-  spacing: Theme['spacing'],
+  spacing: MaterialTheme['spacing'],
   value: SpacingValue | undefined,
 ): number | undefined {
   if (value === undefined) return undefined

package/src/layout/types.ts

@@ -1,8 +1,8 @@
 import type { FlexAlignType, ViewProps } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 /** A theme spacing token name or a raw numeric value in dp. */
-export type SpacingValue = keyof Theme['spacing'] | number
+export type SpacingValue = keyof MaterialTheme['spacing'] | number
 
 export interface BoxProps extends ViewProps {
   /** Padding on all sides */

package/src/list/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { ListItemLines } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -13,7 +13,7 @@ const MIN_HEIGHT: Record<ListItemLines, number> = {
   3: 88,
 }
 
-export function createListStyles(theme: Theme) {
+export function createListStyles(theme: MaterialTheme) {
   return StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm,
@@ -27,7 +27,7 @@ interface ItemColors {
   pressedBackgroundColor: string
 }
 
-function getItemColors(theme: Theme, containerColor?: string): ItemColors {
+function getItemColors(theme: MaterialTheme, containerColor?: string): ItemColors {
   const base = containerColor ?? 'transparent'
 
   if (containerColor) {
@@ -60,7 +60,7 @@ function getItemColors(theme: Theme, containerColor?: string): ItemColors {
 }
 
 export function createListItemStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   lines: ListItemLines,
   containerColor?: string,
 ) {
@@ -121,7 +121,7 @@ export function createListItemStyles(
   })
 }
 
-export function createDividerStyles(theme: Theme, inset: boolean) {
+export function createDividerStyles(theme: MaterialTheme, inset: boolean) {
   return StyleSheet.create({
     divider: {
       height: 1,

package/src/radio/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
-import { alphaColor, blendColor } from '../utils/color'
+import { alphaColor } from '../utils/color'
 
 interface RadioColors {
   borderColor: string
@@ -12,7 +12,7 @@ interface RadioColors {
   disabledDotColor: string
 }
 
-function getColors(theme: Theme, selected: boolean): RadioColors {
+function getColors(theme: MaterialTheme, selected: boolean): RadioColors {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
 
   if (selected) {
@@ -49,7 +49,7 @@ function getColors(theme: Theme, selected: boolean): RadioColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: RadioColors,
   containerColor?: string,
   contentColor?: string,
@@ -79,7 +79,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   selected: boolean,
   containerColor?: string,
   contentColor?: string,

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/switch/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import { alphaColor, blendColor } from '../utils/color'
 
@@ -17,7 +17,7 @@ interface TrackColors {
   disabledBorderWidth: number
 }
 
-function getColors(theme: Theme, selected: boolean): TrackColors {
+function getColors(theme: MaterialTheme, selected: boolean): TrackColors {
   const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12)
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
 
@@ -69,7 +69,7 @@ function getColors(theme: Theme, selected: boolean): TrackColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: TrackColors,
   containerColor?: string,
   contentColor?: string,
@@ -106,7 +106,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   selected: boolean,
   hasIcon: boolean,
   containerColor?: string,