@beyondcorp/beyond-ui-native 0.1.3 → 0.1.4

package/package.json

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

package/src/components/bottom-sheet/bottom-sheet.tsx

@@ -193,14 +193,14 @@ export const BottomSheetContent = React.forwardRef<View, BottomSheetContentProps
             ref={ref}
             style={{ transform: [{ translateY }] }}
             className={cn(
-              "w-full bg-card rounded-t-3xl border-t border-border shadow-2xl pt-2 pb-8 px-6 max-h-[85%]",
+              "w-full bg-white dark:bg-neutral-900 rounded-t-3xl border-t border-neutral-200 dark:border-neutral-800 shadow-2xl pt-2 pb-8 px-6 max-h-[85%]",
               className
             )}
             {...props}
           >
             {/* Drag Handle Bar */}
             <View {...panResponder.panHandlers} className="w-full py-2 items-center">
-              <View className="w-12 h-1.5 rounded-full bg-muted/40" />
+              <View className="w-12 h-1.5 rounded-full bg-neutral-300 dark:bg-neutral-700" />
             </View>
 
             {children}
@@ -240,7 +240,7 @@ export const BottomSheetTitle: React.FC<BottomSheetTitleProps> = ({
   children,
 }) => {
   return (
-    <Heading level={4} className={cn("text-xl font-bold text-foreground", className)}>
+    <Heading level={4} className={cn("text-xl font-bold text-neutral-900 dark:text-neutral-50", className)}>
       {children}
     </Heading>
   );
@@ -259,7 +259,7 @@ export const BottomSheetDescription: React.FC<BottomSheetDescriptionProps> = ({
   children,
 }) => {
   return (
-    <Text className={cn("text-sm text-muted", className)}>
+    <Text className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}>
       {children}
     </Text>
   );

package/src/components/data-table/data-table.tsx

@@ -124,7 +124,6 @@ export function DataTable<T extends Record<string, any>>({
             setSearch(val);
             setCurrentPage(1);
           }}
-          className="bg-card"
         />
       )}
 
@@ -137,7 +136,7 @@ export function DataTable<T extends Record<string, any>>({
         </View>
       ) : paginatedData.length === 0 ? (
         <Card className="items-center justify-center p-8">
-          <Text className="text-muted text-base">{emptyText}</Text>
+          <Text className="text-neutral-500 dark:text-neutral-400 text-base">{emptyText}</Text>
         </Card>
       ) : mode === "card" ? (
         /* Mobile Card Mode */
@@ -157,14 +156,14 @@ export function DataTable<T extends Record<string, any>>({
                   return (
                     <View
                       key={String(col.key)}
-                      className="flex-row items-center justify-between py-1 border-b border-border/40 last:border-b-0"
+                      className="flex-row items-center justify-between py-1 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0"
                     >
-                      <Text className="text-xs font-semibold text-muted uppercase tracking-wider">
+                      <Text className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                         {col.title}
                       </Text>
                       <View className="shrink">
                         {typeof renderedVal === "string" ? (
-                          <Text className="text-sm font-medium text-foreground">
+                          <Text className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                             {renderedVal}
                           </Text>
                         ) : (
@@ -181,9 +180,9 @@ export function DataTable<T extends Record<string, any>>({
       ) : (
         /* Horizontal Table Mode */
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View className="rounded-2xl border border-border bg-card overflow-hidden">
+          <View className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden">
             {/* Header */}
-            <View className="flex-row bg-muted/10 border-b border-border">
+            <View className="flex-row bg-neutral-100 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-800">
               {columns.map((col) => (
                 <Pressable
                   key={String(col.key)}
@@ -192,11 +191,11 @@ export function DataTable<T extends Record<string, any>>({
                   style={{ width: col.width || 120 }}
                   className="px-4 py-3 flex-row items-center justify-between"
                 >
-                  <Text className="text-xs font-bold text-foreground uppercase tracking-wider">
+                  <Text className="text-xs font-bold text-neutral-900 dark:text-neutral-100 uppercase tracking-wider">
                     {col.title}
                   </Text>
                   {col.sortable && (
-                    <Text className="text-xs text-muted">
+                    <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                       {sortKey === col.key
                         ? sortDirection === "asc"
                           ? "▲"
@@ -214,7 +213,7 @@ export function DataTable<T extends Record<string, any>>({
                 key={keyExtractor(item, idx)}
                 disabled={!onRowPress}
                 onPress={() => onRowPress?.(item)}
-                className="flex-row border-b border-border/60 active:bg-muted/10"
+                className="flex-row border-b border-neutral-200 dark:border-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-800"
               >
                 {columns.map((col) => {
                   const rawVal = item[col.key as string];
@@ -227,7 +226,7 @@ export function DataTable<T extends Record<string, any>>({
                       className="px-4 py-3 justify-center"
                     >
                       {typeof renderedVal === "string" ? (
-                        <Text className="text-sm text-foreground">{renderedVal}</Text>
+                        <Text className="text-sm text-neutral-900 dark:text-neutral-100">{renderedVal}</Text>
                       ) : (
                         renderedVal
                       )}
@@ -243,7 +242,7 @@ export function DataTable<T extends Record<string, any>>({
       {/* Pagination Footer */}
       {totalPages > 1 && (
         <View className="flex-row items-center justify-between pt-2">
-          <Text className="text-xs text-muted">
+          <Text className="text-xs text-neutral-500 dark:text-neutral-400">
             Showing {(currentPage - 1) * pageSize + 1} -{" "}
             {Math.min(currentPage * pageSize, sortedData.length)} of{" "}
             {sortedData.length}
@@ -258,7 +257,7 @@ export function DataTable<T extends Record<string, any>>({
             >
               Prev
             </Button>
-            <Text className="text-xs font-medium text-foreground px-1">
+            <Text className="text-xs font-medium text-neutral-900 dark:text-neutral-100 px-1">
               {currentPage} / {totalPages}
             </Text>
             <Button

package/src/components/select/select.tsx

@@ -12,11 +12,11 @@ import { cn } from "../../utilities/cn";
 import { Text } from "../text/text";
 
 const selectTriggerVariants = cva(
-  "flex-row items-center justify-between rounded-xl border bg-card px-4 py-3 active:opacity-80",
+  "flex-row items-center justify-between rounded-xl border bg-white dark:bg-neutral-900 px-4 py-3 active:opacity-80",
   {
     variants: {
       variant: {
-        default: "border-border",
+        default: "border-neutral-300 dark:border-neutral-700",
         error: "border-danger",
         success: "border-success",
       },
@@ -130,7 +130,7 @@ export const Select: React.FC<SelectProps> = ({
     >
       <View className={cn("w-full gap-1.5", className)}>
         {label && (
-          <Text className="text-sm font-medium text-foreground">{label}</Text>
+          <Text className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{label}</Text>
         )}
 
         {children ? (
@@ -149,19 +149,21 @@ export const Select: React.FC<SelectProps> = ({
             <Text
               className={cn(
                 "text-base",
-                displayLabel ? "text-foreground font-medium" : "text-muted"
+                displayLabel
+                  ? "text-neutral-900 dark:text-neutral-100 font-medium"
+                  : "text-neutral-500 dark:text-neutral-400 font-normal"
               )}
             >
               {displayLabel || placeholder}
             </Text>
-            <Text className="text-muted text-xs">▼</Text>
+            <Text className="text-neutral-500 dark:text-neutral-400 text-xs">▼</Text>
           </Pressable>
         )}
 
         {error ? (
           <Text className="text-xs text-danger font-medium">{error}</Text>
         ) : helperText ? (
-          <Text className="text-xs text-muted">{helperText}</Text>
+          <Text className="text-xs text-neutral-500 dark:text-neutral-400">{helperText}</Text>
         ) : null}
 
         {/* Modal Options Picker if options prop was passed */}
@@ -175,13 +177,13 @@ export const Select: React.FC<SelectProps> = ({
           >
             <View className="flex-1 justify-end bg-black/60">
               <Pressable className="flex-1" onPress={() => setOpen(false)} />
-              <View className="w-full bg-card rounded-t-3xl border-t border-border p-6 max-h-[75%]">
-                <View className="flex-row items-center justify-between pb-4 border-b border-border mb-3">
-                  <Text className="text-lg font-bold text-foreground">
+              <View className="w-full bg-white dark:bg-neutral-900 rounded-t-3xl border-t border-neutral-200 dark:border-neutral-800 p-6 max-h-[75%]">
+                <View className="flex-row items-center justify-between pb-4 border-b border-neutral-200 dark:border-neutral-800 mb-3">
+                  <Text className="text-lg font-bold text-neutral-900 dark:text-neutral-50">
                     {label || placeholder}
                   </Text>
                   <Pressable onPress={() => setOpen(false)} className="p-1">
-                    <Text className="text-muted text-lg font-semibold">✕</Text>
+                    <Text className="text-neutral-500 dark:text-neutral-400 text-lg font-semibold">✕</Text>
                   </Pressable>
                 </View>
 
@@ -192,7 +194,7 @@ export const Select: React.FC<SelectProps> = ({
                       onChangeText={setSearchQuery}
                       placeholder="Search options..."
                       placeholderTextColor="#9ca3af"
-                      className="h-11 px-4 rounded-xl border border-border bg-background text-foreground text-base"
+                      className="h-11 px-4 rounded-xl border border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 text-base"
                     />
                   </View>
                 )}
@@ -200,7 +202,7 @@ export const Select: React.FC<SelectProps> = ({
                 <ScrollView className="max-h-80" showsVerticalScrollIndicator={false}>
                   {filteredOptions.length === 0 ? (
                     <View className="py-8 items-center">
-                      <Text className="text-muted text-sm">No options found</Text>
+                      <Text className="text-neutral-500 dark:text-neutral-400 text-sm">No options found</Text>
                     </View>
                   ) : (
                     filteredOptions.map((opt) => {
@@ -211,8 +213,8 @@ export const Select: React.FC<SelectProps> = ({
                           disabled={opt.disabled}
                           onPress={() => handleSelect(opt.value)}
                           className={cn(
-                            "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-muted/10",
-                            isSelected && "bg-primary/10",
+                            "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
+                            isSelected && "bg-primary-50 dark:bg-primary-950/40",
                             opt.disabled && "opacity-40"
                           )}
                         >
@@ -220,14 +222,14 @@ export const Select: React.FC<SelectProps> = ({
                             className={cn(
                               "text-base",
                               isSelected
-                                ? "text-primary font-semibold"
-                                : "text-foreground font-normal"
+                                ? "text-primary-600 dark:text-primary-400 font-semibold"
+                                : "text-neutral-900 dark:text-neutral-100 font-normal"
                             )}
                           >
                             {opt.label}
                           </Text>
                           {isSelected && (
-                            <Text className="text-primary font-bold text-base">✓</Text>
+                            <Text className="text-primary-600 dark:text-primary-400 font-bold text-base">✓</Text>
                           )}
                         </Pressable>
                       );
@@ -263,13 +265,13 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
       accessibilityRole="combobox"
       accessibilityState={{ expanded: open }}
       className={cn(
-        "flex-row items-center justify-between rounded-xl border border-border bg-card px-4 py-3 active:opacity-80",
+        "flex-row items-center justify-between rounded-xl border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-3 active:opacity-80",
         className
       )}
       {...props}
     >
       {children}
-      <Text className="text-muted text-xs">▼</Text>
+      <Text className="text-neutral-500 dark:text-neutral-400 text-xs">▼</Text>
     </Pressable>
   );
 };
@@ -289,7 +291,7 @@ export const SelectValue: React.FC<SelectValueProps> = ({
     <Text
       className={cn(
         "text-base",
-        value ? "text-foreground font-medium" : "text-muted",
+        value ? "text-neutral-900 dark:text-neutral-100 font-medium" : "text-neutral-500 dark:text-neutral-400",
         className
       )}
     >
@@ -318,11 +320,11 @@ export const SelectContent: React.FC<SelectContentProps> = ({ title, children })
     >
       <View className="flex-1 justify-end bg-black/60">
         <Pressable className="flex-1" onPress={() => setOpen(false)} />
-        <View className="w-full bg-card rounded-t-3xl border-t border-border p-6 max-h-[75%]">
-          <View className="flex-row items-center justify-between pb-3 border-b border-border mb-3">
-            <Text className="text-lg font-bold text-foreground">{title || "Select"}</Text>
+        <View className="w-full bg-white dark:bg-neutral-900 rounded-t-3xl border-t border-neutral-200 dark:border-neutral-800 p-6 max-h-[75%]">
+          <View className="flex-row items-center justify-between pb-3 border-b border-neutral-200 dark:border-neutral-800 mb-3">
+            <Text className="text-lg font-bold text-neutral-900 dark:text-neutral-100">{title || "Select"}</Text>
             <Pressable onPress={() => setOpen(false)} className="p-1">
-              <Text className="text-muted text-lg font-semibold">✕</Text>
+              <Text className="text-neutral-500 dark:text-neutral-400 text-lg font-semibold">✕</Text>
             </Pressable>
           </View>
           <ScrollView className="max-h-80">{children}</ScrollView>
@@ -351,8 +353,8 @@ export const SelectItem: React.FC<SelectItemProps> = ({
     <Pressable
       onPress={() => onSelect(itemValue)}
       className={cn(
-        "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-muted/10",
-        isSelected && "bg-primary/10",
+        "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
+        isSelected && "bg-primary-50 dark:bg-primary-950/40",
         className
       )}
     >
@@ -360,7 +362,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
         <Text
           className={cn(
             "text-base",
-            isSelected ? "text-primary font-semibold" : "text-foreground font-normal"
+            isSelected ? "text-primary-600 dark:text-primary-400 font-semibold" : "text-neutral-900 dark:text-neutral-100 font-normal"
           )}
         >
           {children}
@@ -368,7 +370,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
       ) : (
         children
       )}
-      {isSelected && <Text className="text-primary font-bold text-base">✓</Text>}
+      {isSelected && <Text className="text-primary-600 dark:text-primary-400 font-bold text-base">✓</Text>}
     </Pressable>
   );
 };

package/src/providers/BeyondUIProvider.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { View, useColorScheme as useRNColorScheme } from "react-native";
+import { colorScheme as nwColorScheme } from "nativewind";
 import { PortalHost } from "@rn-primitives/portal";
 import { ToastContext, ToastItem, ToastContextValue } from "../components/toast/types";
 import { ToastContainer } from "../components/toast/toast";
@@ -38,10 +39,28 @@ export function BeyondUIProvider({
   const activeScheme: "light" | "dark" =
     selectedScheme === "system" ? systemScheme : selectedScheme;
 
+  // Sync NativeWind colorScheme store with BeyondUIProvider active scheme
+  React.useEffect(() => {
+    try {
+      nwColorScheme.set(selectedScheme === "system" ? "system" : activeScheme);
+    } catch (_) {}
+  }, [selectedScheme, activeScheme]);
+
+  const handleSetColorScheme = React.useCallback((scheme: ColorScheme) => {
+    setSelectedScheme(scheme);
+    try {
+      nwColorScheme.set(scheme === "system" ? "system" : scheme);
+    } catch (_) {}
+  }, []);
+
   const toggleColorScheme = React.useCallback(() => {
     setSelectedScheme((prev) => {
       const current = prev === "system" ? systemScheme : prev;
-      return current === "dark" ? "light" : "dark";
+      const next = current === "dark" ? "light" : "dark";
+      try {
+        nwColorScheme.set(next);
+      } catch (_) {}
+      return next;
     });
   }, [systemScheme]);
 
@@ -77,10 +96,10 @@ export function BeyondUIProvider({
   const contextValue: BeyondUIContextValue = React.useMemo(
     () => ({
       colorScheme: activeScheme,
-      setColorScheme: setSelectedScheme,
+      setColorScheme: handleSetColorScheme,
       toggleColorScheme,
     }),
-    [activeScheme, toggleColorScheme]
+    [activeScheme, handleSetColorScheme, toggleColorScheme]
   );
 
   return (
@@ -88,7 +107,7 @@ export function BeyondUIProvider({
       <ToastContext.Provider value={toastContextValue}>
         <View
           style={{ flex: 1 }}
-          className={activeScheme === "dark" ? "dark flex-1" : "flex-1"}
+          className={activeScheme === "dark" ? "dark flex-1 bg-neutral-950" : "flex-1 bg-white"}
         >
           {children}
           <PortalHost />

package/src/templates/dashboard/DashboardTemplate.tsx

@@ -81,10 +81,10 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
             <AvatarFallback text={userName.slice(0, 2).toUpperCase()} />
           </Avatar>
           <View>
-            <Text className="text-xs text-muted font-medium uppercase tracking-wider">
+            <Text className="text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wider">
               {userRole}
             </Text>
-            <Heading level={3} className="text-xl font-bold text-foreground">
+            <Heading level={3} className="text-xl font-bold text-neutral-900 dark:text-neutral-50">
               Hello, {userName} 👋
             </Heading>
           </View>
@@ -93,9 +93,9 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
         {onNotificationPress && (
           <Pressable
             onPress={onNotificationPress}
-            className="w-10 h-10 rounded-full border border-border bg-card items-center justify-center relative active:opacity-70"
+            className="w-10 h-10 rounded-full border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 items-center justify-center relative active:opacity-70"
           >
-            <Text className="text-base text-foreground">🔔</Text>
+            <Text className="text-base text-neutral-900 dark:text-neutral-100">🔔</Text>
             {unreadNotificationsCount > 0 && (
               <View className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-danger items-center justify-center">
                 <Text className="text-[10px] font-bold text-white">
@@ -111,7 +111,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
         {/* Quick Actions */}
         {quickActions && quickActions.length > 0 && (
           <View className="gap-2">
-            <Text className="text-xs font-bold text-muted uppercase tracking-wider">
+            <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
               Quick Actions
             </Text>
             <ScrollView
@@ -126,7 +126,6 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
                     variant="outline"
                     size="sm"
                     onPress={action.onPress}
-                    className="bg-card shadow-sm"
                   >
                     {action.icon ? `${action.icon} ${action.label}` : action.label}
                   </Button>
@@ -138,7 +137,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
 
         {/* Metrics Grid */}
         <View className="gap-3">
-          <Text className="text-xs font-bold text-muted uppercase tracking-wider">
+          <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
             Overview Performance
           </Text>
           <View className="gap-3">
@@ -155,7 +154,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
               <CardTitle className="text-base font-bold">Recent Activity</CardTitle>
               {onViewAllActivities && (
                 <Pressable onPress={onViewAllActivities}>
-                  <Text className="text-xs font-semibold text-primary">View all</Text>
+                  <Text className="text-xs font-semibold text-primary-600 dark:text-primary-400">View all</Text>
                 </Pressable>
               )}
             </CardHeader>
@@ -163,7 +162,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
               {recentActivities.map((act) => (
                 <View
                   key={act.id}
-                  className="flex-row items-center justify-between py-2 border-b border-border/40 last:border-b-0"
+                  className="flex-row items-center justify-between py-2 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0"
                 >
                   <View className="flex-row items-center gap-3 flex-1 pr-2">
                     <Avatar size="sm">
@@ -173,10 +172,10 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
                       />
                     </Avatar>
                     <View className="flex-1">
-                      <Text className="text-sm font-semibold text-foreground" numberOfLines={1}>
+                      <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100" numberOfLines={1}>
                         {act.title}
                       </Text>
-                      <Text className="text-xs text-muted" numberOfLines={1}>
+                      <Text className="text-xs text-neutral-500 dark:text-neutral-400" numberOfLines={1}>
                         {act.subtitle} • {act.timestamp}
                       </Text>
                     </View>
@@ -184,7 +183,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
 
                   <View className="items-end gap-1">
                     {act.amount && (
-                      <Text className="text-sm font-bold text-foreground">
+                      <Text className="text-sm font-bold text-neutral-900 dark:text-neutral-100">
                         {act.amount}
                       </Text>
                     )}