resolve eslint errors

packages/react/.eslintrc.cjs

@@ -32,7 +32,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
-    '@typescript-eslint/no-unused-vars': ['warn'],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
     "tailwindcss/no-custom-classname": ['warn']
   },
 }

packages/react/src/Kitchensink.tsx

@@ -23,7 +23,7 @@ function App() {
       <hr className="border-base" />
 
       <h3>Color and variants:</h3>
-      <div className="tems-start flex max-w-5xl flex-row flex-wrap justify-start gap-4">
+      <div className="flex max-w-5xl flex-row flex-wrap items-start justify-start gap-4">
         <Button>Default button</Button>
         <Button variant="ghost">Ghost button</Button>
         <Button variant="outline">Outline button</Button>

packages/react/src/components/header/header.tsx

@@ -18,7 +18,7 @@ export function Header({ onClick, id }: HeaderProps) {
   return (
     <header
       id={id}
-      className="py-auto sticky top-0 z-40 flex items-center gap-4 bg-base-2 px-8"
+      className="sticky top-0 z-40 flex items-center gap-4 bg-base-2 px-8"
     >
       <Button size="icon-lg" variant="ghost" onClick={onClick}>
         <div className="i-heroicons:bars-3 rounded-md p-3" />

packages/react/src/shadcn/ui/button.tsx

@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
-          "bg-primary-9 text-base-12 hover:bg-primaryA-4",
+          "bg-primary-9 text-base-12 hover:bg-primaryA-4 focus-visible:ring-primary-7",
         outline:
-          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-4",
+          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-4 focus-visible:ring-primary-7",
         secondary:
-          "bg-secondary-9 text-base-12 hover:bg-secondaryA-4",
-        ghost: "hover:bg-primary-4 hover:text-base-12",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7 ",
+        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7",
+        link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
       },
       size: {
         default: "h-8 gap-2 px-3.5 py-2",

packages/react/src/shadcn/ui/command.tsx

@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-base-9 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>

packages/react/src/shadcn/ui/dialog.tsx

@@ -55,7 +55,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-base-1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-7 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primaryA-3 data-[state=open]:text-primary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

packages/react/src/shadcn/ui/fancy-multiselect.tsx

@@ -80,7 +80,7 @@ export function FancyMultiSelect() {
   return (
     <Command onKeyDown={handleKeyDown} className="overflow-visible bg-transparent">
       <div
-        className="border-input group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
+        className="group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
       >
         <div className="flex flex-wrap gap-1">
           {selected.map((framework) => {
@@ -100,7 +100,7 @@ export function FancyMultiSelect() {
                   }}
                   onClick={() => handleUnselect(framework)}
                 >
-                  <X className="hover:text-foreground h-3 w-3 text-base-8" />
+                  <X className="h-3 w-3 text-base-8 hover:text-base-11" />
                 </button>
               </Badge>
             )