@onlynative/components 0.1.0-alpha.2 → 0.1.0

package/dist/appbar/index.js

@@ -1,9 +1,7 @@
 "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)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/appbar/index.ts
@@ -35,68 +25,23 @@ __export(appbar_exports, {
 module.exports = __toCommonJS(appbar_exports);
 
 // src/appbar/AppBar.tsx
-var import_react2 = require("react");
-var import_react_native6 = require("react-native");
+var import_react3 = require("react");
+var import_react_native5 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_core4 = require("@onlynative/core");
 
 // 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");
+var import_utils2 = require("@onlynative/utils");
 
 // 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
+var import_utils = require("@onlynative/utils");
 function createStyles(theme) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
   return import_react_native.StyleSheet.create({
     container: {
@@ -164,160 +109,160 @@ function createStyles(theme) {
     },
     // Hover states (M3: 8% state layer)
     hoveredFilled: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonal: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlined: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandard: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleSelected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     // Pressed states (M3: 12% state layer)
     pressedFilled: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonal: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleUnselected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlined: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleSelected: {
-      backgroundColor: blendColor(
+      backgroundColor: (0, import_utils.blendColor)(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandard: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleUnselected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleSelected: {
-      backgroundColor: alphaColor(
+      backgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
@@ -350,7 +295,7 @@ function createStyles(theme) {
 var import_jsx_runtime = require("react/jsx-runtime");
 function getIconColor(variant, theme, disabled, isToggle, selected) {
   if (disabled) {
-    return alphaColor(theme.colors.onSurface, 0.38);
+    return (0, import_utils2.alphaColor)(theme.colors.onSurface, 0.38);
   }
   if (isToggle) {
     if (variant === "filled") {
@@ -500,6 +445,7 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = (0, import_utils2.getMaterialCommunityIcons)();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -519,14 +465,14 @@ function IconButton({
         borderWidth: 0
       },
       hovered: {
-        backgroundColor: blendColor(
+        backgroundColor: (0, import_utils2.blendColor)(
           containerColor,
           overlay,
           theme.stateLayer.hoveredOpacity
         )
       },
       pressed: {
-        backgroundColor: blendColor(
+        backgroundColor: (0, import_utils2.blendColor)(
           containerColor,
           overlay,
           theme.stateLayer.pressedOpacity
@@ -565,7 +511,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,
@@ -577,6 +523,7 @@ function IconButton({
 }
 
 // src/typography/Typography.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");
@@ -600,6 +547,13 @@ function Typography({
   const theme = (0, import_core2.useTheme)();
   const typographyStyle = theme.typography[variant];
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  const lineHeightFix = (0, import_react2.useMemo)(() => {
+    if (!style) return void 0;
+    const flat = import_react_native3.StyleSheet.flatten(style);
+    if (!(flat == null ? void 0 : flat.fontSize) || flat.lineHeight) return void 0;
+    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize;
+    return { lineHeight: Math.ceil(flat.fontSize * ratio) };
+  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
@@ -609,6 +563,7 @@ function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : void 0
       ],
       children
@@ -616,19 +571,16 @@ function Typography({
   );
 }
 
-// src/utils/rtl.ts
-var import_react_native4 = require("react-native");
-function selectRTL(ltr, rtl) {
-  return import_react_native4.I18nManager.isRTL ? rtl : ltr;
-}
+// src/appbar/AppBar.tsx
+var import_utils3 = require("@onlynative/utils");
 
 // src/appbar/styles.ts
-var import_react_native5 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_core3 = require("@onlynative/core");
 function createStyles2(theme) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core3.defaultTopAppBarTokens;
-  return import_react_native5.StyleSheet.create({
+  return import_react_native4.StyleSheet.create({
     root: {
       backgroundColor: theme.colors.surface
     },
@@ -717,10 +669,10 @@ function createStyles2(theme) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native6.Platform.OS === "ios") {
-    return selectRTL("chevron-left", "chevron-right");
+  if (import_react_native5.Platform.OS === "ios") {
+    return (0, import_utils3.selectRTL)("chevron-left", "chevron-right");
   }
-  return selectRTL("arrow-left", "arrow-right");
+  return (0, import_utils3.selectRTL)("arrow-left", "arrow-right");
 }
 var titleVariantBySize = {
   small: "titleLarge",
@@ -748,7 +700,7 @@ function withTopInset(enabled, content, style) {
   if (enabled) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaView, { edges: ["top"], style, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style, children: content });
 }
 function measureWidth(event) {
   return Math.round(event.nativeEvent.layout.width);
@@ -771,10 +723,10 @@ function AppBar({
   var _a;
   const theme = (0, import_core4.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core4.defaultTopAppBarTokens;
-  const styles = (0, import_react2.useMemo)(() => createStyles2(theme), [theme]);
-  const [leadingWidth, setLeadingWidth] = (0, import_react2.useState)(0);
-  const [actionsWidth, setActionsWidth] = (0, import_react2.useState)(0);
-  const titleColorStyle = (0, import_react2.useMemo)(
+  const styles = (0, import_react3.useMemo)(() => createStyles2(theme), [theme]);
+  const [leadingWidth, setLeadingWidth] = (0, import_react3.useState)(0);
+  const [actionsWidth, setActionsWidth] = (0, import_react3.useState)(0);
+  const titleColorStyle = (0, import_react3.useMemo)(
     () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
     [contentColor, theme.colors.onSurface]
   );
@@ -785,22 +737,22 @@ function AppBar({
   const titleStartInset = topAppBar.horizontalPadding + Math.max(topAppBar.titleStartInset, leadingWidth);
   const compactTitleEndInset = topAppBar.horizontalPadding + actionsWidth;
   const centeredSideInset = topAppBar.horizontalPadding + Math.max(leadingWidth, actionsWidth);
-  const expandedTitleInsetStyle = (0, import_react2.useMemo)(
+  const expandedTitleInsetStyle = (0, import_react3.useMemo)(
     () => ({ paddingStart: titleStartInset }),
     [titleStartInset]
   );
-  const overlayTitleInsetStyle = (0, import_react2.useMemo)(
+  const overlayTitleInsetStyle = (0, import_react3.useMemo)(
     () => isCenterAligned ? { start: centeredSideInset, end: centeredSideInset } : { start: titleStartInset, end: compactTitleEndInset },
     [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset]
   );
-  const leadingContent = (0, import_react2.useMemo)(() => {
+  const leadingContent = (0, import_react3.useMemo)(() => {
     if (leading) {
       return leading;
     }
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       IconButton,
       {
         icon: getBackIcon(),
@@ -819,15 +771,15 @@ function AppBar({
     styles.iconFrame,
     theme.colors.onSurface
   ]);
-  const actionsContent = (0, import_react2.useMemo)(() => {
+  const actionsContent = (0, import_react3.useMemo)(() => {
     if (trailing) {
       return trailing;
     }
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native6.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native5.View,
       {
         style: styles.iconFrame,
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -846,7 +798,7 @@ function AppBar({
       `${String(action.icon)}-${index}`
     )) });
   }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing]);
-  const onLeadingLayout = (0, import_react2.useCallback)((event) => {
+  const onLeadingLayout = (0, import_react3.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -855,7 +807,7 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const onActionsLayout = (0, import_react2.useCallback)((event) => {
+  const onActionsLayout = (0, import_react3.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setActionsWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -864,9 +816,9 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: styles.topRow, children: [
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native5.View, { style: styles.topRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native6.View,
+      import_react_native5.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
@@ -874,9 +826,9 @@ function AppBar({
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: styles.topRowSpacer }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native6.View,
+      import_react_native5.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
@@ -898,10 +850,10 @@ function AppBar({
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native5.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
       topRow,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native6.View,
+        import_react_native5.View,
         {
           style: [
             styles.expandedTitleContainer,
@@ -925,11 +877,11 @@ function AppBar({
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: styles.smallContainer, children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native5.View, { style: styles.smallContainer, children: [
     topRow,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Typography,
       {
         ...APP_BAR_TITLE_TEXT_PROPS,
@@ -944,7 +896,7 @@ function AppBar({
       }
     ) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {