-
Color
-
- {baseColors.map((theme) => {
- const isActive = config.theme === theme.name;
-
- return mounted ? (
- {
- setConfig({
- ...config,
- theme: theme.name,
- });
- }}
- >
-
- {isActive && }
-
- {theme.label}
-
- ) : (
-
- );
- })}
-
+
+ Theme
+
-
+
Radius
{['0', '0.3', '0.5', '0.75', '1.0'].map((value) => {
@@ -176,7 +142,7 @@ export function ThemeCustomizer() {
})}
-
+
Mode
{mounted ? (
@@ -208,7 +174,30 @@ export function ThemeCustomizer() {
)}
+
+
+
+
+
+
+
+
+ {`/* ${themesConfig.activeTheme.name} */`}
+ {themeCode.split('\n').map((line, index) => (
+
+ {line}
+
+ ))}
+
+
+
+
+
+
- >
+
);
}
diff --git a/apps/www/src/components/theme-switcher.tsx b/apps/www/src/components/theme-switcher.tsx
new file mode 100644
index 0000000000..0be4166d87
--- /dev/null
+++ b/apps/www/src/components/theme-switcher.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+
+import { useSelectedLayoutSegment } from 'next/navigation';
+
+import { useConfig } from '@/hooks/use-config';
+
+export function ThemeSwitcher() {
+ const [config] = useConfig();
+ const segment = useSelectedLayoutSegment();
+
+ React.useEffect(() => {
+ document.body.classList.forEach((className) => {
+ if (/^theme.*/.exec(className)) {
+ document.body.classList.remove(className);
+ }
+ });
+
+ const theme = segment === 'themes' ? config.theme : null;
+
+ if (theme) {
+ return document.body.classList.add(`theme-${theme}`);
+ }
+ }, [segment, config]);
+
+ return null;
+}
diff --git a/apps/www/src/components/theme-wrapper.tsx b/apps/www/src/components/theme-wrapper.tsx
index ae95f70212..d375ddeb26 100644
--- a/apps/www/src/components/theme-wrapper.tsx
+++ b/apps/www/src/components/theme-wrapper.tsx
@@ -4,6 +4,8 @@ import { cn } from '@udecode/cn';
import { useConfig } from '@/hooks/use-config';
+import { ThemesStyle } from './themes-styles';
+
interface ThemeWrapperProps extends React.ComponentProps<'div'> {
defaultTheme?: string;
}
@@ -19,7 +21,8 @@ export function ThemeWrapper({
+
+
{children}
);
diff --git a/apps/www/src/components/themes-button.tsx b/apps/www/src/components/themes-button.tsx
index 159368371a..bb0ce47512 100644
--- a/apps/www/src/components/themes-button.tsx
+++ b/apps/www/src/components/themes-button.tsx
@@ -2,107 +2,27 @@
import * as React from 'react';
-import { CheckIcon } from '@radix-ui/react-icons';
-import { cn } from '@udecode/cn';
import { Paintbrush } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { useConfig } from '@/hooks/use-config';
+import { THEME_LIST } from '@/lib/themes';
import { Button } from '@/registry/default/plate-ui/button';
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/registry/default/plate-ui/tooltip';
-import { baseColors } from '@/registry/registry-base-colors';
import { settingsStore } from './context/settings-store';
-import { Skeleton } from './ui/skeleton';
+import { ThemesSwitcher } from './themes-selector-mini';
export function ThemesButton() {
- const [config, setConfig] = useConfig();
- const { resolvedTheme: mode } = useTheme();
- const [mounted, setMounted] = React.useState(false);
-
- React.useEffect(() => {
- setMounted(true);
- }, []);
-
return (
- {mounted ? (
- <>
- {['slate', 'rose', 'blue', 'green', 'orange'].map((color) => {
- const theme = baseColors.find((th) => th.name === color);
- const isActive = config.theme === color;
-
- if (!theme) {
- return null;
- }
-
- return (
-
-
-
- setConfig({
- ...config,
- theme: theme.name,
- })
- }
- type="button"
- >
-
- {isActive && (
-
- )}
-
- {theme.label}
-
-
-
- {theme.label}
-
-
- );
- })}
- >
- ) : (
-
-
-
-
-
-
-
- )}
+
{
settingsStore.set.customizerTab('themes');
settingsStore.set.showSettings(true);
diff --git a/apps/www/src/components/themes-selector-mini.tsx b/apps/www/src/components/themes-selector-mini.tsx
new file mode 100644
index 0000000000..f120f9d550
--- /dev/null
+++ b/apps/www/src/components/themes-selector-mini.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import * as React from 'react';
+
+import { useTheme } from 'next-themes';
+
+import { useMounted } from '@/hooks/use-mounted';
+import { useThemesConfig } from '@/hooks/use-themes-config';
+import { type Theme, THEME_LIST, THEMES } from '@/lib/themes';
+import { cn } from '@/registry/default/lib/utils';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/registry/default/plate-ui/tooltip';
+
+import { Skeleton } from './ui/skeleton';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
+
+export function ThemesSwitcher({
+ className,
+ themes = THEME_LIST,
+}: React.ComponentProps<'div'> & { themes?: Theme[] }) {
+ const { setTheme, theme: mode } = useTheme();
+ const mounted = useMounted();
+ const { setThemesConfig, themesConfig } = useThemesConfig();
+ const activeTheme = themesConfig.activeTheme ?? THEMES['default-shadcn'];
+ // const isDesktop = useMediaQuery('(min-width: 1024px)');
+
+ if (!mounted) {
+ return (
+
+ {themes.map((theme) => (
+
+
+
+ ))}
+
+ );
+ }
+
+ return (
+ {
+ const theme = themes.find((theme) => theme.name === value);
+
+ if (!theme) {
+ return;
+ }
+
+ setThemesConfig({ activeTheme: theme });
+ }}
+ type="single"
+ >
+
+ {themes.map((theme) => {
+ const isActive = theme.name === activeTheme.name;
+ // const isDarkTheme = ['Midnight'].includes(theme.name);
+ const cssVars =
+ mounted && mode === 'dark'
+ ? theme.cssVars.dark
+ : theme.cssVars.light;
+
+ return (
+
+
+ {
+ if (theme.name === activeTheme.name) {
+ // Toggle between light and dark mode
+ setTheme(mode === 'dark' ? 'light' : 'dark');
+ }
+ }}
+ >
+
+
+
+
+
+
+ {theme.name}
+
+
+
+
+
+ {theme.name}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/apps/www/src/components/themes-selector.tsx b/apps/www/src/components/themes-selector.tsx
new file mode 100644
index 0000000000..d7edd3b1a1
--- /dev/null
+++ b/apps/www/src/components/themes-selector.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+
+import { useTheme } from 'next-themes';
+
+import { useMediaQuery } from '@/hooks/use-media-query';
+import { useMounted } from '@/hooks/use-mounted';
+import { useThemesConfig } from '@/hooks/use-themes-config';
+import { type Theme, THEME_LIST } from '@/lib/themes';
+import { cn } from '@/registry/default/lib/utils';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/registry/default/plate-ui/tooltip';
+
+import { Skeleton } from './ui/skeleton';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
+
+export function ThemesSwitcher({
+ className,
+ themes = THEME_LIST,
+}: React.ComponentProps<'div'> & { themes?: Theme[] }) {
+ const { theme: mode } = useTheme();
+ const mounted = useMounted();
+ const { setThemesConfig, themesConfig } = useThemesConfig();
+ const activeTheme = themesConfig.activeTheme;
+ const isDesktop = useMediaQuery('(min-width: 1024px)');
+
+ if (!mounted) {
+ return (
+
+ {themes.map((theme) => (
+
+
+
+ ))}
+
+ );
+ }
+
+ return (
+ {
+ const theme = themes.find((theme) => theme.name === value);
+
+ if (!theme) {
+ return;
+ }
+
+ setThemesConfig({ ...themesConfig, activeTheme: theme });
+ }}
+ type="single"
+ >
+
+ {themes.map((theme) => {
+ const isActive = theme.name === activeTheme.name;
+ const isDarkTheme = ['Midnight'].includes(theme.name);
+ const cssVars =
+ mounted && mode === 'dark'
+ ? theme.cssVars.dark
+ : theme.cssVars.light;
+
+ return (
+
+
+
+
+
+
+
+
+
+ {theme.name}
+
+
+
+
+
+ {theme.name}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/apps/www/src/components/themes-styles.tsx b/apps/www/src/components/themes-styles.tsx
new file mode 100644
index 0000000000..8e34c67b7d
--- /dev/null
+++ b/apps/www/src/components/themes-styles.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useConfig } from '@/hooks/use-config';
+import { useMounted } from '@/hooks/use-mounted';
+import { useThemesConfig } from '@/hooks/use-themes-config';
+
+export function ThemesStyle() {
+ const [config] = useConfig();
+ const { themesConfig } = useThemesConfig();
+ const mounted = useMounted();
+
+ if (!themesConfig.activeTheme || !mounted) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/apps/www/src/components/ui/toggle.tsx b/apps/www/src/components/ui/toggle.tsx
index 83a11dcad8..31fe533724 100644
--- a/apps/www/src/components/ui/toggle.tsx
+++ b/apps/www/src/components/ui/toggle.tsx
@@ -25,6 +25,7 @@ export const toggleVariants = cva(
default:
'bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
floating: 'rounded-full bg-primary text-primary-foreground',
+ none: '',
outline:
'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
},
diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts
index d58417c577..aeef24c33c 100644
--- a/apps/www/src/config/docs.ts
+++ b/apps/www/src/config/docs.ts
@@ -53,7 +53,6 @@ export const docsConfig: DocsConfig = {
customizerComponents.caption,
customizerComponents.calendar,
customizerComponents.checkbox,
- customizerComponents.cloud,
customizerComponents.codeBlockElement,
customizerComponents.codeLeaf,
customizerComponents.codeLineElement,
diff --git a/apps/www/src/hooks/use-themes-config.ts b/apps/www/src/hooks/use-themes-config.ts
index 6b943b63b5..e9c07d418a 100644
--- a/apps/www/src/hooks/use-themes-config.ts
+++ b/apps/www/src/hooks/use-themes-config.ts
@@ -2,11 +2,12 @@ import { useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
import { type Theme, THEMES } from '@/lib/themes';
+
type ThemesConfig = {
activeTheme: Theme;
};
const configAtom = atomWithStorage('themes:config', {
- activeTheme: THEMES[0],
+ activeTheme: THEMES['default-shadcn'],
});
export function useThemesConfig() {
diff --git a/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts b/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts
index 39871a4c71..2155a72e3a 100644
--- a/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts
+++ b/apps/www/src/lib/plate/demo/values/usePlaygroundValue.ts
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
-import type { MyValue } from '@/types/plate-types';
+import type { MyValue } from '@/registry/default/lib/plate-types';
import { settingsStore } from '@/components/context/settings-store';
import { type ValueId, customizerPlugins } from '@/config/customizer-plugins';
diff --git a/apps/www/src/lib/themes.ts b/apps/www/src/lib/themes.ts
index e10ea2bb45..9e145ac4f9 100644
--- a/apps/www/src/lib/themes.ts
+++ b/apps/www/src/lib/themes.ts
@@ -1,6 +1,121 @@
-const _THEMES = [
- {
- id: 'default-shadcn',
+const _THEMES = {
+ ayu: {
+ id: 'ayu',
+ colors: {
+ accent: '35 100% 50%', // #FF9940
+ accentForeground: '0 0% 100%', // #FFFFFF
+ background: '38 100% 99%', // #FAFAFA
+ border: '44 17% 88%', // #E7E8E9
+ card: '38 100% 99%', // #FAFAFA
+ cardForeground: '0 0% 9%', // #171717
+ destructive: '0 100% 67%', // #FF3333
+ destructiveForeground: '0 0% 100%', // #FFFFFF
+ foreground: '0 0% 9%', // #171717
+ input: '44 17% 88%', // #E7E8E9
+ muted: '44 17% 88%', // #E7E8E9
+ mutedForeground: '0 0% 45%', // #737373
+ popover: '38 100% 99%', // #FAFAFA
+ popoverForeground: '0 0% 9%', // #171717
+ primary: '35 100% 50%', // #FF9940
+ primaryForeground: '0 0% 100%', // #FFFFFF
+ ring: '35 100% 50%', // #FF9940
+ secondary: '44 17% 88%', // #E7E8E9
+ secondaryForeground: '0 0% 9%', // #171717
+ },
+ colorsDark: {
+ accent: '35 100% 50%', // #FF9940
+ accentForeground: '0 0% 100%', // #FFFFFF
+ background: '220 27% 18%', // #1F2430
+ border: '220 13% 26%', // #33415E
+ card: '220 27% 18%', // #1F2430
+ cardForeground: '0 0% 100%', // #FFFFFF
+ destructive: '0 100% 67%', // #FF3333
+ destructiveForeground: '0 0% 100%', // #FFFFFF
+ foreground: '0 0% 100%', // #FFFFFF
+ input: '220 13% 26%', // #33415E
+ muted: '220 13% 26%', // #33415E
+ mutedForeground: '220 13% 65%', // #8A9199
+ popover: '220 27% 18%', // #1F2430
+ popoverForeground: '0 0% 100%', // #FFFFFF
+ primary: '35 100% 50%', // #FF9940
+ primaryForeground: '0 0% 100%', // #FFFFFF
+ ring: '35 100% 50%', // #FF9940
+ secondary: '220 13% 26%', // #33415E
+ secondaryForeground: '0 0% 100%', // #FFFFFF
+ },
+ fontFamily: {
+ body: {
+ name: 'Inter',
+ type: 'sans-serif',
+ },
+ heading: {
+ name: 'Inter',
+ type: 'sans-serif',
+ },
+ },
+ name: 'Ayu',
+ radius: 0.5,
+ },
+ catppuccin: {
+ id: 'catppuccin',
+ colors: {
+ accent: '220 23% 80%',
+ accentForeground: '220 23% 20%',
+ background: '220 23% 95%',
+ border: '220 13% 90%',
+ card: '220 23% 93%',
+ cardForeground: '234 16% 30%',
+ destructive: '3 87% 37%',
+ destructiveForeground: '3 87% 97%',
+ foreground: '234 16% 35%',
+ input: '220 13% 87%',
+ muted: '220 12% 90%',
+ mutedForeground: '220 12% 30%',
+ popover: '220 23% 92%',
+ popoverForeground: '234 16% 25%',
+ primary: '266 85% 58%',
+ primaryForeground: '0 0% 100%',
+ ring: '266 85% 58%',
+ secondary: '266 30% 75%',
+ secondaryForeground: '266 30% 15%',
+ },
+ // Catppuccin Mocha
+ colorsDark: {
+ accent: '240 21% 30%',
+ 'accent-foreground': '240 21% 90%',
+ background: '240 21% 15%',
+ border: '240 11% 20%',
+ card: '240 21% 13%',
+ 'card-foreground': '226 64% 93%',
+ destructive: '8 96% 56%',
+ destructiveForeground: '0 0% 100%',
+ foreground: '226 64% 88%',
+ input: '240 11% 23%',
+ muted: '240 12% 19%',
+ 'muted-foreground': '240 12% 69%',
+ popover: '240 21% 12%',
+ 'popover-foreground': '226 64% 98%',
+ primary: '267 84% 81%',
+ primaryForeground: '267 84% 21%',
+ ring: '267 84% 81%',
+ secondary: '267 30% 25%',
+ secondaryForeground: '267 30% 85%',
+ },
+ fontFamily: {
+ body: {
+ name: 'Inter',
+ type: 'sans-serif',
+ },
+ heading: {
+ name: 'Inter',
+ type: 'sans-serif',
+ },
+ },
+ name: 'Catppuccin',
+ radius: 0.5,
+ },
+ 'default-palette': {
+ id: 'default-palette',
colors: {
accent: '240 4.8% 95.9%',
'accent-foreground': '240 5.9% 10%',
@@ -8,11 +123,6 @@ const _THEMES = [
border: '240 5.9% 90%',
card: '0 0% 100%',
'card-foreground': '240 10% 3.9%',
- 'chart-1': '173 58% 39%',
- 'chart-2': '12 76% 61%',
- 'chart-3': '197 37% 24%',
- 'chart-4': '43 74% 66%',
- 'chart-5': '27 87% 67%',
destructive: '0 84.2% 60.2%',
'destructive-foreground': '0 0% 98%',
foreground: '240 10% 3.9%',
@@ -34,11 +144,6 @@ const _THEMES = [
border: '240 3.7% 15.9%',
card: '240 10% 3.9%',
'card-foreground': '0 0% 98%',
- 'chart-1': '220 70% 50%',
- 'chart-2': '340 75% 55%',
- 'chart-3': '30 80% 55%',
- 'chart-4': '280 65% 60%',
- 'chart-5': '160 60% 45%',
destructive: '0 62.8% 30.6%',
'destructive-foreground': '0 0% 98%',
foreground: '0 0% 98%',
@@ -63,11 +168,11 @@ const _THEMES = [
type: 'sans-serif',
},
},
- name: 'Default',
+ name: 'Catppuccin',
radius: 0.5,
},
- {
- id: 'default-palette',
+ 'default-shadcn': {
+ id: 'default-shadcn',
colors: {
accent: '240 4.8% 95.9%',
'accent-foreground': '240 5.9% 10%',
@@ -75,11 +180,6 @@ const _THEMES = [
border: '240 5.9% 90%',
card: '0 0% 100%',
'card-foreground': '240 10% 3.9%',
- 'chart-1': '12 76% 61%',
- 'chart-2': '173 58% 39%',
- 'chart-3': '197 37% 24%',
- 'chart-4': '43 74% 66%',
- 'chart-5': '27 87% 67%',
destructive: '0 84.2% 60.2%',
'destructive-foreground': '0 0% 98%',
foreground: '240 10% 3.9%',
@@ -101,11 +201,6 @@ const _THEMES = [
border: '240 3.7% 15.9%',
card: '240 10% 3.9%',
'card-foreground': '0 0% 98%',
- 'chart-1': '220 70% 50%',
- 'chart-2': '160 60% 45%',
- 'chart-3': '30 80% 55%',
- 'chart-4': '280 65% 60%',
- 'chart-5': '340 75% 55%',
destructive: '0 62.8% 30.6%',
'destructive-foreground': '0 0% 98%',
foreground: '0 0% 98%',
@@ -130,62 +225,108 @@ const _THEMES = [
type: 'sans-serif',
},
},
- name: 'Palette',
+ name: 'Default',
radius: 0.5,
},
- {
- id: 'default-sapphire',
+ dune: {
+ id: 'dune',
colors: {
- accent: '210 40% 96.1%',
- accentForeground: '222.2 47.4% 11.2%',
- background: '0 0% 100%',
- border: '214.3 31.8% 91.4%',
- card: '0 0% 100%',
- cardForeground: '222.2 84% 4.9%',
- 'chart-1': '221.2 83.2% 53.3%',
- 'chart-2': '212 95% 68%',
- 'chart-3': '216 92% 60%',
- 'chart-4': '210 98% 78%',
- 'chart-5': '212 97% 87%',
- destructive: '0 72% 51%',
- destructiveForeground: '210 40% 98%',
- foreground: '222.2 84% 4.9%',
- input: '214.3 31.8% 91.4%',
- muted: '210 40% 96.1%',
- mutedForeground: '215.4 16.3% 44%',
- popover: '0 0% 100%',
- popoverForeground: '222.2 84% 4.9%',
- primary: '221.2 83.2% 53.3%',
- primaryForeground: '210 40% 98%',
- ring: '221.2 83.2% 53.3%',
- secondary: '210 40% 96.1%',
- secondaryForeground: '222.2 47.4% 11.2%',
+ accent: '36 33% 75%',
+ accentForeground: '36 45% 25%',
+ background: '43 47% 92%',
+ border: '43 27% 84%',
+ card: '43 47% 92%',
+ cardForeground: '39 14% 22%',
+ destructive: '0 84% 33%',
+ destructiveForeground: '0 0% 100%',
+ foreground: '39 14% 22%',
+ input: '43 27% 84%',
+ muted: '43 27% 84%',
+ mutedForeground: '39 14% 46%',
+ popover: '43 47% 92%',
+ popoverForeground: '39 14% 22%',
+ primary: '39 14% 22%',
+ primaryForeground: '43 47% 92%',
+ ring: '39 14% 22%',
+ secondary: '43 27% 84%',
+ secondaryForeground: '39 14% 22%',
},
colorsDark: {
- accent: '240 3.7% 15.9%',
- 'accent-foreground': '0 0% 98%',
- background: '240 10% 3.9%',
- border: '240 3.7% 15.9%',
- card: '240 10% 3.9%',
- 'card-foreground': '0 0% 98%',
- 'chart-1': '221.2 83.2% 53.3%',
- 'chart-2': '212 95% 68%',
- 'chart-3': '216 92% 60%',
- 'chart-4': '210 98% 78%',
- 'chart-5': '212 97% 87%',
- destructive: '0 72% 51%',
- destructiveForeground: '210 40% 98%',
- foreground: '0 0% 98%',
- input: '240 3.7% 15.9%',
- muted: '240 3.7% 15.9%',
- 'muted-foreground': '240 5% 64.9%',
- popover: '240 10% 3.9%',
- 'popover-foreground': '0 0% 98%',
- primary: '221.2 83.2% 53.3%',
- primaryForeground: '210 40% 98%',
- ring: '221.2 83.2% 53.3%',
- secondary: '210 40% 96.1%',
- secondaryForeground: '222.2 47.4% 11.2%',
+ accent: '36 33% 25%',
+ accentForeground: '36 45% 75%',
+ background: '39 14% 12%',
+ border: '43 27% 16%',
+ card: '39 14% 14%',
+ cardForeground: '43 47% 88%',
+ destructive: '0 84% 60%',
+ destructiveForeground: '0 0% 100%',
+ foreground: '43 47% 88%',
+ input: '43 27% 16%',
+ muted: '43 27% 16%',
+ mutedForeground: '39 14% 64%',
+ popover: '39 14% 14%',
+ popoverForeground: '43 47% 88%',
+ primary: '43 47% 88%',
+ primaryForeground: '39 14% 12%',
+ ring: '43 47% 88%',
+ secondary: '43 27% 16%',
+ secondaryForeground: '43 47% 88%',
+ },
+ fontFamily: {
+ body: {
+ name: 'Space Mono',
+ type: 'monospace',
+ },
+ heading: {
+ name: 'DM Sans',
+ type: 'sans-serif',
+ },
+ },
+ name: 'Dune',
+ },
+ everforest: {
+ id: 'everforest',
+ colors: {
+ accent: '142 40% 46%', // #8da101
+ accentForeground: '44 96% 98%', // #fdf6e3
+ background: '44 96% 98%', // #fdf6e3
+ border: '44 24% 83%', // #e0dcc7
+ card: '44 96% 98%', // #fdf6e3
+ cardForeground: '151 17% 39%', // #5c6a72
+ destructive: '3 89% 65%', // #f85552
+ destructiveForeground: '44 96% 98%', // #fdf6e3
+ foreground: '151 17% 39%', // #5c6a72
+ input: '44 24% 83%', // #e0dcc7
+ muted: '44 24% 95%', // #f4f0d9
+ mutedForeground: '151 9% 63%', // #939f91
+ popover: '44 96% 98%', // #fdf6e3
+ popoverForeground: '151 17% 39%', // #5c6a72
+ primary: '142 40% 46%', // #8da101
+ primaryForeground: '44 96% 98%', // #fdf6e3
+ ring: '142 40% 46%', // #8da101
+ secondary: '44 24% 95%', // #f4f0d9
+ secondaryForeground: '151 17% 39%',
+ },
+ colorsDark: {
+ accent: '165 23% 61%',
+ 'accent-foreground': '220 17% 20%',
+ background: '220 17% 20%',
+ border: '210 9% 33%',
+ card: '220 17% 24%',
+ 'card-foreground': '39 14% 74%',
+ destructive: '0 43% 70%',
+ 'destructive-foreground': '39 14% 74%',
+ foreground: '39 14% 74%',
+ input: '210 9% 33%',
+ muted: '210 9% 33%',
+ 'muted-foreground': '95 8% 53%',
+ popover: '220 17% 24%',
+ 'popover-foreground': '39 14% 74%',
+ primary: '88 23% 63%',
+ 'primary-foreground': '220 17% 20%',
+ ring: '88 23% 63%',
+ secondary: '210 9% 31%',
+ 'secondary-foreground': '39 14% 74%',
},
fontFamily: {
body: {
@@ -197,62 +338,52 @@ const _THEMES = [
type: 'sans-serif',
},
},
- name: 'Sapphire',
+ name: 'Everforest',
radius: 0.5,
},
- {
- id: 'default-ruby',
+ github: {
+ id: 'github',
colors: {
- accent: '240 4.8% 95.9%',
- accentForeground: '240 5.9% 10%',
+ accent: '212 12% 45%',
+ accentForeground: '0 0% 100%',
background: '0 0% 100%',
- border: '240 5.9% 90%',
+ border: '210 18% 87%',
card: '0 0% 100%',
- cardForeground: '240 10% 3.9%',
- 'chart-1': '347 77% 50%',
- 'chart-2': '352 83% 91%',
- 'chart-3': '350 80% 72%',
- 'chart-4': '351 83% 82%',
- 'chart-5': '349 77% 62%',
+ cardForeground: '215 14% 34%',
destructive: '0 72% 51%',
- destructiveForeground: '0 0% 98%',
- foreground: '240 10% 3.9%',
- input: '240 5.9% 90%',
- muted: '240 4.8% 95.9%',
- mutedForeground: '240 3.8% 45%',
+ destructiveForeground: '0 0% 100%',
+ foreground: '215 14% 34%',
+ input: '210 18% 87%',
+ muted: '210 18% 96%',
+ mutedForeground: '215 14% 45%',
popover: '0 0% 100%',
- popoverForeground: '240 10% 3.9%',
- primary: '346.8 77.2% 49.8%',
- primaryForeground: '355.7 100% 99%',
- ring: '346.8 77.2% 49.8%',
- secondary: '240 4.8% 95.9%',
- secondaryForeground: '240 5.9% 10%',
+ popoverForeground: '215 14% 34%',
+ primary: '215 69% 43%',
+ primaryForeground: '0 0% 100%',
+ ring: '215 69% 43%',
+ secondary: '210 18% 96%',
+ secondaryForeground: '215 14% 34%',
},
colorsDark: {
- accent: '240 3.7% 15.9%',
- 'accent-foreground': '0 0% 98%',
- background: '240 10% 3.9%',
- border: '240 3.7% 15.9%',
- card: '240 10% 3.9%',
- 'card-foreground': '0 0% 98%',
- 'chart-1': '347 77% 50%',
- 'chart-2': '349 77% 62%',
- 'chart-3': '350 80% 72%',
- 'chart-4': '351 83% 82%',
- 'chart-5': '352 83% 91%',
+ accent: '213 14% 33%',
+ accentForeground: '210 14% 93%',
+ background: '215 28% 17%',
+ border: '215 14% 25%',
+ card: '215 28% 17%',
+ cardForeground: '210 14% 93%',
destructive: '0 72% 51%',
- destructiveForeground: '0 0% 98%',
- foreground: '0 0% 98%',
- input: '240 3.7% 15.9%',
- muted: '240 3.7% 15.9%',
- 'muted-foreground': '240 5% 64.9%',
- popover: '240 10% 3.9%',
- 'popover-foreground': '0 0% 98%',
- primary: '346.8 77.2% 49.8%',
- primaryForeground: '355.7 100% 99%',
- ring: '221.2 83.2% 53.3%',
- secondary: '240 4.8% 95.9%',
- secondaryForeground: '240 5.9% 10%',
+ destructiveForeground: '210 14% 93%',
+ foreground: '210 14% 93%',
+ input: '215 14% 25%',
+ muted: '215 14% 25%',
+ mutedForeground: '217 10% 64%',
+ popover: '215 28% 17%',
+ popoverForeground: '210 14% 93%',
+ primary: '212 92% 45%',
+ primaryForeground: '210 14% 93%',
+ ring: '212 92% 45%',
+ secondary: '215 14% 25%',
+ secondaryForeground: '210 14% 93%',
},
fontFamily: {
body: {
@@ -264,62 +395,52 @@ const _THEMES = [
type: 'sans-serif',
},
},
- name: 'Ruby',
- radius: 0.5,
+ name: 'GitHub',
+ radius: 0.375,
},
- {
- id: 'default-emerald',
+ horizon: {
+ id: 'horizon',
colors: {
- accent: '240 4.8% 95.9%',
- accentForeground: '240 5.9% 10%',
- background: '0 0% 100%',
- border: '240 5.9% 90%',
- card: '0 0% 100%',
- cardForeground: '240 10% 3.9%',
- 'chart-1': '139 65% 20%',
- 'chart-2': '140 74% 44%',
- 'chart-3': '142 88% 28%',
- 'chart-4': '137 55% 15%',
- 'chart-5': '141 40% 9%',
- destructive: '0 72% 51%',
- destructiveForeground: '0 0% 98%',
- foreground: '240 10% 3.9%',
- input: '240 5.9% 90%',
- muted: '240 4.8% 95.9%',
- mutedForeground: '240 3.8% 45%',
- popover: '0 0% 100%',
- popoverForeground: '240 10% 3.9%',
- primary: '142 86% 28%',
- primaryForeground: '356 29% 98%',
- ring: '142 86% 28%',
- secondary: '240 4.8% 95.9%',
- secondaryForeground: '240 5.9% 10%',
+ accent: '344 96% 92%', // #fceae5
+ accentForeground: '345 6% 30%', // #52484e
+ background: '345 6% 95%', // #fdf0ed
+ border: '345 6% 85%', // #e4d8d4
+ card: '345 6% 93%', // #f9e8e4
+ cardForeground: '345 6% 30%', // #52484e
+ destructive: '0 72% 51%', // #e33400
+ destructiveForeground: '345 6% 95%', // #fdf0ed
+ foreground: '345 6% 30%', // #52484e
+ input: '345 6% 85%', // #e4d8d4
+ muted: '345 6% 90%', // #eee0dc
+ mutedForeground: '345 6% 50%', // #8b7b82
+ popover: '345 6% 93%', // #f9e8e4
+ popoverForeground: '345 6% 30%', // #52484e
+ primary: '345 80% 70%', // #f075b5
+ primaryForeground: '345 6% 95%', // #fdf0ed
+ ring: '345 80% 70%', // #f075b5
+ secondary: '345 6% 90%', // #eee0dc
+ secondaryForeground: '345 6% 30%', // #52484e
},
colorsDark: {
- accent: '240 3.7% 15.9%',
- 'accent-foreground': '0 0% 98%',
- background: '240 10% 3.9%',
- border: '240 3.7% 15.9%',
- card: '240 10% 3.9%',
- 'card-foreground': '0 0% 98%',
- 'chart-1': '142 88% 28%',
- 'chart-2': '139 65% 20%',
- 'chart-3': '140 74% 24%',
- 'chart-4': '137 55% 15%',
- 'chart-5': '141 40% 9%',
- destructive: '0 72% 51%',
- destructiveForeground: '0 0% 98%',
- foreground: '0 0% 98%',
- input: '240 3.7% 15.9%',
- muted: '240 3.7% 15.9%',
- 'muted-foreground': '240 5% 64.9%',
- popover: '240 10% 3.9%',
- 'popover-foreground': '0 0% 98%',
- primary: '142 86% 28%',
- primaryForeground: '356 29% 98%',
- ring: '142 86% 28%',
- secondary: '240 4.8% 95.9%',
- secondaryForeground: '240 5.9% 10%',
+ accent: '344 96% 92%', // #fceae5
+ accentForeground: '345 6% 30%', // #52484e
+ background: '345 6% 15%', // #1c1e26
+ border: '345 6% 25%', // #3d3741
+ card: '345 6% 17%', // #232530
+ cardForeground: '345 6% 80%', // #d5d0d2
+ destructive: '0 72% 51%', // #e33400
+ destructiveForeground: '345 6% 95%', // #fdf0ed
+ foreground: '345 6% 80%', // #d5d0d2
+ input: '345 6% 25%', // #3d3741
+ muted: '345 6% 20%', // #2e3037
+ mutedForeground: '345 6% 60%', // #a39fa1
+ popover: '345 6% 17%', // #232530
+ popoverForeground: '345 6% 80%', // #d5d0d2
+ primary: '345 80% 70%', // #f075b5
+ primaryForeground: '345 6% 15%', // #1c1e26
+ ring: '345 80% 70%', // #f075b5
+ secondary: '345 6% 20%', // #2e3037
+ secondaryForeground: '345 6% 80%', // #d5d0d2
},
fontFamily: {
body: {
@@ -331,143 +452,137 @@ const _THEMES = [
type: 'sans-serif',
},
},
- name: 'Emerald',
+ name: 'Horizon',
radius: 0.5,
},
- {
- id: 'default-daylight',
+ linear: {
+ id: 'linear',
colors: {
- accent: '36 64% 57%',
- accentForeground: '36 72% 17%',
- background: '36 39% 88%',
- border: '36 45% 60%',
- card: '36 46% 82%',
- cardForeground: '36 45% 20%',
- 'chart-1': '25 34% 28%',
- 'chart-2': '26 36% 34%',
- 'chart-3': '28 40% 40%',
- 'chart-4': '31 41% 48%',
- 'chart-5': '35 43% 53%',
- destructive: '0 84% 37%',
- destructiveForeground: '0 0% 98%',
- foreground: '36 45% 15%',
- input: '36 45% 60%',
- muted: '36 33% 75%',
- mutedForeground: '36 45% 25%',
- popover: '0 0% 100%',
- popoverForeground: '240 10% 3.9%',
- primary: '36 45% 70%',
- primaryForeground: '36 45% 11%',
- ring: '36 45% 30%',
- secondary: '40 35% 77%',
- secondaryForeground: '36 45% 25%',
+ accent: '231 62% 63%', // #6e79d6
+ 'accent-foreground': '0 0% 98%', // #FBFBFB
+ background: '0 0% 98%', // #FBFBFB
+ border: '220 9% 93%', // #edeef1
+ card: '220 13% 95%', // #f2f3f5
+ 'card-foreground': '216 14% 43%', // #5d6a7e
+ destructive: '0 80% 60%', // #ef4343
+ 'destructive-foreground': '0 0% 98%', // #FBFBFB
+ foreground: '216 14% 43%', // #5d6a7e
+ input: '220 13% 91%', // #e8eaee
+ muted: '220 13% 91%', // #e8eaee
+ 'muted-foreground': '215 13% 65%', // #8b96a9
+ popover: '220 13% 95%', // #f2f3f5
+ 'popover-foreground': '216 14% 43%', // #5d6a7e
+ primary: '231 62% 63%', // #6e79d6
+ 'primary-foreground': '0 0% 98%', // #FBFBFB
+ ring: '231 62% 63%', // #6e79d6
+ secondary: '220 13% 91%', // #e8eaee
+ 'secondary-foreground': '216 14% 43%', // #5d6a7e
},
+ // Linear Dark
colorsDark: {
- accent: '36 64% 57%',
- accentForeground: '36 72% 17%',
- background: '36 39% 88%',
- border: '36 45% 60%',
- card: '36 46% 82%',
- cardForeground: '36 45% 20%',
- 'chart-1': '25 34% 28%',
- 'chart-2': '26 36% 34%',
- 'chart-3': '28 40% 40%',
- 'chart-4': '31 41% 48%',
- 'chart-5': '35 43% 53%',
- destructive: '0 84% 37%',
- destructiveForeground: '0 0% 98%',
- foreground: '36 45% 15%',
- input: '36 45% 60%',
- muted: '36 33% 75%',
- mutedForeground: '36 45% 25%',
- popover: '0 0% 100%',
- popoverForeground: '240 10% 3.9%',
- primary: '36 45% 70%',
- primaryForeground: '36 45% 11%',
- ring: '36 45% 30%',
- secondary: '40 35% 77%',
- secondaryForeground: '36 45% 25%',
+ accent: '231 62% 60%', // #5e6ad2
+ 'accent-foreground': '220 5% 77%', // #c1c3c8
+ background: '220 7% 13%', // #1f2023
+ border: '225 6% 19%', // #2e2f33
+ card: '225 5% 17%', // #292a2e
+ 'card-foreground': '220 5% 77%', // #c1c3c8
+ destructive: '0 72% 63%', // #eb5757
+ 'destructive-foreground': '220 5% 77%', // #c1c3c8
+ foreground: '220 5% 77%', // #c1c3c8
+ input: '225 7% 21%', // #323439
+ muted: '225 7% 21%', // #323439
+ 'muted-foreground': '220 5% 57%', // #8b8e98
+ popover: '225 5% 17%', // #292a2e
+ 'popover-foreground': '220 5% 77%', // #c1c3c8
+ primary: '231 62% 60%', // #5e6ad2
+ 'primary-foreground': '220 5% 77%', // #c1c3c8
+ ring: '231 62% 60%', // #5e6ad2
+ secondary: '225 7% 21%', // #323439
+ 'secondary-foreground': '220 5% 77%', // #c1c3c8
},
fontFamily: {
body: {
- name: 'Space Mono',
- type: 'monospace',
+ name: 'Manrope',
+ type: 'sans-serif',
},
heading: {
- name: 'DM Sans',
+ name: 'Manrope',
type: 'sans-serif',
},
},
- name: 'Daylight',
+ name: 'Linear',
+ radius: 0.5,
},
- {
- id: 'default-midnight',
+ 'one-dark-pro': {
+ id: 'one-dark-pro',
colors: {
- accent: '240 0% 13%',
- accentForeground: '60 0% 100%',
- background: '240 5% 6%',
- border: '240 6% 20%',
- card: '240 4% 10%',
- cardForeground: '60 5% 90%',
- 'chart-1': '359 2% 90%',
- 'chart-2': '240 1% 74%',
- 'chart-3': '240 1% 58%',
- 'chart-4': '240 1% 42%',
- 'chart-5': '240 2% 26%',
- destructive: '0 60% 50%',
- destructiveForeground: '0 0% 98%',
- foreground: '60 5% 90%',
- input: '240 6% 20%',
- muted: '240 5% 25%',
- mutedForeground: '60 5% 85%',
- popover: '240 5% 15%',
- popoverForeground: '60 5% 85%',
- primary: '240 0% 90%',
- primaryForeground: '60 0% 0%',
- ring: '240 5% 90%',
- secondary: '240 4% 15%',
- secondaryForeground: '60 5% 85%',
+ accent: '220 13% 33%',
+ 'accent-foreground': '220 13% 93%',
+ background: '220 13% 18%',
+ border: '220 3% 23%',
+ card: '220 13% 16%',
+ 'card-foreground': '219 14% 76%',
+ destructive: '6 97% 49%',
+ 'destructive-foreground': '0 0% 100%',
+ foreground: '219 14% 71%',
+ input: '220 3% 26%',
+ muted: '220 12% 22%',
+ 'muted-foreground': '220 12% 72%',
+ popover: '220 13% 15%',
+ 'popover-foreground': '219 14% 81%',
+ primary: '220 13% 86%',
+ 'primary-foreground': '220 13% 26%',
+ ring: '220 13% 86%',
+ secondary: '220 3% 25%',
+ 'secondary-foreground': '220 3% 85%',
},
colorsDark: {
- accent: '240 0% 13%',
- accentForeground: '60 0% 100%',
- background: '240 5% 6%',
- border: '240 6% 20%',
- card: '240 4% 10%',
- cardForeground: '60 5% 90%',
- 'chart-1': '359 2% 90%',
- 'chart-2': '240 1% 74%',
- 'chart-3': '240 1% 58%',
- 'chart-4': '240 1% 42%',
- 'chart-5': '240 2% 26%',
- destructive: '0 60% 50%',
- destructiveForeground: '0 0% 98%',
- foreground: '60 5% 90%',
- input: '240 6% 20%',
- muted: '240 5% 25%',
- mutedForeground: '60 5% 85%',
- popover: '240 5% 15%',
- popoverForeground: '60 5% 85%',
- primary: '240 0% 90%',
- primaryForeground: '60 0% 0%',
- ring: '240 5% 90%',
- secondary: '240 4% 15%',
- secondaryForeground: '60 5% 85%',
+ accent: '220 13% 33%',
+ 'accent-foreground': '220 13% 93%',
+ background: '220 13% 18%',
+ border: '220 3% 23%',
+ card: '220 13% 16%',
+ 'card-foreground': '219 14% 76%',
+ destructive: '6 97% 49%',
+ 'destructive-foreground': '0 0% 100%',
+ foreground: '219 14% 71%',
+ input: '220 3% 26%',
+ muted: '220 12% 22%',
+ 'muted-foreground': '220 12% 72%',
+ popover: '220 13% 15%',
+ 'popover-foreground': '219 14% 81%',
+ primary: '220 13% 86%',
+ 'primary-foreground': '220 13% 26%',
+ ring: '220 13% 86%',
+ secondary: '220 3% 25%',
+ 'secondary-foreground': '220 3% 85%',
},
fontFamily: {
body: {
- name: 'Manrope',
+ name: 'Inter',
type: 'sans-serif',
},
heading: {
- name: 'Manrope',
+ name: 'Inter',
type: 'sans-serif',
},
},
- name: 'Midnight',
+ name: 'One Dark Pro',
radius: 0.5,
},
-] as const;
+} as const;
+
+Object.entries(_THEMES).forEach(([key, theme]) => {
+ (_THEMES as any)[key] = {
+ ...theme,
+ cssVars: {
+ dark: themeColorsToCssVariables(theme.colorsDark),
+ light: themeColorsToCssVariables(theme.colors),
+ },
+ };
+});
+
+export const THEMES: Record = _THEMES as any;
export function themeColorsToCssVariables(
colors: Record
@@ -497,12 +612,38 @@ export function themeColorNameToCssVariable(name: string) {
return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
}
-export const THEMES = _THEMES.map((theme) => ({
- ...theme,
- cssVars: {
- dark: themeColorsToCssVariables(theme.colorsDark),
- light: themeColorsToCssVariables(theme.colors),
- },
-}));
+export const THEME_LIST = [
+ THEMES['default-shadcn'],
+ THEMES.github,
+ THEMES.catppuccin,
+ // THEMES.linear,
+ THEMES.ayu,
+ THEMES.horizon,
+ THEMES.everforest,
+ THEMES.dune,
+ THEMES['one-dark-pro'],
+];
-export type Theme = (typeof THEMES)[number];
+export type ThemeId = keyof typeof _THEMES;
+
+export type Theme = {
+ id: ThemeId;
+ cssVars: {
+ dark: Record;
+ light: Record;
+ };
+ fontFamily: {
+ body: {
+ name: string;
+ type: string;
+ };
+ heading: {
+ name: string;
+ type: string;
+ };
+ };
+ colors: Record;
+ colorsDark: Record;
+ name: string;
+ radius?: number;
+};
diff --git a/apps/www/src/registry/default/example/mode-toggle.tsx b/apps/www/src/registry/default/example/mode-toggle.tsx
index deeedb5a5c..894f734da9 100644
--- a/apps/www/src/registry/default/example/mode-toggle.tsx
+++ b/apps/www/src/registry/default/example/mode-toggle.tsx
@@ -6,39 +6,23 @@ import { useTheme } from 'next-themes';
import { Icons } from '@/components/icons';
import { Button } from '@/registry/default/plate-ui/button';
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@/registry/default/plate-ui/dropdown-menu';
export default function ModeToggle() {
- const { setTheme } = useTheme();
+ const { setTheme, theme } = useTheme();
return (
-
-
-
-
-
- Toggle theme
-
-
-
- setTheme('light')}>
-
- Light
-
- setTheme('dark')}>
-
- Dark
-
- setTheme('system')}>
-
- System
-
-
-
+ setTheme(theme === 'dark' ? 'light' : 'dark')}
+ >
+ {theme === 'dark' ? (
+
+ ) : (
+
+ )}
+ Toggle theme
+
);
}
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
index 1438d9aea1..90e9a82f0e 100644
--- a/apps/www/src/registry/default/example/playground-demo.tsx
+++ b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -320,9 +320,11 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
export default function PlaygroundDemo({
id,
+ className,
scrollSelector,
}: {
id?: ValueId;
+ className?: string;
scrollSelector?: string;
}) {
const containerRef = useRef(null);
@@ -333,80 +335,79 @@ export default function PlaygroundDemo({
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/apps/www/src/hooks/use-debounce.ts b/apps/www/src/registry/default/hooks/use-debounce.ts
similarity index 100%
rename from apps/www/src/hooks/use-debounce.ts
rename to apps/www/src/registry/default/hooks/use-debounce.ts
diff --git a/apps/www/src/types/plate-types.ts b/apps/www/src/registry/default/lib/plate-types.ts
similarity index 100%
rename from apps/www/src/types/plate-types.ts
rename to apps/www/src/registry/default/lib/plate-types.ts
diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/registry/default/lib/utils.ts
similarity index 100%
rename from apps/www/src/lib/utils.ts
rename to apps/www/src/registry/default/lib/utils.ts
diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
index 61828bf4ca..9f044136d1 100644
--- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
+++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx
@@ -12,7 +12,12 @@ import type { TColor } from './color-dropdown-menu';
import { buttonVariants } from './button';
import { DropdownMenuItem } from './dropdown-menu';
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from './tooltip';
type ColorDropdownMenuItemProps = {
isBrightColor: boolean;
@@ -81,16 +86,18 @@ export function ColorDropdownMenuItems({
className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}
{...props}
>
- {colors.map(({ isBrightColor, name, value }) => (
-
- ))}
+
+ {colors.map(({ isBrightColor, name, value }) => (
+
+ ))}
+
);
}
diff --git a/apps/www/src/registry/default/plate-ui/comments-popover.tsx b/apps/www/src/registry/default/plate-ui/comments-popover.tsx
index 12324873e3..298e19a9d6 100644
--- a/apps/www/src/registry/default/plate-ui/comments-popover.tsx
+++ b/apps/www/src/registry/default/plate-ui/comments-popover.tsx
@@ -55,7 +55,7 @@ export function CommentsPopover() {
return (
-
+
diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx
index ff6164b35e..e5bd1f2296 100644
--- a/apps/www/src/registry/default/plate-ui/draggable.tsx
+++ b/apps/www/src/registry/default/plate-ui/draggable.tsx
@@ -23,6 +23,7 @@ import {
Tooltip,
TooltipContent,
TooltipPortal,
+ TooltipProvider,
TooltipTrigger,
} from './tooltip';
@@ -78,30 +79,32 @@ const DragHandle = () => {
const editor = useEditorRef();
return (
-
-
- {
- event.stopPropagation();
- event.preventDefault();
-
- // if (element.id) {
- // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);
- // api.blockContextMenu.show(editor.id, event as any);
- // }
- }}
- onMouseDown={() => {
- editor
- .getApi(BlockSelectionPlugin)
- .blockSelection.resetSelectedIds();
- }}
- />
-
-
- Drag to move
-
-
+
+
+
+ {
+ event.stopPropagation();
+ event.preventDefault();
+
+ // if (element.id) {
+ // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);
+ // api.blockContextMenu.show(editor.id, event as any);
+ // }
+ }}
+ onMouseDown={() => {
+ editor
+ .getApi(BlockSelectionPlugin)
+ .blockSelection.resetSelectedIds();
+ }}
+ />
+
+
+ Drag to move
+
+
+
);
};
diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx
index 5646fd120b..832b4ec464 100644
--- a/apps/www/src/registry/default/plate-ui/editor.tsx
+++ b/apps/www/src/registry/default/plate-ui/editor.tsx
@@ -9,7 +9,7 @@ import { cva } from 'class-variance-authority';
const editorVariants = cva(
cn(
- 'relative overflow-x-auto whitespace-pre-wrap break-words',
+ 'relative overflow-x-auto whitespace-pre-wrap break-words text-foreground',
'min-h-[80px] w-full rounded-md bg-background px-6 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
'[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
'[&_[data-slate-placeholder]]:top-[auto_!important]',
diff --git a/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx b/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx
index c00bc8b276..e170a8f48a 100644
--- a/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/emoji-input-element.tsx
@@ -4,6 +4,8 @@ import { withRef } from '@udecode/cn';
import { PlateElement } from '@udecode/plate-common/react';
import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';
+import { useDebounce } from '@/registry/default/hooks/use-debounce';
+
import {
InlineCombobox,
InlineComboboxContent,
@@ -66,20 +68,3 @@ export const EmojiInputElement = withRef
(
);
}
);
-
-const useDebounce = (value: any, delay = 500) => {
- const [debouncedValue, setDebouncedValue] = React.useState(value);
-
- React.useEffect(() => {
- const handler: NodeJS.Timeout = setTimeout(() => {
- setDebouncedValue(value);
- }, delay);
-
- // Cancel the timeout if value changes (also on delay change or unmount)
- return () => {
- clearTimeout(handler);
- };
- }, [value, delay]);
-
- return debouncedValue;
-};
diff --git a/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx
index 6e2ad7201d..a9fda8e243 100644
--- a/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx
+++ b/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx
@@ -65,7 +65,7 @@ export const FloatingToolbar = withRef<
;
tooltip?: React.ReactNode;
- } & React.ComponentPropsWithoutRef
+ } & React.ComponentPropsWithoutRef &
+ TooltipPrimitive.TooltipProviderProps
>(function ExtendComponent(
- { tooltip, tooltipContentProps, tooltipProps, ...props },
+ {
+ delayDuration = 0,
+ disableHoverableContent = true,
+ skipDelayDuration = 0,
+ tooltip,
+ tooltipContentProps,
+ tooltipProps,
+ ...props
+ },
ref
) {
const [mounted, setMounted] = React.useState(false);
@@ -50,13 +63,21 @@ export function withTooltip<
if (tooltip && mounted) {
return (
-
- {component}
+
+
+ {component}
-
- {tooltip}
-
-
+
+
+ {tooltip}
+
+
+
+
);
}
diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts
index 88ce47ad1e..cab7b60df8 100644
--- a/apps/www/src/registry/registry-examples.ts
+++ b/apps/www/src/registry/registry-examples.ts
@@ -152,13 +152,7 @@ export const examples: Registry = [
},
{
external: true,
- files: ['styles/globals.css'],
- name: 'globals',
- type: 'registry:style',
- },
- {
- external: true,
- files: ['types/plate-types.ts'],
+ files: ['lib/plate-types.ts'],
name: 'plate-types',
type: 'registry:lib',
},
diff --git a/apps/www/src/registry/registry-hooks.ts b/apps/www/src/registry/registry-hooks.ts
index ba77fe8311..e3ddb1c49e 100644
--- a/apps/www/src/registry/registry-hooks.ts
+++ b/apps/www/src/registry/registry-hooks.ts
@@ -4,21 +4,11 @@ export const hooks: Registry = [
{
files: [
{
- path: 'hooks/use-mobile.tsx',
+ path: 'hooks/use-debounce.ts',
type: 'registry:hook',
},
],
- name: 'use-mobile',
- type: 'registry:hook',
- },
- {
- files: [
- {
- path: 'hooks/use-toast.ts',
- type: 'registry:hook',
- },
- ],
- name: 'use-toast',
+ name: 'use-debounce',
type: 'registry:hook',
},
];