@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/dist/text-field/index.js

@@ -26,13 +26,69 @@ module.exports = __toCommonJS(text_field_exports);
 
 // src/text-field/TextField.tsx
 var import_react = require("react");
-var import_react_native2 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
-var import_utils2 = require("@onlynative/utils");
 
-// src/text-field/styles.ts
+// ../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_utils = require("@onlynative/utils");
+var import_react_native2 = require("react-native");
+function parseHexColor(color) {
+  const normalized = color.replace("#", "");
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return null;
+  }
+  return { r, g, b };
+}
+function clampAlpha(alpha) {
+  return Math.max(0, Math.min(1, alpha));
+}
+function alphaColor(color, alpha) {
+  const channels = parseHexColor(color);
+  const boundedAlpha = clampAlpha(alpha);
+  if (!channels) {
+    return color;
+  }
+  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
+}
+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;
+}
+function transformOrigin(vertical = "top") {
+  return import_react_native2.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+}
+
+// src/text-field/styles.ts
+var import_react_native3 = require("react-native");
 var CONTAINER_HEIGHT = 56;
 var ICON_SIZE = 24;
 var LABEL_FLOATED_LINE_HEIGHT = 16;
@@ -57,15 +113,15 @@ function getVariantColors(theme, variant) {
     focusedLabelColor: theme.colors.primary,
     errorLabelColor: theme.colors.error,
     textColor: theme.colors.onSurface,
-    disabledTextColor: (0, import_utils.alphaColor)(theme.colors.onSurface, disabledOpacity),
-    disabledLabelColor: (0, import_utils.alphaColor)(theme.colors.onSurface, disabledOpacity),
-    disabledBorderColor: (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12),
+    disabledTextColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledLabelColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledBorderColor: alphaColor(theme.colors.onSurface, 0.12),
     placeholderColor: theme.colors.onSurfaceVariant,
     supportingTextColor: theme.colors.onSurfaceVariant,
     errorSupportingTextColor: theme.colors.error,
     iconColor: theme.colors.onSurfaceVariant,
     errorIconColor: theme.colors.error,
-    disabledIconColor: (0, import_utils.alphaColor)(theme.colors.onSurface, disabledOpacity)
+    disabledIconColor: alphaColor(theme.colors.onSurface, disabledOpacity)
   };
   if (variant === "outlined") {
     return {
@@ -80,7 +136,7 @@ function getVariantColors(theme, variant) {
     ...common,
     backgroundColor: theme.colors.surfaceContainerHighest,
     borderColor: theme.colors.onSurfaceVariant,
-    disabledBackgroundColor: (0, import_utils.alphaColor)(theme.colors.onSurface, 0.04),
+    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
     labelColor: theme.colors.onSurfaceVariant
   };
 }
@@ -91,7 +147,7 @@ function createStyles(theme, variant) {
   const isFilled = variant === "filled";
   return {
     colors,
-    styles: import_react_native.StyleSheet.create({
+    styles: import_react_native3.StyleSheet.create({
       root: {
         alignSelf: "stretch"
       },
@@ -162,7 +218,7 @@ function createStyles(theme, variant) {
         fontWeight: bodySmall.fontWeight,
         letterSpacing: bodySmall.letterSpacing,
         color: colors.labelColor,
-        transformOrigin: (0, import_utils.transformOrigin)("top")
+        transformOrigin: transformOrigin("top")
       },
       labelNotch: {
         paddingHorizontal: 4
@@ -255,7 +311,7 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
-  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils2.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const { colors, styles } = (0, import_react.useMemo)(
     () => createStyles(theme, variant),
     [theme, variant]
@@ -268,13 +324,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_native2.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react.useRef)(new import_react_native4.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
   (0, import_react.useEffect)(() => {
-    import_react_native2.Animated.timing(labelAnim, {
+    import_react_native4.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
-      useNativeDriver: import_react_native2.Platform.OS !== "web"
+      useNativeDriver: import_react_native4.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
   const labelScale = (0, import_react.useMemo)(() => {
@@ -352,9 +408,9 @@ function TextField({
     [styles, isFocused, isError, isDisabled]
   );
   const displaySupportingText = isError ? errorText : supportingText;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: [styles.root, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: containerStyle, children: [
-      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native4.View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native4.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         MaterialCommunityIcons,
         {
           name: leadingIcon,
@@ -363,14 +419,14 @@ function TextField({
         }
       ) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native2.View,
+        import_react_native4.View,
         {
           style: [
             styles.inputWrapper,
             label ? styles.inputWrapperWithLabel : void 0
           ],
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native2.TextInput,
+            import_react_native4.TextInput,
             {
               ref: inputRef,
               ...textInputProps,
@@ -396,14 +452,14 @@ function TextField({
         }
       ),
       trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native2.Pressable,
+        import_react_native4.Pressable,
         {
           onPress: onTrailingIconPress,
           disabled: isDisabled || !onTrailingIconPress,
           accessibilityRole: "button",
           hitSlop: 12,
           style: styles.trailingIconPressable,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             MaterialCommunityIcons,
             {
               name: trailingIcon,
@@ -414,7 +470,7 @@ function TextField({
         }
       ) : null,
       label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native2.Animated.Text,
+        import_react_native4.Animated.Text,
         {
           numberOfLines: 1,
           style: [
@@ -434,10 +490,10 @@ function TextField({
           children: label
         }
       ) : null,
-      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: indicatorStyle }) : null
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: indicatorStyle }) : null
     ] }) }),
-    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native2.Text,
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native4.Text,
       {
         style: [
           styles.supportingText,

package/package.json

@@ -1,83 +1,67 @@
 {
   "name": "@onlynative/components",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.1",
   "description": "Material Design 3 UI components for React Native — Button, Card, Chip, TextField, and more.",
   "private": false,
   "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "react-native": "src/index.ts",
-  "source": "src/index.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "react-native": "./src/index.ts",
       "default": "./dist/index.js"
     },
     "./typography": {
       "types": "./dist/typography/index.d.ts",
-      "react-native": "./src/typography/index.ts",
       "default": "./dist/typography/index.js"
     },
     "./layout": {
       "types": "./dist/layout/index.d.ts",
-      "react-native": "./src/layout/index.ts",
       "default": "./dist/layout/index.js"
     },
     "./button": {
       "types": "./dist/button/index.d.ts",
-      "react-native": "./src/button/index.ts",
       "default": "./dist/button/index.js"
     },
     "./icon-button": {
       "types": "./dist/icon-button/index.d.ts",
-      "react-native": "./src/icon-button/index.ts",
       "default": "./dist/icon-button/index.js"
     },
     "./appbar": {
       "types": "./dist/appbar/index.d.ts",
-      "react-native": "./src/appbar/index.ts",
       "default": "./dist/appbar/index.js"
     },
     "./card": {
       "types": "./dist/card/index.d.ts",
-      "react-native": "./src/card/index.ts",
       "default": "./dist/card/index.js"
     },
     "./chip": {
       "types": "./dist/chip/index.d.ts",
-      "react-native": "./src/chip/index.ts",
       "default": "./dist/chip/index.js"
     },
     "./checkbox": {
       "types": "./dist/checkbox/index.d.ts",
-      "react-native": "./src/checkbox/index.ts",
       "default": "./dist/checkbox/index.js"
     },
     "./radio": {
       "types": "./dist/radio/index.d.ts",
-      "react-native": "./src/radio/index.ts",
       "default": "./dist/radio/index.js"
     },
     "./switch": {
       "types": "./dist/switch/index.d.ts",
-      "react-native": "./src/switch/index.ts",
       "default": "./dist/switch/index.js"
     },
     "./text-field": {
       "types": "./dist/text-field/index.d.ts",
-      "react-native": "./src/text-field/index.ts",
       "default": "./dist/text-field/index.js"
     },
     "./list": {
       "types": "./dist/list/index.d.ts",
-      "react-native": "./src/list/index.ts",
       "default": "./dist/list/index.js"
     },
     "./keyboard-avoiding-wrapper": {
       "types": "./dist/keyboard-avoiding-wrapper/index.d.ts",
-      "react-native": "./src/keyboard-avoiding-wrapper/index.ts",
       "default": "./dist/keyboard-avoiding-wrapper/index.js"
     }
   },
@@ -129,9 +113,7 @@
     "provenance": true
   },
   "files": [
-    "dist",
-    "src",
-    "!src/__tests__"
+    "dist"
   ],
   "license": "MIT",
   "repository": {
@@ -148,14 +130,13 @@
     "material-you"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/typography/index.ts src/layout/index.ts src/button/index.ts src/icon-button/index.ts src/appbar/index.ts src/card/index.ts src/chip/index.ts src/checkbox/index.ts src/radio/index.ts src/switch/index.ts src/text-field/index.ts src/list/index.ts src/keyboard-avoiding-wrapper/index.ts --dts --format cjs --outDir dist --clean",
+    "build": "tsup",
     "typecheck": "tsc --noEmit",
     "test": "jest --passWithNoTests"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.1.0",
-    "@onlynative/utils": ">=0.1.0-alpha.3",
+    "@onlynative/core": ">=0.1.1-alpha.1",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"

package/src/appbar/AppBar.tsx

@@ -1,302 +0,0 @@
-import { useCallback, useMemo, useState } from 'react'
-import type { ReactNode } from 'react'
-import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native'
-import { Platform, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { defaultTopAppBarTokens, useTheme } from '@onlynative/core'
-
-import { IconButton } from '../icon-button'
-import type { IconButtonProps } from '../icon-button'
-import { Typography } from '../typography'
-import type { TypographyVariant } from '../typography'
-import { selectRTL } from '@onlynative/utils'
-import { createStyles } from './styles'
-import type { AppBarProps } from './types'
-
-type AppBarSize = 'small' | 'medium' | 'large'
-function getBackIcon(): IconButtonProps['icon'] {
-  if (Platform.OS === 'ios') {
-    return selectRTL('chevron-left', 'chevron-right')
-  }
-
-  return selectRTL('arrow-left', 'arrow-right')
-}
-
-const titleVariantBySize: Record<AppBarSize, TypographyVariant> = {
-  small: 'titleLarge',
-  medium: 'headlineSmall',
-  large: 'headlineMedium',
-}
-const APP_BAR_TITLE_TEXT_PROPS = {
-  numberOfLines: 1,
-  ellipsizeMode: 'tail',
-  accessibilityRole: 'header',
-} as const
-
-function resolveSize(variant: AppBarProps['variant']): AppBarSize {
-  if (variant === 'medium' || variant === 'large') {
-    return variant
-  }
-
-  return 'small'
-}
-
-function getSizeStyle(
-  styles: ReturnType<typeof createStyles>,
-  size: AppBarSize,
-) {
-  if (size === 'large') {
-    return styles.largeContainer
-  }
-
-  return styles.mediumContainer
-}
-
-function withTopInset(
-  enabled: boolean,
-  content: ReactNode,
-  style: StyleProp<ViewStyle>,
-) {
-  if (enabled) {
-    return (
-      <SafeAreaView edges={['top']} style={style}>
-        {content}
-      </SafeAreaView>
-    )
-  }
-
-  return <View style={style}>{content}</View>
-}
-
-function measureWidth(event: LayoutChangeEvent): number {
-  return Math.round(event.nativeEvent.layout.width)
-}
-
-export function AppBar({
-  title,
-  variant = 'small',
-  canGoBack = false,
-  onBackPress,
-  insetTop = false,
-  elevated = false,
-  leading,
-  trailing,
-  actions,
-  containerColor,
-  contentColor,
-  titleStyle,
-  style,
-}: AppBarProps) {
-  const theme = useTheme()
-  const topAppBar = theme.topAppBar ?? defaultTopAppBarTokens
-  const styles = useMemo(() => createStyles(theme), [theme])
-  const [leadingWidth, setLeadingWidth] = useState(0)
-  const [actionsWidth, setActionsWidth] = useState(0)
-  const titleColorStyle = useMemo(
-    () => ({ color: contentColor ?? theme.colors.onSurface }),
-    [contentColor, theme.colors.onSurface],
-  )
-  const size = resolveSize(variant)
-  const titleVariant = titleVariantBySize[size]
-  const isCenterAligned = variant === 'center-aligned'
-  const isExpanded = size !== 'small'
-  const titleStartInset =
-    topAppBar.horizontalPadding +
-    Math.max(topAppBar.titleStartInset, leadingWidth)
-  const compactTitleEndInset = topAppBar.horizontalPadding + actionsWidth
-  const centeredSideInset =
-    topAppBar.horizontalPadding + Math.max(leadingWidth, actionsWidth)
-  const expandedTitleInsetStyle = useMemo<ViewStyle>(
-    () => ({ paddingStart: titleStartInset }),
-    [titleStartInset],
-  )
-  const overlayTitleInsetStyle = useMemo<ViewStyle>(
-    () =>
-      isCenterAligned
-        ? { start: centeredSideInset, end: centeredSideInset }
-        : { start: titleStartInset, end: compactTitleEndInset },
-    [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset],
-  )
-
-  const leadingContent = useMemo(() => {
-    if (leading) {
-      return leading
-    }
-
-    if (!canGoBack) {
-      return null
-    }
-
-    return (
-      <View style={styles.iconFrame}>
-        <IconButton
-          icon={getBackIcon()}
-          size="medium"
-          variant="standard"
-          iconColor={contentColor ?? theme.colors.onSurface}
-          accessibilityLabel="Go back"
-          onPress={onBackPress}
-        />
-      </View>
-    )
-  }, [
-    canGoBack,
-    contentColor,
-    leading,
-    onBackPress,
-    styles.iconFrame,
-    theme.colors.onSurface,
-  ])
-
-  const actionsContent = useMemo(() => {
-    if (trailing) {
-      return trailing
-    }
-
-    if (!actions || actions.length === 0) {
-      return null
-    }
-
-    return (
-      <View style={styles.actionsRow}>
-        {actions.map((action, index) => (
-          <View
-            key={`${String(action.icon)}-${index}`}
-            style={styles.iconFrame}
-          >
-            <IconButton
-              icon={action.icon}
-              size="medium"
-              variant="standard"
-              iconColor={contentColor}
-              accessibilityLabel={action.accessibilityLabel}
-              onPress={action.onPress}
-              disabled={action.disabled}
-            />
-          </View>
-        ))}
-      </View>
-    )
-  }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing])
-
-  const onLeadingLayout = useCallback((event: LayoutChangeEvent) => {
-    const nextWidth = measureWidth(event)
-
-    setLeadingWidth((currentWidth) => {
-      if (currentWidth === nextWidth) {
-        return currentWidth
-      }
-
-      return nextWidth
-    })
-  }, [])
-
-  const onActionsLayout = useCallback((event: LayoutChangeEvent) => {
-    const nextWidth = measureWidth(event)
-
-    setActionsWidth((currentWidth) => {
-      if (currentWidth === nextWidth) {
-        return currentWidth
-      }
-
-      return nextWidth
-    })
-  }, [])
-
-  const topRow = (
-    <View style={styles.topRow}>
-      <View
-        collapsable={false}
-        onLayout={onLeadingLayout}
-        style={styles.sideSlot}
-      >
-        {leadingContent}
-      </View>
-      <View style={styles.topRowSpacer} />
-      <View
-        collapsable={false}
-        onLayout={onActionsLayout}
-        style={styles.sideSlot}
-      >
-        {actionsContent}
-      </View>
-    </View>
-  )
-
-  const containerOverride = containerColor
-    ? ({ backgroundColor: containerColor } as ViewStyle)
-    : undefined
-  const rootStyle: StyleProp<ViewStyle> = [
-    styles.root,
-    elevated ? styles.elevatedRoot : undefined,
-    containerOverride,
-    style,
-  ]
-  const safeAreaStyle: StyleProp<ViewStyle> = [
-    styles.safeArea,
-    elevated ? styles.elevatedSafeArea : undefined,
-    containerOverride,
-  ]
-
-  if (isExpanded) {
-    const content = (
-      <View style={[styles.expandedContainer, getSizeStyle(styles, size)]}>
-        {topRow}
-        <View
-          style={[
-            styles.expandedTitleContainer,
-            size === 'large'
-              ? styles.largeTitlePadding
-              : styles.mediumTitlePadding,
-            expandedTitleInsetStyle,
-          ]}
-        >
-          <Typography
-            {...APP_BAR_TITLE_TEXT_PROPS}
-            variant={titleVariant}
-            style={[
-              styles.title,
-              titleColorStyle,
-              styles.startAlignedTitle,
-              titleStyle,
-            ]}
-          >
-            {title}
-          </Typography>
-        </View>
-      </View>
-    )
-
-    return (
-      <View style={rootStyle}>
-        {withTopInset(insetTop, content, safeAreaStyle)}
-      </View>
-    )
-  }
-
-  const content = (
-    <View style={styles.smallContainer}>
-      {topRow}
-      <View style={[styles.overlayTitleContainer, overlayTitleInsetStyle]}>
-        <Typography
-          {...APP_BAR_TITLE_TEXT_PROPS}
-          variant={titleVariant}
-          style={[
-            styles.title,
-            titleColorStyle,
-            isCenterAligned ? styles.centeredTitle : styles.startAlignedTitle,
-            titleStyle,
-          ]}
-        >
-          {title}
-        </Typography>
-      </View>
-    </View>
-  )
-
-  return (
-    <View style={rootStyle}>
-      {withTopInset(insetTop, content, safeAreaStyle)}
-    </View>
-  )
-}

package/src/appbar/index.ts

@@ -1,2 +0,0 @@
-export { AppBar } from './AppBar'
-export type { AppBarAction, AppBarProps, AppBarVariant } from './types'