startx 1.0.1 → 1.0.3

package/packages/ui/src/lib/utils.ts

@@ -0,0 +1,113 @@
+import { type ClassValue, clsx } from "clsx";
+import {
+	differenceInDays,
+	differenceInYears,
+	format,
+	formatDistance,
+	isThisWeek,
+	isToday,
+	isYesterday,
+	parseISO,
+} from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+export class FormUtils {
+	static getFormData(object: Record<string, any>): FormData {
+		const formData = new FormData();
+		Object.entries(object).forEach(([key, value]) => {
+			if (value === undefined || value === null) return;
+
+			if (value instanceof Blob || value instanceof File) {
+				formData.append(key, value);
+			} else if (value instanceof FileList || (Array.isArray(value) && value[0] instanceof File)) {
+				Array.from(value as File[]).forEach(file => formData.append(key, file));
+			} else if (typeof value === "string") {
+				formData.append(key, value);
+			} else {
+				formData.append(key, JSON.stringify(value));
+			}
+		});
+		return formData;
+	}
+}
+
+export class UrlUtils {
+	static switchPath(pathname: string, tab: string): string {
+		const fragments = pathname.split("/").filter(Boolean);
+		fragments[2] = tab;
+		return `/${fragments.join("/")}`;
+	}
+
+	static isValidUrl(url: string): boolean {
+		try {
+			return new URL(url).origin !== "null";
+		} catch {
+			return false;
+		}
+	}
+}
+
+export class DateUtils {
+	static getRelativeDate(date?: string | Date, includeTime = true): string {
+		if (!date) return "";
+		const d = new Date(date);
+		const now = new Date();
+
+		if (isToday(d)) return includeTime ? format(d, "h:mm a") : "today";
+		if (isYesterday(d)) return "yesterday";
+		if (isThisWeek(d) && differenceInDays(now, d) <= 7) return format(d, "EEEE");
+
+		return format(d, "dd/MM/yy");
+	}
+
+	static getRelativeDateWithTime(date?: string | Date): string {
+		if (!date) return "";
+		return formatDistance(new Date(date), new Date(), { addSuffix: true });
+	}
+
+	static getRelativeProDate(dateString: string): string {
+		try {
+			const date = parseISO(dateString);
+			const formatStr = differenceInYears(new Date(), date) >= 1 ? "dd MMM yyyy, h:mm a" : "dd MMM, h:mm a";
+			return format(date, formatStr);
+		} catch (error) {
+			console.error("Error formatting date:", error);
+			return "";
+		}
+	}
+}
+
+export class FormatUtils {
+	static numberWithKMB(num: number): string {
+		return new Intl.NumberFormat("en-US", {
+			notation: "compact",
+			minimumSignificantDigits: 1,
+			maximumSignificantDigits: 3,
+		}).format(num);
+	}
+
+	static currencyToNumber(formattedCurrency: string): number {
+		const numericString = formattedCurrency.replace(/[^0-9.-]+/g, "");
+		const parsedNumber = Number.parseFloat(numericString);
+		if (isNaN(parsedNumber)) throw new Error("Invalid currency format");
+		return parsedNumber;
+	}
+
+	static createLabels(e: string): string {
+		return e
+			.replaceAll("_", " ")
+			.replace(/\b\w/g, char => char.toUpperCase())
+			.trim();
+	}
+}
+
+export class ValidationUtils {
+	static isValidId(str: string): boolean {
+		return /^[a-f0-9]{24}$/i.test(str);
+	}
+}
+
+export { cva, type VariantProps } from "class-variance-authority";

package/packages/ui/src/styles/globals.css

@@ -0,0 +1,311 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./tailwind.css";
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/eb-garamond";
+
+@custom-variant dark (&:is(.dark *));
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+/* =====================================================
+   🌞 LIGHT MODE (Base & Default Blue Theme)
+   ===================================================== */
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0.008 326);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0.008 326);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0.008 326);
+	--secondary: oklch(0.967 0.001 286.375);
+	--secondary-foreground: oklch(0.21 0.006 285.885);
+	--muted: oklch(0.96 0.003 325.6);
+	--muted-foreground: oklch(0.542 0.034 322.5);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0.005 325.62);
+	--input: oklch(0.922 0.005 325.62);
+
+	/* Default Theme: Blue */
+	--primary: oklch(0.52 0.105 223.128);
+	--primary-foreground: oklch(0.984 0.019 200.873);
+	--accent: oklch(0.96 0.003 325.6);
+	--accent-foreground: oklch(0.212 0.019 322.12);
+	--ring: oklch(0.711 0.019 323.02);
+
+	--chart-1: oklch(0.81 0.117 11.638);
+	--chart-2: oklch(0.645 0.246 16.439);
+	--chart-3: oklch(0.586 0.253 17.585);
+	--chart-4: oklch(0.514 0.222 16.935);
+	--chart-5: oklch(0.455 0.188 13.697);
+	--radius: 0.875rem;
+
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0.008 326);
+	--sidebar-primary: oklch(0.609 0.126 221.723);
+	--sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+	--sidebar-accent: oklch(0.96 0.003 325.6);
+	--sidebar-accent-foreground: oklch(0.212 0.019 322.12);
+	--sidebar-border: oklch(0.922 0.005 325.62);
+	--sidebar-ring: oklch(0.711 0.019 323.02);
+}
+
+/* =====================================================
+   🌑 DARK MODE (Base & Default Blue Theme)
+   ===================================================== */
+.dark {
+	--background: oklch(0.145 0.008 326);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.212 0.019 322.12);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.212 0.019 322.12);
+	--popover-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.274 0.006 286.033);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.263 0.024 320.12);
+	--muted-foreground: oklch(0.711 0.019 323.02);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+
+	/* Default Theme: Blue */
+	--primary: oklch(0.45 0.085 224.283);
+	--primary-foreground: oklch(0.984 0.019 200.873);
+	--accent: oklch(0.263 0.024 320.12);
+	--accent-foreground: oklch(0.985 0 0);
+	--ring: oklch(0.542 0.034 322.5);
+
+	--chart-1: oklch(0.81 0.117 11.638);
+	--chart-2: oklch(0.645 0.246 16.439);
+	--chart-3: oklch(0.586 0.253 17.585);
+	--chart-4: oklch(0.514 0.222 16.935);
+	--chart-5: oklch(0.455 0.188 13.697);
+
+	--sidebar: oklch(0.212 0.019 322.12);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.715 0.143 215.221);
+	--sidebar-primary-foreground: oklch(0.302 0.056 229.695);
+	--sidebar-accent: oklch(0.263 0.024 320.12);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.542 0.034 322.5);
+}
+
+/* =====================================================
+   🎨 THEME VARIANTS (Overrides for both Light & Dark)
+   ===================================================== */
+
+[data-theme="orange"] {
+	--primary: #ea580c;
+	--primary-foreground: #ffffff;
+	--ring: #ea580c;
+	--accent: color-mix(in oklab, #ea580c 15%, transparent);
+	--accent-foreground: #ea580c;
+}
+
+[data-theme="purple"] {
+	--primary: #7c3aed;
+	--primary-foreground: #ffffff;
+	--ring: #7c3aed;
+	--accent: color-mix(in oklab, #7c3aed 15%, transparent);
+	--accent-foreground: #7c3aed;
+}
+
+[data-theme="emerald"] {
+	--primary: #059669;
+	--primary-foreground: #ffffff;
+	--ring: #059669;
+	--accent: color-mix(in oklab, #059669 15%, transparent);
+	--accent-foreground: #059669;
+}
+
+[data-theme="rose"] {
+	--primary: #e11d48;
+	--primary-foreground: #ffffff;
+	--ring: #e11d48;
+	--accent: color-mix(in oklab, #e11d48 15%, transparent);
+	--accent-foreground: #e11d48;
+}
+
+[data-theme="amber"] {
+	--primary: #d97706;
+	--primary-foreground: #ffffff;
+	--ring: #d97706;
+	--accent: color-mix(in oklab, #d97706 15%, transparent);
+	--accent-foreground: #d97706;
+}
+
+[data-theme="brick"] {
+	--primary: #b91c1c;
+	--primary-foreground: #ffffff;
+	--ring: #b91c1c;
+	--accent: color-mix(in oklab, #b91c1c 15%, transparent);
+	--accent-foreground: #b91c1c;
+}
+[data-theme="blue"] {
+	--primary: #4169e1;
+	--primary-foreground: #ffffff;
+	--ring: #4169e1;
+	--accent: color-mix(in oklab, #4169e1 15%, transparent);
+	--accent-foreground: #4169e1;
+}
+[data-theme="rust"] {
+	--primary: #c2410c;
+	--primary-foreground: #ffffff;
+	--ring: #c2410c;
+	--accent: color-mix(in oklab, #c2410c 15%, transparent);
+	--accent-foreground: #c2410c;
+}
+
+[data-theme="cyan"] {
+	--primary: #0891b2;
+	--primary-foreground: #ffffff;
+	--ring: #0891b2;
+	--accent: color-mix(in oklab, #0891b2 15%, transparent);
+	--accent-foreground: #0891b2;
+}
+
+[data-theme="indigo"] {
+	--primary: #4f46e5;
+	--primary-foreground: #ffffff;
+	--ring: #4f46e5;
+	--accent: color-mix(in oklab, #4f46e5 15%, transparent);
+	--accent-foreground: #4f46e5;
+}
+.dark[data-theme="indigo"] {
+	--primary: #6366f1;
+	--primary-foreground: #ffffff;
+	--ring: #6366f1;
+	--accent: color-mix(in oklab, #6366f1 20%, transparent);
+	--accent-foreground: #818cf8;
+}
+/* =====================================================
+   🛠️ TAILWIND V4 VARIABLE MAPPING
+   ===================================================== */
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--font-sans: "Inter Variable", sans-serif;
+	--font-heading: "EB Garamond Variable", serif;
+}
+
+/* =====================================================
+   🧱 BASE STYLES & RESETS
+   ===================================================== */
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	button:not(:disabled),
+	[role="button"]:not(:disabled) {
+		cursor: pointer;
+	}
+
+	/* Autofill resets to prevent white backgrounds in dark mode */
+	input:-webkit-autofill,
+	input:-webkit-autofill:hover,
+	input:-webkit-autofill:focus,
+	input:-webkit-autofill:active,
+	textarea:-webkit-autofill,
+	textarea:-webkit-autofill:hover,
+	textarea:-webkit-autofill:focus,
+	textarea:-webkit-autofill:active {
+		-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+		box-shadow: 0 0 0 1000px transparent inset !important;
+		-webkit-text-fill-color: var(--foreground) !important;
+		caret-color: var(--foreground) !important;
+		transition: background-color 9999s ease-in-out 0s !important;
+	}
+
+	.dark input:-webkit-autofill,
+	.dark input:-webkit-autofill:hover,
+	.dark input:-webkit-autofill:focus,
+	.dark input:-webkit-autofill:active,
+	.dark textarea:-webkit-autofill,
+	.dark textarea:-webkit-autofill:hover,
+	.dark textarea:-webkit-autofill:focus,
+	.dark textarea:-webkit-autofill:active {
+		-webkit-text-fill-color: var(--foreground) !important;
+		caret-color: var(--foreground) !important;
+	}
+}
+
+/* =====================================================
+   ✨ ANIMATED BORDER UTILITY
+   ===================================================== */
+@property --qc-border-angle {
+	syntax: "<angle>";
+	initial-value: 0deg;
+	inherits: false;
+}
+
+@keyframes qc-border-spin {
+	to {
+		--qc-border-angle: 360deg;
+	}
+}
+
+.qc-animated-border {
+	position: relative;
+	border: 1px solid var(--border);
+	background:
+		linear-gradient(var(--card), var(--card)) padding-box,
+		conic-gradient(
+			from var(--qc-border-angle),
+			transparent 0deg,
+			transparent 300deg,
+			var(--primary) 330deg,
+			transparent 360deg
+		)
+		border-box;
+	background-clip: padding-box, border-box;
+}
+
+.qc-animated-border:hover {
+	border-color: transparent;
+	animation: qc-border-spin 4.8s linear infinite;
+}

package/packages/ui/src/styles/tailwind.css

@@ -0,0 +1,89 @@
+@theme inline {
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
+		}
+	}
+
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
+		}
+		to {
+			height: 0;
+		}
+	}
+}
+
+/* Custom variants */
+@custom-variant data-open {
+	&:where([data-state="open"]),
+	&:where([data-open]:not([data-open="false"])) {
+		@slot;
+	}
+}
+
+@custom-variant data-closed {
+	&:where([data-state="closed"]),
+	&:where([data-closed]:not([data-closed="false"])) {
+		@slot;
+	}
+}
+
+@custom-variant data-checked {
+	&:where([data-state="checked"]),
+	&:where([data-checked]:not([data-checked="false"])) {
+		@slot;
+	}
+}
+
+@custom-variant data-unchecked {
+	&:where([data-state="unchecked"]),
+	&:where([data-unchecked]:not([data-unchecked="false"])) {
+		@slot;
+	}
+}
+
+@custom-variant data-selected {
+	&:where([data-selected="true"]) {
+		@slot;
+	}
+}
+
+@custom-variant data-disabled {
+	&:where([data-disabled="true"]),
+	&:where([data-disabled]:not([data-disabled="false"])) {
+		@slot;
+	}
+}
+
+@custom-variant data-active {
+	&:where([data-state="active"]),
+	&:where([data-active]:not([data-active="false"])) {
+		@slot;
+	}
+}
+
+@custom-variant data-horizontal {
+	&:where([data-orientation="horizontal"]) {
+		@slot;
+	}
+}
+
+@custom-variant data-vertical {
+	&:where([data-orientation="vertical"]) {
+		@slot;
+	}
+}
+
+@utility no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}

package/packages/ui/tsconfig.json

@@ -2,17 +2,15 @@
 	"extends": "typescript-config/tsconfig.frontend.json",
 	"compilerOptions": {
 		"strict": true,
-		"baseUrl": ".",
+		"skipLibCheck": true,
+		"jsx": "react-jsx",
+		"noEmit": true,
+		// "baseUrl": ".",
 		"paths": {
-			"@/*": ["./src/*"]
+			"@repo/ui/*": ["./src/*"]
 		}
 	},
 
-	"include": [
-		"src/**/*",
-		"tailwind.config.ts",
-		"stylelint.config.mjs",
-		"eslint.config.ts",
-		"postcss.config.mjs"
-	]
+	"include": ["."],
+	"exclude": ["node_modules", "dist"]
 }

package/pnpm-workspace.yaml

@@ -6,92 +6,102 @@ packages:
 
 catalog:
   # configs
-  typescript: ^5.9.2
-  eslint: ^9.39.2
-  tsdown: ^0.20.1
-  unrun: ^0.2.27
-  vite: ^7.3.1
-  rimraf: ^6.1.2
-  turbo: ^2.8.1
-  tsx: ^4.21.0
+  typescript: "^5.9.2"
+  eslint: "^9.39.2"
+  tsdown: "^0.20.1"
+  unrun: "^0.2.27"
+  vite: "^8.0.0"
+  rimraf: "^6.1.2"
+  turbo: "^2.9.14"
+  tsx: "^4.21.0"
 
   # utils
-  "@biomejs/biome": ^2.3.13
-  prettier: ^3.8.1
-  zod: ^4.3.6
-  "@vinejs/vine": ^4.3.0
-  axios: ^1.13.6
-  date-fns: ^4.1.0
-  nanoid: ^5.1.6
-  xlsx: ^0.18.5
-
+  "@biomejs/biome": "^2.3.13"
+  prettier: "^3.8.1"
+  zod: "^4.3.6"
+  "@vinejs/vine": "^4.3.0"
+  axios: "^1.13.6"
+  date-fns: "^4.1.0"
+  nanoid: "^5.1.6"
+  xlsx: "^0.18.5"
   # testing
-  vitest: ^4.0.18
-  "@vitest/coverage-v8": ^4.0.18
+  vitest: "^4.0.18"
+  "@vitest/coverage-v8": "^4.0.18"
 
   # types
-  "@types/node": ^25.1.0
+  "@types/node": "^25.1.0"
 
   # frontend
-  react: ^19.2.4
-  react-dom: ^19.2.4
-  lucide-react: ^0.563.0
-  tailwindcss: ^4.1.18
-  react-email: ^5.2.8
-  "@react-email/preview-server": ^5.2.8
-  "@react-email/components": ^1.0.8
-  "@react-email/tailwind": ^2.0.5
-  "@react-email/render": ^2.0.4
+  isbot: "^5.1.36"
+  react: "^19.2.4"
+  react-dom: "^19.2.4"
+  react-router: "^7.14.0"
+  "@react-router/node": "^7.14.0"
+  "@react-router/serve": "^7.14.0"
+  "@react-router/dev": "^7.14.0"
+  lucide-react: "^0.563.0"
+  tailwindcss: "^4.2.2"
+  "@tailwindcss/vite": "^4.2.2"
+
+  # email
+  react-email: "^5.2.11"
+  "@react-email/preview-server": "^5.2.11"
+  "@react-email/components": "^1.0.8"
+  "@react-email/tailwind": "^2.0.5"
+  "@react-email/render": "^2.0.4"
+
+  # ui
+  "@tanstack/react-query": "^5.100.9"
+  "@tanstack/react-query-devtools": "^5.100.9"
 
   # frontend types
-  "@types/react": ^19.2.4
-  "@types/react-dom": ^19.2.3
+  "@types/react": "^19.2.4"
+  "@types/react-dom": "^19.2.3"
 
   # backend
-  express: ^5.2.1
-  cors: ^2.7.6
-  cookie-parser: ^1.4.7
-  country-state-city: ^3.2.1
-  express-fileupload: ^1.5.2
-  express-list-endpoints: ^7.1.1
-  morgan: ^1.10.0
+  express: "^5.2.1"
+  cors: "^2.7.6"
+  cookie-parser: "^1.4.7"
+  country-state-city: "^3.2.1"
+  express-fileupload: "^1.5.2"
+  express-list-endpoints: "^7.1.1"
+  morgan: "^1.10.0"
 
   # backend types
-  "@types/express": ^5.0.6
-  "@types/cors": ^2.8.19
-  "@types/cookie-parser": ^1.4.10
-  "@types/express-fileupload": ^1.5.1
-  "@types/morgan": ^1.9.10
+  "@types/express": "^5.0.6"
+  "@types/cors": "^2.8.19"
+  "@types/cookie-parser": "^1.4.10"
+  "@types/express-fileupload": "^1.5.1"
+  "@types/morgan": "^1.9.10"
 
   # db
-  drizzle-orm: ^0.45.1
-  drizzle-kit: ^0.31.10
-  pg: ^8.19.0
-  better-sqlite3: ^12.9.0
+  drizzle-orm: "^0.45.1"
+  drizzle-kit: "^0.31.10"
+  pg: "^8.19.0"
+  better-sqlite3: "^12.9.0"
 
   # db types
-  "@types/pg": ^8.10.0
-  "@types/better-sqlite3": ^7.6.13
+  "@types/pg": "^8.10.0"
+  "@types/better-sqlite3": "^7.6.13"
 
   # lib
-  "@aws-sdk/client-s3": ^3.39.0
-  bcryptjs: ^3.0.3
-  nodemailer: ^8.0.1
-  dotenv: ^17.3.1
-  dotenv-expand: ^13.0.0
-  firebase-admin: ^13.7.0
-  winston: ^3.19.0
-  winston-daily-rotate-file: ^5.0.0
-  jsonwebtoken: ^9.0.3
+  "@aws-sdk/client-s3": "^3.1045.0"
+  bcryptjs: "^3.0.3"
+  nodemailer: "^8.0.1"
+  "@dotenvx/dotenvx": "^1.64.0"
+  firebase-admin: "^13.9.0"
+  winston: "^3.19.0"
+  winston-daily-rotate-file: "^5.0.0"
+  jsonwebtoken: "^9.0.3"
 
   # aix
-  js-tiktoken: ^1.0.21
-  quickjs-emscripten: ^0.32.0
-  quicktype-core: ^23.2.6
-  openai: ^6.34.0
+  js-tiktoken: "^1.0.21"
+  quickjs-emscripten: "^0.32.0"
+  quicktype-core: "^23.2.6"
+  openai: "^6.34.0"
 
   # bullmq
-  bullmq: ^5.76.4
+  bullmq: "^5.76.4"
 
   # redis
-  ioredis: ^5.10.1
+  ioredis: "^5.10.1"