@beyondcorp/beyond-ui-native 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/index.js +78 -61
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +78 -61
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +11 -5
  6. package/src/components/accordion/accordion.tsx +245 -0
  7. package/src/components/accordion/index.ts +1 -0
  8. package/src/components/alert/alert.tsx +118 -0
  9. package/src/components/alert/index.ts +1 -0
  10. package/src/components/avatar/avatar.tsx +125 -0
  11. package/src/components/avatar/index.ts +1 -0
  12. package/src/components/badge/badge.tsx +89 -0
  13. package/src/components/badge/index.ts +1 -0
  14. package/src/components/bottom-sheet/bottom-sheet.tsx +336 -0
  15. package/src/components/bottom-sheet/index.ts +1 -0
  16. package/src/components/button/button.tsx +172 -0
  17. package/src/components/button/index.ts +1 -0
  18. package/src/components/card/card.tsx +121 -0
  19. package/src/components/card/index.ts +1 -0
  20. package/src/components/checkbox/checkbox.tsx +100 -0
  21. package/src/components/checkbox/index.ts +1 -0
  22. package/src/components/data-table/data-table.tsx +276 -0
  23. package/src/components/data-table/index.ts +1 -0
  24. package/src/components/dialog/dialog.tsx +278 -0
  25. package/src/components/dialog/index.ts +1 -0
  26. package/src/components/input/index.ts +1 -0
  27. package/src/components/input/input.tsx +130 -0
  28. package/src/components/radio/index.ts +1 -0
  29. package/src/components/radio/radio.tsx +117 -0
  30. package/src/components/select/index.ts +1 -0
  31. package/src/components/select/select.tsx +377 -0
  32. package/src/components/separator/index.ts +1 -0
  33. package/src/components/separator/separator.tsx +28 -0
  34. package/src/components/skeleton/index.ts +1 -0
  35. package/src/components/skeleton/skeleton.tsx +43 -0
  36. package/src/components/spinner/index.ts +1 -0
  37. package/src/components/spinner/spinner.tsx +46 -0
  38. package/src/components/stats-card/index.ts +1 -0
  39. package/src/components/stats-card/stats-card.tsx +92 -0
  40. package/src/components/switch/index.ts +1 -0
  41. package/src/components/switch/switch.tsx +80 -0
  42. package/src/components/tabs/index.ts +1 -0
  43. package/src/components/tabs/tabs.tsx +172 -0
  44. package/src/components/text/heading.tsx +50 -0
  45. package/src/components/text/index.ts +2 -0
  46. package/src/components/text/text.tsx +62 -0
  47. package/src/components/textarea/index.ts +1 -0
  48. package/src/components/textarea/textarea.tsx +87 -0
  49. package/src/components/toast/index.ts +2 -0
  50. package/src/components/toast/toast.tsx +136 -0
  51. package/src/components/toast/types.ts +32 -0
  52. package/src/index.ts +42 -0
  53. package/src/primitives/box.tsx +25 -0
  54. package/src/primitives/index.ts +2 -0
  55. package/src/primitives/pressable.tsx +49 -0
  56. package/src/providers/BeyondUIProvider.tsx +119 -0
  57. package/src/templates/auth/ForgotPasswordTemplate.tsx +132 -0
  58. package/src/templates/auth/SignInTemplate.tsx +213 -0
  59. package/src/templates/auth/SignUpTemplate.tsx +233 -0
  60. package/src/templates/auth/index.ts +3 -0
  61. package/src/templates/dashboard/DashboardTemplate.tsx +204 -0
  62. package/src/templates/dashboard/index.ts +1 -0
  63. package/src/templates/index.ts +3 -0
  64. package/src/templates/settings/SettingsTemplate.tsx +226 -0
  65. package/src/templates/settings/index.ts +1 -0
  66. package/src/theme/preset.ts +45 -0
  67. package/src/theme/tokens.ts +144 -0
  68. package/src/types/nativewind-env.d.ts +26 -0
  69. package/src/utilities/accessibility.ts +43 -0
  70. package/src/utilities/cn.ts +9 -0
  71. package/src/utilities/index.ts +2 -0
package/dist/index.mjs CHANGED
@@ -1919,12 +1919,12 @@ var BottomSheetContent = React20.forwardRef(
1919
1919
  ref,
1920
1920
  style: { transform: [{ translateY }] },
1921
1921
  className: cn(
1922
- "w-full bg-card rounded-t-3xl border-t border-border shadow-2xl pt-2 pb-8 px-6 max-h-[85%]",
1922
+ "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%]",
1923
1923
  className
1924
1924
  ),
1925
1925
  ...props,
1926
1926
  children: [
1927
- /* @__PURE__ */ jsx23(View19, { ...panResponder.panHandlers, className: "w-full py-2 items-center", children: /* @__PURE__ */ jsx23(View19, { className: "w-12 h-1.5 rounded-full bg-muted/40" }) }),
1927
+ /* @__PURE__ */ jsx23(View19, { ...panResponder.panHandlers, className: "w-full py-2 items-center", children: /* @__PURE__ */ jsx23(View19, { className: "w-12 h-1.5 rounded-full bg-neutral-300 dark:bg-neutral-700" }) }),
1928
1928
  children
1929
1929
  ]
1930
1930
  }
@@ -1943,14 +1943,14 @@ var BottomSheetTitle = ({
1943
1943
  className,
1944
1944
  children
1945
1945
  }) => {
1946
- return /* @__PURE__ */ jsx23(Heading, { level: 4, className: cn("text-xl font-bold text-foreground", className), children });
1946
+ return /* @__PURE__ */ jsx23(Heading, { level: 4, className: cn("text-xl font-bold text-neutral-900 dark:text-neutral-50", className), children });
1947
1947
  };
1948
1948
  BottomSheetTitle.displayName = "BottomSheetTitle";
1949
1949
  var BottomSheetDescription = ({
1950
1950
  className,
1951
1951
  children
1952
1952
  }) => {
1953
- return /* @__PURE__ */ jsx23(Text2, { className: cn("text-sm text-muted", className), children });
1953
+ return /* @__PURE__ */ jsx23(Text2, { className: cn("text-sm text-neutral-500 dark:text-neutral-400", className), children });
1954
1954
  };
1955
1955
  BottomSheetDescription.displayName = "BottomSheetDescription";
1956
1956
  var BottomSheetBody = React20.forwardRef(
@@ -1999,11 +1999,11 @@ import {
1999
1999
  import { cva as cva10 } from "class-variance-authority";
2000
2000
  import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
2001
2001
  var selectTriggerVariants = cva10(
2002
- "flex-row items-center justify-between rounded-xl border bg-card px-4 py-3 active:opacity-80",
2002
+ "flex-row items-center justify-between rounded-xl border bg-white dark:bg-neutral-900 px-4 py-3 active:opacity-80",
2003
2003
  {
2004
2004
  variants: {
2005
2005
  variant: {
2006
- default: "border-border",
2006
+ default: "border-neutral-300 dark:border-neutral-700",
2007
2007
  error: "border-danger",
2008
2008
  success: "border-success"
2009
2009
  },
@@ -2079,7 +2079,7 @@ var Select = ({
2079
2079
  onSelect: handleSelect
2080
2080
  },
2081
2081
  children: /* @__PURE__ */ jsxs11(View20, { className: cn("w-full gap-1.5", className), children: [
2082
- label && /* @__PURE__ */ jsx24(Text2, { className: "text-sm font-medium text-foreground", children: label }),
2082
+ label && /* @__PURE__ */ jsx24(Text2, { className: "text-sm font-medium text-neutral-800 dark:text-neutral-200", children: label }),
2083
2083
  children ? children : /* @__PURE__ */ jsxs11(
2084
2084
  Pressable11,
2085
2085
  {
@@ -2097,16 +2097,16 @@ var Select = ({
2097
2097
  {
2098
2098
  className: cn(
2099
2099
  "text-base",
2100
- displayLabel ? "text-foreground font-medium" : "text-muted"
2100
+ displayLabel ? "text-neutral-900 dark:text-neutral-100 font-medium" : "text-neutral-500 dark:text-neutral-400 font-normal"
2101
2101
  ),
2102
2102
  children: displayLabel || placeholder
2103
2103
  }
2104
2104
  ),
2105
- /* @__PURE__ */ jsx24(Text2, { className: "text-muted text-xs", children: "\u25BC" })
2105
+ /* @__PURE__ */ jsx24(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-xs", children: "\u25BC" })
2106
2106
  ]
2107
2107
  }
2108
2108
  ),
2109
- error ? /* @__PURE__ */ jsx24(Text2, { className: "text-xs text-danger font-medium", children: error }) : helperText ? /* @__PURE__ */ jsx24(Text2, { className: "text-xs text-muted", children: helperText }) : null,
2109
+ error ? /* @__PURE__ */ jsx24(Text2, { className: "text-xs text-danger font-medium", children: error }) : helperText ? /* @__PURE__ */ jsx24(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: helperText }) : null,
2110
2110
  options && /* @__PURE__ */ jsx24(
2111
2111
  Modal3,
2112
2112
  {
@@ -2117,10 +2117,10 @@ var Select = ({
2117
2117
  statusBarTranslucent: true,
2118
2118
  children: /* @__PURE__ */ jsxs11(View20, { className: "flex-1 justify-end bg-black/60", children: [
2119
2119
  /* @__PURE__ */ jsx24(Pressable11, { className: "flex-1", onPress: () => setOpen(false) }),
2120
- /* @__PURE__ */ jsxs11(View20, { className: "w-full bg-card rounded-t-3xl border-t border-border p-6 max-h-[75%]", children: [
2121
- /* @__PURE__ */ jsxs11(View20, { className: "flex-row items-center justify-between pb-4 border-b border-border mb-3", children: [
2122
- /* @__PURE__ */ jsx24(Text2, { className: "text-lg font-bold text-foreground", children: label || placeholder }),
2123
- /* @__PURE__ */ jsx24(Pressable11, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ jsx24(Text2, { className: "text-muted text-lg font-semibold", children: "\u2715" }) })
2120
+ /* @__PURE__ */ jsxs11(View20, { 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%]", children: [
2121
+ /* @__PURE__ */ jsxs11(View20, { className: "flex-row items-center justify-between pb-4 border-b border-neutral-200 dark:border-neutral-800 mb-3", children: [
2122
+ /* @__PURE__ */ jsx24(Text2, { className: "text-lg font-bold text-neutral-900 dark:text-neutral-50", children: label || placeholder }),
2123
+ /* @__PURE__ */ jsx24(Pressable11, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ jsx24(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-lg font-semibold", children: "\u2715" }) })
2124
2124
  ] }),
2125
2125
  searchable && /* @__PURE__ */ jsx24(View20, { className: "mb-4", children: /* @__PURE__ */ jsx24(
2126
2126
  TextInput3,
@@ -2129,10 +2129,10 @@ var Select = ({
2129
2129
  onChangeText: setSearchQuery,
2130
2130
  placeholder: "Search options...",
2131
2131
  placeholderTextColor: "#9ca3af",
2132
- className: "h-11 px-4 rounded-xl border border-border bg-background text-foreground text-base"
2132
+ 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"
2133
2133
  }
2134
2134
  ) }),
2135
- /* @__PURE__ */ jsx24(ScrollView, { className: "max-h-80", showsVerticalScrollIndicator: false, children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx24(View20, { className: "py-8 items-center", children: /* @__PURE__ */ jsx24(Text2, { className: "text-muted text-sm", children: "No options found" }) }) : filteredOptions.map((opt) => {
2135
+ /* @__PURE__ */ jsx24(ScrollView, { className: "max-h-80", showsVerticalScrollIndicator: false, children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx24(View20, { className: "py-8 items-center", children: /* @__PURE__ */ jsx24(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-sm", children: "No options found" }) }) : filteredOptions.map((opt) => {
2136
2136
  const isSelected = opt.value === currentValue;
2137
2137
  return /* @__PURE__ */ jsxs11(
2138
2138
  Pressable11,
@@ -2140,8 +2140,8 @@ var Select = ({
2140
2140
  disabled: opt.disabled,
2141
2141
  onPress: () => handleSelect(opt.value),
2142
2142
  className: cn(
2143
- "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-muted/10",
2144
- isSelected && "bg-primary/10",
2143
+ "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
2144
+ isSelected && "bg-primary-50 dark:bg-primary-950/40",
2145
2145
  opt.disabled && "opacity-40"
2146
2146
  ),
2147
2147
  children: [
@@ -2150,12 +2150,12 @@ var Select = ({
2150
2150
  {
2151
2151
  className: cn(
2152
2152
  "text-base",
2153
- isSelected ? "text-primary font-semibold" : "text-foreground font-normal"
2153
+ isSelected ? "text-primary-600 dark:text-primary-400 font-semibold" : "text-neutral-900 dark:text-neutral-100 font-normal"
2154
2154
  ),
2155
2155
  children: opt.label
2156
2156
  }
2157
2157
  ),
2158
- isSelected && /* @__PURE__ */ jsx24(Text2, { className: "text-primary font-bold text-base", children: "\u2713" })
2158
+ isSelected && /* @__PURE__ */ jsx24(Text2, { className: "text-primary-600 dark:text-primary-400 font-bold text-base", children: "\u2713" })
2159
2159
  ]
2160
2160
  },
2161
2161
  opt.value
@@ -2183,13 +2183,13 @@ var SelectTrigger = ({
2183
2183
  accessibilityRole: "combobox",
2184
2184
  accessibilityState: { expanded: open },
2185
2185
  className: cn(
2186
- "flex-row items-center justify-between rounded-xl border border-border bg-card px-4 py-3 active:opacity-80",
2186
+ "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",
2187
2187
  className
2188
2188
  ),
2189
2189
  ...props,
2190
2190
  children: [
2191
2191
  children,
2192
- /* @__PURE__ */ jsx24(Text2, { className: "text-muted text-xs", children: "\u25BC" })
2192
+ /* @__PURE__ */ jsx24(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-xs", children: "\u25BC" })
2193
2193
  ]
2194
2194
  }
2195
2195
  );
@@ -2205,7 +2205,7 @@ var SelectValue = ({
2205
2205
  {
2206
2206
  className: cn(
2207
2207
  "text-base",
2208
- value ? "text-foreground font-medium" : "text-muted",
2208
+ value ? "text-neutral-900 dark:text-neutral-100 font-medium" : "text-neutral-500 dark:text-neutral-400",
2209
2209
  className
2210
2210
  ),
2211
2211
  children: value || placeholder
@@ -2226,10 +2226,10 @@ var SelectContent = ({ title, children }) => {
2226
2226
  statusBarTranslucent: true,
2227
2227
  children: /* @__PURE__ */ jsxs11(View20, { className: "flex-1 justify-end bg-black/60", children: [
2228
2228
  /* @__PURE__ */ jsx24(Pressable11, { className: "flex-1", onPress: () => setOpen(false) }),
2229
- /* @__PURE__ */ jsxs11(View20, { className: "w-full bg-card rounded-t-3xl border-t border-border p-6 max-h-[75%]", children: [
2230
- /* @__PURE__ */ jsxs11(View20, { className: "flex-row items-center justify-between pb-3 border-b border-border mb-3", children: [
2231
- /* @__PURE__ */ jsx24(Text2, { className: "text-lg font-bold text-foreground", children: title || "Select" }),
2232
- /* @__PURE__ */ jsx24(Pressable11, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ jsx24(Text2, { className: "text-muted text-lg font-semibold", children: "\u2715" }) })
2229
+ /* @__PURE__ */ jsxs11(View20, { 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%]", children: [
2230
+ /* @__PURE__ */ jsxs11(View20, { className: "flex-row items-center justify-between pb-3 border-b border-neutral-200 dark:border-neutral-800 mb-3", children: [
2231
+ /* @__PURE__ */ jsx24(Text2, { className: "text-lg font-bold text-neutral-900 dark:text-neutral-100", children: title || "Select" }),
2232
+ /* @__PURE__ */ jsx24(Pressable11, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ jsx24(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-lg font-semibold", children: "\u2715" }) })
2233
2233
  ] }),
2234
2234
  /* @__PURE__ */ jsx24(ScrollView, { className: "max-h-80", children })
2235
2235
  ] })
@@ -2250,8 +2250,8 @@ var SelectItem = ({
2250
2250
  {
2251
2251
  onPress: () => onSelect(itemValue),
2252
2252
  className: cn(
2253
- "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-muted/10",
2254
- isSelected && "bg-primary/10",
2253
+ "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
2254
+ isSelected && "bg-primary-50 dark:bg-primary-950/40",
2255
2255
  className
2256
2256
  ),
2257
2257
  children: [
@@ -2260,12 +2260,12 @@ var SelectItem = ({
2260
2260
  {
2261
2261
  className: cn(
2262
2262
  "text-base",
2263
- isSelected ? "text-primary font-semibold" : "text-foreground font-normal"
2263
+ isSelected ? "text-primary-600 dark:text-primary-400 font-semibold" : "text-neutral-900 dark:text-neutral-100 font-normal"
2264
2264
  ),
2265
2265
  children
2266
2266
  }
2267
2267
  ) : children,
2268
- isSelected && /* @__PURE__ */ jsx24(Text2, { className: "text-primary font-bold text-base", children: "\u2713" })
2268
+ isSelected && /* @__PURE__ */ jsx24(Text2, { className: "text-primary-600 dark:text-primary-400 font-bold text-base", children: "\u2713" })
2269
2269
  ]
2270
2270
  }
2271
2271
  );
@@ -2354,11 +2354,10 @@ function DataTable({
2354
2354
  onChangeText: (val) => {
2355
2355
  setSearch(val);
2356
2356
  setCurrentPage(1);
2357
- },
2358
- className: "bg-card"
2357
+ }
2359
2358
  }
2360
2359
  ),
2361
- loading ? /* @__PURE__ */ jsx25(View21, { className: "gap-3", children: [1, 2, 3].map((idx) => /* @__PURE__ */ jsx25(Skeleton, { className: "h-20 w-full rounded-2xl" }, idx)) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx25(Card, { className: "items-center justify-center p-8", children: /* @__PURE__ */ jsx25(Text2, { className: "text-muted text-base", children: emptyText }) }) : mode === "card" ? (
2360
+ loading ? /* @__PURE__ */ jsx25(View21, { className: "gap-3", children: [1, 2, 3].map((idx) => /* @__PURE__ */ jsx25(Skeleton, { className: "h-20 w-full rounded-2xl" }, idx)) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx25(Card, { className: "items-center justify-center p-8", children: /* @__PURE__ */ jsx25(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-base", children: emptyText }) }) : mode === "card" ? (
2362
2361
  /* Mobile Card Mode */
2363
2362
  /* @__PURE__ */ jsx25(View21, { className: "gap-3", children: paginatedData.map((item, idx) => /* @__PURE__ */ jsx25(
2364
2363
  Pressable12,
@@ -2372,10 +2371,10 @@ function DataTable({
2372
2371
  return /* @__PURE__ */ jsxs12(
2373
2372
  View21,
2374
2373
  {
2375
- className: "flex-row items-center justify-between py-1 border-b border-border/40 last:border-b-0",
2374
+ className: "flex-row items-center justify-between py-1 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0",
2376
2375
  children: [
2377
- /* @__PURE__ */ jsx25(Text2, { className: "text-xs font-semibold text-muted uppercase tracking-wider", children: col.title }),
2378
- /* @__PURE__ */ jsx25(View21, { className: "shrink", children: typeof renderedVal === "string" ? /* @__PURE__ */ jsx25(Text2, { className: "text-sm font-medium text-foreground", children: renderedVal }) : renderedVal })
2376
+ /* @__PURE__ */ jsx25(Text2, { className: "text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: col.title }),
2377
+ /* @__PURE__ */ jsx25(View21, { className: "shrink", children: typeof renderedVal === "string" ? /* @__PURE__ */ jsx25(Text2, { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: renderedVal }) : renderedVal })
2379
2378
  ]
2380
2379
  },
2381
2380
  String(col.key)
@@ -2386,8 +2385,8 @@ function DataTable({
2386
2385
  )) })
2387
2386
  ) : (
2388
2387
  /* Horizontal Table Mode */
2389
- /* @__PURE__ */ jsx25(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsxs12(View21, { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
2390
- /* @__PURE__ */ jsx25(View21, { className: "flex-row bg-muted/10 border-b border-border", children: columns.map((col) => /* @__PURE__ */ jsxs12(
2388
+ /* @__PURE__ */ jsx25(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsxs12(View21, { className: "rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden", children: [
2389
+ /* @__PURE__ */ jsx25(View21, { className: "flex-row bg-neutral-100 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-800", children: columns.map((col) => /* @__PURE__ */ jsxs12(
2391
2390
  Pressable12,
2392
2391
  {
2393
2392
  disabled: !col.sortable,
@@ -2395,8 +2394,8 @@ function DataTable({
2395
2394
  style: { width: col.width || 120 },
2396
2395
  className: "px-4 py-3 flex-row items-center justify-between",
2397
2396
  children: [
2398
- /* @__PURE__ */ jsx25(Text2, { className: "text-xs font-bold text-foreground uppercase tracking-wider", children: col.title }),
2399
- col.sortable && /* @__PURE__ */ jsx25(Text2, { className: "text-xs text-muted", children: sortKey === col.key ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u21C5" })
2397
+ /* @__PURE__ */ jsx25(Text2, { className: "text-xs font-bold text-neutral-900 dark:text-neutral-100 uppercase tracking-wider", children: col.title }),
2398
+ col.sortable && /* @__PURE__ */ jsx25(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: sortKey === col.key ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u21C5" })
2400
2399
  ]
2401
2400
  },
2402
2401
  String(col.key)
@@ -2406,7 +2405,7 @@ function DataTable({
2406
2405
  {
2407
2406
  disabled: !onRowPress,
2408
2407
  onPress: () => onRowPress?.(item),
2409
- className: "flex-row border-b border-border/60 active:bg-muted/10",
2408
+ className: "flex-row border-b border-neutral-200 dark:border-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-800",
2410
2409
  children: columns.map((col) => {
2411
2410
  const rawVal = item[col.key];
2412
2411
  const renderedVal = col.render ? col.render(rawVal, item) : String(rawVal ?? "\u2014");
@@ -2415,7 +2414,7 @@ function DataTable({
2415
2414
  {
2416
2415
  style: { width: col.width || 120 },
2417
2416
  className: "px-4 py-3 justify-center",
2418
- children: typeof renderedVal === "string" ? /* @__PURE__ */ jsx25(Text2, { className: "text-sm text-foreground", children: renderedVal }) : renderedVal
2417
+ children: typeof renderedVal === "string" ? /* @__PURE__ */ jsx25(Text2, { className: "text-sm text-neutral-900 dark:text-neutral-100", children: renderedVal }) : renderedVal
2419
2418
  },
2420
2419
  String(col.key)
2421
2420
  );
@@ -2426,7 +2425,7 @@ function DataTable({
2426
2425
  ] }) })
2427
2426
  ),
2428
2427
  totalPages > 1 && /* @__PURE__ */ jsxs12(View21, { className: "flex-row items-center justify-between pt-2", children: [
2429
- /* @__PURE__ */ jsxs12(Text2, { className: "text-xs text-muted", children: [
2428
+ /* @__PURE__ */ jsxs12(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [
2430
2429
  "Showing ",
2431
2430
  (currentPage - 1) * pageSize + 1,
2432
2431
  " -",
@@ -2447,7 +2446,7 @@ function DataTable({
2447
2446
  children: "Prev"
2448
2447
  }
2449
2448
  ),
2450
- /* @__PURE__ */ jsxs12(Text2, { className: "text-xs font-medium text-foreground px-1", children: [
2449
+ /* @__PURE__ */ jsxs12(Text2, { className: "text-xs font-medium text-neutral-900 dark:text-neutral-100 px-1", children: [
2451
2450
  currentPage,
2452
2451
  " / ",
2453
2452
  totalPages
@@ -2933,8 +2932,8 @@ var DashboardTemplate = ({
2933
2932
  /* @__PURE__ */ jsx29(AvatarFallback, { text: userName.slice(0, 2).toUpperCase() })
2934
2933
  ] }),
2935
2934
  /* @__PURE__ */ jsxs16(View25, { children: [
2936
- /* @__PURE__ */ jsx29(Text2, { className: "text-xs text-muted font-medium uppercase tracking-wider", children: userRole }),
2937
- /* @__PURE__ */ jsxs16(Heading, { level: 3, className: "text-xl font-bold text-foreground", children: [
2935
+ /* @__PURE__ */ jsx29(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wider", children: userRole }),
2936
+ /* @__PURE__ */ jsxs16(Heading, { level: 3, className: "text-xl font-bold text-neutral-900 dark:text-neutral-50", children: [
2938
2937
  "Hello, ",
2939
2938
  userName,
2940
2939
  " \u{1F44B}"
@@ -2945,9 +2944,9 @@ var DashboardTemplate = ({
2945
2944
  Pressable16,
2946
2945
  {
2947
2946
  onPress: onNotificationPress,
2948
- className: "w-10 h-10 rounded-full border border-border bg-card items-center justify-center relative active:opacity-70",
2947
+ 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",
2949
2948
  children: [
2950
- /* @__PURE__ */ jsx29(Text2, { className: "text-base text-foreground", children: "\u{1F514}" }),
2949
+ /* @__PURE__ */ jsx29(Text2, { className: "text-base text-neutral-900 dark:text-neutral-100", children: "\u{1F514}" }),
2951
2950
  unreadNotificationsCount > 0 && /* @__PURE__ */ jsx29(View25, { className: "absolute -top-1 -right-1 w-5 h-5 rounded-full bg-danger items-center justify-center", children: /* @__PURE__ */ jsx29(Text2, { className: "text-[10px] font-bold text-white", children: unreadNotificationsCount > 9 ? "9+" : unreadNotificationsCount }) })
2952
2951
  ]
2953
2952
  }
@@ -2955,7 +2954,7 @@ var DashboardTemplate = ({
2955
2954
  ] }),
2956
2955
  /* @__PURE__ */ jsxs16(View25, { className: "px-6 pt-6 gap-6", children: [
2957
2956
  quickActions && quickActions.length > 0 && /* @__PURE__ */ jsxs16(View25, { className: "gap-2", children: [
2958
- /* @__PURE__ */ jsx29(Text2, { className: "text-xs font-bold text-muted uppercase tracking-wider", children: "Quick Actions" }),
2957
+ /* @__PURE__ */ jsx29(Text2, { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Quick Actions" }),
2959
2958
  /* @__PURE__ */ jsx29(
2960
2959
  ScrollView6,
2961
2960
  {
@@ -2968,7 +2967,6 @@ var DashboardTemplate = ({
2968
2967
  variant: "outline",
2969
2968
  size: "sm",
2970
2969
  onPress: action.onPress,
2971
- className: "bg-card shadow-sm",
2972
2970
  children: action.icon ? `${action.icon} ${action.label}` : action.label
2973
2971
  },
2974
2972
  action.id
@@ -2977,18 +2975,18 @@ var DashboardTemplate = ({
2977
2975
  )
2978
2976
  ] }),
2979
2977
  /* @__PURE__ */ jsxs16(View25, { className: "gap-3", children: [
2980
- /* @__PURE__ */ jsx29(Text2, { className: "text-xs font-bold text-muted uppercase tracking-wider", children: "Overview Performance" }),
2978
+ /* @__PURE__ */ jsx29(Text2, { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Overview Performance" }),
2981
2979
  /* @__PURE__ */ jsx29(View25, { className: "gap-3", children: metrics.map((metric) => /* @__PURE__ */ jsx29(StatsCard, { ...metric }, metric.id)) })
2982
2980
  ] }),
2983
2981
  recentActivities && recentActivities.length > 0 && /* @__PURE__ */ jsxs16(Card, { className: "gap-2", children: [
2984
2982
  /* @__PURE__ */ jsxs16(CardHeader, { className: "flex-row items-center justify-between pb-2", children: [
2985
2983
  /* @__PURE__ */ jsx29(CardTitle, { className: "text-base font-bold", children: "Recent Activity" }),
2986
- onViewAllActivities && /* @__PURE__ */ jsx29(Pressable16, { onPress: onViewAllActivities, children: /* @__PURE__ */ jsx29(Text2, { className: "text-xs font-semibold text-primary", children: "View all" }) })
2984
+ onViewAllActivities && /* @__PURE__ */ jsx29(Pressable16, { onPress: onViewAllActivities, children: /* @__PURE__ */ jsx29(Text2, { className: "text-xs font-semibold text-primary-600 dark:text-primary-400", children: "View all" }) })
2987
2985
  ] }),
2988
2986
  /* @__PURE__ */ jsx29(CardContent, { className: "gap-3 pt-0", children: recentActivities.map((act) => /* @__PURE__ */ jsxs16(
2989
2987
  View25,
2990
2988
  {
2991
- className: "flex-row items-center justify-between py-2 border-b border-border/40 last:border-b-0",
2989
+ className: "flex-row items-center justify-between py-2 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0",
2992
2990
  children: [
2993
2991
  /* @__PURE__ */ jsxs16(View25, { className: "flex-row items-center gap-3 flex-1 pr-2", children: [
2994
2992
  /* @__PURE__ */ jsxs16(Avatar, { size: "sm", children: [
@@ -3001,8 +2999,8 @@ var DashboardTemplate = ({
3001
2999
  )
3002
3000
  ] }),
3003
3001
  /* @__PURE__ */ jsxs16(View25, { className: "flex-1", children: [
3004
- /* @__PURE__ */ jsx29(Text2, { className: "text-sm font-semibold text-foreground", numberOfLines: 1, children: act.title }),
3005
- /* @__PURE__ */ jsxs16(Text2, { className: "text-xs text-muted", numberOfLines: 1, children: [
3002
+ /* @__PURE__ */ jsx29(Text2, { className: "text-sm font-semibold text-neutral-900 dark:text-neutral-100", numberOfLines: 1, children: act.title }),
3003
+ /* @__PURE__ */ jsxs16(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", numberOfLines: 1, children: [
3006
3004
  act.subtitle,
3007
3005
  " \u2022 ",
3008
3006
  act.timestamp
@@ -3010,7 +3008,7 @@ var DashboardTemplate = ({
3010
3008
  ] })
3011
3009
  ] }),
3012
3010
  /* @__PURE__ */ jsxs16(View25, { className: "items-end gap-1", children: [
3013
- act.amount && /* @__PURE__ */ jsx29(Text2, { className: "text-sm font-bold text-foreground", children: act.amount }),
3011
+ act.amount && /* @__PURE__ */ jsx29(Text2, { className: "text-sm font-bold text-neutral-900 dark:text-neutral-100", children: act.amount }),
3014
3012
  act.status && /* @__PURE__ */ jsx29(Badge, { variant: act.status.variant, size: "sm", children: act.status.label })
3015
3013
  ] })
3016
3014
  ]
@@ -3183,6 +3181,7 @@ var SettingsTemplate = ({
3183
3181
  // src/providers/BeyondUIProvider.tsx
3184
3182
  import * as React26 from "react";
3185
3183
  import { View as View27, useColorScheme as useRNColorScheme } from "react-native";
3184
+ import { colorScheme as nwColorScheme } from "nativewind";
3186
3185
  import { PortalHost } from "@rn-primitives/portal";
3187
3186
  import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
3188
3187
  var BeyondUIContext = React26.createContext({
@@ -3203,10 +3202,28 @@ function BeyondUIProvider({
3203
3202
  const [selectedScheme, setSelectedScheme] = React26.useState(defaultColorScheme);
3204
3203
  const [toasts, setToasts] = React26.useState([]);
3205
3204
  const activeScheme = selectedScheme === "system" ? systemScheme : selectedScheme;
3205
+ React26.useEffect(() => {
3206
+ try {
3207
+ nwColorScheme.set(selectedScheme === "system" ? "system" : activeScheme);
3208
+ } catch (_) {
3209
+ }
3210
+ }, [selectedScheme, activeScheme]);
3211
+ const handleSetColorScheme = React26.useCallback((scheme) => {
3212
+ setSelectedScheme(scheme);
3213
+ try {
3214
+ nwColorScheme.set(scheme === "system" ? "system" : scheme);
3215
+ } catch (_) {
3216
+ }
3217
+ }, []);
3206
3218
  const toggleColorScheme = React26.useCallback(() => {
3207
3219
  setSelectedScheme((prev) => {
3208
3220
  const current = prev === "system" ? systemScheme : prev;
3209
- return current === "dark" ? "light" : "dark";
3221
+ const next = current === "dark" ? "light" : "dark";
3222
+ try {
3223
+ nwColorScheme.set(next);
3224
+ } catch (_) {
3225
+ }
3226
+ return next;
3210
3227
  });
3211
3228
  }, [systemScheme]);
3212
3229
  const dismissToast = React26.useCallback((id) => {
@@ -3233,16 +3250,16 @@ function BeyondUIProvider({
3233
3250
  const contextValue = React26.useMemo(
3234
3251
  () => ({
3235
3252
  colorScheme: activeScheme,
3236
- setColorScheme: setSelectedScheme,
3253
+ setColorScheme: handleSetColorScheme,
3237
3254
  toggleColorScheme
3238
3255
  }),
3239
- [activeScheme, toggleColorScheme]
3256
+ [activeScheme, handleSetColorScheme, toggleColorScheme]
3240
3257
  );
3241
3258
  return /* @__PURE__ */ jsx31(BeyondUIContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx31(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ jsxs18(
3242
3259
  View27,
3243
3260
  {
3244
3261
  style: { flex: 1 },
3245
- className: activeScheme === "dark" ? "dark flex-1" : "flex-1",
3262
+ className: activeScheme === "dark" ? "dark flex-1 bg-neutral-950" : "flex-1 bg-white",
3246
3263
  children: [
3247
3264
  children,
3248
3265
  /* @__PURE__ */ jsx31(PortalHost, {}),