startx 0.0.1

package/packages/ui/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className,
+		)}
+		{...props}
+	/>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/packages/ui/src/components/util/n-formattor.ts

@@ -0,0 +1,22 @@
+export function nFormatter(num: number, digits?: number) {
+  if (!num) return "0";
+  const lookup = [
+    { value: 1, symbol: "" },
+    { value: 1e3, symbol: "K" },
+    { value: 1e6, symbol: "M" },
+    { value: 1e9, symbol: "B" },
+    { value: 1e12, symbol: "T" },
+    { value: 1e15, symbol: "P" },
+    { value: 1e18, symbol: "E" },
+  ];
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  const item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value;
+    });
+  return item
+    ? (num / item.value).toFixed(digits ?? 1).replace(rx, "$1") + item.symbol
+    : "0";
+}

package/packages/ui/src/components/util/storage.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface Store<T = Record<string, any>> {
+	_store: T;
+	get(key: string): string | null;
+	set(key: string, value: string): void;
+}
+
+export const InMemoryStorage: Store = {
+	_store: {},
+	get(key: string): string | null {
+		return this._store[key];
+	},
+	set(key: string, value: string): void {
+		this._store[key] = value;
+	},
+};
+
+export const SessionStorageStore: Store = {
+	_store: {},
+	get(key: string): string | null {
+		return sessionStorage.getItem(key);
+	},
+	set(key: string, value: string): void {
+		sessionStorage.setItem(key, value);
+	},
+};
+
+export const LocalStorageStore: Store = {
+	_store: {},
+	get(key: string): string | null {
+		return localStorage.getItem(key);
+	},
+	set(key: string, value: string): void {
+		localStorage.setItem(key, value);
+	},
+};

package/packages/ui/src/globals.css

@@ -0,0 +1,87 @@
+@import "tailwindcss";
+@config "../tailwind.config.ts";
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 224 71.4% 4.1%;
+		--card: 0 0% 100%;
+		--card-foreground: 224 71.4% 4.1%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 224 71.4% 4.1%;
+		--primary: 262.1 83.3% 57.8%;
+		--primary-foreground: 210 20% 98%;
+		--secondary: 220 14.3% 95.9%;
+		--secondary-foreground: 220.9 39.3% 11%;
+		--muted: 220 14.3% 95.9%;
+		--muted-foreground: 220 8.9% 46.1%;
+		--accent: 220 14.3% 95.9%;
+		--accent-foreground: 220.9 39.3% 11%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 210 20% 98%;
+		--border: 220 13% 91%;
+		--input: 220 13% 91%;
+		--ring: 262.1 83.3% 57.8%;
+		--radius: 0.75rem;
+		--chart-1: 173 58% 39%;
+		--chart-2: 12 76% 61%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+	}
+
+	.dark {
+		--background: 224 71.4% 4.1%;
+		--foreground: 210 20% 98%;
+		--card: 224 71.4% 4.1%;
+		--card-foreground: 210 20% 98%;
+		--popover: 224 71.4% 4.1%;
+		--popover-foreground: 210 20% 98%;
+		--primary: 263.4 70% 50.4%;
+		--primary-foreground: 210 20% 98%;
+		--secondary: 215 27.9% 16.9%;
+		--secondary-foreground: 210 20% 98%;
+		--muted: 215 27.9% 16.9%;
+		--muted-foreground: 217.9 10.6% 64.9%;
+		--accent: 215 27.9% 16.9%;
+		--accent-foreground: 210 20% 98%;
+		--destructive: 0 62.8% 50.6%;
+		--destructive-foreground: 210 20% 98%;
+		--border: 215 27.9% 16.9%;
+		--input: 215 27.9% 16.9%;
+		--ring: 263.4 70% 50.4%;
+		--chart-1: 173 58% 39%;
+		--chart-2: 12 76% 61%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+	}
+}
+
+html {
+	background-color: var(--background);
+}
+@layer base {
+	* {
+		font-family: var(--font-openSans);
+	}
+}
+
+@layer utilities {
+	/* Chrome, Safari and Opera */
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.no-scrollbar {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+}
+
+html {
+	scroll-behavior: smooth;
+}

package/packages/ui/tailwind.config.ts

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Config } from 'tailwindcss';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+const config = {
+	darkMode: ['class', 'string'],
+	content: [
+		'./pages/**/*.{ts,tsx}',
+		'./components/**/*.{ts,tsx}',
+		'./src/**/*.{ts,tsx}',
+		'../../apps/**/*.{ts,tsx}',
+		'../../packages/ui/src/**/*.{ts,tsx}',
+	],
+	prefix: '',
+	theme: {
+		container: {
+			center: true,
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px',
+			},
+		},
+		extend: {
+			backgroundImage: {
+				'instagram-gradient': 'linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)',
+			},
+			fontFamily: {
+				poppins: ['var(--font-poppins)', 'sans-serif'],
+				alike: ['var(--font-alike)', 'sans-serif'],
+				openSans: ['var(--font-openSans)', 'sans-serif'],
+				alertaStencils: ['var(--font-alertaStencils)', 'sans-serif'],
+				pacifico: ['var(--font-pacifico)', 'sans-serif'],
+			},
+			colors: {
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				'white-smoke': '#f8f9fa',
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))',
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))',
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))',
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))',
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))',
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))',
+				},
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))',
+				},
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)',
+			},
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' },
+				},
+				'accordion-up': {
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' },
+				},
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+			},
+		},
+	},
+	plugins: [tailwindcssAnimate],
+} satisfies Config;
+
+export { config };

package/packages/ui/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "typescript-config/tsconfig.frontend.json",
+	"compilerOptions": {
+		"strict": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+
+	"include": ["src/**/*", "tailwind.config.ts", "stylelint.config.mjs", "eslint.config.mjs"]
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,43 @@
+packages:
+  - "apps/*"
+  - "packages/*"
+  - "packages/@repo/*"
+  - "configs/*"
+
+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
+
+  # utils
+  "@biomejs/biome": ^2.3.13
+  prettier: ^3.8.1
+  zod: ^4.3.6
+
+  # testing
+  vitest: ^4.0.18
+  "@vitest/coverage-v8": ^4.0.18
+
+  # types
+  "@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
+
+  # frontend types
+  "@types/react": ^19.2.4
+  "@types/react-dom": ^19.2.3

package/turbo.json

@@ -0,0 +1,77 @@
+{
+	"$schema": "https://turborepo.dev/schema.json",
+	"ui": "tui",
+	"tasks": {
+		"build:config": {
+			"cache": true,
+			"dependsOn": ["lint", "^build"],
+			"inputs": [
+				"src/**",
+				"tsconfig*.json",
+				"package.json",
+				"vitest.config.ts",
+				"tsdown.config.ts"
+			],
+			"outputs": ["dist/**"]
+		},
+		"lint": {
+			"cache": true,
+			"inputs": ["src/**", "eslint.config.*", ".eslintrc.*", "tsdown.config.ts", "package.json"]
+		},
+
+		"build": {
+			"cache": true,
+			"inputs": ["src/**", "tsconfig*.json", "package.json"],
+			"outputs": ["dist/**"],
+			"dependsOn": ["lint", "^build"]
+		},
+
+		"typecheck": {
+			"cache": true,
+			"dependsOn": ["^typecheck", "build"],
+			"inputs": ["src/**", "tsconfig*.json"]
+		},
+
+		"test": {
+			"cache": true,
+			"inputs": ["src/**", "test/**", "vitest.config.*", "package.json"],
+			"outputs": ["coverage/**", "*.xml"]
+		},
+		"test:dev": {
+			"cache": false,
+			"inputs": ["src/**", "test/**", "vitest.config.*", "package.json"],
+			"outputs": ["coverage/**", "*.xml"],
+			"interactive": true
+		},
+
+		"check-types": {
+			"cache": true,
+			"dependsOn": ["^check-types"]
+		},
+
+		"watch": {
+			"cache": false,
+			"persistent": true
+		},
+
+		"dev": {
+			"cache": false,
+			"persistent": true
+		},
+		"start": {
+			"cache": false
+		},
+		"format": {
+			"cache": false
+		},
+		"format:check": {
+			"cache": false
+		},
+		"clean": {
+			"cache": false
+		},
+		"deep:clean": {
+			"cache": false
+		}
+	}
+}