Feature v1.0b mono

.github/workflows/pages.yml

@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - main
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -67,11 +68,6 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: workspaces/docs/dist
-
       - name: Deploy artifact
         id: deployment
         uses: actions/deploy-pages@v5

package.json

@@ -3,7 +3,7 @@
 	"license": "MIT",
 	"readme": "./README.md",
 	"author": "ImRoodyDev <> (https://github.com/imroodydev)",
-	"homepage": "https://github.com/imroodydev/react-native-cross-elements#readme",
+	"homepage": "https://imroodydev.github.io/react-native-cross-elements/",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/imroodydev/react-native-cross-elements.git"
@@ -21,6 +21,7 @@
 	},
 	"scripts": {
 		"start": "npm run start -w docs",
+		"build:pkg:local": "npm run build:local -w react-native-cross-elements",
 		"build:pkg": "npm run build -w react-native-cross-elements"
 	}
 }

workspaces/docs/app.json

@@ -5,16 +5,26 @@
 		"version": "1.0.0",
 		"scheme": "docs",
 		"userInterfaceStyle": "automatic",
-
+		"newArchEnabled": true,
 		"platforms": ["ios", "android", "web"],
+		"ios": {
+			"supportsTablet": true
+		},
+		"android": {
+			"adaptiveIcon": {
+				"backgroundColor": "#E6F4FE"
+			},
+			"edgeToEdgeEnabled": true
+		},
 		"web": {
 			"bundler": "metro",
 			"output": "static"
 		},
 		"plugins": ["expo-router"],
 		"experiments": {
 			"typedRoutes": true,
-			"baseUrl": "/react-native-cross-elements"
+			"baseUrl": "/react-native-cross-elements",
+			"autolinkingModuleResolution": true
 		},
 		"backgroundColor": "#09090b"
 	}

workspaces/docs/app/(docs)/components/auto-detect-buttons-slider.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { View, Text } from 'react-native';
+import { AutoDetectButtonsSlider } from 'react-native-cross-elements';
 import { DocPage, Callout } from '../../../components/DocPage';
 import { CodeBlock } from '../../../components/CodeBlock';
 import { ComponentPreview } from '../../../components/ComponentPreview';
@@ -76,30 +77,24 @@ function AutoSliderDemo() {
 	const options = ['One', 'Two', 'Three', 'Four'];
 	return (
 		<View style={{ gap: 16, alignItems: 'center' }}>
-			<View style={{ flexDirection: 'row', backgroundColor: '#18181b', borderRadius: 99, padding: 4, gap: 2 }}>
-				{options.map((opt, i) => (
-					<Pressable
-						key={i}
-						onPress={() => setSelected(i)}
-						style={{
-							paddingHorizontal: 14,
-							paddingVertical: 8,
-							borderRadius: 99,
-							backgroundColor: i === selected ? '#6366f1' : 'transparent',
-						}}
-					>
-						<Text
-							style={{
-								color: i === selected ? '#ffffff' : '#71717a',
-								fontWeight: i === selected ? '600' : '400',
-								fontSize: 14,
-							}}
-						>
-							{opt}
-						</Text>
-					</Pressable>
-				))}
-			</View>
+			<AutoDetectButtonsSlider
+				options={options}
+				initialIndex={selected}
+				onSelect={setSelected}
+				sliderContainerStyle={{
+					backgroundColor: '#18181b',
+					borderRadius: 9999,
+					padding: 4,
+				}}
+				sliderStyle={{ backgroundColor: '#6366f1' }}
+				sliderItemButtonStyle={() => ({ backgroundColor: 'transparent' })}
+				sliderItemTextStyle={({ isSelected }) => ({
+					color: isSelected ? '#ffffff' : '#71717a',
+					fontWeight: isSelected ? '600' : '400',
+					fontSize: 14,
+				})}
+				style={{ width: 320, height: 44 }}
+			/>
 			<Text style={{ color: '#52525b', fontSize: 13 }}>Selected: {options[selected]}</Text>
 		</View>
 	);

workspaces/docs/components/Navbar.tsx

@@ -50,7 +50,6 @@ export function Navbar({ onMenuPress }: { onMenuPress?: () => void }) {
 
 			{/* Right — Search + GitHub + optional hamburger */}
 			<View style={styles.navRight}>
-				{isWide && <SearchButton />}
 				<Pressable
 					onPress={() =>
 						Platform.OS === 'web'

workspaces/docs/global.css

@@ -1,62 +1,6 @@
+@import 'styles/app.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-	html,
-	body {
-		background-color: #09090b;
-		color: #fafafa;
-		min-height: 100%;
-		margin: 0;
-		padding: 0;
-		overflow-x: hidden;
-		overflow-y: auto;
-		scrollbar-color: #3f3f46 #09090b;
-		scrollbar-width: thin;
-		-webkit-font-smoothing: antialiased;
-	}
-
-	#root {
-		min-height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	::-webkit-scrollbar {
-		width: 12px;
-		height: 12px;
-	}
-
-	::-webkit-scrollbar-track {
-		background: #09090b;
-	}
-
-	::-webkit-scrollbar-thumb {
-		background: #3f3f46;
-		border-radius: 999px;
-		border: 3px solid #09090b;
-	}
-
-	::-webkit-scrollbar-thumb:hover {
-		background: #52525b;
-	}
-
-	.docs-flat-input {
-		appearance: none;
-		-webkit-appearance: none;
-		background: transparent !important;
-		border-radius: 0 !important;
-		box-shadow: none !important;
-		color: #e4e4e7;
-		outline: none !important;
-	}
-
-	.docs-flat-input:-webkit-autofill,
-	.docs-flat-input:-webkit-autofill:hover,
-	.docs-flat-input:-webkit-autofill:focus {
-		-webkit-text-fill-color: #e4e4e7;
-		box-shadow: 0 0 0 1000px transparent inset !important;
-		transition: background-color 9999s ease-out;
-	}
-}
+@tailwind variants;

workspaces/docs/metro.config.js

@@ -2,51 +2,66 @@ const { getDefaultConfig } = require('expo/metro-config');
 const { withNativeWind } = require('nativewind/metro');
 const path = require('path');
 
-const projectRoot = __dirname;
-const monorepoRoot = path.resolve(projectRoot, '../..');
-
-const config = getDefaultConfig(projectRoot);
-
-// Monorepo support: watch the whole repo and resolve node_modules from both
-config.watchFolders = [monorepoRoot];
-config.resolver.nodeModulesPaths = [
-	path.resolve(projectRoot, 'node_modules'),
-	path.resolve(monorepoRoot, 'node_modules'),
-];
-
-const defaultResolveRequest = config.resolver.resolveRequest;
-config.resolver.resolveRequest = (context, moduleName, platform) => {
-	if (moduleName === 'react') {
-		return {
-			type: 'sourceFile',
-			filePath: path.resolve(monorepoRoot, 'node_modules/react/index.js'),
-		};
-	}
-
-	if (moduleName === 'react/jsx-runtime') {
-		return {
-			type: 'sourceFile',
-			filePath: path.resolve(monorepoRoot, 'node_modules/react/jsx-runtime.js'),
-		};
-	}
-
-	if (moduleName === 'react/jsx-dev-runtime') {
-		return {
-			type: 'sourceFile',
-			filePath: path.resolve(monorepoRoot, 'node_modules/react/jsx-dev-runtime.js'),
-		};
-	}
-
-	if (moduleName === 'pretty-format') {
-		return {
-			type: 'sourceFile',
-			filePath: path.resolve(monorepoRoot, 'node_modules/pretty-format/build/index.js'),
-		};
-	}
-
-	return defaultResolveRequest
-		? defaultResolveRequest(context, moduleName, platform)
-		: context.resolveRequest(context, moduleName, platform);
-};
-
-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = (() => {
+	const projectRoot = __dirname;
+	const monorepoRoot = path.resolve(projectRoot, '../..');
+
+	const config = getDefaultConfig(__dirname);
+	const { transformer, resolver } = config;
+
+	// Monorepo support: watch the whole repo and resolve node_modules from both
+	config.watchFolders = [monorepoRoot];
+	config.resolver.nodeModulesPaths = [
+		path.resolve(projectRoot, 'node_modules'),
+		path.resolve(monorepoRoot, 'node_modules'),
+	];
+
+	const defaultResolveRequest = config.resolver.resolveRequest;
+	config.resolver.resolveRequest = (context, moduleName, platform) => {
+		if (moduleName === 'react') {
+			return {
+				type: 'sourceFile',
+				filePath: path.resolve(monorepoRoot, 'node_modules/react/index.js'),
+			};
+		}
+
+		if (moduleName === 'react/jsx-runtime') {
+			return {
+				type: 'sourceFile',
+				filePath: path.resolve(monorepoRoot, 'node_modules/react/jsx-runtime.js'),
+			};
+		}
+
+		if (moduleName === 'react/jsx-dev-runtime') {
+			return {
+				type: 'sourceFile',
+				filePath: path.resolve(monorepoRoot, 'node_modules/react/jsx-dev-runtime.js'),
+			};
+		}
+
+		if (moduleName === 'pretty-format') {
+			return {
+				type: 'sourceFile',
+				filePath: path.resolve(monorepoRoot, 'node_modules/pretty-format/build/index.js'),
+			};
+		}
+
+		return defaultResolveRequest
+			? defaultResolveRequest(context, moduleName, platform)
+			: context.resolveRequest(context, moduleName, platform);
+	};
+
+	config.transformer = {
+		...transformer,
+	};
+	config.resolver = {
+		...resolver,
+		assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
+		sourceExts: [...resolver.sourceExts, 'svg'],
+		extraNodeModules: {
+			...(resolver.extraNodeModules || {}),
+			// crypto: require.resolve('react-native-quick-crypto'),
+		},
+	};
+	return withNativeWind(config, { input: './src/styles/global.css' });
+})();

workspaces/docs/package.json

@@ -5,7 +5,7 @@
 	"main": "expo-router/entry",
 	"scripts": {
 		"doctor": "npx expo-doctor",
-		"start": "expo start",
+		"start": "expo start -c",
 		"web": "expo start --web",
 		"build:web": "expo export --platform web",
 		"typecheck": "tsc --noEmit"