@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.
- package/dist/index.js +78 -61
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +78 -61
- package/dist/index.mjs.map +1 -1
- package/package.json +11 -5
- package/src/components/accordion/accordion.tsx +245 -0
- package/src/components/accordion/index.ts +1 -0
- package/src/components/alert/alert.tsx +118 -0
- package/src/components/alert/index.ts +1 -0
- package/src/components/avatar/avatar.tsx +125 -0
- package/src/components/avatar/index.ts +1 -0
- package/src/components/badge/badge.tsx +89 -0
- package/src/components/badge/index.ts +1 -0
- package/src/components/bottom-sheet/bottom-sheet.tsx +336 -0
- package/src/components/bottom-sheet/index.ts +1 -0
- package/src/components/button/button.tsx +172 -0
- package/src/components/button/index.ts +1 -0
- package/src/components/card/card.tsx +121 -0
- package/src/components/card/index.ts +1 -0
- package/src/components/checkbox/checkbox.tsx +100 -0
- package/src/components/checkbox/index.ts +1 -0
- package/src/components/data-table/data-table.tsx +276 -0
- package/src/components/data-table/index.ts +1 -0
- package/src/components/dialog/dialog.tsx +278 -0
- package/src/components/dialog/index.ts +1 -0
- package/src/components/input/index.ts +1 -0
- package/src/components/input/input.tsx +130 -0
- package/src/components/radio/index.ts +1 -0
- package/src/components/radio/radio.tsx +117 -0
- package/src/components/select/index.ts +1 -0
- package/src/components/select/select.tsx +377 -0
- package/src/components/separator/index.ts +1 -0
- package/src/components/separator/separator.tsx +28 -0
- package/src/components/skeleton/index.ts +1 -0
- package/src/components/skeleton/skeleton.tsx +43 -0
- package/src/components/spinner/index.ts +1 -0
- package/src/components/spinner/spinner.tsx +46 -0
- package/src/components/stats-card/index.ts +1 -0
- package/src/components/stats-card/stats-card.tsx +92 -0
- package/src/components/switch/index.ts +1 -0
- package/src/components/switch/switch.tsx +80 -0
- package/src/components/tabs/index.ts +1 -0
- package/src/components/tabs/tabs.tsx +172 -0
- package/src/components/text/heading.tsx +50 -0
- package/src/components/text/index.ts +2 -0
- package/src/components/text/text.tsx +62 -0
- package/src/components/textarea/index.ts +1 -0
- package/src/components/textarea/textarea.tsx +87 -0
- package/src/components/toast/index.ts +2 -0
- package/src/components/toast/toast.tsx +136 -0
- package/src/components/toast/types.ts +32 -0
- package/src/index.ts +42 -0
- package/src/primitives/box.tsx +25 -0
- package/src/primitives/index.ts +2 -0
- package/src/primitives/pressable.tsx +49 -0
- package/src/providers/BeyondUIProvider.tsx +119 -0
- package/src/templates/auth/ForgotPasswordTemplate.tsx +132 -0
- package/src/templates/auth/SignInTemplate.tsx +213 -0
- package/src/templates/auth/SignUpTemplate.tsx +233 -0
- package/src/templates/auth/index.ts +3 -0
- package/src/templates/dashboard/DashboardTemplate.tsx +204 -0
- package/src/templates/dashboard/index.ts +1 -0
- package/src/templates/index.ts +3 -0
- package/src/templates/settings/SettingsTemplate.tsx +226 -0
- package/src/templates/settings/index.ts +1 -0
- package/src/theme/preset.ts +45 -0
- package/src/theme/tokens.ts +144 -0
- package/src/types/nativewind-env.d.ts +26 -0
- package/src/utilities/accessibility.ts +43 -0
- package/src/utilities/cn.ts +9 -0
- package/src/utilities/index.ts +2 -0
package/dist/index.js
CHANGED
|
@@ -2006,12 +2006,12 @@ var BottomSheetContent = React20.forwardRef(
|
|
|
2006
2006
|
ref,
|
|
2007
2007
|
style: { transform: [{ translateY }] },
|
|
2008
2008
|
className: cn(
|
|
2009
|
-
"w-full bg-
|
|
2009
|
+
"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%]",
|
|
2010
2010
|
className
|
|
2011
2011
|
),
|
|
2012
2012
|
...props,
|
|
2013
2013
|
children: [
|
|
2014
|
-
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { ...panResponder.panHandlers, className: "w-full py-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { className: "w-12 h-1.5 rounded-full bg-
|
|
2014
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { ...panResponder.panHandlers, className: "w-full py-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { className: "w-12 h-1.5 rounded-full bg-neutral-300 dark:bg-neutral-700" }) }),
|
|
2015
2015
|
children
|
|
2016
2016
|
]
|
|
2017
2017
|
}
|
|
@@ -2030,14 +2030,14 @@ var BottomSheetTitle = ({
|
|
|
2030
2030
|
className,
|
|
2031
2031
|
children
|
|
2032
2032
|
}) => {
|
|
2033
|
-
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Heading, { level: 4, className: cn("text-xl font-bold text-
|
|
2033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Heading, { level: 4, className: cn("text-xl font-bold text-neutral-900 dark:text-neutral-50", className), children });
|
|
2034
2034
|
};
|
|
2035
2035
|
BottomSheetTitle.displayName = "BottomSheetTitle";
|
|
2036
2036
|
var BottomSheetDescription = ({
|
|
2037
2037
|
className,
|
|
2038
2038
|
children
|
|
2039
2039
|
}) => {
|
|
2040
|
-
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text2, { className: cn("text-sm text-
|
|
2040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text2, { className: cn("text-sm text-neutral-500 dark:text-neutral-400", className), children });
|
|
2041
2041
|
};
|
|
2042
2042
|
BottomSheetDescription.displayName = "BottomSheetDescription";
|
|
2043
2043
|
var BottomSheetBody = React20.forwardRef(
|
|
@@ -2080,11 +2080,11 @@ var import_react_native24 = require("react-native");
|
|
|
2080
2080
|
var import_class_variance_authority10 = require("class-variance-authority");
|
|
2081
2081
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2082
2082
|
var selectTriggerVariants = (0, import_class_variance_authority10.cva)(
|
|
2083
|
-
"flex-row items-center justify-between rounded-xl border bg-
|
|
2083
|
+
"flex-row items-center justify-between rounded-xl border bg-white dark:bg-neutral-900 px-4 py-3 active:opacity-80",
|
|
2084
2084
|
{
|
|
2085
2085
|
variants: {
|
|
2086
2086
|
variant: {
|
|
2087
|
-
default: "border-border",
|
|
2087
|
+
default: "border-neutral-300 dark:border-neutral-700",
|
|
2088
2088
|
error: "border-danger",
|
|
2089
2089
|
success: "border-success"
|
|
2090
2090
|
},
|
|
@@ -2160,7 +2160,7 @@ var Select = ({
|
|
|
2160
2160
|
onSelect: handleSelect
|
|
2161
2161
|
},
|
|
2162
2162
|
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: cn("w-full gap-1.5", className), children: [
|
|
2163
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-sm font-medium text-
|
|
2163
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-sm font-medium text-neutral-800 dark:text-neutral-200", children: label }),
|
|
2164
2164
|
children ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2165
2165
|
import_react_native24.Pressable,
|
|
2166
2166
|
{
|
|
@@ -2178,16 +2178,16 @@ var Select = ({
|
|
|
2178
2178
|
{
|
|
2179
2179
|
className: cn(
|
|
2180
2180
|
"text-base",
|
|
2181
|
-
displayLabel ? "text-
|
|
2181
|
+
displayLabel ? "text-neutral-900 dark:text-neutral-100 font-medium" : "text-neutral-500 dark:text-neutral-400 font-normal"
|
|
2182
2182
|
),
|
|
2183
2183
|
children: displayLabel || placeholder
|
|
2184
2184
|
}
|
|
2185
2185
|
),
|
|
2186
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-
|
|
2186
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-xs", children: "\u25BC" })
|
|
2187
2187
|
]
|
|
2188
2188
|
}
|
|
2189
2189
|
),
|
|
2190
|
-
error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-xs text-danger font-medium", children: error }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-xs text-
|
|
2190
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-xs text-danger font-medium", children: error }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: helperText }) : null,
|
|
2191
2191
|
options && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2192
2192
|
import_react_native24.Modal,
|
|
2193
2193
|
{
|
|
@@ -2198,10 +2198,10 @@ var Select = ({
|
|
|
2198
2198
|
statusBarTranslucent: true,
|
|
2199
2199
|
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "flex-1 justify-end bg-black/60", children: [
|
|
2200
2200
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.Pressable, { className: "flex-1", onPress: () => setOpen(false) }),
|
|
2201
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "w-full bg-
|
|
2202
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "flex-row items-center justify-between pb-4 border-b border-border mb-3", children: [
|
|
2203
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-lg font-bold text-
|
|
2204
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.Pressable, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-
|
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.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%]", children: [
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "flex-row items-center justify-between pb-4 border-b border-neutral-200 dark:border-neutral-800 mb-3", children: [
|
|
2203
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-lg font-bold text-neutral-900 dark:text-neutral-50", children: label || placeholder }),
|
|
2204
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.Pressable, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-lg font-semibold", children: "\u2715" }) })
|
|
2205
2205
|
] }),
|
|
2206
2206
|
searchable && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2207
2207
|
import_react_native24.TextInput,
|
|
@@ -2210,10 +2210,10 @@ var Select = ({
|
|
|
2210
2210
|
onChangeText: setSearchQuery,
|
|
2211
2211
|
placeholder: "Search options...",
|
|
2212
2212
|
placeholderTextColor: "#9ca3af",
|
|
2213
|
-
className: "h-11 px-4 rounded-xl border border-border bg-
|
|
2213
|
+
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"
|
|
2214
2214
|
}
|
|
2215
2215
|
) }),
|
|
2216
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.ScrollView, { className: "max-h-80", showsVerticalScrollIndicator: false, children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { className: "py-8 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-
|
|
2216
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.ScrollView, { className: "max-h-80", showsVerticalScrollIndicator: false, children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { className: "py-8 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-sm", children: "No options found" }) }) : filteredOptions.map((opt) => {
|
|
2217
2217
|
const isSelected = opt.value === currentValue;
|
|
2218
2218
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2219
2219
|
import_react_native24.Pressable,
|
|
@@ -2221,8 +2221,8 @@ var Select = ({
|
|
|
2221
2221
|
disabled: opt.disabled,
|
|
2222
2222
|
onPress: () => handleSelect(opt.value),
|
|
2223
2223
|
className: cn(
|
|
2224
|
-
"flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-
|
|
2225
|
-
isSelected && "bg-primary/
|
|
2224
|
+
"flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
|
|
2225
|
+
isSelected && "bg-primary-50 dark:bg-primary-950/40",
|
|
2226
2226
|
opt.disabled && "opacity-40"
|
|
2227
2227
|
),
|
|
2228
2228
|
children: [
|
|
@@ -2231,12 +2231,12 @@ var Select = ({
|
|
|
2231
2231
|
{
|
|
2232
2232
|
className: cn(
|
|
2233
2233
|
"text-base",
|
|
2234
|
-
isSelected ? "text-primary font-semibold" : "text-
|
|
2234
|
+
isSelected ? "text-primary-600 dark:text-primary-400 font-semibold" : "text-neutral-900 dark:text-neutral-100 font-normal"
|
|
2235
2235
|
),
|
|
2236
2236
|
children: opt.label
|
|
2237
2237
|
}
|
|
2238
2238
|
),
|
|
2239
|
-
isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-primary font-bold text-base", children: "\u2713" })
|
|
2239
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-primary-600 dark:text-primary-400 font-bold text-base", children: "\u2713" })
|
|
2240
2240
|
]
|
|
2241
2241
|
},
|
|
2242
2242
|
opt.value
|
|
@@ -2264,13 +2264,13 @@ var SelectTrigger = ({
|
|
|
2264
2264
|
accessibilityRole: "combobox",
|
|
2265
2265
|
accessibilityState: { expanded: open },
|
|
2266
2266
|
className: cn(
|
|
2267
|
-
"flex-row items-center justify-between rounded-xl border border-border bg-
|
|
2267
|
+
"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",
|
|
2268
2268
|
className
|
|
2269
2269
|
),
|
|
2270
2270
|
...props,
|
|
2271
2271
|
children: [
|
|
2272
2272
|
children,
|
|
2273
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-
|
|
2273
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-xs", children: "\u25BC" })
|
|
2274
2274
|
]
|
|
2275
2275
|
}
|
|
2276
2276
|
);
|
|
@@ -2286,7 +2286,7 @@ var SelectValue = ({
|
|
|
2286
2286
|
{
|
|
2287
2287
|
className: cn(
|
|
2288
2288
|
"text-base",
|
|
2289
|
-
value ? "text-
|
|
2289
|
+
value ? "text-neutral-900 dark:text-neutral-100 font-medium" : "text-neutral-500 dark:text-neutral-400",
|
|
2290
2290
|
className
|
|
2291
2291
|
),
|
|
2292
2292
|
children: value || placeholder
|
|
@@ -2307,10 +2307,10 @@ var SelectContent = ({ title, children }) => {
|
|
|
2307
2307
|
statusBarTranslucent: true,
|
|
2308
2308
|
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "flex-1 justify-end bg-black/60", children: [
|
|
2309
2309
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.Pressable, { className: "flex-1", onPress: () => setOpen(false) }),
|
|
2310
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "w-full bg-
|
|
2311
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "flex-row items-center justify-between pb-3 border-b border-border mb-3", children: [
|
|
2312
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-lg font-bold text-
|
|
2313
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.Pressable, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-
|
|
2310
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.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%]", children: [
|
|
2311
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { className: "flex-row items-center justify-between pb-3 border-b border-neutral-200 dark:border-neutral-800 mb-3", children: [
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-lg font-bold text-neutral-900 dark:text-neutral-100", children: title || "Select" }),
|
|
2313
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.Pressable, { onPress: () => setOpen(false), className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-lg font-semibold", children: "\u2715" }) })
|
|
2314
2314
|
] }),
|
|
2315
2315
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.ScrollView, { className: "max-h-80", children })
|
|
2316
2316
|
] })
|
|
@@ -2331,8 +2331,8 @@ var SelectItem = ({
|
|
|
2331
2331
|
{
|
|
2332
2332
|
onPress: () => onSelect(itemValue),
|
|
2333
2333
|
className: cn(
|
|
2334
|
-
"flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-
|
|
2335
|
-
isSelected && "bg-primary/
|
|
2334
|
+
"flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
|
|
2335
|
+
isSelected && "bg-primary-50 dark:bg-primary-950/40",
|
|
2336
2336
|
className
|
|
2337
2337
|
),
|
|
2338
2338
|
children: [
|
|
@@ -2341,12 +2341,12 @@ var SelectItem = ({
|
|
|
2341
2341
|
{
|
|
2342
2342
|
className: cn(
|
|
2343
2343
|
"text-base",
|
|
2344
|
-
isSelected ? "text-primary font-semibold" : "text-
|
|
2344
|
+
isSelected ? "text-primary-600 dark:text-primary-400 font-semibold" : "text-neutral-900 dark:text-neutral-100 font-normal"
|
|
2345
2345
|
),
|
|
2346
2346
|
children
|
|
2347
2347
|
}
|
|
2348
2348
|
) : children,
|
|
2349
|
-
isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-primary font-bold text-base", children: "\u2713" })
|
|
2349
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text2, { className: "text-primary-600 dark:text-primary-400 font-bold text-base", children: "\u2713" })
|
|
2350
2350
|
]
|
|
2351
2351
|
}
|
|
2352
2352
|
);
|
|
@@ -2431,11 +2431,10 @@ function DataTable({
|
|
|
2431
2431
|
onChangeText: (val) => {
|
|
2432
2432
|
setSearch(val);
|
|
2433
2433
|
setCurrentPage(1);
|
|
2434
|
-
}
|
|
2435
|
-
className: "bg-card"
|
|
2434
|
+
}
|
|
2436
2435
|
}
|
|
2437
2436
|
),
|
|
2438
|
-
loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { className: "gap-3", children: [1, 2, 3].map((idx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Skeleton, { className: "h-20 w-full rounded-2xl" }, idx)) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { className: "items-center justify-center p-8", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-
|
|
2437
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { className: "gap-3", children: [1, 2, 3].map((idx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Skeleton, { className: "h-20 w-full rounded-2xl" }, idx)) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Card, { className: "items-center justify-center p-8", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-neutral-500 dark:text-neutral-400 text-base", children: emptyText }) }) : mode === "card" ? (
|
|
2439
2438
|
/* Mobile Card Mode */
|
|
2440
2439
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { className: "gap-3", children: paginatedData.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2441
2440
|
import_react_native25.Pressable,
|
|
@@ -2449,10 +2448,10 @@ function DataTable({
|
|
|
2449
2448
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
2450
2449
|
import_react_native25.View,
|
|
2451
2450
|
{
|
|
2452
|
-
className: "flex-row items-center justify-between py-1 border-b border-border
|
|
2451
|
+
className: "flex-row items-center justify-between py-1 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0",
|
|
2453
2452
|
children: [
|
|
2454
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-xs font-semibold text-
|
|
2455
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { className: "shrink", children: typeof renderedVal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-sm font-medium text-
|
|
2453
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: col.title }),
|
|
2454
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { className: "shrink", children: typeof renderedVal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: renderedVal }) : renderedVal })
|
|
2456
2455
|
]
|
|
2457
2456
|
},
|
|
2458
2457
|
String(col.key)
|
|
@@ -2463,8 +2462,8 @@ function DataTable({
|
|
|
2463
2462
|
)) })
|
|
2464
2463
|
) : (
|
|
2465
2464
|
/* Horizontal Table Mode */
|
|
2466
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native25.View, { className: "rounded-2xl border border-border bg-
|
|
2467
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { className: "flex-row bg-
|
|
2465
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native25.View, { className: "rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden", children: [
|
|
2466
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { 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__ */ (0, import_jsx_runtime25.jsxs)(
|
|
2468
2467
|
import_react_native25.Pressable,
|
|
2469
2468
|
{
|
|
2470
2469
|
disabled: !col.sortable,
|
|
@@ -2472,8 +2471,8 @@ function DataTable({
|
|
|
2472
2471
|
style: { width: col.width || 120 },
|
|
2473
2472
|
className: "px-4 py-3 flex-row items-center justify-between",
|
|
2474
2473
|
children: [
|
|
2475
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-xs font-bold text-
|
|
2476
|
-
col.sortable && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-xs text-
|
|
2474
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-xs font-bold text-neutral-900 dark:text-neutral-100 uppercase tracking-wider", children: col.title }),
|
|
2475
|
+
col.sortable && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: sortKey === col.key ? sortDirection === "asc" ? "\u25B2" : "\u25BC" : "\u21C5" })
|
|
2477
2476
|
]
|
|
2478
2477
|
},
|
|
2479
2478
|
String(col.key)
|
|
@@ -2483,7 +2482,7 @@ function DataTable({
|
|
|
2483
2482
|
{
|
|
2484
2483
|
disabled: !onRowPress,
|
|
2485
2484
|
onPress: () => onRowPress?.(item),
|
|
2486
|
-
className: "flex-row border-b border-border
|
|
2485
|
+
className: "flex-row border-b border-neutral-200 dark:border-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-800",
|
|
2487
2486
|
children: columns.map((col) => {
|
|
2488
2487
|
const rawVal = item[col.key];
|
|
2489
2488
|
const renderedVal = col.render ? col.render(rawVal, item) : String(rawVal ?? "\u2014");
|
|
@@ -2492,7 +2491,7 @@ function DataTable({
|
|
|
2492
2491
|
{
|
|
2493
2492
|
style: { width: col.width || 120 },
|
|
2494
2493
|
className: "px-4 py-3 justify-center",
|
|
2495
|
-
children: typeof renderedVal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-sm text-
|
|
2494
|
+
children: typeof renderedVal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text2, { className: "text-sm text-neutral-900 dark:text-neutral-100", children: renderedVal }) : renderedVal
|
|
2496
2495
|
},
|
|
2497
2496
|
String(col.key)
|
|
2498
2497
|
);
|
|
@@ -2503,7 +2502,7 @@ function DataTable({
|
|
|
2503
2502
|
] }) })
|
|
2504
2503
|
),
|
|
2505
2504
|
totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native25.View, { className: "flex-row items-center justify-between pt-2", children: [
|
|
2506
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text2, { className: "text-xs text-
|
|
2505
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [
|
|
2507
2506
|
"Showing ",
|
|
2508
2507
|
(currentPage - 1) * pageSize + 1,
|
|
2509
2508
|
" -",
|
|
@@ -2524,7 +2523,7 @@ function DataTable({
|
|
|
2524
2523
|
children: "Prev"
|
|
2525
2524
|
}
|
|
2526
2525
|
),
|
|
2527
|
-
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text2, { className: "text-xs font-medium text-
|
|
2526
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Text2, { className: "text-xs font-medium text-neutral-900 dark:text-neutral-100 px-1", children: [
|
|
2528
2527
|
currentPage,
|
|
2529
2528
|
" / ",
|
|
2530
2529
|
totalPages
|
|
@@ -2988,8 +2987,8 @@ var DashboardTemplate = ({
|
|
|
2988
2987
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AvatarFallback, { text: userName.slice(0, 2).toUpperCase() })
|
|
2989
2988
|
] }),
|
|
2990
2989
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { children: [
|
|
2991
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs text-
|
|
2992
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Heading, { level: 3, className: "text-xl font-bold text-
|
|
2990
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wider", children: userRole }),
|
|
2991
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Heading, { level: 3, className: "text-xl font-bold text-neutral-900 dark:text-neutral-50", children: [
|
|
2993
2992
|
"Hello, ",
|
|
2994
2993
|
userName,
|
|
2995
2994
|
" \u{1F44B}"
|
|
@@ -3000,9 +2999,9 @@ var DashboardTemplate = ({
|
|
|
3000
2999
|
import_react_native29.Pressable,
|
|
3001
3000
|
{
|
|
3002
3001
|
onPress: onNotificationPress,
|
|
3003
|
-
className: "w-10 h-10 rounded-full border border-border bg-
|
|
3002
|
+
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",
|
|
3004
3003
|
children: [
|
|
3005
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-base text-
|
|
3004
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-base text-neutral-900 dark:text-neutral-100", children: "\u{1F514}" }),
|
|
3006
3005
|
unreadNotificationsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { className: "absolute -top-1 -right-1 w-5 h-5 rounded-full bg-danger items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-[10px] font-bold text-white", children: unreadNotificationsCount > 9 ? "9+" : unreadNotificationsCount }) })
|
|
3007
3006
|
]
|
|
3008
3007
|
}
|
|
@@ -3010,7 +3009,7 @@ var DashboardTemplate = ({
|
|
|
3010
3009
|
] }),
|
|
3011
3010
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { className: "px-6 pt-6 gap-6", children: [
|
|
3012
3011
|
quickActions && quickActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { className: "gap-2", children: [
|
|
3013
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs font-bold text-
|
|
3012
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Quick Actions" }),
|
|
3014
3013
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
3015
3014
|
import_react_native29.ScrollView,
|
|
3016
3015
|
{
|
|
@@ -3023,7 +3022,6 @@ var DashboardTemplate = ({
|
|
|
3023
3022
|
variant: "outline",
|
|
3024
3023
|
size: "sm",
|
|
3025
3024
|
onPress: action.onPress,
|
|
3026
|
-
className: "bg-card shadow-sm",
|
|
3027
3025
|
children: action.icon ? `${action.icon} ${action.label}` : action.label
|
|
3028
3026
|
},
|
|
3029
3027
|
action.id
|
|
@@ -3032,18 +3030,18 @@ var DashboardTemplate = ({
|
|
|
3032
3030
|
)
|
|
3033
3031
|
] }),
|
|
3034
3032
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { className: "gap-3", children: [
|
|
3035
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs font-bold text-
|
|
3033
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Overview Performance" }),
|
|
3036
3034
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { className: "gap-3", children: metrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StatsCard, { ...metric }, metric.id)) })
|
|
3037
3035
|
] }),
|
|
3038
3036
|
recentActivities && recentActivities.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { className: "gap-2", children: [
|
|
3039
3037
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CardHeader, { className: "flex-row items-center justify-between pb-2", children: [
|
|
3040
3038
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardTitle, { className: "text-base font-bold", children: "Recent Activity" }),
|
|
3041
|
-
onViewAllActivities && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.Pressable, { onPress: onViewAllActivities, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs font-semibold text-primary", children: "View all" }) })
|
|
3039
|
+
onViewAllActivities && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.Pressable, { onPress: onViewAllActivities, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-xs font-semibold text-primary-600 dark:text-primary-400", children: "View all" }) })
|
|
3042
3040
|
] }),
|
|
3043
3041
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardContent, { className: "gap-3 pt-0", children: recentActivities.map((act) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
3044
3042
|
import_react_native29.View,
|
|
3045
3043
|
{
|
|
3046
|
-
className: "flex-row items-center justify-between py-2 border-b border-border
|
|
3044
|
+
className: "flex-row items-center justify-between py-2 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0",
|
|
3047
3045
|
children: [
|
|
3048
3046
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { className: "flex-row items-center gap-3 flex-1 pr-2", children: [
|
|
3049
3047
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Avatar, { size: "sm", children: [
|
|
@@ -3056,8 +3054,8 @@ var DashboardTemplate = ({
|
|
|
3056
3054
|
)
|
|
3057
3055
|
] }),
|
|
3058
3056
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { className: "flex-1", children: [
|
|
3059
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-sm font-semibold text-
|
|
3060
|
-
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Text2, { className: "text-xs text-
|
|
3057
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-sm font-semibold text-neutral-900 dark:text-neutral-100", numberOfLines: 1, children: act.title }),
|
|
3058
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Text2, { className: "text-xs text-neutral-500 dark:text-neutral-400", numberOfLines: 1, children: [
|
|
3061
3059
|
act.subtitle,
|
|
3062
3060
|
" \u2022 ",
|
|
3063
3061
|
act.timestamp
|
|
@@ -3065,7 +3063,7 @@ var DashboardTemplate = ({
|
|
|
3065
3063
|
] })
|
|
3066
3064
|
] }),
|
|
3067
3065
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { className: "items-end gap-1", children: [
|
|
3068
|
-
act.amount && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-sm font-bold text-
|
|
3066
|
+
act.amount && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text2, { className: "text-sm font-bold text-neutral-900 dark:text-neutral-100", children: act.amount }),
|
|
3069
3067
|
act.status && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Badge, { variant: act.status.variant, size: "sm", children: act.status.label })
|
|
3070
3068
|
] })
|
|
3071
3069
|
]
|
|
@@ -3234,6 +3232,7 @@ var SettingsTemplate = ({
|
|
|
3234
3232
|
// src/providers/BeyondUIProvider.tsx
|
|
3235
3233
|
var React26 = __toESM(require("react"));
|
|
3236
3234
|
var import_react_native31 = require("react-native");
|
|
3235
|
+
var import_nativewind = require("nativewind");
|
|
3237
3236
|
var import_portal = require("@rn-primitives/portal");
|
|
3238
3237
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3239
3238
|
var BeyondUIContext = React26.createContext({
|
|
@@ -3254,10 +3253,28 @@ function BeyondUIProvider({
|
|
|
3254
3253
|
const [selectedScheme, setSelectedScheme] = React26.useState(defaultColorScheme);
|
|
3255
3254
|
const [toasts, setToasts] = React26.useState([]);
|
|
3256
3255
|
const activeScheme = selectedScheme === "system" ? systemScheme : selectedScheme;
|
|
3256
|
+
React26.useEffect(() => {
|
|
3257
|
+
try {
|
|
3258
|
+
import_nativewind.colorScheme.set(selectedScheme === "system" ? "system" : activeScheme);
|
|
3259
|
+
} catch (_) {
|
|
3260
|
+
}
|
|
3261
|
+
}, [selectedScheme, activeScheme]);
|
|
3262
|
+
const handleSetColorScheme = React26.useCallback((scheme) => {
|
|
3263
|
+
setSelectedScheme(scheme);
|
|
3264
|
+
try {
|
|
3265
|
+
import_nativewind.colorScheme.set(scheme === "system" ? "system" : scheme);
|
|
3266
|
+
} catch (_) {
|
|
3267
|
+
}
|
|
3268
|
+
}, []);
|
|
3257
3269
|
const toggleColorScheme = React26.useCallback(() => {
|
|
3258
3270
|
setSelectedScheme((prev) => {
|
|
3259
3271
|
const current = prev === "system" ? systemScheme : prev;
|
|
3260
|
-
|
|
3272
|
+
const next = current === "dark" ? "light" : "dark";
|
|
3273
|
+
try {
|
|
3274
|
+
import_nativewind.colorScheme.set(next);
|
|
3275
|
+
} catch (_) {
|
|
3276
|
+
}
|
|
3277
|
+
return next;
|
|
3261
3278
|
});
|
|
3262
3279
|
}, [systemScheme]);
|
|
3263
3280
|
const dismissToast = React26.useCallback((id) => {
|
|
@@ -3284,16 +3301,16 @@ function BeyondUIProvider({
|
|
|
3284
3301
|
const contextValue = React26.useMemo(
|
|
3285
3302
|
() => ({
|
|
3286
3303
|
colorScheme: activeScheme,
|
|
3287
|
-
setColorScheme:
|
|
3304
|
+
setColorScheme: handleSetColorScheme,
|
|
3288
3305
|
toggleColorScheme
|
|
3289
3306
|
}),
|
|
3290
|
-
[activeScheme, toggleColorScheme]
|
|
3307
|
+
[activeScheme, handleSetColorScheme, toggleColorScheme]
|
|
3291
3308
|
);
|
|
3292
3309
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BeyondUIContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ToastContext.Provider, { value: toastContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3293
3310
|
import_react_native31.View,
|
|
3294
3311
|
{
|
|
3295
3312
|
style: { flex: 1 },
|
|
3296
|
-
className: activeScheme === "dark" ? "dark flex-1" : "flex-1",
|
|
3313
|
+
className: activeScheme === "dark" ? "dark flex-1 bg-neutral-950" : "flex-1 bg-white",
|
|
3297
3314
|
children: [
|
|
3298
3315
|
children,
|
|
3299
3316
|
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_portal.PortalHost, {}),
|