clean up

Author: mehdibha

packages/schemas/schema.ts

@@ -80,6 +80,9 @@ export const primitivesSchema = z.object({
   popover: z.enum(["basic"]).optional(),
   tooltip: z.enum(["basic"]).optional(),
   calendar: z.enum(["basic", "cal"]).optional(),
+  alert: z.enum(["basic"]).optional(),
+  loader: z.enum(["basic"]).optional(),
+  tabs: z.enum(["basic"]).optional(),
 });
 
 export const registryThemeSchema = z.object({

www/src/app/(app)/themes/[themeName]/theme-editor/colors.tsx

@@ -50,7 +50,7 @@ export function ThemeColors({ theme }: { theme?: Theme }) {
           </div>
         </div>
       </Collapsible>
-      <ThemeProvider theme={theme} unstyled noBaseVars>
+      <ThemeProvider theme={theme} unstyled noBaseVars createForegrounds>
         <p id="core-colors" className="mt-2 font-medium tracking-tight">
           Core colors
         </p>
@@ -130,6 +130,7 @@ export function ThemeColors({ theme }: { theme?: Theme }) {
                     key={i}
                     style={{
                       backgroundColor: `var(--${shade.name}-${(i + 1) * 100})`,
+                      color: `var(--${shade.name}-${(i + 1) * 100}-fg)`,
                     }}
                     colorName={`${shade.label} ${(i + 1) * 100}`}
                     className="h-8 rounded-sm"

www/src/app/providers.tsx

@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation";
 import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import { RouterProvider } from "react-aria-components";
-import { VariantsProvider } from "@/lib/create-dynamic-component";
 import { PreviewModeProvider } from "@/components/mode-provider";
 
 declare module "react-aria-components" {
@@ -25,20 +24,18 @@ export function Providers({
   const router = useRouter();
   return (
     <JotaiProvider>
-      <VariantsProvider>
-        <RouterProvider navigate={router.push}>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            <PreviewModeProvider defaultMode={defaultPreviewMode}>
-              {children}
-            </PreviewModeProvider>
-          </ThemeProvider>
-        </RouterProvider>
-      </VariantsProvider>
+      <RouterProvider navigate={router.push}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <PreviewModeProvider defaultMode={defaultPreviewMode}>
+            {children}
+          </PreviewModeProvider>
+        </ThemeProvider>
+      </RouterProvider>
     </JotaiProvider>
   );
 }

www/src/components/docs/component-preview-client.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import { DemosProvider } from "@/lib/create-dynamic-component";
 import { useHorizontalResize } from "@/hooks/use-horizontal-resize";
 import { Skeleton } from "@/components/core/skeleton";
 
@@ -26,7 +25,7 @@ export const ComponentWrapper = ({
   if (suspense) {
     return <React.Suspense fallback={fallback}>{children}</React.Suspense>;
   }
-  return <DemosProvider>{children}</DemosProvider>;
+  return children;
 };
 
 export const ResizableContainer = ({

www/src/components/docs/style-switcher.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { createDynamicComponent } from "@/lib/create-dynamic-component";
+import { createDynamicComponent } from "@/modules/themes/lib/create-dynamic-component";
 import {
   Alert as _Alert,
   AlertRoot as _AlertRoot,