@onlynative/components 0.1.0-alpha.0

package/dist/icon-button/index.js

@@ -0,0 +1,575 @@
+"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/icon-button/index.ts
+var icon_button_exports = {};
+__export(icon_button_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(icon_button_exports);
+
+// src/icon-button/IconButton.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/icon-button/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/icon-button/styles.ts
+function createStyles(theme) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
+  return import_react_native.StyleSheet.create({
+    container: {
+      borderRadius: theme.shape.cornerFull,
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    sizeSmall: {
+      width: 32,
+      height: 32
+    },
+    sizeMedium: {
+      width: 40,
+      height: 40
+    },
+    sizeLarge: {
+      width: 48,
+      height: 48
+    },
+    colorFilled: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary,
+      borderWidth: 0
+    },
+    colorFilledToggleUnselected: {
+      backgroundColor: toggleUnselectedContainerColor,
+      borderColor: toggleUnselectedContainerColor,
+      borderWidth: 0
+    },
+    colorFilledToggleSelected: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary,
+      borderWidth: 0
+    },
+    colorTonal: {
+      backgroundColor: theme.colors.secondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0
+    },
+    colorTonalToggleUnselected: {
+      backgroundColor: toggleUnselectedContainerColor,
+      borderColor: toggleUnselectedContainerColor,
+      borderWidth: 0
+    },
+    colorTonalToggleSelected: {
+      backgroundColor: theme.colors.secondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0
+    },
+    colorOutlined: {
+      borderColor: theme.colors.outline,
+      borderWidth: 1
+    },
+    colorOutlinedToggleSelected: {
+      backgroundColor: theme.colors.inverseSurface,
+      borderColor: theme.colors.inverseSurface,
+      borderWidth: 0
+    },
+    colorStandard: {
+      borderWidth: 0
+    },
+    colorStandardToggleSelected: {
+      borderWidth: 0
+    },
+    // Hover states (M3: 8% state layer)
+    hoveredFilled: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredFilledToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredFilledToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredTonal: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredTonalToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredTonalToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredOutlined: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredOutlinedToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredOutlinedToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.inverseSurface,
+        theme.colors.inverseOnSurface,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredStandard: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredStandardToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredStandardToggleSelected: {
+      backgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    // Pressed states (M3: 12% state layer)
+    pressedFilled: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedFilledToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedFilledToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedTonal: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedTonalToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedTonalToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedOutlined: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedOutlinedToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedOutlinedToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.inverseSurface,
+        theme.colors.inverseOnSurface,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedStandard: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedStandardToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedStandardToggleSelected: {
+      backgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    // Disabled states
+    disabledFilled: {
+      backgroundColor: disabledContainerColor,
+      borderColor: disabledContainerColor,
+      cursor: "auto"
+    },
+    disabledTonal: {
+      backgroundColor: disabledContainerColor,
+      borderColor: disabledContainerColor,
+      cursor: "auto"
+    },
+    disabledOutlined: {
+      backgroundColor: "transparent",
+      borderColor: disabledOutlineColor,
+      cursor: "auto"
+    },
+    disabledStandard: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      cursor: "auto"
+    }
+  });
+}
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function getIconColor(variant, theme, disabled, isToggle, selected) {
+  if (disabled) {
+    return alphaColor(theme.colors.onSurface, 0.38);
+  }
+  if (isToggle) {
+    if (variant === "filled") {
+      return selected ? theme.colors.onPrimary : theme.colors.primary;
+    }
+    if (variant === "tonal") {
+      return selected ? theme.colors.onSecondaryContainer : theme.colors.onSurfaceVariant;
+    }
+    if (variant === "outlined") {
+      return selected ? theme.colors.inverseOnSurface : theme.colors.onSurfaceVariant;
+    }
+    return selected ? theme.colors.primary : theme.colors.onSurfaceVariant;
+  }
+  if (variant === "filled") {
+    return theme.colors.onPrimary;
+  }
+  if (variant === "tonal") {
+    return theme.colors.onSecondaryContainer;
+  }
+  return theme.colors.onSurfaceVariant;
+}
+function getColorStyle(styles, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles.colorTonalToggleSelected : styles.colorTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles.colorOutlinedToggleSelected : styles.colorOutlined;
+    }
+    if (variant === "standard") {
+      return selected ? styles.colorStandardToggleSelected : styles.colorStandard;
+    }
+    return selected ? styles.colorFilledToggleSelected : styles.colorFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles.colorTonal;
+  }
+  if (variant === "outlined") {
+    return styles.colorOutlined;
+  }
+  if (variant === "standard") {
+    return styles.colorStandard;
+  }
+  return styles.colorFilled;
+}
+function getSizeStyle(styles, size) {
+  if (size === "small") {
+    return styles.sizeSmall;
+  }
+  if (size === "large") {
+    return styles.sizeLarge;
+  }
+  return styles.sizeMedium;
+}
+function getIconPixelSize(size) {
+  if (size === "small") {
+    return 18;
+  }
+  if (size === "large") {
+    return 28;
+  }
+  return 24;
+}
+function getDefaultHitSlop(size) {
+  if (size === "small") {
+    return 8;
+  }
+  if (size === "large") {
+    return 0;
+  }
+  return 4;
+}
+function getHoveredStyle(styles, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles.hoveredTonalToggleSelected : styles.hoveredTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles.hoveredOutlinedToggleSelected : styles.hoveredOutlinedToggleUnselected;
+    }
+    if (variant === "standard") {
+      return selected ? styles.hoveredStandardToggleSelected : styles.hoveredStandardToggleUnselected;
+    }
+    return selected ? styles.hoveredFilledToggleSelected : styles.hoveredFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles.hoveredTonal;
+  }
+  if (variant === "outlined") {
+    return styles.hoveredOutlined;
+  }
+  if (variant === "standard") {
+    return styles.hoveredStandard;
+  }
+  return styles.hoveredFilled;
+}
+function getPressedStyle(styles, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles.pressedTonalToggleSelected : styles.pressedTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles.pressedOutlinedToggleSelected : styles.pressedOutlinedToggleUnselected;
+    }
+    if (variant === "standard") {
+      return selected ? styles.pressedStandardToggleSelected : styles.pressedStandardToggleUnselected;
+    }
+    return selected ? styles.pressedFilledToggleSelected : styles.pressedFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles.pressedTonal;
+  }
+  if (variant === "outlined") {
+    return styles.pressedOutlined;
+  }
+  if (variant === "standard") {
+    return styles.pressedStandard;
+  }
+  return styles.pressedFilled;
+}
+function getDisabledStyle(styles, variant) {
+  if (variant === "tonal") {
+    return styles.disabledTonal;
+  }
+  if (variant === "outlined") {
+    return styles.disabledOutlined;
+  }
+  if (variant === "standard") {
+    return styles.disabledStandard;
+  }
+  return styles.disabledFilled;
+}
+function IconButton({
+  icon,
+  selectedIcon,
+  iconColor,
+  contentColor,
+  containerColor,
+  style,
+  onPress,
+  disabled = false,
+  variant = "filled",
+  selected,
+  size = "medium",
+  hitSlop,
+  accessibilityLabel,
+  ...props
+}) {
+  var _a;
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
+  const isDisabled = Boolean(disabled);
+  const isToggle = selected !== void 0;
+  const isSelected = Boolean(selected);
+  const resolvedIconColor = (_a = contentColor != null ? contentColor : iconColor) != null ? _a : getIconColor(variant, theme, isDisabled, isToggle, isSelected);
+  const displayIcon = isToggle && isSelected && selectedIcon ? selectedIcon : icon;
+  const iconPixelSize = getIconPixelSize(size);
+  const accessibilityState = isToggle ? { disabled: isDisabled, selected: isSelected } : { disabled: isDisabled };
+  const containerOverrides = (0, import_react.useMemo)(() => {
+    if (!containerColor) return null;
+    const overlay = resolvedIconColor;
+    return {
+      base: {
+        backgroundColor: containerColor,
+        borderColor: containerColor,
+        borderWidth: 0
+      },
+      hovered: {
+        backgroundColor: blendColor(
+          containerColor,
+          overlay,
+          theme.stateLayer.hoveredOpacity
+        )
+      },
+      pressed: {
+        backgroundColor: blendColor(
+          containerColor,
+          overlay,
+          theme.stateLayer.pressedOpacity
+        )
+      }
+    };
+  }, [containerColor, resolvedIconColor, theme.stateLayer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native2.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState,
+      disabled: isDisabled,
+      hitSlop: hitSlop != null ? hitSlop : getDefaultHitSlop(size),
+      onPress,
+      style: ({
+        pressed,
+        hovered
+      }) => {
+        const base = [
+          styles.container,
+          getSizeStyle(styles, size),
+          getColorStyle(styles, variant, isToggle, isSelected),
+          containerOverrides == null ? void 0 : containerOverrides.base,
+          hovered && !pressed && !isDisabled ? containerOverrides ? containerOverrides.hovered : getHoveredStyle(styles, variant, isToggle, isSelected) : void 0,
+          pressed && !isDisabled ? containerOverrides ? containerOverrides.pressed : getPressedStyle(styles, variant, isToggle, isSelected) : void 0,
+          isDisabled ? getDisabledStyle(styles, variant) : void 0
+        ];
+        if (typeof style === "function") {
+          base.push(style({ pressed }));
+        } else if (style) {
+          base.push(style);
+        }
+        return base;
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_MaterialCommunityIcons.default,
+        {
+          name: displayIcon,
+          size: iconPixelSize,
+          color: resolvedIconColor
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export { Typography, TypographyProps, TypographyVariant } from './typography/index.js';
+export { Box, BoxProps, Column, ColumnProps, Grid, GridProps, Layout, LayoutProps, Row, RowProps, SpacingValue } from './layout/index.js';
+export { Button, ButtonProps, ButtonVariant } from './button/index.js';
+export { IconButton } from './icon-button/index.js';
+export { I as IconButtonProps, a as IconButtonSize, b as IconButtonVariant } from './types-D3hlyvz-.js';
+export { AppBar, AppBarAction, AppBarProps, AppBarVariant } from './appbar/index.js';
+export { Card, CardProps, CardVariant } from './card/index.js';
+export { Chip, ChipProps, ChipVariant } from './chip/index.js';
+export { Checkbox, CheckboxProps } from './checkbox/index.js';
+export { Radio, RadioProps } from './radio/index.js';
+export { Switch, SwitchProps } from './switch/index.js';
+export { TextField, TextFieldProps, TextFieldVariant } from './text-field/index.js';
+export { List, ListDivider, ListDividerProps, ListItem, ListItemLines, ListItemProps, ListProps } from './list/index.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-native';
+import 'react-native-safe-area-context';
+import '@onlynative/core';
+import '@expo/vector-icons/MaterialCommunityIcons';