diff options
| -rw-r--r-- | app/_layout.tsx | 2 | ||||
| -rw-r--r-- | app/signin.tsx | 5 | ||||
| -rw-r--r-- | babel.config.js | 6 | ||||
| -rw-r--r-- | components/ui/Button.tsx | 81 | ||||
| -rw-r--r-- | components/ui/Input.tsx | 28 | ||||
| -rw-r--r-- | globals.css | 80 | ||||
| -rw-r--r-- | lib/utils.ts | 6 | ||||
| -rw-r--r-- | metro.config.js | 7 | ||||
| -rw-r--r-- | package.json | 8 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 354 | ||||
| -rw-r--r-- | tailwind.config.js | 67 |
11 files changed, 526 insertions, 118 deletions
diff --git a/app/_layout.tsx b/app/_layout.tsx index 38ccb408..7403c6ff 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,3 +1,5 @@ +import "@/globals.css"; + import { Slot } from "expo-router"; import { StatusBar } from "expo-status-bar"; import { View } from "react-native"; diff --git a/app/signin.tsx b/app/signin.tsx index fbb59698..641d1b97 100644 --- a/app/signin.tsx +++ b/app/signin.tsx @@ -1,4 +1,6 @@ import Logo from "@/components/Logo"; +import { Button } from "@/components/ui/Button"; +import { Input } from "@/components/ui/Input"; import { TextInput, View } from "react-native"; export default function Signin() { @@ -6,7 +8,8 @@ export default function Signin() { <View className="items-center justify-center h-full"> <Logo /> - <TextInput /> + <Input /> + <Button label="Sign In" /> </View> ); diff --git a/babel.config.js b/babel.config.js index 13eb4f7a..77c28f95 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,9 @@ module.exports = function(api) { api.cache(true); return { - presets: ["babel-preset-expo"], - plugins: ["nativewind/babel"], + presets: [ + ["babel-preset-expo", { jsxImportSource: "nativewind" }], + "nativewind/babel", + ], }; }; diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx new file mode 100644 index 00000000..069fe116 --- /dev/null +++ b/components/ui/Button.tsx @@ -0,0 +1,81 @@ +import { type VariantProps, cva } from "class-variance-authority"; +import { Text, TouchableOpacity } from "react-native"; + +import { cn } from "@/lib/utils"; + +const buttonVariants = cva( + "flex flex-row items-center justify-center rounded-md", + { + variants: { + variant: { + default: "bg-primary", + secondary: "bg-secondary", + destructive: "bg-destructive", + ghost: "bg-slate-700", + link: "text-primary underline-offset-4", + }, + size: { + default: "h-10 px-4", + sm: "h-8 px-2", + lg: "h-12 px-8", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + }, +); + +const buttonTextVariants = cva("text-center font-medium", { + variants: { + variant: { + default: "text-primary-foreground", + secondary: "text-secondary-foreground", + destructive: "text-destructive-foreground", + ghost: "text-primary-foreground", + link: "text-primary-foreground underline", + }, + size: { + default: "text-base", + sm: "text-sm", + lg: "text-xl", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, +}); + +interface ButtonProps + extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>, + VariantProps<typeof buttonVariants> { + label: string; + labelClasses?: string; +} +function Button({ + label, + labelClasses, + className, + variant, + size, + ...props +}: ButtonProps) { + return ( + <TouchableOpacity + className={cn(buttonVariants({ variant, size, className }))} + {...props} + > + <Text + className={cn( + buttonTextVariants({ variant, size, className: labelClasses }), + )} + > + {label} + </Text> + </TouchableOpacity> + ); +} + +export { Button, buttonVariants, buttonTextVariants }; diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx new file mode 100644 index 00000000..6843917a --- /dev/null +++ b/components/ui/Input.tsx @@ -0,0 +1,28 @@ +import { forwardRef } from "react"; +import { Text, TextInput, View } from "react-native"; + +import { cn } from "@/lib/utils"; + +export interface InputProps + extends React.ComponentPropsWithoutRef<typeof TextInput> { + label?: string; + labelClasses?: string; + inputClasses?: string; +} + +const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>( + ({ className, label, labelClasses, inputClasses, ...props }, ref) => ( + <View className={cn("flex flex-col gap-1.5", className)}> + {label && <Text className={cn("text-base", labelClasses)}>{label}</Text>} + <TextInput + className={cn( + inputClasses, + "border border-input py-2.5 px-4 rounded-lg", + )} + {...props} + /> + </View> + ), +); + +export { Input }; diff --git a/globals.css b/globals.css new file mode 100644 index 00000000..de1cf559 --- /dev/null +++ b/globals.css @@ -0,0 +1,80 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --radius: 0.5rem; + } + + .dark:root { + --background: 224 71% 4%; + --foreground: 213 31% 91%; + + --muted: 223 47% 11%; + --muted-foreground: 215.4 16.3% 56.9%; + + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; + + --popover: 224 71% 4%; + --popover-foreground: 215 20.2% 65.1%; + + --border: 216 34% 17%; + --input: 216 34% 17%; + + --card: 224 71% 4%; + --card-foreground: 213 31% 91%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 1.2%; + + --secondary: 222.2 47.4% 11.2%; + --secondary-foreground: 210 40% 98%; + + --destructive: 0 63% 31%; + --destructive-foreground: 210 40% 98%; + + --ring: 216 34% 17%; + + --radius: 0.5rem; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 00000000..9ad0df42 --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/metro.config.js b/metro.config.js new file mode 100644 index 00000000..bbd30d1d --- /dev/null +++ b/metro.config.js @@ -0,0 +1,7 @@ +const { getDefaultConfig } = require("expo/metro-config"); +const { withNativeWind } = require("nativewind/metro"); + +/** @type {import('expo/metro-config').MetroConfig} */ +const config = getDefaultConfig(__dirname); + +module.exports = withNativeWind(config, { input: "./globals.css" }); diff --git a/package.json b/package.json index ce3089e5..acac899e 100644 --- a/package.json +++ b/package.json @@ -10,18 +10,22 @@ "lint": "eslint ." }, "dependencies": { + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", "expo": "~50.0.11", "expo-constants": "~15.4.5", "expo-linking": "~6.2.2", "expo-router": "~3.4.8", "expo-status-bar": "~1.11.1", "lucide-react-native": "^0.354.0", - "nativewind": "^2.0.11", + "nativewind": "^4.0.1", "react": "18.2.0", "react-native": "0.73.4", + "react-native-reanimated": "^3.8.0", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", - "react-native-svg": "^15.1.0" + "react-native-svg": "^15.1.0", + "tailwind-merge": "^2.2.1" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d8448717..f3ff8fb2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,12 @@ settings: excludeLinksFromLockfile: false dependencies: + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + clsx: + specifier: ^2.1.0 + version: 2.1.0 expo: specifier: ~50.0.11 version: 50.0.11(@babel/core@7.24.0)(@react-native/babel-preset@0.73.21) @@ -16,7 +22,7 @@ dependencies: version: 6.2.2(expo@50.0.11) expo-router: specifier: ~3.4.8 - version: 3.4.8(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.11)(react-dom@18.2.0)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) + version: 3.4.8(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.11)(react-dom@18.2.0)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) expo-status-bar: specifier: ~1.11.1 version: 1.11.1 @@ -24,14 +30,17 @@ dependencies: specifier: ^0.354.0 version: 0.354.0(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0) nativewind: - specifier: ^2.0.11 - version: 2.0.11(react@18.2.0)(tailwindcss@3.3.2) + specifier: ^4.0.1 + version: 4.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2) react: specifier: 18.2.0 version: 18.2.0 react-native: specifier: 0.73.4 version: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0)(react@18.2.0) + react-native-reanimated: + specifier: ^3.8.0 + version: 3.8.0(@babel/core@7.24.0)(react-native@0.73.4)(react@18.2.0) react-native-safe-area-context: specifier: 4.8.2 version: 4.8.2(react-native@0.73.4)(react@18.2.0) @@ -41,6 +50,9 @@ dependencies: react-native-svg: specifier: ^15.1.0 version: 15.1.0(react-native@0.73.4)(react@18.2.0) + tailwind-merge: + specifier: ^2.2.1 + version: 2.2.1 devDependencies: '@babel/core': @@ -239,13 +251,6 @@ packages: '@babel/types': 7.24.0 dev: false - /@babel/helper-module-imports@7.18.6: - resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.24.0 - dev: false - /@babel/helper-module-imports@7.22.15: resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} engines: {node: '>=6.9.0'} @@ -1571,15 +1576,6 @@ packages: transitivePeerDependencies: - supports-color - /@babel/types@7.19.0: - resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.23.4 - '@babel/helper-validator-identifier': 7.22.20 - to-fast-properties: 2.0.0 - dev: false - /@babel/types@7.24.0: resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==} engines: {node: '>=6.9.0'} @@ -3367,6 +3363,22 @@ packages: resolution: {integrity: sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==} dev: false + /babel-plugin-tester@11.0.4(@babel/core@7.24.0): + resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==} + engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0} + peerDependencies: + '@babel/core': '>=7.11.6' + dependencies: + '@babel/core': 7.24.0 + core-js: 3.36.0 + debug: 4.3.4 + lodash.mergewith: 4.6.2 + prettier: 2.8.8 + strip-indent: 3.0.0 + transitivePeerDependencies: + - supports-color + dev: false + /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.24.0): resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==} dependencies: @@ -3629,10 +3641,6 @@ packages: engines: {node: '>=10'} dev: false - /camelize@1.0.1: - resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} - dev: false - /caniuse-lite@1.0.30001596: resolution: {integrity: sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==} @@ -3709,6 +3717,12 @@ packages: engines: {node: '>=8'} dev: false + /class-variance-authority@0.7.0: + resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==} + dependencies: + clsx: 2.0.0 + dev: false + /clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -3769,6 +3783,16 @@ packages: engines: {node: '>=0.8'} dev: false + /clsx@2.0.0: + resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} + engines: {node: '>=6'} + dev: false + + /clsx@2.1.0: + resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} + engines: {node: '>=6'} + dev: false + /color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} dependencies: @@ -3898,6 +3922,11 @@ packages: browserslist: 4.23.0 dev: false + /core-js@3.36.0: + resolution: {integrity: sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==} + requiresBuild: true + dev: false + /core-util-is@1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: false @@ -3953,15 +3982,6 @@ packages: engines: {node: '>=8'} dev: false - /css-color-keywords@1.0.0: - resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} - engines: {node: '>=4'} - dev: false - - /css-mediaquery@0.1.2: - resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} - dev: false - /css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} dependencies: @@ -3972,14 +3992,6 @@ packages: nth-check: 2.1.1 dev: false - /css-to-react-native@3.2.0: - resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} - dependencies: - camelize: 1.0.1 - css-color-keywords: 1.0.0 - postcss-value-parser: 4.2.0 - dev: false - /css-tree@1.1.3: resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} engines: {node: '>=8.0.0'} @@ -4832,7 +4844,7 @@ packages: invariant: 2.2.4 dev: false - /expo-router@3.4.8(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.11)(react-dom@18.2.0)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): + /expo-router@3.4.8(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.11)(react-dom@18.2.0)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-fOOAWHH4LSPjPFtIZbApxdTNU8xSS8qKvhZ7PfWNMfx9510J1R1Ce/nwENPzcRLHRuVofDsSAEBfi4kV03fJwg==} peerDependencies: '@react-navigation/drawer': ^6.5.8 @@ -4864,6 +4876,7 @@ packages: expo-splash-screen: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.11) expo-status-bar: 1.11.1 react-helmet-async: 1.3.0(react-dom@18.2.0)(react@18.2.0) + react-native-reanimated: 3.8.0(@babel/core@7.24.0)(react-native@0.73.4)(react@18.2.0) react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) react-native-screens: 3.29.0(react-native@0.73.4)(react@18.2.0) schema-utils: 4.2.0 @@ -4922,10 +4935,6 @@ packages: - utf-8-validate dev: false - /extend@3.0.2: - resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} - dev: false - /fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} @@ -6098,6 +6107,15 @@ packages: dev: false optional: true + /lightningcss-darwin-arm64@1.22.0: + resolution: {integrity: sha512-aH2be3nNny+It5YEVm8tBSSdRlBVWQV8m2oJ7dESiYRzyY/E/bQUe2xlw5caaMuhlM9aoTMtOH25yzMhir0qPg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /lightningcss-darwin-x64@1.19.0: resolution: {integrity: sha512-Lif1wD6P4poaw9c/4Uh2z+gmrWhw/HtXFoeZ3bEsv6Ia4tt8rOJBdkfVaUJ6VXmpKHALve+iTyP2+50xY1wKPw==} engines: {node: '>= 12.0.0'} @@ -6107,6 +6125,24 @@ packages: dev: false optional: true + /lightningcss-darwin-x64@1.22.0: + resolution: {integrity: sha512-9KHRFA0Y6mNxRHeoQMp0YaI0R0O2kOgUlYPRjuasU4d+pI8NRhVn9bt0yX9VPs5ibWX1RbDViSPtGJvYYrfVAQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /lightningcss-freebsd-x64@1.22.0: + resolution: {integrity: sha512-xaYL3xperGwD85rQioDb52ozF3NAJb+9wrge3jD9lxGffplu0Mn35rXMptB8Uc2N9Mw1i3Bvl7+z1evlqVl7ww==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-arm-gnueabihf@1.19.0: resolution: {integrity: sha512-P15VXY5682mTXaiDtbnLYQflc8BYb774j2R84FgDLJTN6Qp0ZjWEFyN1SPqyfTj2B2TFjRHRUvQSSZ7qN4Weig==} engines: {node: '>= 12.0.0'} @@ -6116,6 +6152,15 @@ packages: dev: false optional: true + /lightningcss-linux-arm-gnueabihf@1.22.0: + resolution: {integrity: sha512-epQGvXIjOuxrZpMpMnRjK54ZqzhiHhCPLtHvw2fb6NeK2kK9YtF0wqmeTBiQ1AkbWfnnXGTstYaFNiadNK+StQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-arm64-gnu@1.19.0: resolution: {integrity: sha512-zwXRjWqpev8wqO0sv0M1aM1PpjHz6RVIsBcxKszIG83Befuh4yNysjgHVplF9RTU7eozGe3Ts7r6we1+Qkqsww==} engines: {node: '>= 12.0.0'} @@ -6125,6 +6170,15 @@ packages: dev: false optional: true + /lightningcss-linux-arm64-gnu@1.22.0: + resolution: {integrity: sha512-AArGtKSY4DGTA8xP8SDyNyKtpsUl1Rzq6FW4JomeyUQ4nBrR71uPChksTpj3gmWuGhZeRKLeCUI1DBid/zhChg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-arm64-musl@1.19.0: resolution: {integrity: sha512-vSCKO7SDnZaFN9zEloKSZM5/kC5gbzUjoJQ43BvUpyTFUX7ACs/mDfl2Eq6fdz2+uWhUh7vf92c4EaaP4udEtA==} engines: {node: '>= 12.0.0'} @@ -6134,6 +6188,15 @@ packages: dev: false optional: true + /lightningcss-linux-arm64-musl@1.22.0: + resolution: {integrity: sha512-RRraNgP8hnBPhInTTUdlFm+z16C/ghbxBG51Sw00hd7HUyKmEUKRozyc5od+/N6pOrX/bIh5vIbtMXIxsos0lg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-x64-gnu@1.19.0: resolution: {integrity: sha512-0AFQKvVzXf9byrXUq9z0anMGLdZJS+XSDqidyijI5njIwj6MdbvX2UZK/c4FfNmeRa2N/8ngTffoIuOUit5eIQ==} engines: {node: '>= 12.0.0'} @@ -6143,6 +6206,15 @@ packages: dev: false optional: true + /lightningcss-linux-x64-gnu@1.22.0: + resolution: {integrity: sha512-grdrhYGRi2KrR+bsXJVI0myRADqyA7ekprGxiuK5QRNkv7kj3Yq1fERDNyzZvjisHwKUi29sYMClscbtl+/Zpw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-x64-musl@1.19.0: resolution: {integrity: sha512-SJoM8CLPt6ECCgSuWe+g0qo8dqQYVcPiW2s19dxkmSI5+Uu1GIRzyKA0b7QqmEXolA+oSJhQqCmJpzjY4CuZAg==} engines: {node: '>= 12.0.0'} @@ -6152,6 +6224,15 @@ packages: dev: false optional: true + /lightningcss-linux-x64-musl@1.22.0: + resolution: {integrity: sha512-t5f90X+iQUtIyR56oXIHMBUyQFX/zwmPt72E6Dane3P8KNGlkijTg2I75XVQS860gNoEFzV7Mm5ArRRA7u5CAQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-win32-x64-msvc@1.19.0: resolution: {integrity: sha512-C+VuUTeSUOAaBZZOPT7Etn/agx/MatzJzGRkeV+zEABmPuntv1zihncsi+AyGmjkkzq3wVedEy7h0/4S84mUtg==} engines: {node: '>= 12.0.0'} @@ -6161,6 +6242,15 @@ packages: dev: false optional: true + /lightningcss-win32-x64-msvc@1.22.0: + resolution: {integrity: sha512-64HTDtOOZE9PUCZJiZZQpyqXBbdby1lnztBccnqh+NtbKxjnGzP92R2ngcgeuqMPecMNqNWxgoWgTGpC+yN5Sw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /lightningcss@1.19.0: resolution: {integrity: sha512-yV5UR7og+Og7lQC+70DA7a8ta1uiOPnWPJfxa0wnxylev5qfo4P+4iMpzWAdYWOca4jdNQZii+bDL/l+4hUXIA==} engines: {node: '>= 12.0.0'} @@ -6177,6 +6267,23 @@ packages: lightningcss-win32-x64-msvc: 1.19.0 dev: false + /lightningcss@1.22.0: + resolution: {integrity: sha512-+z0qvwRVzs4XGRXelnWRNwqsXUx8k3bSkbP8vD42kYKSk3z9OM2P3e/gagT7ei/gwh8DTS80LZOFZV6lm8Z8Fg==} + engines: {node: '>= 12.0.0'} + dependencies: + detect-libc: 1.0.3 + optionalDependencies: + lightningcss-darwin-arm64: 1.22.0 + lightningcss-darwin-x64: 1.22.0 + lightningcss-freebsd-x64: 1.22.0 + lightningcss-linux-arm-gnueabihf: 1.22.0 + lightningcss-linux-arm64-gnu: 1.22.0 + lightningcss-linux-arm64-musl: 1.22.0 + lightningcss-linux-x64-gnu: 1.22.0 + lightningcss-linux-x64-musl: 1.22.0 + lightningcss-win32-x64-msvc: 1.22.0 + dev: false + /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} @@ -6217,6 +6324,10 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash.mergewith@4.6.2: + resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==} + dev: false + /lodash.throttle@4.1.1: resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==} dev: false @@ -6596,6 +6707,11 @@ packages: engines: {node: '>=6'} dev: false + /min-indent@1.0.1: + resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} + engines: {node: '>=4'} + dev: false + /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: @@ -6703,28 +6819,22 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - /nativewind@2.0.11(react@18.2.0)(tailwindcss@3.3.2): - resolution: {integrity: sha512-qCEXUwKW21RYJ33KRAJl3zXq2bCq82WoI564fI21D/TiqhfmstZOqPN53RF8qK1NDK6PGl56b2xaTxgObEePEg==} - engines: {node: '>=14.18'} + /nativewind@4.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2): + resolution: {integrity: sha512-nd0Xgjzaq0ISvUAjibZXcuSvvpX1BGX2mfOGBPZpjGfHL3By6fwLGsNhrKU6mi2FF30c+kdok3e2I4k/O0UO1Q==} + engines: {node: '>=16'} peerDependencies: - tailwindcss: ~3 + tailwindcss: '>3.3.0' dependencies: - '@babel/generator': 7.23.6 - '@babel/helper-module-imports': 7.18.6 - '@babel/types': 7.19.0 - css-mediaquery: 0.1.2 - css-to-react-native: 3.2.0 - micromatch: 4.0.5 - postcss: 8.4.35 - postcss-calc: 8.2.4(postcss@8.4.35) - postcss-color-functional-notation: 4.2.4(postcss@8.4.35) - postcss-css-variables: 0.18.0(postcss@8.4.35) - postcss-nested: 5.0.6(postcss@8.4.35) - react-is: 18.2.0 + react-native-css-interop: 0.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2) tailwindcss: 3.3.2 - use-sync-external-store: 1.2.0(react@18.2.0) transitivePeerDependencies: + - '@babel/core' - react + - react-native + - react-native-reanimated + - react-native-safe-area-context + - react-native-svg + - supports-color dev: false /natural-compare@1.4.0: @@ -7194,37 +7304,6 @@ packages: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} - /postcss-calc@8.2.4(postcss@8.4.35): - resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} - peerDependencies: - postcss: ^8.2.2 - dependencies: - postcss: 8.4.35 - postcss-selector-parser: 6.0.15 - postcss-value-parser: 4.2.0 - dev: false - - /postcss-color-functional-notation@4.2.4(postcss@8.4.35): - resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==} - engines: {node: ^12 || ^14 || >=16} - peerDependencies: - postcss: ^8.2 - dependencies: - postcss: 8.4.35 - postcss-value-parser: 4.2.0 - dev: false - - /postcss-css-variables@0.18.0(postcss@8.4.35): - resolution: {integrity: sha512-lYS802gHbzn1GI+lXvy9MYIYDuGnl1WB4FTKoqMQqJ3Mab09A7a/1wZvGTkCEZJTM8mSbIyb1mJYn8f0aPye0Q==} - peerDependencies: - postcss: ^8.2.6 - dependencies: - balanced-match: 1.0.2 - escape-string-regexp: 1.0.5 - extend: 3.0.2 - postcss: 8.4.35 - dev: false - /postcss-import@15.1.0(postcss@8.4.35): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -7261,16 +7340,6 @@ packages: postcss: 8.4.35 yaml: 2.4.1 - /postcss-nested@5.0.6(postcss@8.4.35): - resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.2.14 - dependencies: - postcss: 8.4.35 - postcss-selector-parser: 6.0.15 - dev: false - /postcss-nested@6.0.1(postcss@8.4.35): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -7310,6 +7379,12 @@ packages: fast-diff: 1.3.0 dev: true + /prettier@2.8.8: + resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} + engines: {node: '>=10.13.0'} + hasBin: true + dev: false + /prettier@3.2.5: resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==} engines: {node: '>=14'} @@ -7494,6 +7569,58 @@ packages: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: false + /react-native-css-interop@0.0.36(@babel/core@7.24.0)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2): + resolution: {integrity: sha512-ZWoKQlq6XrI5DB4BdPk5ABvJQsX7zls1SQYWuYXOQB8u5QE0KH3OfOGAGRZPekTjgkhjqGO4Bf8G2JTSWAYMSg==} + engines: {node: '>=18'} + peerDependencies: + react: '>=18' + react-native: '*' + react-native-reanimated: '>=3.6.2' + react-native-safe-area-context: '*' + react-native-svg: '*' + tailwindcss: ~3 + peerDependenciesMeta: + react-native-safe-area-context: + optional: true + react-native-svg: + optional: true + dependencies: + '@babel/helper-module-imports': 7.22.15 + '@babel/traverse': 7.24.0 + '@babel/types': 7.24.0 + babel-plugin-tester: 11.0.4(@babel/core@7.24.0) + lightningcss: 1.22.0 + react: 18.2.0 + react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0)(react@18.2.0) + react-native-reanimated: 3.8.0(@babel/core@7.24.0)(react-native@0.73.4)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) + react-native-svg: 15.1.0(react-native@0.73.4)(react@18.2.0) + tailwindcss: 3.3.2 + transitivePeerDependencies: + - '@babel/core' + - supports-color + dev: false + + /react-native-reanimated@3.8.0(@babel/core@7.24.0)(react-native@0.73.4)(react@18.2.0): + resolution: {integrity: sha512-xoG4+nf+lSmzv37mjTUIT0gYNEIr2Mb8WXgmqR8deCJk8CC6lXT0HRpshTPVAF00LvdzrD2W/rCpiBdHN5FW2w==} + peerDependencies: + '@babel/core': ^7.0.0-0 + react: '*' + react-native: '*' + dependencies: + '@babel/core': 7.24.0 + '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.24.0) + '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.24.0) + '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.24.0) + '@babel/preset-typescript': 7.23.3(@babel/core@7.24.0) + convert-source-map: 2.0.0 + invariant: 2.2.4 + react: 18.2.0 + react-native: 0.73.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0)(react@18.2.0) + dev: false + /react-native-safe-area-context@4.8.2(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-ffUOv8BJQ6RqO3nLml5gxJ6ab3EestPiyWekxdzO/1MQ7NF8fW1Mzh1C5QE9yq573Xefnc7FuzGXjtesZGv7cQ==} peerDependencies: @@ -8276,6 +8403,13 @@ packages: engines: {node: '>=6'} dev: false + /strip-indent@3.0.0: + resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==} + engines: {node: '>=8'} + dependencies: + min-indent: 1.0.1 + dev: false + /strip-json-comments@2.0.1: resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==} engines: {node: '>=0.10.0'} @@ -8358,6 +8492,12 @@ packages: tslib: 2.6.2 dev: true + /tailwind-merge@2.2.1: + resolution: {integrity: sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==} + dependencies: + '@babel/runtime': 7.24.0 + dev: false + /tailwindcss@3.3.2: resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==} engines: {node: '>=14.0.0'} @@ -8745,14 +8885,6 @@ packages: react: 18.2.0 dev: false - /use-sync-external-store@1.2.0(react@18.2.0): - resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} diff --git a/tailwind.config.js b/tailwind.config.js index 58c26c3a..b49f9598 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,71 @@ +const { hairlineWidth } = require("nativewind/theme"); + /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"], + plugins: [], + presets: [require("nativewind/preset")], theme: { - extend: {}, + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + 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))", + }, + }, + borderWidth: { + hairline: hairlineWidth(), + }, + 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: [], }; |