@onlynative/components 0.1.0 → 0.1.1-alpha.1

package/dist/list/index.js

@@ -28,12 +28,59 @@ module.exports = __toCommonJS(list_exports);
 
 // src/list/List.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");
 
 // src/list/styles.ts
+var import_react_native3 = require("react-native");
+
+// ../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})`;
+}
+
+// src/list/styles.ts
 var ITEM_PADDING_VERTICAL = 12;
 var INSET_START = 56;
 var MIN_HEIGHT = {
@@ -42,7 +89,7 @@ var MIN_HEIGHT = {
   3: 88
 };
 function createListStyles(theme) {
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm
     }
@@ -53,12 +100,12 @@ function getItemColors(theme, containerColor) {
   if (containerColor) {
     return {
       backgroundColor: containerColor,
-      hoveredBackgroundColor: (0, import_utils.blendColor)(
+      hoveredBackgroundColor: blendColor(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.blendColor)(
+      pressedBackgroundColor: blendColor(
         containerColor,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -67,11 +114,11 @@ function getItemColors(theme, containerColor) {
   }
   return {
     backgroundColor: base,
-    hoveredBackgroundColor: (0, import_utils.alphaColor)(
+    hoveredBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils.alphaColor)(
+    pressedBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     )
@@ -79,7 +126,7 @@ function getItemColors(theme, containerColor) {
 }
 function createListItemStyles(theme, lines, containerColor) {
   const colors = getItemColors(theme, containerColor);
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     container: {
       flexDirection: "row",
       alignItems: lines === 3 ? "flex-start" : "center",
@@ -134,7 +181,7 @@ function createListItemStyles(theme, lines, containerColor) {
   });
 }
 function createDividerStyles(theme, inset) {
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     divider: {
       height: 1,
       backgroundColor: theme.colors.outlineVariant,
@@ -148,12 +195,12 @@ 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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.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_react_native5 = require("react-native");
 var import_core2 = require("@onlynative/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
@@ -186,12 +233,12 @@ function ListItem({
     [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 }),
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.View, { style: styles.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native5.View, { style: styles.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.Text, { style: styles.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.Text, { style: styles.headlineText, numberOfLines: 1, children: headlineText }),
       supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native3.Text,
+        import_react_native5.Text,
         {
           style: styles.supportingText,
           numberOfLines: supportingTextNumberOfLines,
@@ -199,13 +246,13 @@ function ListItem({
         }
       )
     ] }),
-    (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 != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native5.View, { style: styles.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.View, { ...props, style: [styles.container, style], children: content });
   }
   const resolvedStyle = (state) => [
     styles.container,
@@ -216,23 +263,23 @@ function ListItem({
     typeof style === "function" ? style(state) : style
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native3.Pressable,
+    import_react_native5.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native5.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
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native5.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_react_native6 = require("react-native");
 var import_core3 = require("@onlynative/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ListDivider({
@@ -245,7 +292,7 @@ function ListDivider({
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { ...props, style: [styles.divider, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { ...props, style: [styles.divider, style] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/radio/index.js

@@ -26,23 +26,52 @@ module.exports = __toCommonJS(radio_exports);
 
 // src/radio/Radio.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");
 
 // src/radio/styles.ts
+var import_react_native3 = require("react-native");
+
+// ../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})`;
+}
+
+// src/radio/styles.ts
 function getColors(theme, selected) {
-  const disabledOnSurface38 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       borderColor: theme.colors.primary,
       dotColor: theme.colors.primary,
-      hoveredBackgroundColor: (0, import_utils.alphaColor)(
+      hoveredBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: (0, import_utils.alphaColor)(
+      pressedBackgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -53,11 +82,11 @@ function getColors(theme, selected) {
   return {
     borderColor: theme.colors.onSurfaceVariant,
     dotColor: "transparent",
-    hoveredBackgroundColor: (0, import_utils.alphaColor)(
+    hoveredBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: (0, import_utils.alphaColor)(
+    pressedBackgroundColor: alphaColor(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -71,11 +100,11 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
   if (containerColor) {
     result.borderColor = containerColor;
     result.dotColor = containerColor;
-    result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
+    result.hoveredBackgroundColor = alphaColor(
       containerColor,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = (0, import_utils.alphaColor)(
+    result.pressedBackgroundColor = alphaColor(
       containerColor,
       theme.stateLayer.pressedOpacity
     );
@@ -95,7 +124,7 @@ function createStyles(theme, selected, containerColor, contentColor) {
   const outerSize = 20;
   const innerSize = 10;
   const touchTarget = 48;
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     container: {
       width: touchTarget,
       height: touchTarget,
@@ -180,7 +209,7 @@ function Radio({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native2.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       accessibilityRole: "radio",
@@ -188,7 +217,7 @@ function Radio({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle(
@@ -200,11 +229,11 @@ function Radio({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native2.View,
+        import_react_native4.View,
         {
           style: [styles.outer, isDisabled ? styles.disabledOuter : void 0],
           children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_native2.View,
+            import_react_native4.View,
             {
               style: [
                 styles.inner,

package/dist/switch/index.js

@@ -26,27 +26,98 @@ module.exports = __toCommonJS(switch_exports);
 
 // src/switch/Switch.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/switch/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/switch/styles.ts
+var import_react_native3 = require("react-native");
 function getColors(theme, selected) {
-  const disabledOnSurface12 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledOnSurface38 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
+  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
   if (selected) {
     return {
       trackColor: theme.colors.primary,
       thumbColor: theme.colors.onPrimary,
       iconColor: theme.colors.onPrimaryContainer,
-      hoveredTrackColor: (0, import_utils.blendColor)(
+      hoveredTrackColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedTrackColor: (0, import_utils.blendColor)(
+      pressedTrackColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -63,12 +134,12 @@ function getColors(theme, selected) {
     trackColor: theme.colors.surfaceContainerHighest,
     thumbColor: theme.colors.outline,
     iconColor: theme.colors.surfaceContainerHighest,
-    hoveredTrackColor: (0, import_utils.blendColor)(
+    hoveredTrackColor: blendColor(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedTrackColor: (0, import_utils.blendColor)(
+    pressedTrackColor: blendColor(
       theme.colors.surfaceContainerHighest,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -92,12 +163,12 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.thumbColor;
     result.trackColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredTrackColor = (0, import_utils.blendColor)(
+    result.hoveredTrackColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedTrackColor = (0, import_utils.blendColor)(
+    result.pressedTrackColor = blendColor(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -120,7 +191,7 @@ function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
   const trackHeight = 32;
   const trackPadding = 4;
   const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     track: {
       width: trackWidth,
       height: trackHeight,
@@ -159,7 +230,7 @@ function createStyles(theme, selected, hasIcon, containerColor, contentColor) {
       color: colors.iconColor
     },
     disabledIconColor: {
-      color: (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38)
+      color: alphaColor(theme.colors.onSurface, 0.38)
     }
   });
 }
@@ -204,7 +275,7 @@ function Switch({
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
   const resolvedIconColor = (0, import_react.useMemo)(() => {
-    const base = import_react_native2.StyleSheet.flatten([
+    const base = import_react_native4.StyleSheet.flatten([
       styles.iconColor,
       isDisabled ? styles.disabledIconColor : void 0
     ]);
@@ -216,10 +287,10 @@ function Switch({
     }
   };
   const iconName = isSelected ? selectedIcon : unselectedIcon;
-  const MaterialCommunityIcons = iconName ? (0, import_utils2.getMaterialCommunityIcons)() : null;
+  const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native2.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       accessibilityRole: "switch",
@@ -227,7 +298,7 @@ function Switch({
         disabled: isDisabled,
         checked: isSelected
       },
-      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native4.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress: handlePress,
       style: resolveStyle(
@@ -239,7 +310,7 @@ function Switch({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_native2.View,
+        import_react_native4.View,
         {
           style: [styles.thumb, isDisabled ? styles.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(