diff --git a/components.json b/components.json new file mode 100644 index 0000000..5dcfada --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/index.css", + "baseColor": "zinc", + "cssVariables": false, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/package.json b/package.json index 068f13e..1a60d5b 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,17 @@ "preview": "vite preview" }, "dependencies": { + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.464.0", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "tailwind-merge": "^2.5.5", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@eslint/js": "^9.15.0", + "@types/node": "^22.10.1", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1f176a..ba92544 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,16 +8,34 @@ importers: .: dependencies: + class-variance-authority: + specifier: ^0.7.1 + version: 0.7.1 + clsx: + specifier: ^2.1.1 + version: 2.1.1 + lucide-react: + specifier: ^0.464.0 + version: 0.464.0(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + tailwind-merge: + specifier: ^2.5.5 + version: 2.5.5 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.16) devDependencies: '@eslint/js': specifier: ^9.15.0 version: 9.16.0 + '@types/node': + specifier: ^22.10.1 + version: 22.10.1 '@types/react': specifier: ^18.3.12 version: 18.3.12 @@ -26,7 +44,7 @@ importers: version: 18.3.1 '@vitejs/plugin-react': specifier: ^4.3.4 - version: 4.3.4(vite@6.0.2(jiti@1.21.6)(yaml@2.6.1)) + version: 4.3.4(vite@6.0.2(@types/node@22.10.1)(jiti@1.21.6)(yaml@2.6.1)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.49) @@ -56,7 +74,7 @@ importers: version: 8.17.0(eslint@9.16.0(jiti@1.21.6))(typescript@5.6.3) vite: specifier: ^6.0.1 - version: 6.0.2(jiti@1.21.6)(yaml@2.6.1) + version: 6.0.2(@types/node@22.10.1)(jiti@1.21.6)(yaml@2.6.1) packages: @@ -491,6 +509,9 @@ packages: '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + '@types/node@22.10.1': + resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==} + '@types/prop-types@15.7.13': resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} @@ -658,6 +679,13 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} + class-variance-authority@0.7.1: + resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==} + + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -975,6 +1003,11 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lucide-react@0.464.0: + resolution: {integrity: sha512-eCx1qClbnw5qRqB2Z1AFFp71wdJXEwhPp5ii8LviyvHb7o/7eMXFiTyDHh7JpjM9BO9pC6ZUp/c7mCwwxbPIcg==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -1229,6 +1262,14 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + tailwind-merge@2.5.5: + resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==} + + tailwindcss-animate@1.0.7: + resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + tailwindcss@3.4.16: resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==} engines: {node: '>=14.0.0'} @@ -1273,6 +1314,9 @@ packages: engines: {node: '>=14.17'} hasBin: true + undici-types@6.20.0: + resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==} + update-browserslist-db@1.1.1: resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} hasBin: true @@ -1717,6 +1761,10 @@ snapshots: '@types/json-schema@7.0.15': {} + '@types/node@22.10.1': + dependencies: + undici-types: 6.20.0 + '@types/prop-types@15.7.13': {} '@types/react-dom@18.3.1': @@ -1810,14 +1858,14 @@ snapshots: '@typescript-eslint/types': 8.17.0 eslint-visitor-keys: 4.2.0 - '@vitejs/plugin-react@4.3.4(vite@6.0.2(jiti@1.21.6)(yaml@2.6.1))': + '@vitejs/plugin-react@4.3.4(vite@6.0.2(@types/node@22.10.1)(jiti@1.21.6)(yaml@2.6.1))': dependencies: '@babel/core': 7.26.0 '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0) '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 6.0.2(jiti@1.21.6)(yaml@2.6.1) + vite: 6.0.2(@types/node@22.10.1)(jiti@1.21.6)(yaml@2.6.1) transitivePeerDependencies: - supports-color @@ -1912,6 +1960,12 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + class-variance-authority@0.7.1: + dependencies: + clsx: 2.1.1 + + clsx@2.1.1: {} + color-convert@2.0.1: dependencies: color-name: 1.1.4 @@ -2224,6 +2278,10 @@ snapshots: dependencies: yallist: 3.1.1 + lucide-react@0.464.0(react@18.3.1): + dependencies: + react: 18.3.1 + merge2@1.4.1: {} micromatch@4.0.8: @@ -2462,6 +2520,12 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + tailwind-merge@2.5.5: {} + + tailwindcss-animate@1.0.7(tailwindcss@3.4.16): + dependencies: + tailwindcss: 3.4.16 + tailwindcss@3.4.16: dependencies: '@alloc/quick-lru': 5.2.0 @@ -2524,6 +2588,8 @@ snapshots: typescript@5.6.3: {} + undici-types@6.20.0: {} + update-browserslist-db@1.1.1(browserslist@4.24.2): dependencies: browserslist: 4.24.2 @@ -2536,12 +2602,13 @@ snapshots: util-deprecate@1.0.2: {} - vite@6.0.2(jiti@1.21.6)(yaml@2.6.1): + vite@6.0.2(@types/node@22.10.1)(jiti@1.21.6)(yaml@2.6.1): dependencies: esbuild: 0.24.0 postcss: 8.4.49 rollup: 4.28.0 optionalDependencies: + '@types/node': 22.10.1 fsevents: 2.3.3 jiti: 1.21.6 yaml: 2.6.1 diff --git a/src/index.css b/src/index.css index e7d4bb2..7ea4c67 100644 --- a/src/index.css +++ b/src/index.css @@ -70,3 +70,9 @@ button:focus-visible { background-color: #f9f9f9; } } + +@layer base { + :root { + --radius: 0.5rem; + } +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/tailwind.config.js b/tailwind.config.js index f7de5e9..d145c7e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,16 @@ /** @type {import('tailwindcss').Config} */ export default { + darkMode: ["class"], content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { - extend: {}, + extend: { + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: {}, + }, }, - plugins: [], + plugins: [require("tailwindcss-animate")], }; diff --git a/tsconfig.app.json b/tsconfig.app.json index 358ca9b..b6f0da4 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -20,7 +20,14 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + + "baseUrl": ".", + "paths": { + "@/*": [ + "./src/*" + ] + } }, "include": ["src"] } diff --git a/tsconfig.json b/tsconfig.json index 1ffef60..fec8c8e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,5 +3,11 @@ "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } - ] + ], + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } } diff --git a/vite.config.ts b/vite.config.ts index 8b0f57b..8fb5b2d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,13 @@ +import path from 'path' import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + resolve: { + alias: { + "@": path.resolve(__dirname, "./src") + } + } })