@onlynative/components 0.1.0-alpha.2 → 0.1.0-alpha.3

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,17 +25,37 @@ __export(appbar_exports, {
 module.exports = __toCommonJS(appbar_exports);
 
 // src/appbar/AppBar.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_native6 = 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");
 
+// src/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/icon-button/styles.ts
 var import_react_native = require("react-native");
 
@@ -500,6 +510,7 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -565,7 +576,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,
@@ -577,6 +588,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 +612,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 +628,7 @@ function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : void 0
       ],
       children
@@ -771,10 +791,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,15 +805,15 @@ 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;
     }
@@ -819,7 +839,7 @@ function AppBar({
     styles.iconFrame,
     theme.colors.onSurface
   ]);
-  const actionsContent = (0, import_react2.useMemo)(() => {
+  const actionsContent = (0, import_react3.useMemo)(() => {
     if (trailing) {
       return trailing;
     }
@@ -846,7 +866,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 +875,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) {

package/dist/button/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/button/index.ts
@@ -35,13 +25,33 @@ __export(button_exports, {
 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/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/button/styles.ts
 var import_react_native2 = require("react-native");
 
@@ -393,6 +403,7 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const resolvedIconColor = (0, import_react.useMemo)(() => {
     const base = import_react_native4.StyleSheet.flatten([
       styles.label,
@@ -426,7 +437,7 @@ function Button({
       ),
       children: [
         leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: leadingIcon,
             size: iconSize,
@@ -436,7 +447,7 @@ function Button({
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: trailingIcon,
             size: iconSize,

package/dist/checkbox/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/checkbox/index.ts
@@ -35,11 +25,31 @@ __export(checkbox_exports, {
 module.exports = __toCommonJS(checkbox_exports);
 
 // src/checkbox/Checkbox.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/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/checkbox/styles.ts
 var import_react_native = require("react-native");
 
@@ -237,6 +247,7 @@ function Checkbox({
 }) {
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
+  const MaterialCommunityIcons = isChecked ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(
     () => createStyles(theme, isChecked, containerColor, contentColor),
@@ -275,7 +286,7 @@ function Checkbox({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.box, isDisabled ? styles.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: "check",
           size: 14,

package/dist/chip/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/chip/index.ts
@@ -35,11 +25,31 @@ __export(chip_exports, {
 module.exports = __toCommonJS(chip_exports);
 
 // src/chip/Chip.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native3 = require("react-native");
 var import_core = require("@onlynative/core");
 
+// src/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/chip/styles.ts
 var import_react_native2 = require("react-native");
 
@@ -336,6 +346,8 @@ function Chip({
   const hasLeadingContent = Boolean(
     variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
   );
+  const needsIcons = Boolean(leadingIcon) || variant === "filter" && isSelected || showCloseIcon;
+  const MaterialCommunityIcons = needsIcons ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(
     () => createStyles(
@@ -380,7 +392,7 @@ function Chip({
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: leadingIcon,
           size: iconSize,
@@ -391,7 +403,7 @@ function Chip({
     }
     if (variant === "filter" && isSelected) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: "check",
           size: iconSize,
@@ -433,7 +445,7 @@ function Chip({
             hitSlop: 4,
             style: styles.closeButton,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_MaterialCommunityIcons.default,
+              MaterialCommunityIcons,
               {
                 name: "close",
                 size: iconSize,

package/dist/icon-button/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/icon-button/index.ts
@@ -35,11 +25,31 @@ __export(icon_button_exports, {
 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/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/icon-button/styles.ts
 var import_react_native = require("react-native");
 
@@ -494,6 +504,7 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -559,7 +570,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,