@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/dist/chip/index.js

@@ -26,29 +26,121 @@ module.exports = __toCommonJS(chip_exports);
 
 // src/chip/Chip.tsx
 var import_react = require("react");
-var import_react_native2 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
-var import_utils2 = require("@onlynative/utils");
 
-// src/chip/styles.ts
+// ../utils/dist/chunk-OQRDRRQA.mjs
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ../utils/dist/index.mjs
 var import_react_native = require("react-native");
-var import_utils = require("@onlynative/utils");
+var import_react_native2 = require("react-native");
+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})`;
+}
+function elevationStyle(level) {
+  if (import_react_native.Platform.OS === "web") {
+    const { shadowOffset, shadowOpacity, shadowRadius } = level;
+    if (shadowOpacity === 0) {
+      return { boxShadow: "none" };
+    }
+    return {
+      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
+    };
+  }
+  return {
+    shadowColor: level.shadowColor,
+    shadowOffset: {
+      width: level.shadowOffset.width,
+      height: level.shadowOffset.height
+    },
+    shadowOpacity: level.shadowOpacity,
+    shadowRadius: level.shadowRadius,
+    elevation: level.elevation
+  };
+}
+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_native3 = require("react-native");
 function getVariantColors(theme, variant, elevated, selected) {
-  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledLabelColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
-  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   if (variant === "filter" && selected) {
     return {
       backgroundColor: theme.colors.secondaryContainer,
       textColor: theme.colors.onSecondaryContainer,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
@@ -65,12 +157,12 @@ function getVariantColors(theme, variant, elevated, selected) {
       textColor: textColor2,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: (0, import_utils.blendColor)(
+      hoveredBackgroundColor: blendColor(
         theme.colors.surfaceContainerLow,
         textColor2,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.blendColor)(
+      pressedBackgroundColor: blendColor(
         theme.colors.surfaceContainerLow,
         textColor2,
         theme.stateLayer.pressedOpacity
@@ -86,12 +178,12 @@ function getVariantColors(theme, variant, elevated, selected) {
     textColor,
     borderColor: theme.colors.outline,
     borderWidth: 1,
-    hoveredBackgroundColor: (0, import_utils.blendColor)(
+    hoveredBackgroundColor: blendColor(
       theme.colors.surface,
       textColor,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils.blendColor)(
+    pressedBackgroundColor: blendColor(
       theme.colors.surface,
       textColor,
       theme.stateLayer.pressedOpacity
@@ -111,33 +203,33 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.textColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = (0, import_utils.blendColor)(
+    result.hoveredBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = (0, import_utils.blendColor)(
+    result.pressedBackgroundColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
     );
   } else if (contentColor) {
     if (colors.backgroundColor === "transparent") {
-      result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
+      result.hoveredBackgroundColor = alphaColor(
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = (0, import_utils.alphaColor)(
+      result.pressedBackgroundColor = alphaColor(
         contentColor,
         theme.stateLayer.pressedOpacity
       );
     } else {
-      result.hoveredBackgroundColor = (0, import_utils.blendColor)(
+      result.hoveredBackgroundColor = blendColor(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = (0, import_utils.blendColor)(
+      result.pressedBackgroundColor = blendColor(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.pressedOpacity
@@ -155,12 +247,12 @@ function createStyles(theme, variant, elevated, selected, hasLeadingContent, has
     contentColor
   );
   const labelStyle = theme.typography.labelLarge;
-  const elevationLevel0 = (0, import_utils.elevationStyle)(theme.elevation.level0);
-  const elevationLevel1 = (0, import_utils.elevationStyle)(theme.elevation.level1);
-  const elevationLevel2 = (0, import_utils.elevationStyle)(theme.elevation.level2);
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
   const isElevated = elevated && variant !== "input";
   const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -258,7 +350,7 @@ function Chip({
     variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
   );
   const needsIcons = Boolean(leadingIcon) || variant === "filter" && isSelected || showCloseIcon;
-  const MaterialCommunityIcons = needsIcons ? (0, import_utils2.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = needsIcons ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(
     () => createStyles(
@@ -283,7 +375,7 @@ function Chip({
     ]
   );
   const resolvedIconColor = (0, import_react.useMemo)(() => {
-    const base = import_react_native2.StyleSheet.flatten([
+    const base = import_react_native4.StyleSheet.flatten([
       styles.label,
       isDisabled ? styles.disabledLabel : void 0
     ]);
@@ -299,7 +391,7 @@ function Chip({
   );
   const renderLeadingContent = () => {
     if (variant === "input" && avatar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.avatar, children: avatar });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.View, { style: styles.avatar, children: avatar });
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -326,7 +418,7 @@ function Chip({
     return null;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react_native2.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -334,7 +426,7 @@ function Chip({
         disabled: isDisabled,
         ...variant === "filter" ? { selected: isSelected } : void 0
       },
-      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolveStyle(
         styles.container,
@@ -346,9 +438,9 @@ function Chip({
       ),
       children: [
         renderLeadingContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Text, { style: computedLabelStyle, children }),
         showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_native2.Pressable,
+          import_react_native4.Pressable,
           {
             onPress: onClose,
             accessibilityRole: "button",

package/dist/icon-button/index.js

@@ -26,18 +26,89 @@ module.exports = __toCommonJS(icon_button_exports);
 
 // src/icon-button/IconButton.tsx
 var import_react = require("react");
-var import_react_native2 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
-var import_utils2 = require("@onlynative/utils");
 
-// src/icon-button/styles.ts
+// ../utils/dist/chunk-OQRDRRQA.mjs
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ../utils/dist/index.mjs
 var import_react_native = require("react-native");
-var import_utils = require("@onlynative/utils");
+var import_react_native2 = require("react-native");
+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})`;
+}
+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_native3 = require("react-native");
 function createStyles(theme) {
-  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  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({
+  return import_react_native3.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -103,160 +174,160 @@ function createStyles(theme) {
     },
     // Hover states (M3: 8% state layer)
     hoveredFilled: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonal: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlined: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandard: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleSelected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     // Pressed states (M3: 12% state layer)
     pressedFilled: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonal: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlined: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandard: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleSelected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
@@ -289,7 +360,7 @@ function createStyles(theme) {
 var import_jsx_runtime = require("react/jsx-runtime");
 function getIconColor(variant, theme, disabled, isToggle, selected) {
   if (disabled) {
-    return (0, import_utils2.alphaColor)(theme.colors.onSurface, 0.38);
+    return alphaColor(theme.colors.onSurface, 0.38);
   }
   if (isToggle) {
     if (variant === "filled") {
@@ -439,7 +510,7 @@ function IconButton({
   ...props
 }) {
   var _a;
-  const MaterialCommunityIcons = (0, import_utils2.getMaterialCommunityIcons)();
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -459,14 +530,14 @@ function IconButton({
         borderWidth: 0
       },
       hovered: {
-        backgroundColor: (0, import_utils2.blendColor)(
+        backgroundColor: blendColor(
           containerColor,
           overlay,
           theme.stateLayer.hoveredOpacity
         )
       },
       pressed: {
-        backgroundColor: (0, import_utils2.blendColor)(
+        backgroundColor: blendColor(
           containerColor,
           overlay,
           theme.stateLayer.pressedOpacity
@@ -475,7 +546,7 @@ function IconButton({
     };
   }, [containerColor, resolvedIconColor, theme.stateLayer]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native2.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       accessibilityRole: "button",