saas-js · Pagebakers · May 4, 2025 · May 5, 2025 · May 8, 2025 · May 10, 2025
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -32,7 +32,11 @@
     "@saas-ui/next-workspaces": "0.3.0",
     "@saas-ui/props-docs": "2.3.3",
     "@saas-ui/storybook-addon": "6.0.1",
-    "@saas-ui/test-utils": "4.2.4"
+    "@saas-ui/test-utils": "4.2.4",
+    "next-app": "2.0.14",
+    "next-pages": "2.0.14",
+    "react-router-ts": "0.0.1",
+    "remix-ts": "1.0.0"
   },
   "changesets": [
     "afraid-avocados-roll",
@@ -67,6 +71,7 @@
     "fair-kings-battle",
     "fair-pants-grab",
     "famous-clocks-relate",
+    "fancy-camels-hope",
     "fast-dolls-jump",
     "fast-hats-prove",
     "fifty-balloons-stare",

diff --git a/apps/compositions/CHANGELOG.md b/apps/compositions/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @chakra-ui/compositions
 
+## 1.0.1-next.41
+
+### Patch Changes
+
+- Updated dependencies [a635505]
+  - @saas-ui/[email protected]
+  - @saas-ui/[email protected]
+
 ## 1.0.1-next.40
 
 ### Patch Changes

diff --git a/apps/compositions/package.json b/apps/compositions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/compositions",
-  "version": "1.0.1-next.40",
+  "version": "1.0.1-next.41",
   "description": "Registry for component compositions",
   "scripts": {
     "typecheck": "tsc --noEmit"

diff --git a/apps/palette/app/layout.tsx b/apps/palette/app/layout.tsx
@@ -0,0 +1,21 @@
+// import '@fontsource/inter/variable.css'
+import Providers from '@/providers/providers'
+
+// const themes: Record<string, any> = {
+//   'Chakra UI': baseTheme,
+//   'Saas UI': saasTheme,
+//   Glass: glassTheme,
+// }
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/apps/palette/app/page.tsx b/apps/palette/app/page.tsx
@@ -0,0 +1,36 @@
+import ColorsPage from '@/components'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Color palette generator',
+  description: 'Quickly generate custom color palettes for Chakra UI.',
+  openGraph: {
+    title: 'Saas UI: Color Palette Generator',
+    description: 'Quickly generate custom color palettes for Chakra UI.',
+    url: 'https://palette.saas-ui.dev',
+    siteName: 'Saas UI: Color Palette Generator for Chakra UI.',
+    images: [
+      {
+        url: 'https://palette.saas-ui.dev/og-image.jpg',
+        width: 1200,
+        height: 630,
+        alt: 'Saas UI: Color Palette Generator for Chakra UI.',
+      },
+      {
+        url: 'https://palette.saas-ui.dev/twitter-og-image.jpg',
+        width: 1012,
+        height: 506,
+        alt: 'Saas UI: Color Palette Generator for Chakra UI.',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+  },
+}
+
+export default function Home() {
+  return <ColorsPage />
+}
diff --git a/apps/palette/next-env.d.ts b/apps/palette/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/palette/next.config.js b/apps/palette/next.config.js
diff --git a/apps/palette/next.config.ts b/apps/palette/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+export default {
+  experimental: {
+    reactCompiler: true,
+  },
+} satisfies NextConfig
diff --git a/apps/palette/package.json b/apps/palette/package.json
@@ -3,27 +3,30 @@
   "version": "1.5.12",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
     "start": "next start",
     "lint": "next lint",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.20.0",
+    "@chakra-ui/react": "^3.25.0",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@fontsource/inter": "^5.0.20",
-    "@saas-ui/next-workspaces": "^0.3.0",
-    "@saas-ui/palette": "workspace:*",
     "@saas-ui/react": "workspace:*",
     "@svgr/webpack": "^5.5.0",
     "@types/lodash.debounce": "^4.0.9",
-    "framer-motion": "^11.3.28",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "bezier-easing": "^2.1.0",
+    "chroma-js": "^2.6.0",
+    "colorizr": "^3.0.8",
+    "colorjs.io": "^0.5.2",
     "lodash.debounce": "^4.0.8",
     "next": "^15.3.2",
     "next-seo": "^6.5.0",
+    "next-themes": "^0.4.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0"

diff --git a/apps/palette/pages/_app.tsx b/apps/palette/pages/_app.tsx
diff --git a/apps/palette/src/client/components/color-mode-toggle.tsx b/apps/palette/src/client/components/color-mode-toggle.tsx
@@ -1,17 +1,19 @@
-import { useColorMode, IconButton } from '@chakra-ui/react'
-
-import { FiSun, FiMoon } from 'react-icons/fi'
+import { ClientOnly, IconButton, Skeleton } from '@saas-ui/react'
+import { useTheme } from 'next-themes'
+import { FiMoon, FiSun } from 'react-icons/fi'
 
 export const ColorModeToggle = () => {
-  const { colorMode, toggleColorMode } = useColorMode()
+  const { theme, setTheme } = useTheme()
+
   return (
-    <IconButton
-      onClick={toggleColorMode}
-      variant="ghost"
-      aria-label={
-        colorMode === 'light' ? 'Enable DarkMode' : 'Enable LightMode'
-      }
-      icon={colorMode === 'light' ? <FiMoon /> : <FiSun />}
-    />
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+        variant="ghost"
+        aria-label={theme === 'light' ? 'Enable DarkMode' : 'Enable LightMode'}
+      >
+        {theme === 'light' ? <FiMoon /> : <FiSun />}
+      </IconButton>
+    </ClientOnly>
   )
 }
diff --git a/apps/palette/src/client/components/color-picker.tsx b/apps/palette/src/client/components/color-picker.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useId, useState } from 'react'
+
+import {
+  Box,
+  Flex,
+  Input,
+  type InputProps,
+  VisuallyHidden,
+} from '@saas-ui/react'
+
+interface ColorPickerProps extends Omit<InputProps, 'onChange'> {
+  onChange: (value: string) => void
+}
+
+export default function ColorPicker({ onChange, ...props }: ColorPickerProps) {
+  const id = useId()
+
+  const [inputValue, setInputValue] = useState<string>(props.value as string)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      onChange?.(inputValue)
+    }, 150)
+    return () => clearTimeout(timeoutId)
+  }, [inputValue])
+
+  return (
+    <Flex boxSize={8}>
+      <Box
+        asChild
+        position="relative"
+        boxSize={8}
+        bg={props.value}
+        rounded={'l2'}
+        border={'1px solid'}
+        borderColor={'border'}
+      >
+        {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
+        <label htmlFor={id} />
+      </Box>
+      <VisuallyHidden>
+        <Input
+          id={id}
+          type="color"
+          w="10"
+          p="0"
+          boxShadow={'md'}
+          onChange={(e) => setInputValue(e.target.value)}
+          {...props}
+        />
+      </VisuallyHidden>
+    </Flex>
+  )
+}
+
+// <ColorPicker.Root>
+// 			<ColorPicker.HiddenInput />
+// 			<ColorPicker.Label />
+// 			<ColorPicker.Control>
+// 				<ColorPicker.Input />
+// 				<ColorPicker.Trigger />
+// 			</ColorPicker.Control>
+// 			<ColorPicker.Positioner>
+// 				<ColorPicker.Content>
+// 					<ColorPicker.Area />
+// 					<ColorPicker.EyeDropper />
+// 					<ColorPicker.Sliders />
+// 					<ColorPicker.SwatchGroup>
+
+// 					</ColorPicker.SwatchGroup>
+// 				</ColorPicker.Content>
+// 			</ColorPicker.Positioner>
+// 		</ColorPicker.Root>