From 5b92932d82fcb0bfa2eb8126209d1b9e43f6ced5 Mon Sep 17 00:00:00 2001 From: "Rodrigo Rodriguez (Pragmatismo)" Date: Wed, 2 Apr 2025 03:46:05 -0300 Subject: [PATCH] refactor: reorganize mail component imports and update data paths for consistency --- package-lock.json | 190 ++ package.json | 7 + public/output.css | 1439 +++++++++-- src/components/ui/resizable.tsx | 43 + src/components/ui/slider.tsx | 26 + src/components/ui/switch.tsx | 27 + src/components/ui/table.tsx | 120 + src/components/ui/tabs.tsx | 53 + src/components/ui/textarea.tsx | 22 + src/components/ui/toast.tsx | 127 + src/components/ui/toaster.tsx | 33 + src/components/ui/toggle.tsx | 43 + src/components/ui/tooltip.tsx | 30 + src/hooks/use-toast.ts | 194 ++ src/index.tsx | 3 +- src/mail/components/mail-display.tsx | 4 +- src/mail/components/mail-list.tsx | 5 +- src/mail/components/mail.tsx | 12 +- src/mail/components/nav.tsx | 4 +- src/mail/data.tsx | 23 - src/mail/index.tsx | 48 + src/mail/page.tsx | 43 - src/mail/use-mail.ts | 2 +- src/styles/output.css | 2801 +++++++++++++++++++++ tailwind.config.js => tailwind.config.cjs | 0 25 files changed, 5071 insertions(+), 228 deletions(-) create mode 100644 src/components/ui/resizable.tsx create mode 100644 src/components/ui/slider.tsx create mode 100644 src/components/ui/switch.tsx create mode 100644 src/components/ui/table.tsx create mode 100644 src/components/ui/tabs.tsx create mode 100644 src/components/ui/textarea.tsx create mode 100644 src/components/ui/toast.tsx create mode 100644 src/components/ui/toaster.tsx create mode 100644 src/components/ui/toggle.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/hooks/use-toast.ts create mode 100644 src/mail/index.tsx delete mode 100644 src/mail/page.tsx create mode 100644 src/styles/output.css rename tailwind.config.js => tailwind.config.cjs (100%) diff --git a/package-lock.json b/package-lock.json index 20dfa22..165fd9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,11 @@ "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slider": "^1.2.3", "@radix-ui/react-slot": "^1.1.2", + "@radix-ui/react-switch": "^1.1.3", + "@radix-ui/react-tabs": "^1.1.3", + "@radix-ui/react-toast": "^1.2.6", + "@radix-ui/react-toggle": "^1.1.2", + "@radix-ui/react-tooltip": "^1.1.8", "@tailwindcss/vite": "4.0.17", "@tauri-apps/api": "2.4.0", "@tauri-apps/plugin-opener": "2", @@ -42,6 +47,7 @@ "clsx": "2.1.1", "cmdk": "^1.1.1", "date-fns": "^2.30.0", + "jotai": "^2.12.2", "lucide-react": "0.454.0", "nativewind": "2.0.10", "postcss": "8.4.35", @@ -50,6 +56,7 @@ "react-dom": "18.3.1", "react-hook-form": "^7.53.2", "react-markdown": "10.1.0", + "react-resizable-panels": "^2.1.7", "react-router-dom": "7.4.1", "tailwind-merge": "3.0.2", "tailwindcss-animate": "1.0.7", @@ -3852,6 +3859,158 @@ } } }, + "node_modules/@radix-ui/react-switch": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz", + "integrity": "sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.3.tgz", + "integrity": "sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-roving-focus": "1.1.2", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toast": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.6.tgz", + "integrity": "sha512-gN4dpuIVKEgpLn1z5FhzT9mYRUitbfZq9XqN/7kkBMUgFTzTG8x/KszWJugJXHcwxckY8xcKDZPz7kG3o6DsUA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-collection": "1.1.2", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toggle": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz", + "integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz", + "integrity": "sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.2", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-visually-hidden": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", @@ -9402,6 +9561,27 @@ "jiti": "lib/jiti-cli.mjs" } }, + "node_modules/jotai": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.12.2.tgz", + "integrity": "sha512-oN8715y7MkjXlSrpyjlR887TOuc/NLZMs9gvgtfWH/JP47ChwO0lR2ijSwBvPMYyXRAPT+liIAhuBavluKGgtA==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=17.0.0", + "react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11846,6 +12026,16 @@ } } }, + "node_modules/react-resizable-panels": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.7.tgz", + "integrity": "sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/react-router": { "version": "7.4.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz", diff --git a/package.json b/package.json index 00bbdf5..7e00f33 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,11 @@ "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slider": "^1.2.3", "@radix-ui/react-slot": "^1.1.2", + "@radix-ui/react-switch": "^1.1.3", + "@radix-ui/react-tabs": "^1.1.3", + "@radix-ui/react-toast": "^1.2.6", + "@radix-ui/react-toggle": "^1.1.2", + "@radix-ui/react-tooltip": "^1.1.8", "@tailwindcss/vite": "4.0.17", "@tauri-apps/api": "2.4.0", "@tauri-apps/plugin-opener": "2", @@ -44,6 +49,7 @@ "clsx": "2.1.1", "cmdk": "^1.1.1", "date-fns": "^2.30.0", + "jotai": "^2.12.2", "lucide-react": "0.454.0", "nativewind": "2.0.10", "postcss": "8.4.35", @@ -52,6 +58,7 @@ "react-dom": "18.3.1", "react-hook-form": "^7.53.2", "react-markdown": "10.1.0", + "react-resizable-panels": "^2.1.7", "react-router-dom": "7.4.1", "tailwind-merge": "3.0.2", "tailwindcss-animate": "1.0.7", diff --git a/public/output.css b/public/output.css index a9ffc48..cd05315 100644 --- a/public/output.css +++ b/public/output.css @@ -550,6 +550,14 @@ video { border-width: 0; } +.pointer-events-none { + pointer-events: none; +} + +.pointer-events-auto { + pointer-events: auto; +} + .visible { visibility: visible; } @@ -558,6 +566,10 @@ video { visibility: visible !important; } +.invisible { + visibility: hidden; +} + .fixed { position: fixed; } @@ -577,6 +589,80 @@ video { left: 0px; } +.inset-x-0 { + left: 0px; + right: 0px; +} + +.inset-y-0 { + top: 0px; + bottom: 0px; +} + +.left-\[50\%\] { + left: 50%; +} + +.top-\[50\%\] { + top: 50%; +} + +.left-1 { + left: 0.25rem; +} + +.right-1 { + right: 0.25rem; +} + +.left-2 { + left: 0.5rem; +} + +.right-4 { + right: 1rem; +} + +.top-4 { + top: 1rem; +} + +.top-\[1px\] { + top: 1px; +} + +.left-0 { + left: 0px; +} + +.top-0 { + top: 0px; +} + +.top-full { + top: 100%; +} + +.top-\[60\%\] { + top: 60%; +} + +.right-2 { + right: 0.5rem; +} + +.bottom-0 { + bottom: 0px; +} + +.right-0 { + right: 0px; +} + +.top-1 { + top: 0.25rem; +} + .left-2\.5 { left: 0.625rem; } @@ -585,38 +671,34 @@ video { top: 0.625rem; } -.left-2 { - left: 0.5rem; -} - .top-2 { top: 0.5rem; } -.right-0 { - right: 0px; -} - -.top-full { - top: 100%; -} - -.left-0 { - left: 0px; -} - -.left-3 { - left: 0.75rem; +.z-50 { + z-index: 50; } .z-10 { z-index: 10; } +.z-\[1\] { + z-index: 1; +} + +.z-\[100\] { + z-index: 100; +} + .z-0 { z-index: 0; } +.m-0 { + margin: 0px; +} + .my-4 { margin-top: 1rem; margin-bottom: 1rem; @@ -627,6 +709,26 @@ video { margin-bottom: 1.5rem; } +.-mx-1 { + margin-left: -0.25rem; + margin-right: -0.25rem; +} + +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + .mt-1 { margin-top: 0.25rem; } @@ -651,14 +753,34 @@ video { margin-top: 0.5rem; } -.ml-2 { - margin-left: 0.5rem; +.mr-2 { + margin-right: 0.5rem; +} + +.ml-auto { + margin-left: auto; +} + +.ml-1 { + margin-left: 0.25rem; +} + +.mt-1\.5 { + margin-top: 0.375rem; } .mt-4 { margin-top: 1rem; } +.ml-2 { + margin-left: 0.5rem; +} + +.mt-auto { + margin-top: auto; +} + .mb-2 { margin-bottom: 0.5rem; } @@ -667,10 +789,6 @@ video { margin-bottom: 0.75rem; } -.mr-2 { - margin-right: 0.5rem; -} - .ml-3 { margin-left: 0.75rem; } @@ -711,14 +829,14 @@ video { display: none; } -.aspect-\[3\/4\] { - aspect-ratio: 3/4; -} - .aspect-square { aspect-ratio: 1 / 1; } +.aspect-\[3\/4\] { + aspect-ratio: 3/4; +} + .h-16 { height: 4rem; } @@ -731,6 +849,18 @@ video { height: calc(100vh - 80px); } +.h-4 { + height: 1rem; +} + +.h-10 { + height: 2.5rem; +} + +.h-full { + height: 100%; +} + .h-9 { height: 2.25rem; } @@ -739,34 +869,86 @@ video { height: 2rem; } -.h-10 { - height: 2.5rem; +.h-7 { + height: 1.75rem; } -.h-4 { - height: 1rem; +.h-px { + height: 1px; } -.h-2\.5 { - height: 0.625rem; +.h-3\.5 { + height: 0.875rem; +} + +.h-3 { + height: 0.75rem; } .h-2 { height: 0.5rem; } -.h-6 { - height: 1.5rem; +.h-\[var\(--radix-navigation-menu-viewport-height\)\] { + height: var(--radix-navigation-menu-viewport-height); } -.h-full { - height: 100%; +.h-1\.5 { + height: 0.375rem; +} + +.h-1 { + height: 0.25rem; +} + +.h-2\.5 { + height: 0.625rem; +} + +.h-\[var\(--radix-select-trigger-height\)\] { + height: var(--radix-select-trigger-height); +} + +.h-\[1px\] { + height: 1px; } .h-5 { height: 1.25rem; } +.h-6 { + height: 1.5rem; +} + +.h-\[52px\] { + height: 52px; +} + +.max-h-\[300px\] { + max-height: 300px; +} + +.max-h-\[--radix-context-menu-content-available-height\] { + max-height: --radix-context-menu-content-available-height; +} + +.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] { + max-height: var(--radix-dropdown-menu-content-available-height); +} + +.max-h-\[--radix-select-content-available-height\] { + max-height: --radix-select-content-available-height; +} + +.max-h-screen { + max-height: 100vh; +} + +.max-h-\[800px\] { + max-height: 800px; +} + .max-h-72 { max-height: 18rem; } @@ -775,6 +957,10 @@ video { min-height: 100vh; } +.min-h-\[60px\] { + min-height: 60px; +} + .w-full { width: 100%; } @@ -783,16 +969,61 @@ video { width: 16rem; } +.w-4 { + width: 1rem; +} + +.w-10 { + width: 2.5rem; +} + .w-9 { width: 2.25rem; } +.w-7 { + width: 1.75rem; +} + .w-8 { width: 2rem; } -.w-4 { - width: 1rem; +.w-3\.5 { + width: 0.875rem; +} + +.w-3 { + width: 0.75rem; +} + +.w-2 { + width: 0.5rem; +} + +.w-max { + width: -moz-max-content; + width: max-content; +} + +.w-72 { + width: 18rem; +} + +.w-px { + width: 1px; +} + +.w-2\.5 { + width: 0.625rem; +} + +.w-\[1px\] { + width: 1px; +} + +.w-3\/4 { + width: 75%; } .w-56 { @@ -803,42 +1034,47 @@ video { width: 12rem; } -.w-6 { - width: 1.5rem; +.w-\[535px\] { + width: 535px; } -.w-10 { - width: 2.5rem; +.min-w-\[8rem\] { + min-width: 8rem; } -.w-2 { - width: 0.5rem; +.min-w-\[12rem\] { + min-width: 12rem; } -.w-16 { - width: 4rem; +.min-w-\[var\(--radix-select-trigger-width\)\] { + min-width: var(--radix-select-trigger-width); } -.w-80 { - width: 20rem; +.min-w-\[250px\] { + min-width: 250px; } -.w-5 { - width: 1.25rem; +.min-w-\[50px\] { + min-width: 50px; } .min-w-full { min-width: 100%; } -.max-w-md { - max-width: 28rem; -} - .max-w-lg { max-width: 32rem; } +.max-w-max { + max-width: -moz-max-content; + max-width: max-content; +} + +.max-w-md { + max-width: 28rem; +} + .flex-1 { flex: 1 1 0%; } @@ -847,26 +1083,113 @@ video { flex-shrink: 0; } +.shrink-0 { + flex-shrink: 0; +} + .flex-grow { flex-grow: 1; } +.grow { + flex-grow: 1; +} + +.border-collapse { + border-collapse: collapse; +} + +.origin-\[--radix-context-menu-content-transform-origin\] { + transform-origin: --radix-context-menu-content-transform-origin; +} + +.origin-\[--radix-dropdown-menu-content-transform-origin\] { + transform-origin: --radix-dropdown-menu-content-transform-origin; +} + +.origin-\[--radix-hover-card-content-transform-origin\] { + transform-origin: --radix-hover-card-content-transform-origin; +} + +.origin-\[--radix-menubar-content-transform-origin\] { + transform-origin: --radix-menubar-content-transform-origin; +} + +.origin-\[--radix-popover-content-transform-origin\] { + transform-origin: --radix-popover-content-transform-origin; +} + +.origin-\[--radix-select-content-transform-origin\] { + transform-origin: --radix-select-content-transform-origin; +} + +.origin-\[--radix-tooltip-content-transform-origin\] { + transform-origin: --radix-tooltip-content-transform-origin; +} + .origin-top-right { transform-origin: top right; } +.translate-x-\[-50\%\] { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-\[-50\%\] { + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.rotate-45 { + --tw-rotate: 45deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +.cursor-default { + cursor: default; +} + .cursor-pointer { cursor: pointer; } +.touch-none { + touch-action: none; +} + +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.list-none { + list-style-type: none; +} + .flex-col { flex-direction: column; } +.flex-col-reverse { + flex-direction: column-reverse; +} + .flex-wrap { flex-wrap: wrap; } @@ -875,10 +1198,22 @@ video { align-items: flex-start; } +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } +.items-stretch { + align-items: stretch; +} + +.justify-start { + justify-content: flex-start; +} + .justify-end { justify-content: flex-end; } @@ -939,22 +1274,10 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } -.space-x-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.75rem * var(--tw-space-x-reverse)); - margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-y-1 > :not([hidden]) ~ :not([hidden]) { +.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} - -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-x-1 > :not([hidden]) ~ :not([hidden]) { @@ -963,10 +1286,28 @@ video { margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-2 > :not([hidden]) ~ :not([hidden]) { +.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + +.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); +} + +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.75rem * var(--tw-space-x-reverse)); + margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .-space-x-px > :not([hidden]) ~ :not([hidden]) { @@ -1002,18 +1343,16 @@ video { overflow-y: auto; } -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.overflow-x-hidden { + overflow-x: hidden; } .whitespace-nowrap { white-space: nowrap; } -.whitespace-pre-line { - white-space: pre-line; +.whitespace-pre-wrap { + white-space: pre-wrap; } .rounded { @@ -1024,12 +1363,24 @@ video { border-radius: var(--radius); } +.rounded-full { + border-radius: 9999px; +} + .rounded-md { border-radius: calc(var(--radius) - 2px); } -.rounded-full { - border-radius: 9999px; +.rounded-xl { + border-radius: 0.75rem; +} + +.rounded-sm { + border-radius: calc(var(--radius) - 4px); +} + +.rounded-\[inherit\] { + border-radius: inherit; } .rounded-l-md { @@ -1042,10 +1393,18 @@ video { border-bottom-right-radius: calc(var(--radius) - 2px); } +.rounded-tl-sm { + border-top-left-radius: calc(var(--radius) - 4px); +} + .border { border-width: 1px; } +.border-2 { + border-width: 2px; +} + .border-b { border-bottom-width: 1px; } @@ -1058,6 +1417,10 @@ video { border-right-width: 1px; } +.border-l { + border-left-width: 1px; +} + .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1073,10 +1436,38 @@ video { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.border-destructive\/50 { + border-color: hsl(var(--destructive) / 0.5); +} + +.border-transparent { + border-color: transparent; +} + .border-input { border-color: hsl(var(--input)); } +.border-primary { + border-color: hsl(var(--primary)); +} + +.border-primary\/50 { + border-color: hsl(var(--primary) / 0.5); +} + +.border-destructive { + border-color: hsl(var(--destructive)); +} + +.border-l-transparent { + border-left-color: transparent; +} + +.border-t-transparent { + border-top-color: transparent; +} + .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); @@ -1092,22 +1483,62 @@ video { background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } -.bg-primary { - background-color: hsl(var(--primary)); -} - -.bg-destructive { - background-color: hsl(var(--destructive)); +.bg-black\/80 { + background-color: rgb(0 0 0 / 0.8); } .bg-background { background-color: hsl(var(--background)); } +.bg-muted { + background-color: hsl(var(--muted)); +} + +.bg-primary { + background-color: hsl(var(--primary)); +} + .bg-secondary { background-color: hsl(var(--secondary)); } +.bg-destructive { + background-color: hsl(var(--destructive)); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-accent { + background-color: hsl(var(--accent)); +} + +.bg-card { + background-color: hsl(var(--card)); +} + +.bg-popover { + background-color: hsl(var(--popover)); +} + +.bg-border { + background-color: hsl(var(--border)); +} + +.bg-primary\/20 { + background-color: hsl(var(--primary) / 0.2); +} + +.bg-primary\/10 { + background-color: hsl(var(--primary) / 0.1); +} + +.bg-muted\/50 { + background-color: hsl(var(--muted) / 0.5); +} + .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); @@ -1128,19 +1559,27 @@ video { background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } +.bg-background\/95 { + background-color: hsl(var(--background) / 0.95); +} + .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.bg-transparent { - background-color: transparent; -} - .bg-opacity-50 { --tw-bg-opacity: 0.5; } +.fill-current { + fill: currentColor; +} + +.fill-primary { + fill: hsl(var(--primary)); +} + .object-cover { -o-object-fit: cover; object-fit: cover; @@ -1162,12 +1601,20 @@ video { padding: 0.5rem; } +.p-3 { + padding: 0.75rem; +} + +.p-0 { + padding: 0px; +} + .p-1 { padding: 0.25rem; } -.p-3 { - padding: 0.75rem; +.p-\[1px\] { + padding: 1px; } .p-8 { @@ -1194,6 +1641,31 @@ video { padding-bottom: 1rem; } +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + +.py-0\.5 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.py-0 { + padding-top: 0px; + padding-bottom: 0px; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1204,14 +1676,9 @@ video { padding-right: 2rem; } -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; } .py-1\.5 { @@ -1219,39 +1686,59 @@ video { padding-bottom: 0.375rem; } -.py-0\.5 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } -.py-0 { +.px-1\.5 { + padding-left: 0.375rem; + padding-right: 0.375rem; +} + +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.pb-4 { + padding-bottom: 1rem; +} + +.pt-0 { padding-top: 0px; - padding-bottom: 0px; } -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; +.pt-1 { + padding-top: 0.25rem; } .pl-8 { padding-left: 2rem; } -.pr-4 { - padding-right: 1rem; +.pr-2 { + padding-right: 0.5rem; } .pl-2 { padding-left: 0.5rem; } -.pl-4 { - padding-left: 1rem; +.pr-8 { + padding-right: 2rem; } -.pl-9 { - padding-left: 2.25rem; +.pr-6 { + padding-right: 1.5rem; +} + +.pr-4 { + padding-right: 1rem; +} + +.pl-4 { + padding-left: 1rem; } .text-left { @@ -1262,6 +1749,10 @@ video { text-align: center; } +.align-middle { + vertical-align: middle; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1282,6 +1773,15 @@ video { line-height: 1.75rem; } +.text-\[0\.8rem\] { + font-size: 0.8rem; +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + .text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -1299,6 +1799,10 @@ video { font-weight: 600; } +.font-normal { + font-weight: 400; +} + .uppercase { text-transform: uppercase; } @@ -1307,6 +1811,14 @@ video { line-height: 1; } +.tracking-tight { + letter-spacing: -0.025em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + .tracking-wider { letter-spacing: 0.05em; } @@ -1331,40 +1843,66 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.text-primary-foreground { - color: hsl(var(--primary-foreground)); +.text-muted-foreground { + color: hsl(var(--muted-foreground)); } -.text-destructive-foreground { - color: hsl(var(--destructive-foreground)); +.text-foreground { + color: hsl(var(--foreground)); +} + +.text-destructive { + color: hsl(var(--destructive)); +} + +.text-primary-foreground { + color: hsl(var(--primary-foreground)); } .text-secondary-foreground { color: hsl(var(--secondary-foreground)); } +.text-destructive-foreground { + color: hsl(var(--destructive-foreground)); +} + .text-primary { color: hsl(var(--primary)); } +.text-accent-foreground { + color: hsl(var(--accent-foreground)); +} + +.text-card-foreground { + color: hsl(var(--card-foreground)); +} + +.text-current { + color: currentColor; +} + +.text-popover-foreground { + color: hsl(var(--popover-foreground)); +} + +.text-foreground\/50 { + color: hsl(var(--foreground) / 0.5); +} + .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } -.text-gray-700 { +.text-zinc-600 { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(82 82 91 / var(--tw-text-opacity)); } -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); +.text-background { + color: hsl(var(--background)); } .text-blue-600 { @@ -1372,10 +1910,46 @@ video { color: rgb(37 99 235 / var(--tw-text-opacity)); } +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + .underline-offset-4 { text-underline-offset: 4px; } +.opacity-50 { + opacity: 0.5; +} + +.opacity-70 { + opacity: 0.7; +} + +.opacity-60 { + opacity: 0.6; +} + +.opacity-0 { + opacity: 0; +} + +.opacity-90 { + opacity: 0.9; +} + +.shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -1388,22 +1962,27 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + .outline { outline-style: solid; } +.ring-0 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -1419,14 +1998,23 @@ video { --tw-ring-opacity: 0.05; } +.ring-offset-background { + --tw-ring-offset-color: hsl(var(--background)); +} + .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.backdrop-blur { + --tw-backdrop-blur: blur(8px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + +.backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition-all { @@ -1435,10 +2023,44 @@ video { transition-duration: 150ms; } +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .duration-200 { transition-duration: 200ms; } +.duration-300 { + transition-duration: 300ms; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); @@ -1453,10 +2075,100 @@ video { } } +.animate-in { + animation-name: enter; + animation-duration: 150ms; + --tw-enter-opacity: initial; + --tw-enter-scale: initial; + --tw-enter-rotate: initial; + --tw-enter-translate-x: initial; + --tw-enter-translate-y: initial; +} + +.fade-in-0 { + --tw-enter-opacity: 0; +} + +.zoom-in-95 { + --tw-enter-scale: .95; +} + .duration-200 { animation-duration: 200ms; } +.duration-300 { + animation-duration: 300ms; +} + +.ease-in-out { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.file\:border-0::file-selector-button { + border-width: 0px; +} + +.file\:bg-transparent::file-selector-button { + background-color: transparent; +} + +.file\:text-sm::file-selector-button { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.file\:font-medium::file-selector-button { + font-weight: 500; +} + +.file\:text-foreground::file-selector-button { + color: hsl(var(--foreground)); +} + +.placeholder\:text-muted-foreground::-moz-placeholder { + color: hsl(var(--muted-foreground)); +} + +.placeholder\:text-muted-foreground::placeholder { + color: hsl(var(--muted-foreground)); +} + +.after\:absolute::after { + content: var(--tw-content); + position: absolute; +} + +.after\:inset-y-0::after { + content: var(--tw-content); + top: 0px; + bottom: 0px; +} + +.after\:left-1\/2::after { + content: var(--tw-content); + left: 50%; +} + +.after\:w-1::after { + content: var(--tw-content); + width: 0.25rem; +} + +.after\:-translate-x-1\/2::after { + content: var(--tw-content); + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.focus-within\:relative:focus-within { + position: relative; +} + +.focus-within\:z-20:focus-within { + z-index: 20; +} + .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; @@ -1468,6 +2180,18 @@ video { background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } +.hover\:bg-primary\/80:hover { + background-color: hsl(var(--primary) / 0.8); +} + +.hover\:bg-secondary\/80:hover { + background-color: hsl(var(--secondary) / 0.8); +} + +.hover\:bg-destructive\/80:hover { + background-color: hsl(var(--destructive) / 0.8); +} + .hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); } @@ -1480,8 +2204,20 @@ video { background-color: hsl(var(--accent)); } -.hover\:bg-secondary\/80:hover { - background-color: hsl(var(--secondary) / 0.8); +.hover\:bg-primary:hover { + background-color: hsl(var(--primary)); +} + +.hover\:bg-muted\/50:hover { + background-color: hsl(var(--muted) / 0.5); +} + +.hover\:bg-secondary:hover { + background-color: hsl(var(--secondary)); +} + +.hover\:bg-muted:hover { + background-color: hsl(var(--muted)); } .hover\:bg-gray-100:hover { @@ -1508,13 +2244,20 @@ video { color: hsl(var(--accent-foreground)); } -.hover\:text-primary:hover { - color: hsl(var(--primary)); +.hover\:text-primary-foreground:hover { + color: hsl(var(--primary-foreground)); } -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); +.hover\:text-foreground:hover { + color: hsl(var(--foreground)); +} + +.hover\:text-muted-foreground:hover { + color: hsl(var(--muted-foreground)); +} + +.hover\:text-primary:hover { + color: hsl(var(--primary)); } .hover\:text-blue-700:hover { @@ -1526,6 +2269,10 @@ video { text-decoration-line: underline; } +.hover\:opacity-100:hover { + opacity: 1; +} + .focus\:border-indigo-300:focus { --tw-border-opacity: 1; border-color: rgb(165 180 252 / var(--tw-border-opacity)); @@ -1536,6 +2283,26 @@ video { border-color: rgb(99 102 241 / var(--tw-border-opacity)); } +.focus\:bg-primary:focus { + background-color: hsl(var(--primary)); +} + +.focus\:bg-accent:focus { + background-color: hsl(var(--accent)); +} + +.focus\:text-primary-foreground:focus { + color: hsl(var(--primary-foreground)); +} + +.focus\:text-accent-foreground:focus { + color: hsl(var(--accent-foreground)); +} + +.focus\:opacity-100:focus { + opacity: 1; +} + .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1559,6 +2326,10 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus\:ring-ring:focus { + --tw-ring-color: hsl(var(--ring)); +} + .focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); @@ -1593,19 +2364,108 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus-visible\:ring-2:focus-visible { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + .focus-visible\:ring-ring:focus-visible { --tw-ring-color: hsl(var(--ring)); } +.focus-visible\:ring-offset-1:focus-visible { + --tw-ring-offset-width: 1px; +} + +.focus-visible\:ring-offset-2:focus-visible { + --tw-ring-offset-width: 2px; +} + +.focus-visible\:ring-offset-background:focus-visible { + --tw-ring-offset-color: hsl(var(--background)); +} + .disabled\:pointer-events-none:disabled { pointer-events: none; } +.disabled\:cursor-not-allowed:disabled { + cursor: not-allowed; +} + .disabled\:opacity-50:disabled { opacity: 0.5; } +.group:hover .group-hover\:opacity-100 { + opacity: 1; +} + +.peer:disabled ~ .peer-disabled\:cursor-not-allowed { + cursor: not-allowed; +} + +.peer:disabled ~ .peer-disabled\:opacity-70 { + opacity: 0.7; +} + +.dark .dark\:block { + display: block; +} + +.dark .dark\:hidden { + display: none; +} + +.dark .dark\:border-destructive { + border-color: hsl(var(--destructive)); +} + +.dark .dark\:bg-muted { + background-color: hsl(var(--muted)); +} + +.dark .dark\:text-zinc-200 { + --tw-text-opacity: 1; + color: rgb(228 228 231 / var(--tw-text-opacity)); +} + +.dark .dark\:text-muted-foreground { + color: hsl(var(--muted-foreground)); +} + +.dark .dark\:text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.dark .dark\:hover\:bg-muted:hover { + background-color: hsl(var(--muted)); +} + +.dark .dark\:hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + @media (min-width: 640px) { + .sm\:bottom-0 { + bottom: 0px; + } + + .sm\:right-0 { + right: 0px; + } + + .sm\:top-auto { + top: auto; + } + + .sm\:mt-0 { + margin-top: 0px; + } + .sm\:flex { display: flex; } @@ -1614,24 +2474,90 @@ video { display: none; } + .sm\:max-w-sm { + max-width: 24rem; + } + .sm\:flex-1 { flex: 1 1 0%; } + .sm\:flex-row { + flex-direction: row; + } + + .sm\:flex-col { + flex-direction: column; + } + .sm\:items-center { align-items: center; } + .sm\:justify-end { + justify-content: flex-end; + } + .sm\:justify-between { justify-content: space-between; } + + .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + } + + .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + } + + .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); + } + + .sm\:rounded-lg { + border-radius: var(--radius); + } + + .sm\:text-left { + text-align: left; + } } @media (min-width: 768px) { + .md\:absolute { + position: absolute; + } + + .md\:flex { + display: flex; + } + + .md\:hidden { + display: none; + } + .md\:w-1\/4 { width: 25%; } + .md\:w-auto { + width: auto; + } + + .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] { + width: var(--radix-navigation-menu-viewport-width); + } + + .md\:max-w-\[420px\] { + max-width: 420px; + } + .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1639,6 +2565,11 @@ video { .md\:flex-row { flex-direction: row; } + + .md\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } } @media (min-width: 1024px) { @@ -1647,10 +2578,224 @@ video { } } +.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div { + --tw-translate-y: -3px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.\[\&\>svg\]\:absolute>svg { + position: absolute; +} + +.\[\&\>svg\]\:left-4>svg { + left: 1rem; +} + +.\[\&\>svg\]\:top-4>svg { + top: 1rem; +} + +.\[\&\>svg\]\:hidden>svg { + display: none; +} + +.\[\&\>svg\]\:shrink-0>svg { + flex-shrink: 0; +} + +.\[\&\>svg\]\:text-foreground>svg { + color: hsl(var(--foreground)); +} + +.\[\&\>svg\]\:text-destructive>svg { + color: hsl(var(--destructive)); +} + +.\[\&\>svg\~\*\]\:pl-7>svg~* { + padding-left: 1.75rem; +} + +.\[\&_p\]\:leading-relaxed p { + line-height: 1.625; +} + .\[\&_svg\]\:pointer-events-none svg { pointer-events: none; } +.\[\&_svg\]\:h-4 svg { + height: 1rem; +} + +.\[\&_svg\]\:w-4 svg { + width: 1rem; +} + .\[\&_svg\]\:shrink-0 svg { flex-shrink: 0; } + +.\[\&_svg\]\:text-foreground svg { + color: hsl(var(--foreground)); +} + +.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) { + border-radius: calc(var(--radius) - 2px); +} + +.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) { + background-color: hsl(var(--accent)); +} + +.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child { + border-top-left-radius: calc(var(--radius) - 2px); + border-bottom-left-radius: calc(var(--radius) - 2px); +} + +.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child { + border-top-right-radius: calc(var(--radius) - 2px); + border-bottom-right-radius: calc(var(--radius) - 2px); +} + +.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) { + background-color: hsl(var(--accent) / 0.5); +} + +.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) { + border-top-right-radius: calc(var(--radius) - 2px); + border-bottom-right-radius: calc(var(--radius) - 2px); +} + +.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) { + border-top-right-radius: calc(var(--radius) - 2px); + border-bottom-right-radius: calc(var(--radius) - 2px); +} + +.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) { + border-top-left-radius: calc(var(--radius) - 2px); + border-bottom-left-radius: calc(var(--radius) - 2px); +} + +.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] { + font-size: 0.75rem; + line-height: 1rem; +} + +.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] { + font-weight: 500; +} + +.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] { + color: hsl(var(--muted-foreground)); +} + +.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] { + padding-top: 0px; +} + +.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg { + height: 1.25rem; +} + +.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg { + width: 1.25rem; +} + +.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] { + height: 3rem; +} + +.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg { + height: 1.25rem; +} + +.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg { + width: 1.25rem; +} + +.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.\[\&_tr\]\:border-b tr { + border-bottom-width: 1px; +} + +.\[\&_tr\:last-child\]\:border-0 tr:last-child { + border-width: 0px; +} + +.\[\&\>tr\]\:last\:border-b-0:last-child>tr { + border-bottom-width: 0px; +} + +.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) { + padding-right: 0px; +} + +.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] { + --tw-translate-y: 2px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.\[\&\+div\]\:text-xs+div { + font-size: 0.75rem; + line-height: 1rem; +} + +.\[\&\>span\]\:flex>span { + display: flex; +} + +.\[\&\>span\]\:w-full>span { + width: 100%; +} + +.\[\&\>span\]\:w-auto>span { + width: auto; +} + +.\[\&\>span\]\:items-center>span { + align-items: center; +} + +.\[\&\>span\]\:gap-1>span { + gap: 0.25rem; +} + +.\[\&\>span\]\:truncate>span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx new file mode 100644 index 0000000..cd3cb0e --- /dev/null +++ b/src/components/ui/resizable.tsx @@ -0,0 +1,43 @@ +import { GripVertical } from "lucide-react" +import * as ResizablePrimitive from "react-resizable-panels" + +import { cn } from "@/lib/utils" + +const ResizablePanelGroup = ({ + className, + ...props +}: React.ComponentProps) => ( + +) + +const ResizablePanel = ResizablePrimitive.Panel + +const ResizableHandle = ({ + withHandle, + className, + ...props +}: React.ComponentProps & { + withHandle?: boolean +}) => ( + div]:rotate-90", + className + )} + {...props} + > + {withHandle && ( +
+ +
+ )} + +) + +export { ResizablePanelGroup, ResizablePanel, ResizableHandle } diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx new file mode 100644 index 0000000..9398b33 --- /dev/null +++ b/src/components/ui/slider.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import * as SliderPrimitive from "@radix-ui/react-slider" + +import { cn } from "@/lib/utils" + +const Slider = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + +)) +Slider.displayName = SliderPrimitive.Root.displayName + +export { Slider } diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx new file mode 100644 index 0000000..455c23b --- /dev/null +++ b/src/components/ui/switch.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import * as SwitchPrimitives from "@radix-ui/react-switch" + +import { cn } from "@/lib/utils" + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +Switch.displayName = SwitchPrimitives.Root.displayName + +export { Switch } diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx new file mode 100644 index 0000000..c0df655 --- /dev/null +++ b/src/components/ui/table.tsx @@ -0,0 +1,120 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +Table.displayName = "Table" + +const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableHeader.displayName = "TableHeader" + +const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableBody.displayName = "TableBody" + +const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className + )} + {...props} + /> +)) +TableFooter.displayName = "TableFooter" + +const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableRow.displayName = "TableRow" + +const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
[role=checkbox]]:translate-y-[2px]", + className + )} + {...props} + /> +)) +TableHead.displayName = "TableHead" + +const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + [role=checkbox]]:translate-y-[2px]", + className + )} + {...props} + /> +)) +TableCell.displayName = "TableCell" + +const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableCaption.displayName = "TableCaption" + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +} diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..85d83be --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,53 @@ +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@/lib/utils" + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx new file mode 100644 index 0000000..e56b0af --- /dev/null +++ b/src/components/ui/textarea.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Textarea = React.forwardRef< + HTMLTextAreaElement, + React.ComponentProps<"textarea"> +>(({ className, ...props }, ref) => { + return ( +