update

Signed-off-by: Innei <i@innei.in>

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  },
+  // If you do not want to autofix some rules on save
+  // You can put this in your user settings or workspace settings
+  "eslint.codeActionsOnSave.rules": [
+    "!unused-imports/no-unused-imports",
+    "*"
+  ],
+
+  // If you want to silent stylistic rules
+  // You can put this in your user settings or workspace settings
+  "eslint.rules.customizations": [
+    { "rule": "@stylistic/*", "severity": "off", "fixable": true },
+    { "rule": "antfu/consistent-list-newline", "severity": "off" },
+    { "rule": "hyoban/jsx-attribute-spacing", "severity": "off" },
+    { "rule": "simple-import-sort/*", "severity": "off" },
+    { "rule": "unused-imports/no-unused-imports", "severity": "off" }
+  ]
+}

package.json

@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@headlessui/react": "2.1.8",
+    "@radix-ui/react-slot": "1.1.0",
+    "@remixicon/react": "4.2.0",
     "@tanstack/react-query": "5.56.2",
     "clsx": "2.1.1",
     "framer-motion": "11.5.6",

src/components/common/ErrorElement.tsx

@@ -4,7 +4,7 @@ import { isRouteErrorResponse, useRouteError } from 'react-router-dom'
 
 import { attachOpenInEditor } from '~/lib/dev'
 
-import { StyledButton } from '../ui'
+import { Button } from '../ui/button'
 
 export function ErrorElement() {
   const error = useRouteError()
@@ -53,15 +53,13 @@ export function ErrorElement() {
       </p>
 
       <div className="center gap-4">
-        <StyledButton onClick={() => (window.location.href = '/')}>
-          Reload
-        </StyledButton>
+        <Button onClick={() => (window.location.href = '/')}>Reload</Button>
       </div>
 
       <p className="mt-8">
         Still having this issue? Please give feedback in Github, thanks!
         <a
-          className="text-theme-accent-500 hover:text-theme-accent ml-2 cursor-pointer duration-200"
+          className="ml-2 cursor-pointer text-accent duration-200"
           href={`${repository.url}/issues/new?title=${encodeURIComponent(
             `Error: ${message}`,
           )}&body=${encodeURIComponent(

src/components/ui/button/Button.tsx

@@ -0,0 +1,138 @@
+// Tremor Button [v0.2.0]
+
+import { Slot } from '@radix-ui/react-slot'
+import { RiLoader2Fill } from '@remixicon/react'
+import { m, motion } from 'framer-motion'
+import React from 'react'
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+import { cx, focusRing } from '~/lib/cn'
+
+const buttonVariants = tv({
+  base: [
+    'relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-center font-medium transition-all duration-100 ease-in-out',
+    'disabled:pointer-events-none',
+    focusRing,
+  ],
+  variants: {
+    variant: {
+      primary: [
+        'border-transparent',
+        'text-white dark:text-white',
+        'bg-accent dark:bg-accent',
+        'hover:bg-accent/90 dark:hover:bg-accent/90',
+        'disabled:bg-accent/50 disabled:text-white/70',
+        'disabled:dark:bg-accent/30 disabled:dark:text-white/50',
+      ],
+      secondary: [
+        'border border-gray-200 dark:border-gray-700',
+        'text-gray-700 dark:text-gray-200',
+        'bg-gray-50 dark:bg-gray-800',
+        'hover:bg-gray-100 dark:hover:bg-gray-750',
+        'disabled:bg-gray-50 disabled:text-gray-400',
+        'disabled:dark:bg-gray-800 disabled:dark:text-gray-500',
+      ],
+      light: [
+        'shadow-none',
+        'border-transparent',
+        'text-gray-900 dark:text-gray-50',
+        'bg-gray-200 dark:bg-gray-900',
+        'hover:bg-gray-300/70 dark:hover:bg-gray-800/80',
+        'disabled:bg-gray-100 disabled:text-gray-400',
+        'disabled:dark:bg-gray-800 disabled:dark:text-gray-600',
+      ],
+      ghost: [
+        'shadow-none',
+        'border-transparent',
+        'text-gray-900 dark:text-gray-50',
+        'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/80',
+        'disabled:text-gray-400',
+        'disabled:dark:text-gray-600',
+      ],
+      destructive: [
+        'text-white',
+        'border-transparent',
+        'bg-red-600 dark:bg-red-700',
+        'hover:bg-red-700 dark:hover:bg-red-600',
+        'disabled:bg-red-300 disabled:text-white',
+        'disabled:dark:bg-red-950 disabled:dark:text-red-400',
+      ],
+    },
+    size: {
+      xs: 'h-6 px-2 text-xs',
+      sm: 'h-8 px-3 text-sm',
+      md: 'h-10 px-4 text-sm',
+      lg: 'h-11 px-8 text-base',
+      xl: 'h-12 px-8 text-base',
+    },
+    flat: {
+      true: 'shadow-none',
+      false: 'shadow-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'sm',
+    flat: false,
+  },
+})
+
+interface ButtonProps
+  extends React.ComponentPropsWithoutRef<'button'>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  isLoading?: boolean
+  loadingText?: string
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      asChild,
+      isLoading = false,
+      loadingText,
+      className,
+      disabled,
+      variant,
+      size,
+      flat,
+      children,
+      ...props
+    }: ButtonProps,
+    forwardedRef,
+  ) => {
+    const Component = asChild ? Slot : m.button
+    return (
+      // @ts-expect-error
+      <Component
+        ref={forwardedRef}
+        className={cx(buttonVariants({ variant, size, flat }), className)}
+        disabled={disabled || isLoading}
+        data-tremor-id="tremor-raw"
+        whileTap={{ scale: 0.95 }}
+        {...props}
+      >
+        {isLoading ? (
+          <span className="pointer-events-none inline-flex items-center justify-center gap-1.5">
+            <RiLoader2Fill
+              className={cx(
+                'shrink-0 animate-spin',
+                size === 'xs' || size === 'sm' ? 'size-3' : 'size-4',
+              )}
+              aria-hidden="true"
+            />
+            <span className="sr-only">{loadingText ?? 'Loading'}</span>
+            <span className="inline-block">{loadingText ?? children}</span>
+          </span>
+        ) : (
+          children
+        )}
+      </Component>
+    )
+  },
+)
+
+Button.displayName = 'Button'
+
+export { Button, type ButtonProps, buttonVariants }

src/components/ui/button/index.ts

@@ -1,2 +1,2 @@
+export * from './Button'
 export * from './MotionButton'
-export * from './StyledButton'

src/pages/(main)/index.tsx

@@ -1,7 +1,22 @@
+import { Button } from '~/components/ui/button/Button'
+
 export const Component = () => {
   return (
-    <div className="border rounded-lg p-4">
+    <div className="rounded-lg border p-4">
       <h1 className="text-2xl font-bold">Main</h1>
+
+      <div className="flex items-center gap-2">
+        <Button>
+          <span>Button</span>
+        </Button>
+
+        <Button variant="secondary" isLoading>
+          <span>Loading</span>
+        </Button>
+        <Button variant="secondary">
+          <span>Loading</span>
+        </Button>
+      </div>
     </div>
   )
 }

src/styles/index.css

@@ -1 +1,2 @@
 @import './tailwind.css';
+@import './theme.css';