@onlynative/components 0.1.0-alpha.0

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 };

package/dist/button/index.js

@@ -0,0 +1,454 @@
+"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)
+    __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 __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/button/index.ts
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+
+// src/button/Button.tsx
+var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
+var import_core = require("@onlynative/core");
+
+// src/button/styles.ts
+var import_react_native2 = require("react-native");
+
+// src/utils/color.ts
+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})`;
+}
+
+// src/utils/elevation.ts
+var import_react_native = require("react-native");
+function elevationStyle(level) {
+  if (import_react_native.Platform.OS === "web") {
+    const { shadowOffset, shadowOpacity, shadowRadius } = level;
+    if (shadowOpacity === 0) {
+      return { boxShadow: "none" };
+    }
+    return {
+      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
+    };
+  }
+  return {
+    shadowColor: level.shadowColor,
+    shadowOffset: {
+      width: level.shadowOffset.width,
+      height: level.shadowOffset.height
+    },
+    shadowOpacity: level.shadowOpacity,
+    shadowRadius: level.shadowRadius,
+    elevation: level.elevation
+  };
+}
+
+// src/button/styles.ts
+function getVariantColors(theme, variant) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  if (variant === "outlined") {
+    return {
+      backgroundColor: "transparent",
+      textColor: theme.colors.primary,
+      borderColor: theme.colors.outline,
+      borderWidth: 1,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: "transparent",
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledOutlineColor
+    };
+  }
+  if (variant === "text") {
+    return {
+      backgroundColor: "transparent",
+      textColor: theme.colors.primary,
+      borderColor: "transparent",
+      borderWidth: 0,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: "transparent",
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: "transparent"
+    };
+  }
+  if (variant === "elevated") {
+    return {
+      backgroundColor: theme.colors.surfaceContainerLow,
+      textColor: theme.colors.primary,
+      borderColor: theme.colors.surfaceContainerLow,
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledContainerColor
+    };
+  }
+  if (variant === "tonal") {
+    return {
+      backgroundColor: theme.colors.secondaryContainer,
+      textColor: theme.colors.onSecondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledContainerColor
+    };
+  }
+  return {
+    backgroundColor: theme.colors.primary,
+    textColor: theme.colors.onPrimary,
+    borderColor: theme.colors.primary,
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.primary,
+      theme.colors.onPrimary,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.primary,
+      theme.colors.onPrimary,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledTextColor: disabledLabelColor,
+    disabledBorderColor: disabledContainerColor
+  };
+}
+function getHorizontalPadding(theme, variant, hasLeadingIcon, hasTrailingIcon) {
+  if (variant === "text") {
+    return {
+      paddingStart: hasLeadingIcon ? 12 : hasTrailingIcon ? theme.spacing.md : 12,
+      paddingEnd: hasTrailingIcon ? 12 : hasLeadingIcon ? theme.spacing.md : 12
+    };
+  }
+  return {
+    paddingStart: hasLeadingIcon ? theme.spacing.md : theme.spacing.lg,
+    paddingEnd: hasTrailingIcon ? theme.spacing.md : theme.spacing.lg
+  };
+}
+function applyColorOverrides(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (contentColor) {
+    result.textColor = contentColor;
+  }
+  if (containerColor) {
+    const overlay = contentColor != null ? contentColor : colors.textColor;
+    result.backgroundColor = containerColor;
+    result.borderColor = containerColor;
+    result.hoveredBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity
+    );
+  } else if (contentColor) {
+    if (colors.backgroundColor === "transparent") {
+      result.hoveredBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.hoveredOpacity
+      );
+      result.pressedBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.pressedOpacity
+      );
+    } else {
+      result.hoveredBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.hoveredOpacity
+      );
+      result.pressedBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.pressedOpacity
+      );
+    }
+  }
+  return result;
+}
+function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, containerColor, contentColor) {
+  const baseColors = getVariantColors(theme, variant);
+  const colors = applyColorOverrides(
+    theme,
+    baseColors,
+    containerColor,
+    contentColor
+  );
+  const labelStyle = theme.typography.labelLarge;
+  const padding = getHorizontalPadding(
+    theme,
+    variant,
+    hasLeadingIcon,
+    hasTrailingIcon
+  );
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
+  return import_react_native2.StyleSheet.create({
+    container: {
+      alignSelf: "flex-start",
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "center",
+      minWidth: 58,
+      minHeight: 40,
+      paddingStart: padding.paddingStart,
+      paddingEnd: padding.paddingEnd,
+      paddingVertical: 10,
+      borderRadius: theme.shape.cornerFull,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      cursor: "pointer",
+      ...baseElevation
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...variant === "elevated" ? elevationLevel2 : void 0
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      cursor: "auto",
+      ...elevationLevel0
+    },
+    label: {
+      fontFamily: labelStyle.fontFamily,
+      fontSize: labelStyle.fontSize,
+      lineHeight: labelStyle.lineHeight,
+      fontWeight: labelStyle.fontWeight,
+      letterSpacing: labelStyle.letterSpacing,
+      color: colors.textColor
+    },
+    leadingIcon: {
+      marginEnd: theme.spacing.sm
+    },
+    trailingIcon: {
+      marginStart: theme.spacing.sm
+    },
+    disabledLabel: {
+      color: colors.disabledTextColor
+    }
+  });
+}
+
+// src/button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function resolveStyle(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      containerStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+      state.pressed && !disabled ? pressedContainerStyle : void 0,
+      disabled ? disabledContainerStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    containerStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+    state.pressed && !disabled ? pressedContainerStyle : void 0,
+    disabled ? disabledContainerStyle : void 0,
+    style
+  ];
+}
+function Button({
+  children,
+  style,
+  variant = "filled",
+  leadingIcon,
+  trailingIcon,
+  iconSize = 18,
+  containerColor,
+  contentColor,
+  labelStyle: labelStyleOverride,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const hasLeading = Boolean(leadingIcon);
+  const hasTrailing = Boolean(trailingIcon);
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(
+    () => createStyles(
+      theme,
+      variant,
+      hasLeading,
+      hasTrailing,
+      containerColor,
+      contentColor
+    ),
+    [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
+  );
+  const resolvedIconColor = (0, import_react.useMemo)(() => {
+    const base = import_react_native4.StyleSheet.flatten([
+      styles.label,
+      isDisabled ? styles.disabledLabel : void 0
+    ]);
+    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
+  }, [styles.label, styles.disabledLabel, isDisabled]);
+  const computedLabelStyle = (0, import_react.useMemo)(
+    () => [
+      styles.label,
+      isDisabled ? styles.disabledLabel : void 0,
+      labelStyleOverride
+    ],
+    [isDisabled, styles.disabledLabel, styles.label, labelStyleOverride]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react_native3.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isDisabled },
+      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      style: resolveStyle(
+        styles.container,
+        styles.hoveredContainer,
+        styles.pressedContainer,
+        styles.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: [
+        leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MaterialCommunityIcons.default,
+          {
+            name: leadingIcon,
+            size: iconSize,
+            color: resolvedIconColor,
+            style: styles.leadingIcon
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Text, { style: computedLabelStyle, children }),
+        trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MaterialCommunityIcons.default,
+          {
+            name: trailingIcon,
+            size: iconSize,
+            color: resolvedIconColor,
+            style: styles.trailingIcon
+          }
+        ) : null
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/card/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+
+/** Surface style variant of the card following Material Design 3 roles. */
+type CardVariant = 'elevated' | 'filled' | 'outlined';
+interface CardProps extends ViewProps {
+    /** Content rendered inside the card surface. */
+    children: ReactNode;
+    /**
+     * Surface style variant.
+     * @default 'elevated'
+     */
+    variant?: CardVariant;
+    /** When provided, the card becomes interactive (Pressable). Omit to render as a plain View. */
+    onPress?: () => void;
+    /**
+     * Disables the press interaction and reduces opacity. Only effective when `onPress` is provided.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Override the container (background) color.
+     * State-layer colors (hover, press) are derived automatically.
+     */
+    containerColor?: string;
+}
+
+declare function Card({ children, style, variant, onPress, disabled, containerColor, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+export { Card, type CardProps, type CardVariant };