@onlynative/components 0.1.0-alpha.0

package/dist/switch/index.js

@@ -0,0 +1,315 @@
+"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/switch/index.ts
+var switch_exports = {};
+__export(switch_exports, {
+  Switch: () => Switch
+});
+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/switch/styles.ts
+var import_react_native = 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/switch/styles.ts
+function getColors(theme, selected) {
+  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  if (selected) {
+    return {
+      trackColor: theme.colors.primary,
+      thumbColor: theme.colors.onPrimary,
+      iconColor: theme.colors.onPrimaryContainer,
+      hoveredTrackColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedTrackColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      ),
+      borderColor: "transparent",
+      borderWidth: 0,
+      disabledTrackColor: disabledOnSurface12,
+      disabledThumbColor: theme.colors.surface,
+      disabledBorderColor: "transparent",
+      disabledBorderWidth: 0
+    };
+  }
+  return {
+    trackColor: theme.colors.surfaceContainerHighest,
+    thumbColor: theme.colors.outline,
+    iconColor: theme.colors.surfaceContainerHighest,
+    hoveredTrackColor: blendColor(
+      theme.colors.surfaceContainerHighest,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedTrackColor: blendColor(
+      theme.colors.surfaceContainerHighest,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    ),
+    borderColor: theme.colors.outline,
+    borderWidth: 2,
+    disabledTrackColor: disabledOnSurface12,
+    disabledThumbColor: disabledOnSurface38,
+    disabledBorderColor: disabledOnSurface12,
+    disabledBorderWidth: 2
+  };
+}
+function applyColorOverrides(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (contentColor) {
+    result.thumbColor = contentColor;
+    result.iconColor = contentColor;
+  }
+  if (containerColor) {
+    const overlay = contentColor != null ? contentColor : colors.thumbColor;
+    result.trackColor = containerColor;
+    result.borderColor = containerColor;
+    result.hoveredTrackColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedTrackColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity
+    );
+    if (contentColor) {
+      result.iconColor = containerColor;
+    }
+  }
+  return result;
+}
+function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
+  const colors = applyColorOverrides(
+    theme,
+    getColors(theme, selected),
+    containerColor,
+    contentColor
+  );
+  const thumbSize = selected || hasIcon ? 24 : 16;
+  const trackWidth = 52;
+  const trackHeight = 32;
+  const trackPadding = 4;
+  const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
+  return import_react_native.StyleSheet.create({
+    track: {
+      width: trackWidth,
+      height: trackHeight,
+      borderRadius: trackHeight / 2,
+      backgroundColor: colors.trackColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    hoveredTrack: {
+      backgroundColor: colors.hoveredTrackColor
+    },
+    pressedTrack: {
+      backgroundColor: colors.pressedTrackColor
+    },
+    disabledTrack: {
+      backgroundColor: colors.disabledTrackColor,
+      borderColor: colors.disabledBorderColor,
+      borderWidth: colors.disabledBorderWidth,
+      cursor: "auto"
+    },
+    thumb: {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: thumbSize / 2,
+      backgroundColor: colors.thumbColor,
+      marginStart: thumbOffset,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    disabledThumb: {
+      backgroundColor: colors.disabledThumbColor
+    },
+    iconColor: {
+      color: colors.iconColor
+    },
+    disabledIconColor: {
+      color: alphaColor(theme.colors.onSurface, 0.38)
+    }
+  });
+}
+
+// src/switch/Switch.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function resolveStyle(trackStyle, hoveredTrackStyle, pressedTrackStyle, disabledTrackStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      trackStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
+      state.pressed && !disabled ? pressedTrackStyle : void 0,
+      disabled ? disabledTrackStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    trackStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
+    state.pressed && !disabled ? pressedTrackStyle : void 0,
+    disabled ? disabledTrackStyle : void 0,
+    style
+  ];
+}
+function Switch({
+  style,
+  value = false,
+  onValueChange,
+  selectedIcon = "check",
+  unselectedIcon,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isSelected = Boolean(value);
+  const hasIcon = isSelected || Boolean(unselectedIcon);
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(
+    () => createStyles(theme, isSelected, hasIcon, containerColor, contentColor),
+    [theme, isSelected, hasIcon, containerColor, contentColor]
+  );
+  const resolvedIconColor = (0, import_react.useMemo)(() => {
+    const base = import_react_native2.StyleSheet.flatten([
+      styles.iconColor,
+      isDisabled ? styles.disabledIconColor : void 0
+    ]);
+    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
+  }, [styles.iconColor, styles.disabledIconColor, isDisabled]);
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange == null ? void 0 : onValueChange(!isSelected);
+    }
+  };
+  const iconName = isSelected ? selectedIcon : unselectedIcon;
+  const iconSize = 16;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native2.Pressable,
+    {
+      ...props,
+      accessibilityRole: "switch",
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: isSelected
+      },
+      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress: handlePress,
+      style: resolveStyle(
+        styles.track,
+        styles.hoveredTrack,
+        styles.pressedTrack,
+        styles.disabledTrack,
+        isDisabled,
+        style
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native2.View,
+        {
+          style: [styles.thumb, isDisabled ? styles.disabledThumb : void 0],
+          children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_MaterialCommunityIcons.default,
+            {
+              name: iconName,
+              size: iconSize,
+              color: resolvedIconColor
+            }
+          ) : null
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch
+});

package/dist/text-field/index.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { ComponentProps } from 'react';
+import { TextInputProps, StyleProp, TextStyle } from 'react-native';
+
+/** Visual container style for the text field. */
+type TextFieldVariant = 'filled' | 'outlined';
+interface TextFieldProps extends Omit<TextInputProps, 'placeholderTextColor' | 'editable'> {
+    /** Floating label text. Animates above the input when focused or filled. */
+    label?: string;
+    /**
+     * Container style.
+     * @default 'filled'
+     */
+    variant?: TextFieldVariant;
+    /** Helper text displayed below the field. Hidden when `error` or `errorText` is active. */
+    supportingText?: string;
+    /** Error message. When provided, implicitly sets `error` to `true` and replaces `supportingText`. */
+    errorText?: string;
+    /**
+     * When `true`, renders the field in error state with error colors.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Disables text input and reduces opacity.
+     * @default false
+     */
+    disabled?: boolean;
+    /** MaterialCommunityIcons icon name rendered at the start of the field. */
+    leadingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /** MaterialCommunityIcons icon name rendered at the end of the field. */
+    trailingIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /** Called when the trailing icon is pressed. */
+    onTrailingIconPress?: () => void;
+    /**
+     * Override the container (background) color.
+     * Disabled state still uses the standard disabled appearance.
+     */
+    containerColor?: string;
+    /**
+     * Override the content (input text and icon) color.
+     * Error and disabled states take precedence.
+     */
+    contentColor?: string;
+    /** Additional style applied to the text input element. */
+    inputStyle?: StyleProp<TextStyle>;
+}
+
+declare function TextField({ value, onChangeText, label, placeholder, variant, supportingText, errorText, error, disabled, leadingIcon, trailingIcon, onTrailingIconPress, multiline, onFocus, onBlur, style, containerColor, contentColor, inputStyle, ...textInputProps }: TextFieldProps): react_jsx_runtime.JSX.Element;
+
+export { TextField, type TextFieldProps, type TextFieldVariant };