lfg

Author: irsyadadl

.idea/workspace.xml

@@ -0,0 +1,122 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --light: 223.81 0% 98%;
+        --dark: 239.95 9% 6%;
+        --bg: 0 0% 100%;
+        --fg: 239.93 9% 4%;
+        --primary: 216.77 100% 50%;
+        --primary-fg: 0 0% 100%;
+        --secondary: 240 4% 96%;
+        --secondary-fg: 240.01 6% 10%;
+        --tertiary: 0 0% 100%;
+        --tertiary-fg: 240 4% 16%;
+        --overlay: 0 0% 100%;
+        --overlay-fg: 239.93 9% 4%;
+        --muted: 240 4% 96%;
+        --muted-fg: 240.01 4% 46%;
+        --accent: 216.77 100% 50%;
+        --accent-fg: 0 0% 100%;
+        --accent-subtle: 216.92 99% 97%;
+        --accent-subtle-fg: 216.74 100% 40%;
+        --success: 161.17 91% 31%;
+        --success-fg: 151.77 82% 96%;
+        --info: 205.77 100% 50%;
+        --info-fg: 0 0% 100%;
+        --danger: 0.01 72% 51%;
+        --danger-fg: 360 86% 97%;
+        --warning: 43.2 96% 56.99%;
+        --warning-fg: 20.91 91% 14.1%;
+        --border: 240 6% 90%;
+        --input: 240 6% 90%;
+        --ring: var(--primary);
+        --toggle: 240.01 5% 84%;
+        --radius: 0.5rem;
+        --primary-chart: 216.74 100% 45%;
+        --secondary-chart: 219.83 100% 77%;
+        --tertiary-chart: 216.01 92% 60%;
+        --highlight-chart: 210 98% 78%;
+        --accent-chart: 210 98% 78%
+    }
+
+    .dark {
+        --bg: 0 0% 0%;
+        --fg: 223.81 0% 98%;
+        --primary: 216.04 98% 52%;
+        --primary-fg: 0 0% 100%;
+        --secondary: 239.99 6% 11%;
+        --secondary-fg: 223.81 0% 98%;
+        --tertiary: 240.02 10% 6%;
+        --tertiary-fg: 239.99 4% 96%;
+        --accent: 216.04 98% 52%;
+        --accent-fg: 0 0% 100%;
+        --accent-subtle: 215.99 94% 6%;
+        --accent-subtle-fg: 204.92 100% 77%;
+        --overlay: 240.03 6% 6%;
+        --overlay-fg: 223.81 0% 98%;
+        --muted: 239.95 3% 16%;
+        --muted-fg: 240.01 5% 65%;
+        --info: 205.77 100% 50%;
+        --info-fg: 0 0% 100%;
+        --success: 161.17 91% 31%;
+        --success-fg: 151.77 82% 96%;
+        --ring: var(--primary);
+        --toggle: 239.99 5% 26%;
+        --border: 240.01 7.1% 15%;
+        --input: 239.95 3% 16%;
+        --primary-chart: 221.19 83% 53%;
+        --secondary-chart: 211.99 95% 68%;
+        --tertiary-chart: 216.01 92% 60%;
+        --highlight-chart: 210 98% 78%;
+        --accent-chart: 212 96% 87%
+    }
+}
+
+@layer base {
+    html {
+        @apply scroll-smooth;
+    }
+
+    * {
+        @apply border-border;
+        font-feature-settings: 'cv11', 'ss01';
+        font-variation-settings: 'opsz' 850;
+        text-rendering: optimizeLegibility;
+        scrollbar-width: thin;
+    }
+
+    body {
+        @apply bg-bg text-fg;
+    }
+
+    /* dark mode */
+    .dark {
+        scrollbar-width: thin;
+
+        @media (prefers-color-scheme: dark) {
+            * {
+                scrollbar-width: thin;
+            }
+        }
+    }
+
+    /* Chrome, Edge, and Safari */
+    *::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    *::-webkit-scrollbar-track {
+        background: transparent;
+        border-radius: 5px;
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply bg-muted;
+        border-radius: 14px;
+        border: 3px solid transparent;
+    }
+}

app/globals.css

@@ -3,7 +3,7 @@ import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import { Toast } from 'ui'
 
-import './styles/app.css'
+import './globals.css'
 
 const fontSans = localFont({
   src: './fonts/GeistVF.woff',

app/layout.tsx

@@ -16,7 +16,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <RouterProvider navigate={router.push}>
-      <ThemeProvider>{children}</ThemeProvider>
+      <ThemeProvider attribute="class">{children}</ThemeProvider>
     </RouterProvider>
   )
 }

app/styles/app.css

@@ -6,11 +6,7 @@ import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes'
 import { type ThemeProviderProps } from 'next-themes/dist/types'
 
 const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
-  return (
-    <NextThemesProvider disableTransitionOnChange attribute="class" {...props}>
-      {children}
-    </NextThemesProvider>
-  )
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }
 
 export { ThemeProvider, useTheme }

bun.lockb

@@ -71,6 +71,9 @@ const buttonStyles = tv(
       isDisabled: {
         false: 'forced-colors:disabled:text-[GrayText]',
         true: 'cursor-default opacity-60 forced-colors:disabled:text-[GrayText]'
+      },
+      isPending: {
+        true: 'cursor-default'
       }
     },
     defaultVariants: {

components/providers.tsx

@@ -14,7 +14,7 @@ import {
 import { tv } from 'tailwind-variants'
 
 import { Description, FieldError, Label } from './field'
-import { cr, ctr } from './primitive'
+import { cn, cr, ctr } from './primitive'
 
 interface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, 'children'> {
   label?: string
@@ -25,7 +25,7 @@ interface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, 'children
 
 const CheckboxGroup = (props: CheckboxGroupProps) => {
   return (
-    <CheckboxGroupPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-2')}>
+    <CheckboxGroupPrimitive {...props} className={ctr(props.className, 'flex flex-col gap-y-2')}>
       <Label>{props.label}</Label>
       <>{props.children}</>
       {props.description && <Description className="block">{props.description}</Description>}
@@ -71,19 +71,19 @@ interface CheckboxProps extends CheckboxPrimitiveProps {
   label?: string
 }
 
-const Checkbox = (props: CheckboxProps) => {
+const Checkbox = ({ className, ...props }: CheckboxProps) => {
   return (
     <CheckboxPrimitive
       {...props}
-      className={cr(props.className, (className, renderProps) => checkboxStyles({ ...renderProps, className }))}
+      className={cr(className, (className, renderProps) => checkboxStyles({ ...renderProps, className }))}
     >
       {({ isSelected, isIndeterminate, ...renderProps }) => (
-        <div className="flex gap-2">
+        <div className={cn('flex gap-x-2', props.description ? 'items-start' : 'items-center')}>
           <div
             className={boxStyles({
+              ...renderProps,
               isSelected: isSelected || isIndeterminate,
-              className: props.description ? 'mt-1' : 'mt-0.5',
-              ...renderProps
+              className: props.description ? 'mt-1' : 'mt-px'
             })}
           >
             {isIndeterminate ? <IconMinus /> : isSelected ? <IconCheck /> : null}

components/theme-provider.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+
 import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 
@@ -29,15 +31,14 @@ interface LinkProps extends LinkPrimitiveProps {
 const Link = ({ className, ...props }: LinkProps) => {
   return (
     <LinkPrimitive
-      aria-label={props['aria-label'] ?? 'Link'}
       {...props}
       className={cr(className, (className, ...renderProps) =>
         linkStyles({ ...renderProps, intent: props.intent, className })
       )}
     >
-      <TouchTarget>
-        <>{props.children}</>
-      </TouchTarget>
+      {(values) => (
+        <TouchTarget>{typeof props.children === 'function' ? props.children(values) : props.children}</TouchTarget>
+      )}
     </LinkPrimitive>
   )
 }