Update components to comply with the latest react-aria-components v…

…ersion.
irsyadadl · Nov 21, 2024 · 3652b5d · 3652b5d
1 parent bded5ab
commit 3652b5d
Show file tree

Hide file tree

Showing 66 changed files with 1,372 additions and 1,108 deletions.
diff --git a/app/(app)/showcase/partials/list-sites.tsx b/app/(app)/showcase/partials/list-sites.tsx
@@ -3,7 +3,13 @@
 import * as React from "react"
 
 import { getSiteName } from "@/resources/lib/utils"
-import { Collection, ListBox as Primitive, ListBoxItem, Section, Text } from "react-aria-components"
+import {
+  Collection,
+  ListBox as Primitive,
+  ListBoxItem,
+  ListBoxSection,
+  Text
+} from "react-aria-components"
 import { Avatar } from "ui"
 
 interface Props {
@@ -16,7 +22,7 @@ interface Props {
 export function ListSites({ sites }: Props) {
   return (
     <Primitive aria-label="Showcase">
-      <Section className="grid lg:grid-cols-4 sm:grid-cols-2 gap-4 lg:gap-6">
+      <ListBoxSection className="grid lg:grid-cols-4 sm:grid-cols-2 gap-4 lg:gap-6">
         <Collection items={sites}>
           {(item) => {
             return (
@@ -46,7 +52,7 @@ export function ListSites({ sites }: Props) {
             )
           }}
         </Collection>
-      </Section>
+      </ListBoxSection>
     </Primitive>
   )
 }
diff --git a/app/(app)/themes/theme-names/amber.ts b/app/(app)/themes/theme-names/amber.ts
@@ -0,0 +1,73 @@
+export const amber = {
+  root: {
+    "--light": "223.81 0% 98%",
+    "--dark": "223.81 0% 4%",
+    "--bg": "0 0% 100%",
+    "--fg": "223.81 0% 4%",
+    "--primary": "37.92 100% 46%",
+    "--primary-fg": "57.64 100% 97%",
+    "--secondary": "223.81 0% 97%",
+    "--secondary-fg": "223.81 0% 4%",
+    "--tertiary": "223.81 0% 99%",
+    "--tertiary-fg": "223.81 0% 9%",
+    "--accent": "223.81 0% 89%",
+    "--accent-fg": "223.81 0% 9%",
+    "--accent-subtle": "30.57 100% 97%",
+    "--accent-subtle-fg": "21.65 77% 27%",
+    "--overlay": "0 0% 100%",
+    "--overlay-fg": "239.93 9% 4%",
+    "--muted": "223.81 0% 98%",
+    "--muted-fg": "223.81 0% 45%",
+    "--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": "48 97% 77%",
+    "--warning-fg": "20.91 91% 14.1%",
+    "--border": "223.81 0% 90%",
+    "--input": "223.81 0% 90%",
+    "--ring": "var(--primary)",
+    "--toggle": "223.81 0% 82%",
+    "--radius": "0.5rem",
+
+    "--primary-chart": "37.86 93% 50%",
+    "--secondary-chart": "45.93 97% 65%",
+    "--tertiary-chart": "43.2 96% 56.99%",
+    "--highlight-chart": "48 97% 77%",
+    "--accent-chart": "48 96% 89%"
+  },
+  dark: {
+    "--bg": "223.81 0% 3%",
+    "--fg": "223.81 0% 98%",
+    "--primary": "43.2 96% 56.99%",
+    "--primary-fg": "9.41 100% 10%",
+    "--secondary": "223.81 0% 10%",
+    "--secondary-fg": "223.81 0% 99%",
+    "--tertiary": "223.81 0% 6%",
+    "--tertiary-fg": "223.81 0% 98%",
+    "--accent": "223.81 0% 17%",
+    "--accent-fg": "223.81 0% 96%",
+    "--accent-subtle": "43.47 77% 7.01%",
+    "--accent-subtle-fg": "50.14 100% 90%",
+    "--overlay": "240.03 6% 6%",
+    "--overlay-fg": "223.81 0% 98%",
+    "--muted": "223.81 0% 13%",
+    "--muted-fg": "223.81 0% 64%",
+    "--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": "240.19 7.000000000000001% 18%",
+    "--border": "240.01 7.1% 15%",
+    "--input": "239.95 3% 16%",
+
+    "--primary-chart": "37.1 100% 44%",
+    "--secondary-chart": "45.93 97% 65%",
+    "--tertiary-chart": "43.2 96% 56.99%",
+    "--highlight-chart": "48 97% 77%",
+    "--accent-chart": "48 96% 89%"
+  }
+}
diff --git a/app/(app)/themes/theme-names/azure.ts b/app/(app)/themes/theme-names/azure.ts
@@ -0,0 +1,85 @@
+export const azure = {
+  root: {
+    "--light": "210 24% 98%",
+    "--dark": "223.94 71% 4%",
+    "--bg": "0 0% 100%",
+    "--fg": "223.94 71% 4%",
+
+    "--overlay": "0 0% 100%",
+    "--overlay-fg": "239.93 9% 4%",
+
+    "--primary": "205.77 100% 50%",
+    "--primary-fg": "40 35% 98%",
+
+    "--secondary": "220 15% 96%",
+    "--secondary-fg": "223.94 71% 4%",
+
+    "--tertiary": "0 0% 100%",
+    "--tertiary-fg": "240 4% 16%",
+
+    "--accent": "205.77 100% 50%",
+    "--accent-fg": "40 35% 98%",
+
+    "--accent-subtle": "204 94% 94%",
+    "--accent-subtle-fg": "204.04 80% 16%",
+
+    "--success": "161.17 91% 31%",
+    "--success-fg": "151.77 82% 96%",
+
+    "--info": "205.77 100% 50%",
+    "--info-fg": "0 0% 100%",
+
+    "--muted": "220 13.04% 90.98%",
+    "--muted-fg": "219.99 9% 46%",
+
+    "--danger": "0.01 72% 51%",
+    "--danger-fg": "360 86% 97%",
+
+    "--warning": "43.2 96% 56.99%",
+    "--warning-fg": "20.91 91% 14.1%",
+
+    "--border": "220 13.04% 90.98%",
+    "--input": "216 12% 84%",
+    "--ring": "205.76 100% 50%",
+    "--toggle": "216 12% 84%",
+    "--radius": "0.5rem",
+
+    "--primary-chart": "205.77 100% 50%",
+    "--secondary-chart": "201.2 100% 78%",
+    "--tertiary-chart": "207.75 100% 64%",
+    "--highlight-chart": "199.38 95% 74%",
+    "--accent-chart": "200.6 94% 86%"
+  },
+  dark: {
+    "--bg": "228.71 89% 2%",
+    "--fg": "210 24% 98%",
+    "--primary": "205.77 100% 50%",
+    "--primary-fg": "40 35% 98%",
+    "--secondary": "222.23 48% 11%",
+    "--secondary-fg": "210 24% 98%",
+    "--tertiary": "225.14 70% 5%",
+    "--tertiary-fg": "223.81 0% 98%",
+    "--accent": "205.77 100% 50%",
+    "--accent-fg": "40 35% 98%",
+    "--accent-subtle": "215.99 94% 6%",
+    "--accent-subtle-fg": "204.92 100% 77%",
+    "--muted": "215 31% 15%",
+    "--muted-fg": "217.89 11% 65%",
+    "--overlay": "222.13 60% 7.1%",
+    "--overlay-fg": "223.81 0% 98%",
+    "--info": "205.77 100% 50%",
+    "--info-fg": "0 0% 100%",
+    "--success": "161.17 91% 31%",
+    "--success-fg": "151.77 82% 96%",
+    "--ring": "205.76 100% 50%",
+    "--toggle": "215.01 26% 19%",
+    "--border": "217.3 40% 14.1%",
+    "--input": "214.99 35% 13%",
+
+    "--primary-chart": "209.45 100% 42%",
+    "--secondary-chart": "202.35 100% 73%",
+    "--tertiary-chart": "207.28 87% 57.99%",
+    "--highlight-chart": "199.24 79% 69%",
+    "--accent-chart": "200.6 94% 86%"
+  }
+}
diff --git a/app/(app)/themes/theme-names/emerald.ts b/app/(app)/themes/theme-names/emerald.ts
@@ -0,0 +1,72 @@
+export const emerald = {
+  root: {
+    "--light": "223.81 0% 98%",
+    "--dark": "239.95 9% 6%",
+    "--bg": "0 0% 100%",
+    "--fg": "239.93 9% 4%",
+    "--primary": "160.82 100% 34%",
+    "--primary-fg": "151.77 82% 96%",
+    "--secondary": "240 5.88% 90%",
+    "--secondary-fg": "240.01 6% 10%",
+    "--tertiary": "0 0% 100%",
+    "--tertiary-fg": "240 4% 16%",
+    "--accent": "240 8% 93%",
+    "--accent-fg": "240.02 6% 10%",
+    "--accent-subtle": "159.99 55.01% 94%",
+    "--accent-subtle-fg": "162.96 94% 24%",
+    "--overlay": "0 0% 100%",
+    "--overlay-fg": "239.93 9% 4%",
+    "--muted": "240 5.88% 90%",
+    "--muted-fg": "240 4% 41%",
+    "--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": "160.82 100% 34%",
+    "--secondary-chart": "152.6 56.99% 74%",
+    "--tertiary-chart": "159.88 75% 44%",
+    "--highlight-chart": "152.35 76% 80%",
+    "--accent-chart": "149.28 81% 90%"
+  },
+  dark: {
+    "--bg": "0 0% 0%",
+    "--fg": "223.81 0% 98%",
+    "--primary": "161.16 100% 28.04%",
+    "--primary-fg": "163.91 100% 98%",
+    "--secondary": "239.99 6% 11%",
+    "--secondary-fg": "223.81 0% 98%",
+    "--tertiary": "240.02 10% 6%",
+    "--tertiary-fg": "239.99 4% 96%",
+    "--accent": "161.16 100% 28.04%",
+    "--accent-fg": "163.91 100% 98%",
+    "--accent-subtle": "159.22 86% 6%",
+    "--accent-subtle-fg": "156.2 72% 67%",
+    "--overlay": "240.03 6% 6%",
+    "--overlay-fg": "223.81 0% 98%",
+    "--muted": "239.95 3% 16%",
+    "--muted-fg": "240 5.03% 64.9%",
+    "--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": "157.99 100% 28.04%",
+    "--secondary-chart": "152.6 56.99% 74%",
+    "--tertiary-chart": "157.4 67% 55.01%",
+    "--highlight-chart": "152.6 56.99% 74%",
+    "--accent-chart": "149.32 49% 84%"
+  }
+}
diff --git a/app/(app)/themes/theme-names/gray.ts b/app/(app)/themes/theme-names/gray.ts
@@ -0,0 +1,73 @@
+export const gray = {
+  root: {
+    "--light": "210 72% 99%",
+    "--dark": "225.36 76% 3%",
+    "--bg": "0 0% 100%",
+    "--fg": "223.94 71% 4%",
+    "--primary": "223.94 71% 4%",
+    "--primary-fg": "210 24% 98%",
+    "--secondary": "220 15% 96%",
+    "--secondary-fg": "223.94 71% 4%",
+    "--tertiary": "220 22% 97%",
+    "--tertiary-fg": "223.94 71% 4%",
+    "--accent": "220 13.04% 90.98%",
+    "--accent-fg": "223.94 71% 4%",
+    "--accent-subtle": "220 15% 96%",
+    "--accent-subtle-fg": "223.94 71% 4%",
+    "--success": "161.17 91% 31%",
+    "--success-fg": "151.77 82% 96%",
+    "--info": "205.77 100% 50%",
+    "--info-fg": "0 0% 100%",
+    "--overlay": "180 100% 100%",
+    "--overlay-fg": "223.94 71% 4%",
+    "--muted": "220 13.04% 90.98%",
+    "--muted-fg": "219.99 9% 46%",
+    "--danger": "0.01 72% 51%",
+    "--danger-fg": "360 86% 97%",
+    "--warning": "43.2 96% 56.99%",
+    "--warning-fg": "20.91 91% 14.1%",
+    "--border": "220 13.04% 90.98%",
+    "--input": "220 13.04% 90.98%",
+    "--ring": "223.94 71% 4%",
+    "--toggle": "216 12% 84%",
+    "--radius": "0.5rem",
+    "--primary-chart": "220 9% 43%",
+    "--secondary-chart": "217.89 12% 70%",
+    "--tertiary-chart": "219.97 10% 57.99%",
+    "--highlight-chart": "216 12% 84%",
+    "--accent-chart": "220 13.04% 90.98%"
+  },
+
+  dark: {
+    "--bg": "226.63 80% 3%",
+    "--fg": "210 72% 99%",
+    "--primary": "210 24% 98%",
+    "--primary-fg": "223.94 71% 4%",
+    "--secondary": "220.91 40% 11%",
+    "--secondary-fg": "210 72% 99%",
+    "--tertiary": "220.59 61% 5%",
+    "--tertiary-fg": "210 72% 99%",
+    "--accent": "215 30% 16%",
+    "--accent-fg": "210 72% 99%",
+    "--accent-subtle": "220.91 40% 11%",
+    "--accent-subtle-fg": "210 72% 99%",
+    "--overlay": "225.36 76% 3%",
+    "--overlay-fg": "210 72% 99%",
+    "--muted": "215 28.04% 17%",
+    "--muted-fg": "217.89 11% 65%",
+    "--info": "205.77 100% 50%",
+    "--info-fg": "0 0% 100%",
+    "--success": "161.17 91% 31%",
+    "--success-fg": "151.77 82% 96%",
+    "--ring": "210 24% 98%",
+    "--toggle": "216.93 21% 25%",
+    "--border": "215 28.04% 17%",
+    "--input": "216.97 27% 18%",
+
+    "--primary-chart": "216.93 20% 26%",
+    "--secondary-chart": "217.89 19% 80%",
+    "--tertiary-chart": "215 14.02% 34%",
+    "--highlight-chart": "217.89 11% 65%",
+    "--accent-chart": "220 10% 88%"
+  }
+}
diff --git a/app/(app)/themes/theme-names/index.ts b/app/(app)/themes/theme-names/index.ts
@@ -0,0 +1,13 @@
+export * from "./justd"
+export * from "./zinc"
+export * from "./neutral"
+export * from "./azure"
+export * from "./slate"
+export * from "./gray"
+export * from "./amber"
+export * from "./violet"
+export * from "./emerald"
+export * from "./rose"
+export * from "./turquoise"
+export * from "./sky"
+export * from "./orange"