codefastlabs · thevuong · Oct 23, 2024 · Oct 21, 2024 · Oct 21, 2024 · Oct 21, 2024
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
   "changelog": "@changesets/cli/changelog",
   "baseBranch": "main",
   "commit": false,

diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/apps/docs/app/examples/cards/_components/payment-method.tsx b/apps/docs/app/examples/cards/_components/payment-method.tsx
@@ -7,8 +7,8 @@ import {
   CardHeader,
   CardTitle,
   Label,
-  RadioGroup,
-  RadioGroupItem,
+  RadioCards,
+  RadioCardsItem,
   Select,
   SelectContent,
   SelectItem,
@@ -28,50 +28,32 @@ export function PaymentMethod(): JSX.Element {
         <CardDescription>Add a new payment method to your account.</CardDescription>
       </CardHeader>
       <CardContent className="grid gap-6">
-        <RadioGroup className="grid grid-cols-3 gap-4" defaultValue="card">
-          <div>
-            <RadioGroupItem className="peer sr-only" id="card" value="card" />
-            <Label
-              className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
-              htmlFor="card"
+        <RadioCards className="grid-cols-1 sm:grid-cols-3" defaultValue="card">
+          <RadioCardsItem className="flex-col gap-3 text-sm font-medium leading-none" value="card">
+            <svg
+              className="size-6"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                className="mb-3 size-6"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect height="14" rx="2" width="20" x="2" y="5" />
-                <path d="M2 10h20" />
-              </svg>
-              Card
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem className="peer sr-only" id="paypal" value="paypal" />
-            <Label
-              className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
-              htmlFor="paypal"
-            >
-              <Icons.Paypal className="mb-3 size-6" />
-              Paypal
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem className="peer sr-only" id="apple" value="apple" />
-            <Label
-              className="border-muted bg-popover hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border-2 p-4"
-              htmlFor="apple"
-            >
-              <Icons.Apple className="mb-3 size-6" />
-              Apple
-            </Label>
-          </div>
-        </RadioGroup>
+              <rect height="14" rx="2" width="20" x="2" y="5" />
+              <path d="M2 10h20" />
+            </svg>
+            Card
+          </RadioCardsItem>
+          <RadioCardsItem className="flex-col gap-3 text-sm font-medium leading-none" value="paypal">
+            <Icons.Paypal className="mb-3 size-6" />
+            Paypal
+          </RadioCardsItem>
+          <RadioCardsItem className="flex-col gap-3 text-sm font-medium leading-none" value="apple">
+            <Icons.Apple className="mb-3 size-6" />
+            Apple
+          </RadioCardsItem>
+        </RadioCards>
         <div className="grid gap-2">
           <Label htmlFor="name">Name</Label>
           <TextInput id="name" placeholder="First Last" />

diff --git a/apps/docs/app/examples/forms/display/_components/display-form.tsx b/apps/docs/app/examples/forms/display/_components/display-form.tsx
@@ -92,7 +92,7 @@ export function DisplayForm(): JSX.Element {
                   name="items"
                   render={({ field }) => {
                     return (
-                      <FormItem key={item.id} className="flex flex-row items-start space-x-3 space-y-0">
+                      <FormItem key={item.id} className="flex flex-row items-start space-y-0">
                         <FormControl>
                           <Checkbox
                             checked={field.value.includes(item.id)}

diff --git a/apps/docs/app/examples/forms/notifications/_components/notifications-form.tsx b/apps/docs/app/examples/forms/notifications/_components/notifications-form.tsx
@@ -75,19 +75,19 @@ export function NotificationsForm(): JSX.Element {
                   defaultValue={field.value}
                   onValueChange={field.onChange}
                 >
-                  <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormItem className="flex items-center space-y-0">
                     <FormControl>
                       <RadioGroupItem value="all" />
                     </FormControl>
                     <FormLabel className="font-normal">All new messages</FormLabel>
                   </FormItem>
-                  <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormItem className="flex items-center space-y-0">
                     <FormControl>
                       <RadioGroupItem value="mentions" />
                     </FormControl>
                     <FormLabel className="font-normal">Direct messages and mentions</FormLabel>
                   </FormItem>
-                  <FormItem className="flex items-center space-x-3 space-y-0">
+                  <FormItem className="flex items-center space-y-0">
                     <FormControl>
                       <RadioGroupItem value="none" />
                     </FormControl>
@@ -168,7 +168,7 @@ export function NotificationsForm(): JSX.Element {
           control={form.control}
           name="mobile"
           render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+            <FormItem className="flex flex-row items-start space-y-0">
               <FormControl>
                 <Checkbox checked={field.value} onCheckedChange={field.onChange} />
               </FormControl>

diff --git a/apps/docs/app/examples/mail/_components/nav.tsx b/apps/docs/app/examples/mail/_components/nav.tsx
@@ -17,10 +17,9 @@ export function Nav({ links, isCollapsed }: NavProps): JSX.Element {
   return (
     <div className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2" data-collapsed={isCollapsed}>
       <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
-        {links.map((link, index) =>
+        {links.map((link) =>
           isCollapsed ? (
-            // eslint-disable-next-line react/no-array-index-key -- we don't expect the links to change
-            <Tooltip key={index} delayDuration={0}>
+            <Tooltip key={link.label} delayDuration={0}>
               <TooltipTrigger asChild>
                 <Link
                   className={cn(
@@ -42,8 +41,7 @@ export function Nav({ links, isCollapsed }: NavProps): JSX.Element {
             </Tooltip>
           ) : (
             <Link
-              // eslint-disable-next-line react/no-array-index-key -- we don't expect the links to change
-              key={index}
+              key={link.label}
               className={cn(
                 buttonVariants({ variant: link.variant, size: 'sm' }),
                 link.variant === 'default' && 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white',

diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
@@ -128,7 +128,7 @@
     |---------------------------------------------------------------------------
     | Used for primary actions such as <Button variant="primary">
     --------------------------------------------------------------------------*/
-    --primary: var(--sky-700);
+    --primary: var(--sky-600);
     --primary-foreground: var(--sky-50);
 
     /*--------------------------------------------------------------------------
@@ -225,14 +225,14 @@
     |---------------------------------------------------------------------------
     | Border color for inputs such as TextInput, NumberInput, TextArea.
     --------------------------------------------------------------------------*/
-    --input: var(--border);
+    --input: var(--slate-400);
 
     /*--------------------------------------------------------------------------
     | Ring Color
     |---------------------------------------------------------------------------
     | Used for focus ring
     --------------------------------------------------------------------------*/
-    --ring: var(--primary);
+    --ring: var(--sky-400);
 
     /*--------------------------------------------------------------------------
     | Chart Colors

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -29,9 +29,9 @@
     "jotai": "2.10.1",
     "lodash-es": "4.17.21",
     "lucide-react": "0.453.0",
-    "next": "15.0.0-canary.202",
-    "react": "19.0.0-rc-b8ae38f8-20241018",
-    "react-dom": "19.0.0-rc-b8ae38f8-20241018",
+    "next": "15.0.1",
+    "react": "19.0.0-rc-65a56d0e-20241020",
+    "react-dom": "19.0.0-rc-65a56d0e-20241020",
     "react-hook-form": "7.53.1",
     "recharts": "2.13.0",
     "zod": "3.23.8"
@@ -54,12 +54,12 @@
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "autoprefixer": "10.4.20",
-    "chromatic": "11.12.6",
+    "chromatic": "11.14.0",
     "concurrently": "9.0.1",
     "eslint": "8.57.1",
-    "eslint-config-next": "15.0.0-canary.202",
-    "eslint-config-turbo": "2.2.0",
-    "eslint-plugin-storybook": "0.9.0",
+    "eslint-config-next": "15.0.1",
+    "eslint-config-turbo": "2.2.3",
+    "eslint-plugin-storybook": "0.10.1",
     "postcss": "8.4.47",
     "serve": "14.2.4",
     "storybook": "8.3.6",

diff --git a/apps/docs/stories/carousel.stories.tsx b/apps/docs/stories/carousel.stories.tsx
@@ -34,26 +34,29 @@ type Story = StoryObj<typeof Carousel>;
  * -------------------------------------------------------------------------- */
 
 export const Default: Story = {
-  render: (args) => (
-    <Carousel className="w-full max-w-xs" {...args}>
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          // eslint-disable-next-line react/no-array-index-key -- okay for static content
-          <CarouselItem key={index}>
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  ),
+  render: (args) => {
+    const numbers = Array.from({ length: 5 }, (_, index) => index + 1);
+
+    return (
+      <Carousel className="w-full max-w-xs" {...args}>
+        <CarouselContent>
+          {numbers.map((number, index) => (
+            <CarouselItem key={number}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    );
+  },
 };
 
 /* -----------------------------------------------------------------------------

diff --git a/apps/docs/stories/checkbox-group.stories.tsx b/apps/docs/stories/checkbox-group.stories.tsx
@@ -110,19 +110,19 @@ export const ReactHookForm: Story = {
                     defaultValue={field.value}
                     onValueChange={field.onChange}
                   >
-                    <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormItem className="flex items-center space-y-0">
                       <FormControl>
                         <CheckboxGroupItem value="all" />
                       </FormControl>
                       <FormLabel className="font-normal">All new messages</FormLabel>
                     </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormItem className="flex items-center space-y-0">
                       <FormControl>
                         <CheckboxGroupItem value="mentions" />
                       </FormControl>
                       <FormLabel className="font-normal">Direct messages and mentions</FormLabel>
                     </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormItem className="flex items-center space-y-0">
                       <FormControl>
                         <CheckboxGroupItem value="none" />
                       </FormControl>

diff --git a/apps/docs/stories/checkbox.stories.tsx b/apps/docs/stories/checkbox.stories.tsx
@@ -111,7 +111,7 @@ export const ReactHookForm: Story = {
             control={form.control}
             name="mobile"
             render={({ field }) => (
-              <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
+              <FormItem className="flex flex-row items-start space-y-0 rounded-md border p-4 shadow">
                 <FormControl>
                   <Checkbox checked={field.value} onCheckedChange={field.onChange} {...args} />
                 </FormControl>
@@ -214,7 +214,7 @@ export const ReactHookForm2: Story = {
                     control={form.control}
                     name="items"
                     render={({ field }) => (
-                      <FormItem key={item.id} className="flex flex-row items-center space-x-3 space-y-0">
+                      <FormItem key={item.id} className="flex flex-row items-center space-y-0">
                         <FormControl>
                           <Checkbox
                             checked={field.value.includes(item.id)}

diff --git a/apps/docs/stories/radio-group.stories.tsx b/apps/docs/stories/radio-group.stories.tsx
@@ -110,19 +110,19 @@ export const ReactHookForm: Story = {
                     defaultValue={field.value}
                     onValueChange={field.onChange}
                   >
-                    <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormItem className="flex items-center space-y-0">
                       <FormControl>
                         <RadioGroupItem value="all" />
                       </FormControl>
                       <FormLabel className="font-normal">All new messages</FormLabel>
                     </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormItem className="flex items-center space-y-0">
                       <FormControl>
                         <RadioGroupItem value="mentions" />
                       </FormControl>
                       <FormLabel className="font-normal">Direct messages and mentions</FormLabel>
                     </FormItem>
-                    <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormItem className="flex items-center space-y-0">
                       <FormControl>
                         <RadioGroupItem value="none" />
                       </FormControl>

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "prettier-plugin-tailwindcss": "0.6.8",
     "simple-git-hooks": "2.11.1",
     "tsup": "8.3.0",
-    "turbo": "2.2.0"
+    "turbo": "2.2.3"
   },
   "packageManager": "pnpm@9.4.0",
   "engines": {
@@ -59,9 +59,9 @@
     "overrides": {
       "@types/react": "npm:types-react@19.0.0-rc.1",
       "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
-      "react": "19.0.0-rc-b8ae38f8-20241018",
-      "react-dom": "19.0.0-rc-b8ae38f8-20241018",
-      "react-is": "19.0.0-rc-b8ae38f8-20241018"
+      "react": "19.0.0-rc-65a56d0e-20241020",
+      "react-dom": "19.0.0-rc-65a56d0e-20241020",
+      "react-is": "19.0.0-rc-65a56d0e-20241020"
     }
   }
 }
diff --git a/packages/config-eslint/package.json b/packages/config-eslint/package.json
@@ -22,8 +22,8 @@
     "clean": "rm -rf node_modules"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.11.0",
+    "@typescript-eslint/parser": "8.11.0",
     "@vercel/style-guide": "6.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-only-warn": "1.1.0",