@onlynative/components 0.0.0-alpha.0

package/dist/avatar/index.d.ts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { ComponentProps } from 'react';
+import { ViewProps, StyleProp, ViewStyle } from 'react-native';
+
+/** Size of the avatar container. */
+type AvatarSize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+interface AvatarProps extends Omit<ViewProps, 'style'> {
+    /**
+     * URI of the image to display.
+     * Takes priority over `icon` and `label`.
+     */
+    imageUri?: string;
+    /**
+     * MaterialCommunityIcons icon name.
+     * Takes priority over `label` when `imageUri` is not set.
+     */
+    icon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /**
+     * Text initials to display (1–2 characters recommended).
+     * Shown when `imageUri` and `icon` are not set.
+     */
+    label?: string;
+    /**
+     * Size of the avatar.
+     * @default 'medium'
+     */
+    size?: AvatarSize;
+    /**
+     * Override the container (background) color.
+     * State-layer colors (hover, press) are derived automatically when `onPress` is set.
+     */
+    containerColor?: string;
+    /** Override the content (icon / initials) color. */
+    contentColor?: string;
+    /** Custom style applied to the root container. */
+    style?: StyleProp<ViewStyle>;
+    /** When provided, the avatar becomes interactive (Pressable). */
+    onPress?: () => void;
+    /** Required when `onPress` is provided — labels the button for screen readers. */
+    accessibilityLabel?: string;
+}
+
+declare function Avatar({ imageUri, icon, label, size, containerColor, contentColor, style, onPress, accessibilityLabel, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar, type AvatarProps, type AvatarSize };

package/dist/avatar/index.js

@@ -0,0 +1,250 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar/index.ts
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(avatar_exports);
+
+// src/avatar/Avatar.tsx
+var import_react = require("react");
+var import_react_native4 = 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");
+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})`;
+}
+function blendColor(base, overlay, overlayAlpha) {
+  const baseChannels = parseHexColor(base);
+  const overlayChannels = parseHexColor(overlay);
+  const boundedAlpha = clampAlpha(overlayAlpha);
+  if (!baseChannels || !overlayChannels) {
+    return alphaColor(overlay, boundedAlpha);
+  }
+  const r = Math.round(
+    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
+  );
+  const g = Math.round(
+    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
+  );
+  const b = Math.round(
+    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
+  );
+  return `rgb(${r}, ${g}, ${b})`;
+}
+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/avatar/styles.ts
+var import_react_native3 = require("react-native");
+function createStyles(theme) {
+  return import_react_native3.StyleSheet.create({
+    container: {
+      borderRadius: theme.shape.cornerFull,
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden"
+    },
+    interactive: {
+      cursor: "pointer"
+    },
+    sizeXSmall: { width: 24, height: 24 },
+    sizeSmall: { width: 32, height: 32 },
+    sizeMedium: { width: 40, height: 40 },
+    sizeLarge: { width: 56, height: 56 },
+    sizeXLarge: { width: 112, height: 112 },
+    image: {
+      width: "100%",
+      height: "100%"
+    }
+  });
+}
+
+// src/avatar/Avatar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ICON_PX = {
+  xSmall: 14,
+  small: 18,
+  medium: 24,
+  large: 32,
+  xLarge: 56
+};
+var LABEL_FONT_SIZE = {
+  xSmall: 10,
+  small: 12,
+  medium: 14,
+  large: 22,
+  xLarge: 36
+};
+function getSizeStyle(styles, size) {
+  if (size === "xSmall") return styles.sizeXSmall;
+  if (size === "small") return styles.sizeSmall;
+  if (size === "large") return styles.sizeLarge;
+  if (size === "xLarge") return styles.sizeXLarge;
+  return styles.sizeMedium;
+}
+function Avatar({
+  imageUri,
+  icon,
+  label,
+  size = "medium",
+  containerColor,
+  contentColor,
+  style,
+  onPress,
+  accessibilityLabel,
+  ...props
+}) {
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
+  const bgColor = containerColor != null ? containerColor : theme.colors.primaryContainer;
+  const fgColor = contentColor != null ? contentColor : theme.colors.onPrimaryContainer;
+  const isInteractive = onPress !== void 0;
+  const sizeStyle = getSizeStyle(styles, size);
+  const iconPx = ICON_PX[size];
+  const labelFontSize = LABEL_FONT_SIZE[size];
+  const initials = label ? label.slice(0, 2).toUpperCase() : void 0;
+  const initialsStyle = (0, import_react.useMemo)(
+    () => ({
+      color: fgColor,
+      fontSize: labelFontSize,
+      fontWeight: "500"
+    }),
+    [fgColor, labelFontSize]
+  );
+  const containerOverrides = (0, import_react.useMemo)(
+    () => ({
+      base: { backgroundColor: bgColor },
+      hovered: {
+        backgroundColor: blendColor(
+          bgColor,
+          fgColor,
+          theme.stateLayer.hoveredOpacity
+        )
+      },
+      pressed: {
+        backgroundColor: blendColor(
+          bgColor,
+          fgColor,
+          theme.stateLayer.pressedOpacity
+        )
+      }
+    }),
+    [bgColor, fgColor, theme.stateLayer]
+  );
+  const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Image, { source: { uri: imageUri }, style: styles.image, accessible: false }) : label && !icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Text, { style: initialsStyle, numberOfLines: 1, allowFontScaling: false, children: initials }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MaterialCommunityIcons,
+    {
+      name: icon != null ? icon : "account",
+      size: iconPx,
+      color: fgColor
+    }
+  );
+  if (!isInteractive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native4.View,
+      {
+        ...props,
+        accessibilityLabel,
+        style: [styles.container, sizeStyle, containerOverrides.base, style],
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native4.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      onPress,
+      style: ({
+        pressed,
+        hovered
+      }) => {
+        return [
+          styles.container,
+          sizeStyle,
+          containerOverrides.base,
+          styles.interactive,
+          hovered && !pressed ? containerOverrides.hovered : void 0,
+          pressed ? containerOverrides.pressed : void 0,
+          style
+        ];
+      },
+      children: content
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/button/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { ComponentProps } from 'react';
+import { PressableProps, StyleProp, TextStyle } from 'react-native';
+
+/** Visual style variant of the button following Material Design 3 roles. */
+type ButtonVariant = 'filled' | 'elevated' | 'outlined' | 'text' | 'tonal';
+interface ButtonProps extends Omit<PressableProps, 'children'> {
+    /** Text label rendered inside the button. */
+    children: string;
+    /**
+     * Visual variant. Controls background, border, and text color.
+     * @default 'filled'
+     */
+    variant?: ButtonVariant;
+    /** Name of a MaterialCommunityIcons icon to show before the label. */
+    leadingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /** Name of a MaterialCommunityIcons icon to show after the label. */
+    trailingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /**
+     * Size of leading and trailing icons in dp.
+     * @default 18
+     */
+    iconSize?: number;
+    /**
+     * Override the container (background) color.
+     * State-layer colors (hover, press) are derived automatically.
+     */
+    containerColor?: string;
+    /**
+     * Override the content (label and icon) color.
+     * State-layer colors are derived automatically when no containerColor is set.
+     */
+    contentColor?: string;
+    /** Additional style applied to the label text. */
+    labelStyle?: StyleProp<TextStyle>;
+}
+
+declare function Button({ children, style, variant, leadingIcon, trailingIcon, iconSize, containerColor, contentColor, labelStyle: labelStyleOverride, disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonVariant };