@onlynative/components 0.1.0-alpha.0

package/dist/list/index.js

@@ -0,0 +1,300 @@
+"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/list/index.ts
+var list_exports = {};
+__export(list_exports, {
+  List: () => List,
+  ListDivider: () => ListDivider,
+  ListItem: () => ListItem
+});
+module.exports = __toCommonJS(list_exports);
+
+// src/list/List.tsx
+var import_react = require("react");
+var import_react_native2 = require("react-native");
+var import_core = require("@onlynative/core");
+
+// src/list/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/list/styles.ts
+var ITEM_PADDING_VERTICAL = 12;
+var INSET_START = 56;
+var MIN_HEIGHT = {
+  1: 56,
+  2: 72,
+  3: 88
+};
+function createListStyles(theme) {
+  return import_react_native.StyleSheet.create({
+    container: {
+      paddingVertical: theme.spacing.sm
+    }
+  });
+}
+function getItemColors(theme, containerColor) {
+  const base = containerColor != null ? containerColor : "transparent";
+  if (containerColor) {
+    return {
+      backgroundColor: containerColor,
+      hoveredBackgroundColor: blendColor(
+        containerColor,
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        containerColor,
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity
+      )
+    };
+  }
+  return {
+    backgroundColor: base,
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    )
+  };
+}
+function createListItemStyles(theme, lines, containerColor) {
+  const colors = getItemColors(theme, containerColor);
+  return import_react_native.StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: lines === 3 ? "flex-start" : "center",
+      minHeight: MIN_HEIGHT[lines],
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: ITEM_PADDING_VERTICAL,
+      backgroundColor: colors.backgroundColor
+    },
+    interactiveContainer: {
+      cursor: "pointer"
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      cursor: "auto"
+    },
+    disabledContentWrapper: {
+      flexDirection: "row",
+      flex: 1,
+      opacity: theme.stateLayer.disabledOpacity
+    },
+    leadingContent: {
+      marginEnd: theme.spacing.md
+    },
+    textBlock: {
+      flex: 1
+    },
+    overlineText: {
+      ...theme.typography.labelSmall,
+      color: theme.colors.onSurfaceVariant
+    },
+    headlineText: {
+      ...theme.typography.bodyLarge,
+      color: theme.colors.onSurface
+    },
+    supportingText: {
+      ...theme.typography.bodyMedium,
+      color: theme.colors.onSurfaceVariant
+    },
+    trailingBlock: {
+      marginStart: theme.spacing.md,
+      alignItems: "flex-end"
+    },
+    trailingSupportingText: {
+      ...theme.typography.labelSmall,
+      color: theme.colors.onSurfaceVariant
+    }
+  });
+}
+function createDividerStyles(theme, inset) {
+  return import_react_native.StyleSheet.create({
+    divider: {
+      height: 1,
+      backgroundColor: theme.colors.outlineVariant,
+      ...inset ? { marginStart: INSET_START } : void 0
+    }
+  });
+}
+
+// src/list/List.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function List({ children, style, ...props }) {
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(() => createListStyles(theme), [theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { ...props, style: [styles.container, style], children });
+}
+
+// src/list/ListItem.tsx
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+var import_core2 = require("@onlynative/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
+  if (supportingText && overlineText || supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1) {
+    return 3;
+  }
+  if (supportingText || overlineText) return 2;
+  return 1;
+}
+function ListItem({
+  headlineText,
+  supportingText,
+  overlineText,
+  trailingSupportingText,
+  leadingContent,
+  trailingContent,
+  onPress,
+  disabled = false,
+  containerColor,
+  supportingTextNumberOfLines = 1,
+  style,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isInteractive = onPress !== void 0;
+  const theme = (0, import_core2.useTheme)();
+  const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
+  const styles = (0, import_react2.useMemo)(
+    () => createListItemStyles(theme, lines, containerColor),
+    [theme, lines, containerColor]
+  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: styles.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.headlineText, numberOfLines: 1, children: headlineText }),
+      supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_native3.Text,
+        {
+          style: styles.supportingText,
+          numberOfLines: supportingTextNumberOfLines,
+          children: supportingText
+        }
+      )
+    ] }),
+    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: styles.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: styles.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+      trailingContent
+    ] })
+  ] });
+  if (!isInteractive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { ...props, style: [styles.container, style], children: content });
+  }
+  const resolvedStyle = (state) => [
+    styles.container,
+    styles.interactiveContainer,
+    state.hovered && !state.pressed && !isDisabled ? styles.hoveredContainer : void 0,
+    state.pressed && !isDisabled ? styles.pressedContainer : void 0,
+    isDisabled ? styles.disabledContainer : void 0,
+    typeof style === "function" ? style(state) : style
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native3.Pressable,
+    {
+      ...props,
+      role: "button",
+      accessibilityState: { disabled: isDisabled },
+      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress,
+      style: resolvedStyle,
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: styles.disabledContentWrapper, children: content }) : content
+    }
+  );
+}
+
+// src/list/ListDivider.tsx
+var import_react3 = require("react");
+var import_react_native4 = require("react-native");
+var import_core3 = require("@onlynative/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ListDivider({
+  inset = false,
+  style,
+  ...props
+}) {
+  const theme = (0, import_core3.useTheme)();
+  const styles = (0, import_react3.useMemo)(
+    () => createDividerStyles(theme, inset),
+    [theme, inset]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { ...props, style: [styles.divider, style] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List,
+  ListDivider,
+  ListItem
+});

package/dist/radio/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PressableProps } from 'react-native';
+
+interface RadioProps extends Omit<PressableProps, 'children'> {
+    /**
+     * Whether the radio button is selected.
+     * @default false
+     */
+    value?: boolean;
+    /** Callback fired when the radio is pressed. Receives the new value. */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Override the outer ring and inner dot color when selected.
+     * State-layer colors (hover, press) are derived automatically.
+     */
+    containerColor?: string;
+    /**
+     * Override the outer ring color when unselected.
+     */
+    contentColor?: string;
+}
+
+declare function Radio({ style, value, onValueChange, containerColor, contentColor, disabled, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+
+export { Radio, type RadioProps };

package/dist/radio/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/radio/index.ts
+var radio_exports = {};
+__export(radio_exports, {
+  Radio: () => Radio
+});
+module.exports = __toCommonJS(radio_exports);
+
+// src/radio/Radio.tsx
+var import_react = require("react");
+var import_react_native2 = require("react-native");
+var import_core = require("@onlynative/core");
+
+// src/radio/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})`;
+}
+
+// src/radio/styles.ts
+function getColors(theme, selected) {
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  if (selected) {
+    return {
+      borderColor: theme.colors.primary,
+      dotColor: theme.colors.primary,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBorderColor: disabledOnSurface38,
+      disabledDotColor: disabledOnSurface38
+    };
+  }
+  return {
+    borderColor: theme.colors.onSurfaceVariant,
+    dotColor: "transparent",
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBorderColor: disabledOnSurface38,
+    disabledDotColor: "transparent"
+  };
+}
+function applyColorOverrides(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (containerColor) {
+    result.borderColor = containerColor;
+    result.dotColor = containerColor;
+    result.hoveredBackgroundColor = alphaColor(
+      containerColor,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedBackgroundColor = alphaColor(
+      containerColor,
+      theme.stateLayer.pressedOpacity
+    );
+  }
+  if (contentColor) {
+    result.borderColor = contentColor;
+  }
+  return result;
+}
+function createStyles(theme, selected, containerColor, contentColor) {
+  const colors = applyColorOverrides(
+    theme,
+    getColors(theme, selected),
+    containerColor,
+    contentColor
+  );
+  const outerSize = 20;
+  const innerSize = 10;
+  const touchTarget = 48;
+  return import_react_native.StyleSheet.create({
+    container: {
+      width: touchTarget,
+      height: touchTarget,
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    hoveredContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.hoveredBackgroundColor
+    },
+    pressedContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      cursor: "auto"
+    },
+    outer: {
+      width: outerSize,
+      height: outerSize,
+      borderRadius: outerSize / 2,
+      borderWidth: 2,
+      borderColor: colors.borderColor,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    disabledOuter: {
+      borderColor: colors.disabledBorderColor
+    },
+    inner: {
+      width: innerSize,
+      height: innerSize,
+      borderRadius: innerSize / 2,
+      backgroundColor: colors.dotColor
+    },
+    disabledInner: {
+      backgroundColor: colors.disabledDotColor
+    }
+  });
+}
+
+// src/radio/Radio.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 Radio({
+  style,
+  value = false,
+  onValueChange,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isSelected = Boolean(value);
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(
+    () => createStyles(theme, isSelected, containerColor, contentColor),
+    [theme, isSelected, containerColor, contentColor]
+  );
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange == null ? void 0 : onValueChange(!isSelected);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native2.Pressable,
+    {
+      ...props,
+      accessibilityRole: "radio",
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: isSelected
+      },
+      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress: handlePress,
+      style: resolveStyle(
+        styles.container,
+        styles.hoveredContainer,
+        styles.pressedContainer,
+        styles.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native2.View,
+        {
+          style: [styles.outer, isDisabled ? styles.disabledOuter : void 0],
+          children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_native2.View,
+            {
+              style: [
+                styles.inner,
+                isDisabled ? styles.disabledInner : void 0
+              ]
+            }
+          ) : null
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio
+});

package/dist/switch/index.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { ComponentProps } from 'react';
+import { PressableProps } from 'react-native';
+
+interface SwitchProps extends Omit<PressableProps, 'children'> {
+    /**
+     * Whether the switch is toggled on.
+     * @default false
+     */
+    value?: boolean;
+    /** Callback fired when the switch is toggled. Receives the new value. */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Name of a MaterialCommunityIcons icon to show on the thumb when selected.
+     * @default 'check'
+     */
+    selectedIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /**
+     * Name of a MaterialCommunityIcons icon to show on the thumb when unselected.
+     * When provided, the thumb renders at the larger selected size.
+     */
+    unselectedIcon?: ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /**
+     * Override the track color.
+     * State-layer colors (hover, press) are derived automatically.
+     */
+    containerColor?: string;
+    /**
+     * Override the thumb and icon color.
+     */
+    contentColor?: string;
+}
+
+declare function Switch({ style, value, onValueChange, selectedIcon, unselectedIcon, containerColor, contentColor, disabled, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+export { Switch, type SwitchProps };