Add missing React Aria Components plugin to Tailwind Config (#131)

* Add missing React Aria Components plugin to Tailwind Config

* WIP

.changeset/nasty-walls-remain.md

@@ -0,0 +1,6 @@
+---
+"@spear-ai/tailwind-config": patch
+"@spear-ai/ui": patch
+---
+
+Added missing React Aria Components plugin to the Tailwind config.

packages/tailwind-config/src/index.ts

@@ -6,6 +6,7 @@ import { Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme";
 import threeDPlugin from "tailwindcss-3d";
 import animatePlugin from "tailwindcss-animate";
+import reactAriaComponentsPlugin from "tailwindcss-react-aria-components";
 import { radixColorThemePlugin } from "./tailwind-radix-color-theme-plugin";
 import { colors } from "./tailwind-radix-colors";
 import { data } from "./tailwind-radix-primitives";
@@ -22,6 +23,7 @@ export const tailwindConfig: Config = {
     containerQueriesPlugin,
     formsPlugin,
     radixColorThemePlugin,
+    reactAriaComponentsPlugin,
     scrollbarPlugin,
     threeDPlugin,
     typographyPlugin,

packages/ui/package.json

@@ -59,7 +59,6 @@
     "prettier": "3.2.5",
     "storybook": "8.0.0-beta.0",
     "tailwindcss": "3.4.1",
-    "tailwindcss-react-aria-components": "1.1.1",
     "typescript": "5.3.3"
   },
   "license": "UNLICENSED",

packages/ui/src/components/select/select.stories.tsx

@@ -93,7 +93,7 @@ const PreviewSelect = (properties: {
               })}
             </p>
           ) : null}
-          <Button className="group mt-2 inline-flex h-9 w-full cursor-default select-none items-center justify-between gap-1 rounded-lg border border-transparent bg-white-a-3 pe-2 ps-3.5 text-base leading-none shadow outline outline-offset-0 outline-neutral-a-7 entering:outline-2 entering:outline-primary-a-8 group-invalid:outline-x-negative-a-7 focus-visible:outline-primary-a-8 group-disabled:pointer-events-none group-invalid:group-disabled:outline-x-negative-a-6 theme-dfs:bg-canvas-1 theme-galapago:bg-white theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm">
+          <Button className="group mt-2 inline-flex h-9 w-full cursor-default select-none items-center justify-between gap-1 rounded-lg border border-transparent bg-white-a-3 pe-2 ps-3.5 text-base leading-none shadow outline outline-offset-0 outline-neutral-a-7 entering:outline-2 entering:outline-primary-a-8 group-invalid:outline-x-negative-a-7 group-disabled:pointer-events-none group-invalid:group-disabled:outline-x-negative-a-6 focus-visible:outline-primary-a-8 theme-dfs:bg-canvas-1 theme-galapago:bg-white theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm">
             <SelectValue className="truncate text-neutral-12 placeholder-shown:text-neutral-11 group-disabled:text-neutral-a-8" />
             <span aria-hidden className="text-neutral-11 group-disabled:text-neutral-8">
               <CaretSortIcon className="size-5" />

packages/ui/src/components/text-field/text-field.stories.tsx

@@ -41,7 +41,7 @@ const PreviewSelect = (properties: {
             </p>
           ) : null}
           <Input
-            className="mt-2 h-9 w-full rounded-lg border-none bg-white-a-3 pe-2 ps-3.5 text-base leading-none text-neutral-12 shadow outline outline-offset-0 outline-neutral-a-7 placeholder:text-neutral-11 invalid:outline-x-negative-a-7 focus-visible:outline-offset-0 focus-visible:outline-primary-a-8 group-disabled:pointer-events-none group-disabled:text-neutral-a-8 invalid:group-disabled:outline-x-negative-a-6 theme-dfs:bg-canvas-1 theme-galapago:bg-white dark:bg-white-a-3 theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm"
+            className="mt-2 h-9 w-full rounded-lg border-none bg-white-a-3 pe-2 ps-3.5 text-base leading-none text-neutral-12 shadow outline outline-offset-0 outline-neutral-a-7 placeholder:text-neutral-11 invalid:outline-x-negative-a-7 group-disabled:pointer-events-none group-disabled:text-neutral-a-8 invalid:group-disabled:outline-x-negative-a-6 focus-visible:outline-offset-0 focus-visible:outline-primary-a-8 theme-dfs:bg-canvas-1 theme-galapago:bg-white dark:bg-white-a-3 theme-dfs:dark:bg-white-a-3 theme-forerunner:dark:bg-black-a-3 theme-galapago:dark:bg-black-a-3 sm:ps-3 sm:text-sm"
             placeholder={intl.formatMessage({
               defaultMessage: "[email protected]",
               id: "SvELQW",

packages/ui/tailwind.config.ts

@@ -1,13 +1,11 @@
 import { tailwindConfig as baseTailwindConfig } from "@spear-ai/tailwind-config";
 import type { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
-import reactAriaComponentsPlugin from "tailwindcss-react-aria-components";
 
 const tailwindConfig: Config = {
   ...baseTailwindConfig,
   plugins: [
     ...(baseTailwindConfig.plugins ?? []),
-    reactAriaComponentsPlugin,
     plugin(({ matchVariant }) => {
       matchVariant("theme", (value) => `.theme-${value} &`, {
         values: {

yarn.lock

@@ -5892,7 +5892,6 @@ __metadata:
     react-intl: "npm:6.6.2"
     storybook: "npm:8.0.0-beta.0"
     tailwindcss: "npm:3.4.1"
-    tailwindcss-react-aria-components: "npm:1.1.1"
     ts-invariant: "npm:0.10.3"
     turbo: "npm:1.12.3"
     typescript: "npm:5.3.3"
@@ -18483,7 +18482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss-react-aria-components@npm:1.1.1, tailwindcss-react-aria-components@npm:^1.1.1":
+"tailwindcss-react-aria-components@npm:^1.1.1":
   version: 1.1.1
   resolution: "tailwindcss-react-aria-components@npm:1.1.1"
   peerDependencies: