@beyondcorp/beyond-ui-native 0.1.4 → 0.1.6

package/dist/preset.mjs

@@ -3,6 +3,7 @@ import {
   preset_default,
   tokens
 } from "./chunk-RNHEGFYR.mjs";
+import "./chunk-BJTO5JO5.mjs";
 export {
   beyondUIPreset,
   preset_default as default,

package/dist/utilities.mjs

@@ -3,6 +3,7 @@ import {
   getAccessibilityProps,
   joinA11yLabels
 } from "./chunk-UTNW3LJA.mjs";
+import "./chunk-BJTO5JO5.mjs";
 export {
   cn,
   getAccessibilityProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui-native",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Accessible, NativeWind-first React Native component library for Beyond Softwares",
   "author": "Beyond Corp",
   "license": "MIT",

package/src/components/accordion/accordion.tsx

@@ -148,7 +148,7 @@ export const AccordionItem = React.forwardRef<View, AccordionItemProps>(
       <AccordionItemContext.Provider value={{ value, isOpen }}>
         <View
           ref={ref}
-          className={cn("border-b border-border py-1", className)}
+          className={cn("border-b border-neutral-200 dark:border-neutral-800 py-1", className)}
           {...props}
         >
           {children}
@@ -200,13 +200,13 @@ export const AccordionTrigger = React.forwardRef<View, AccordionTriggerProps>(
       >
         <View className="flex-1 pr-2">
           {typeof children === "string" ? (
-            <Text className="text-base font-medium text-foreground">{children}</Text>
+            <Text className="text-base font-medium text-neutral-900 dark:text-neutral-100">{children}</Text>
           ) : (
             children
           )}
         </View>
         <Animated.View style={{ transform: [{ rotate }] }}>
-          <Text className="text-muted text-base font-semibold">▼</Text>
+          <Text className="text-neutral-500 dark:text-neutral-400 text-base font-semibold">▼</Text>
         </Animated.View>
       </Pressable>
     );
@@ -230,11 +230,11 @@ export const AccordionContent = React.forwardRef<View, AccordionContentProps>(
     return (
       <View
         ref={ref}
-        className={cn("pt-1 pb-3 px-1 text-sm text-muted", className)}
+        className={cn("pt-1 pb-3 px-1", className)}
         {...props}
       >
         {typeof children === "string" ? (
-          <Text className="text-sm text-muted leading-relaxed">{children}</Text>
+          <Text className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">{children}</Text>
         ) : (
           children
         )}

package/src/providers/BeyondUIProvider.tsx

@@ -5,6 +5,35 @@ import { PortalHost } from "@rn-primitives/portal";
 import { ToastContext, ToastItem, ToastContextValue } from "../components/toast/types";
 import { ToastContainer } from "../components/toast/toast";
 
+if (typeof __DEV__ !== "undefined" && __DEV__) {
+  try {
+    const { LogBox } = require("react-native");
+    LogBox?.ignoreLogs?.([
+      "You are setting the style `{ shadowOffset: ... }` as a prop",
+      "You are setting the style",
+    ]);
+
+    if (!Boolean((console.error as any)?.__beyond_ui_filtered)) {
+      const originalError = console.error;
+      const filteredError = (...args: any[]) => {
+        const fullMessage = args
+          .map((arg) => (typeof arg === "string" ? arg : ""))
+          .join(" ");
+
+        if (
+          fullMessage.includes("shadowOffset") ||
+          fullMessage.includes("You are setting the style")
+        ) {
+          return;
+        }
+        originalError(...args);
+      };
+      (filteredError as any).__beyond_ui_filtered = true;
+      console.error = filteredError;
+    }
+  } catch (_) {}
+}
+
 export type ColorScheme = "light" | "dark" | "system";
 
 export interface BeyondUIContextValue {

package/src/templates/auth/ForgotPasswordTemplate.tsx

@@ -50,7 +50,7 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -61,10 +61,10 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
       >
         <View className="w-full max-w-md mx-auto gap-6">
           <View className="items-center gap-2">
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -117,7 +117,7 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
               {onBackToSignIn && (
                 <View className="flex-row justify-center items-center gap-1.5 pt-2">
                   <Pressable onPress={onBackToSignIn}>
-                    <Text className="text-sm font-semibold text-primary">
+                    <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">
                       Back to Sign In
                     </Text>
                   </Pressable>

package/src/templates/auth/SignInTemplate.tsx

@@ -72,7 +72,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -85,10 +85,10 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
           {/* Logo & Header */}
           <View className="items-center gap-2">
             {logo && <View className="mb-2">{logo}</View>}
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -129,7 +129,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
                 error={passwordError}
                 rightElement={
                   <Pressable onPress={() => setShowPassword((p) => !p)} className="p-1">
-                    <Text className="text-xs text-muted font-semibold">
+                    <Text className="text-xs text-neutral-500 dark:text-neutral-400 font-semibold">
                       {showPassword ? "HIDE" : "SHOW"}
                     </Text>
                   </Pressable>
@@ -141,12 +141,12 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
             <View className="flex-row items-center justify-between py-1">
               <View className="flex-row items-center gap-2">
                 <Checkbox checked={rememberMe} onCheckedChange={setRememberMe} />
-                <Text className="text-sm text-foreground">Remember me</Text>
+                <Text className="text-sm text-neutral-900 dark:text-neutral-100">Remember me</Text>
               </View>
 
               {onForgotPassword && (
                 <Pressable onPress={onForgotPassword}>
-                  <Text className="text-sm font-semibold text-primary">
+                  <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">
                     Forgot password?
                   </Text>
                 </Pressable>
@@ -170,7 +170,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
             <View className="gap-4">
               <View className="flex-row items-center gap-3">
                 <Separator className="flex-1" />
-                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 uppercase">or continue with</Text>
                 <Separator className="flex-1" />
               </View>
 
@@ -200,9 +200,9 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
           {/* Switch to SignUp */}
           {onSignUpPress && (
             <View className="flex-row justify-center items-center gap-1.5 pt-2">
-              <Text className="text-sm text-muted">Don't have an account?</Text>
+              <Text className="text-sm text-neutral-500 dark:text-neutral-400">Don't have an account?</Text>
               <Pressable onPress={onSignUpPress}>
-                <Text className="text-sm font-bold text-primary">Sign Up</Text>
+                <Text className="text-sm font-bold text-primary-600 dark:text-primary-400">Sign Up</Text>
               </Pressable>
             </View>
           )}

package/src/templates/auth/SignUpTemplate.tsx

@@ -88,7 +88,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -101,10 +101,10 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
           {/* Header */}
           <View className="items-center gap-2">
             {logo && <View className="mb-2">{logo}</View>}
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -164,7 +164,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
                     if (termsError) setTermsError(undefined);
                   }}
                 />
-                <Text className="text-sm text-foreground flex-1">
+                <Text className="text-sm text-neutral-900 dark:text-neutral-100 flex-1">
                   I agree to the Terms of Service & Privacy Policy
                 </Text>
               </View>
@@ -190,7 +190,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
             <View className="gap-4">
               <View className="flex-row items-center gap-3">
                 <Separator className="flex-1" />
-                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 uppercase">or continue with</Text>
                 <Separator className="flex-1" />
               </View>
 
@@ -220,9 +220,9 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
           {/* Back to SignIn */}
           {onSignInPress && (
             <View className="flex-row justify-center items-center gap-1.5 pt-2">
-              <Text className="text-sm text-muted">Already have an account?</Text>
+              <Text className="text-sm text-neutral-500 dark:text-neutral-400">Already have an account?</Text>
               <Pressable onPress={onSignInPress}>
-                <Text className="text-sm font-bold text-primary">Sign In</Text>
+                <Text className="text-sm font-bold text-primary-600 dark:text-primary-400">Sign In</Text>
               </Pressable>
             </View>
           )}

package/src/templates/dashboard/DashboardTemplate.tsx

@@ -69,12 +69,12 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
     <ScrollView
       {...props}
       style={[{ flex: 1 }, (props as any).style]}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
       contentContainerStyle={{ paddingBottom: 40 }}
       showsVerticalScrollIndicator={false}
     >
       {/* Top Greeting Header */}
-      <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-border/40">
+      <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-neutral-200 dark:border-neutral-800">
         <View className="flex-row items-center gap-3">
           <Avatar size="lg">
             {userAvatarUrl && <AvatarImage source={{ uri: userAvatarUrl }} />}

package/src/templates/settings/SettingsTemplate.tsx

@@ -62,12 +62,12 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
     <ScrollView
       {...props}
       style={[{ flex: 1 }, (props as any).style]}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
       contentContainerStyle={{ paddingBottom: 40 }}
       showsVerticalScrollIndicator={false}
     >
       <View className="px-6 pt-6 gap-6">
-        <Heading level={2} className="text-2xl font-bold text-foreground">
+        <Heading level={2} className="text-2xl font-bold text-neutral-900 dark:text-neutral-50">
           Settings & Profile
         </Heading>
 
@@ -79,14 +79,14 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
           </Avatar>
           <View className="flex-1">
             <View className="flex-row items-center gap-2">
-              <Text className="text-base font-bold text-foreground">{user.name}</Text>
+              <Text className="text-base font-bold text-neutral-900 dark:text-neutral-100">{user.name}</Text>
               {user.plan && (
                 <Badge variant="primary" size="sm">
                   {user.plan}
                 </Badge>
               )}
             </View>
-            <Text className="text-xs text-muted">{user.email}</Text>
+            <Text className="text-xs text-neutral-500 dark:text-neutral-400">{user.email}</Text>
           </View>
           {onEditProfile && (
             <Button variant="outline" size="sm" onPress={onEditProfile}>
@@ -97,16 +97,16 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
         {/* Preferences Section */}
         <View className="gap-2">
-          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+          <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider px-1">
             Preferences
           </Text>
-          <Card className="divide-y divide-border/50">
+          <Card className="divide-y divide-neutral-200 dark:divide-neutral-800">
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Push Notifications
                 </Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Receive real-time alerts on your mobile device
                 </Text>
               </View>
@@ -118,10 +118,10 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Email Notifications
                 </Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Weekly digests and activity summaries
                 </Text>
               </View>
@@ -133,8 +133,8 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">Dark Theme</Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Dark Theme</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Enable high contrast dark mode appearance
                 </Text>
               </View>
@@ -143,10 +143,10 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Biometric Login
                 </Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Use Face ID or fingerprint to authenticate
                 </Text>
               </View>
@@ -160,43 +160,43 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
         {/* Security & Account Links */}
         <View className="gap-2">
-          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+          <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider px-1">
             Account & Security
           </Text>
-          <Card className="divide-y divide-border/50">
+          <Card className="divide-y divide-neutral-200 dark:divide-neutral-800">
             {onChangePassword && (
               <Pressable
                 onPress={onChangePassword}
-                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+                className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
               >
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Change Password
                 </Text>
-                <Text className="text-muted text-xs">›</Text>
+                <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
               </Pressable>
             )}
 
             {onViewTerms && (
               <Pressable
                 onPress={onViewTerms}
-                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+                className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
               >
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Terms of Service
                 </Text>
-                <Text className="text-muted text-xs">›</Text>
+                <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
               </Pressable>
             )}
 
             {onViewPrivacy && (
               <Pressable
                 onPress={onViewPrivacy}
-                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+                className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
               >
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Privacy Policy
                 </Text>
-                <Text className="text-muted text-xs">›</Text>
+                <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
               </Pressable>
             )}
           </Card>