diff --git a/apps/www/public/r/colors/gray.json b/apps/www/public/r/colors/gray.json new file mode 100644 index 0000000000..852a65cb79 --- /dev/null +++ b/apps/www/public/r/colors/gray.json @@ -0,0 +1,92 @@ +{ + "inlineColors": { + "dark": { + "accent": "gray-800", + "accent-foreground": "gray-50", + "background": "gray-950", + "border": "gray-800", + "card": "gray-950", + "card-foreground": "gray-50", + "destructive": "red-900", + "destructive-foreground": "gray-50", + "foreground": "gray-50", + "input": "gray-800", + "muted": "gray-800", + "muted-foreground": "gray-400", + "popover": "gray-950", + "popover-foreground": "gray-50", + "primary": "gray-50", + "primary-foreground": "gray-900", + "ring": "gray-300", + "secondary": "gray-800", + "secondary-foreground": "gray-50" + }, + "light": { + "accent": "gray-100", + "accent-foreground": "gray-900", + "background": "white", + "border": "gray-200", + "card": "white", + "card-foreground": "gray-950", + "destructive": "red-500", + "destructive-foreground": "gray-50", + "foreground": "gray-950", + "input": "gray-200", + "muted": "gray-100", + "muted-foreground": "gray-500", + "popover": "white", + "popover-foreground": "gray-950", + "primary": "gray-900", + "primary-foreground": "gray-50", + "ring": "gray-950", + "secondary": "gray-100", + "secondary-foreground": "gray-900" + } + }, + "cssVars": { + "dark": { + "accent": "215 27.9% 16.9%", + "accent-foreground": "210 20% 98%", + "background": "224 71.4% 4.1%", + "border": "215 27.9% 16.9%", + "card": "224 71.4% 4.1%", + "card-foreground": "210 20% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 20% 98%", + "foreground": "210 20% 98%", + "input": "215 27.9% 16.9%", + "muted": "215 27.9% 16.9%", + "muted-foreground": "217.9 10.6% 64.9%", + "popover": "224 71.4% 4.1%", + "popover-foreground": "210 20% 98%", + "primary": "210 20% 98%", + "primary-foreground": "220.9 39.3% 11%", + "ring": "216 12.2% 83.9%", + "secondary": "215 27.9% 16.9%", + "secondary-foreground": "210 20% 98%" + }, + "light": { + "accent": "220 14.3% 95.9%", + "accent-foreground": "220.9 39.3% 11%", + "background": "0 0% 100%", + "border": "220 13% 91%", + "card": "0 0% 100%", + "card-foreground": "224 71.4% 4.1%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 20% 98%", + "foreground": "224 71.4% 4.1%", + "input": "220 13% 91%", + "muted": "220 14.3% 95.9%", + "muted-foreground": "220 8.9% 46.1%", + "popover": "0 0% 100%", + "popover-foreground": "224 71.4% 4.1%", + "primary": "220.9 39.3% 11%", + "primary-foreground": "210 20% 98%", + "ring": "224 71.4% 4.1%", + "secondary": "220 14.3% 95.9%", + "secondary-foreground": "220.9 39.3% 11%" + } + }, + "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" +} \ No newline at end of file diff --git a/apps/www/public/r/colors/index.json b/apps/www/public/r/colors/index.json new file mode 100644 index 0000000000..4c71741904 --- /dev/null +++ b/apps/www/public/r/colors/index.json @@ -0,0 +1,1999 @@ +{ + "amber": [ + { + "hex": "#fffbeb", + "hsl": "hsl(48,100%,96.1%)", + "rgb": "rgb(255,251,235)", + "scale": 50, + "rgbChannel": "255 251 235", + "hslChannel": "48 100% 96.1%" + }, + { + "hex": "#fef3c7", + "hsl": "hsl(48,96.5%,88.8%)", + "rgb": "rgb(254,243,199)", + "scale": 100, + "rgbChannel": "254 243 199", + "hslChannel": "48 96.5% 88.8%" + }, + { + "hex": "#fde68a", + "hsl": "hsl(48,96.6%,76.7%)", + "rgb": "rgb(253,230,138)", + "scale": 200, + "rgbChannel": "253 230 138", + "hslChannel": "48 96.6% 76.7%" + }, + { + "hex": "#fcd34d", + "hsl": "hsl(45.9,96.7%,64.5%)", + "rgb": "rgb(252,211,77)", + "scale": 300, + "rgbChannel": "252 211 77", + "hslChannel": "45.9 96.7% 64.5%" + }, + { + "hex": "#fbbf24", + "hsl": "hsl(43.3,96.4%,56.3%)", + "rgb": "rgb(251,191,36)", + "scale": 400, + "rgbChannel": "251 191 36", + "hslChannel": "43.3 96.4% 56.3%" + }, + { + "hex": "#f59e0b", + "hsl": "hsl(37.7,92.1%,50.2%)", + "rgb": "rgb(245,158,11)", + "scale": 500, + "rgbChannel": "245 158 11", + "hslChannel": "37.7 92.1% 50.2%" + }, + { + "hex": "#d97706", + "hsl": "hsl(32.1,94.6%,43.7%)", + "rgb": "rgb(217,119,6)", + "scale": 600, + "rgbChannel": "217 119 6", + "hslChannel": "32.1 94.6% 43.7%" + }, + { + "hex": "#b45309", + "hsl": "hsl(26,90.5%,37.1%)", + "rgb": "rgb(180,83,9)", + "scale": 700, + "rgbChannel": "180 83 9", + "hslChannel": "26 90.5% 37.1%" + }, + { + "hex": "#92400e", + "hsl": "hsl(22.7,82.5%,31.4%)", + "rgb": "rgb(146,64,14)", + "scale": 800, + "rgbChannel": "146 64 14", + "hslChannel": "22.7 82.5% 31.4%" + }, + { + "hex": "#78350f", + "hsl": "hsl(21.7,77.8%,26.5%)", + "rgb": "rgb(120,53,15)", + "scale": 900, + "rgbChannel": "120 53 15", + "hslChannel": "21.7 77.8% 26.5%" + }, + { + "hex": "#451a03", + "hsl": "hsl(20.9,91.7%,14.1%)", + "rgb": "rgb(69,26,3)", + "scale": 950, + "rgbChannel": "69 26 3", + "hslChannel": "20.9 91.7% 14.1%" + } + ], + "black": { + "hex": "#000000", + "hsl": "hsl(0,0%,0%)", + "rgb": "rgb(0,0,0)", + "rgbChannel": "0 0 0", + "hslChannel": "0 0% 0%" + }, + "blue": [ + { + "hex": "#eff6ff", + "hsl": "hsl(213.8,100%,96.9%)", + "rgb": "rgb(239,246,255)", + "scale": 50, + "rgbChannel": "239 246 255", + "hslChannel": "213.8 100% 96.9%" + }, + { + "hex": "#dbeafe", + "hsl": "hsl(214.3,94.6%,92.7%)", + "rgb": "rgb(219,234,254)", + "scale": 100, + "rgbChannel": "219 234 254", + "hslChannel": "214.3 94.6% 92.7%" + }, + { + "hex": "#bfdbfe", + "hsl": "hsl(213.3,96.9%,87.3%)", + "rgb": "rgb(191,219,254)", + "scale": 200, + "rgbChannel": "191 219 254", + "hslChannel": "213.3 96.9% 87.3%" + }, + { + "hex": "#93c5fd", + "hsl": "hsl(211.7,96.4%,78.4%)", + "rgb": "rgb(147,197,253)", + "scale": 300, + "rgbChannel": "147 197 253", + "hslChannel": "211.7 96.4% 78.4%" + }, + { + "hex": "#60a5fa", + "hsl": "hsl(213.1,93.9%,67.8%)", + "rgb": "rgb(96,165,250)", + "scale": 400, + "rgbChannel": "96 165 250", + "hslChannel": "213.1 93.9% 67.8%" + }, + { + "hex": "#3b82f6", + "hsl": "hsl(217.2,91.2%,59.8%)", + "rgb": "rgb(59,130,246)", + "scale": 500, + "rgbChannel": "59 130 246", + "hslChannel": "217.2 91.2% 59.8%" + }, + { + "hex": "#2563eb", + "hsl": "hsl(221.2,83.2%,53.3%)", + "rgb": "rgb(37,99,235)", + "scale": 600, + "rgbChannel": "37 99 235", + "hslChannel": "221.2 83.2% 53.3%" + }, + { + "hex": "#1d4ed8", + "hsl": "hsl(224.3,76.3%,48%)", + "rgb": "rgb(29,78,216)", + "scale": 700, + "rgbChannel": "29 78 216", + "hslChannel": "224.3 76.3% 48%" + }, + { + "hex": "#1e40af", + "hsl": "hsl(225.9,70.7%,40.2%)", + "rgb": "rgb(30,64,175)", + "scale": 800, + "rgbChannel": "30 64 175", + "hslChannel": "225.9 70.7% 40.2%" + }, + { + "hex": "#1e3a8a", + "hsl": "hsl(224.4,64.3%,32.9%)", + "rgb": "rgb(30,58,138)", + "scale": 900, + "rgbChannel": "30 58 138", + "hslChannel": "224.4 64.3% 32.9%" + }, + { + "hex": "#172554", + "hsl": "hsl(226.2,57%,21%)", + "rgb": "rgb(23,37,84)", + "scale": 950, + "rgbChannel": "23 37 84", + "hslChannel": "226.2 57% 21%" + } + ], + "current": "currentColor", + "cyan": [ + { + "hex": "#ecfeff", + "hsl": "hsl(183.2,100%,96.3%)", + "rgb": "rgb(236,254,255)", + "scale": 50, + "rgbChannel": "236 254 255", + "hslChannel": "183.2 100% 96.3%" + }, + { + "hex": "#cffafe", + "hsl": "hsl(185.1,95.9%,90.4%)", + "rgb": "rgb(207,250,254)", + "scale": 100, + "rgbChannel": "207 250 254", + "hslChannel": "185.1 95.9% 90.4%" + }, + { + "hex": "#a5f3fc", + "hsl": "hsl(186.2,93.5%,81.8%)", + "rgb": "rgb(165,243,252)", + "scale": 200, + "rgbChannel": "165 243 252", + "hslChannel": "186.2 93.5% 81.8%" + }, + { + "hex": "#67e8f9", + "hsl": "hsl(187,92.4%,69%)", + "rgb": "rgb(103,232,249)", + "scale": 300, + "rgbChannel": "103 232 249", + "hslChannel": "187 92.4% 69%" + }, + { + "hex": "#22d3ee", + "hsl": "hsl(187.9,85.7%,53.3%)", + "rgb": "rgb(34,211,238)", + "scale": 400, + "rgbChannel": "34 211 238", + "hslChannel": "187.9 85.7% 53.3%" + }, + { + "hex": "#06b6d4", + "hsl": "hsl(188.7,94.5%,42.7%)", + "rgb": "rgb(6,182,212)", + "scale": 500, + "rgbChannel": "6 182 212", + "hslChannel": "188.7 94.5% 42.7%" + }, + { + "hex": "#0891b2", + "hsl": "hsl(191.6,91.4%,36.5%)", + "rgb": "rgb(8,145,178)", + "scale": 600, + "rgbChannel": "8 145 178", + "hslChannel": "191.6 91.4% 36.5%" + }, + { + "hex": "#0e7490", + "hsl": "hsl(192.9,82.3%,31%)", + "rgb": "rgb(14,116,144)", + "scale": 700, + "rgbChannel": "14 116 144", + "hslChannel": "192.9 82.3% 31%" + }, + { + "hex": "#155e75", + "hsl": "hsl(194.4,69.6%,27.1%)", + "rgb": "rgb(21,94,117)", + "scale": 800, + "rgbChannel": "21 94 117", + "hslChannel": "194.4 69.6% 27.1%" + }, + { + "hex": "#164e63", + "hsl": "hsl(196.4,63.6%,23.7%)", + "rgb": "rgb(22,78,99)", + "scale": 900, + "rgbChannel": "22 78 99", + "hslChannel": "196.4 63.6% 23.7%" + }, + { + "hex": "#083344", + "hsl": "hsl(197,78.9%,14.9%)", + "rgb": "rgb(8,51,68)", + "scale": 950, + "rgbChannel": "8 51 68", + "hslChannel": "197 78.9% 14.9%" + } + ], + "emerald": [ + { + "hex": "#ecfdf5", + "hsl": "hsl(151.8,81%,95.9%)", + "rgb": "rgb(236,253,245)", + "scale": 50, + "rgbChannel": "236 253 245", + "hslChannel": "151.8 81% 95.9%" + }, + { + "hex": "#d1fae5", + "hsl": "hsl(149.3,80.4%,90%)", + "rgb": "rgb(209,250,229)", + "scale": 100, + "rgbChannel": "209 250 229", + "hslChannel": "149.3 80.4% 90%" + }, + { + "hex": "#a7f3d0", + "hsl": "hsl(152.4,76%,80.4%)", + "rgb": "rgb(167,243,208)", + "scale": 200, + "rgbChannel": "167 243 208", + "hslChannel": "152.4 76% 80.4%" + }, + { + "hex": "#6ee7b7", + "hsl": "hsl(156.2,71.6%,66.9%)", + "rgb": "rgb(110,231,183)", + "scale": 300, + "rgbChannel": "110 231 183", + "hslChannel": "156.2 71.6% 66.9%" + }, + { + "hex": "#34d399", + "hsl": "hsl(158.1,64.4%,51.6%)", + "rgb": "rgb(52,211,153)", + "scale": 400, + "rgbChannel": "52 211 153", + "hslChannel": "158.1 64.4% 51.6%" + }, + { + "hex": "#10b981", + "hsl": "hsl(160.1,84.1%,39.4%)", + "rgb": "rgb(16,185,129)", + "scale": 500, + "rgbChannel": "16 185 129", + "hslChannel": "160.1 84.1% 39.4%" + }, + { + "hex": "#059669", + "hsl": "hsl(161.4,93.5%,30.4%)", + "rgb": "rgb(5,150,105)", + "scale": 600, + "rgbChannel": "5 150 105", + "hslChannel": "161.4 93.5% 30.4%" + }, + { + "hex": "#047857", + "hsl": "hsl(162.9,93.5%,24.3%)", + "rgb": "rgb(4,120,87)", + "scale": 700, + "rgbChannel": "4 120 87", + "hslChannel": "162.9 93.5% 24.3%" + }, + { + "hex": "#065f46", + "hsl": "hsl(163.1,88.1%,19.8%)", + "rgb": "rgb(6,95,70)", + "scale": 800, + "rgbChannel": "6 95 70", + "hslChannel": "163.1 88.1% 19.8%" + }, + { + "hex": "#064e3b", + "hsl": "hsl(164.2,85.7%,16.5%)", + "rgb": "rgb(6,78,59)", + "scale": 900, + "rgbChannel": "6 78 59", + "hslChannel": "164.2 85.7% 16.5%" + }, + { + "hex": "#022c22", + "hsl": "hsl(165.7,91.3%,9%)", + "rgb": "rgb(2,44,34)", + "scale": 950, + "rgbChannel": "2 44 34", + "hslChannel": "165.7 91.3% 9%" + } + ], + "fuchsia": [ + { + "hex": "#fdf4ff", + "hsl": "hsl(289.1,100%,97.8%)", + "rgb": "rgb(253,244,255)", + "scale": 50, + "rgbChannel": "253 244 255", + "hslChannel": "289.1 100% 97.8%" + }, + { + "hex": "#fae8ff", + "hsl": "hsl(287,100%,95.5%)", + "rgb": "rgb(250,232,255)", + "scale": 100, + "rgbChannel": "250 232 255", + "hslChannel": "287 100% 95.5%" + }, + { + "hex": "#f5d0fe", + "hsl": "hsl(288.3,95.8%,90.6%)", + "rgb": "rgb(245,208,254)", + "scale": 200, + "rgbChannel": "245 208 254", + "hslChannel": "288.3 95.8% 90.6%" + }, + { + "hex": "#f0abfc", + "hsl": "hsl(291.1,93.1%,82.9%)", + "rgb": "rgb(240,171,252)", + "scale": 300, + "rgbChannel": "240 171 252", + "hslChannel": "291.1 93.1% 82.9%" + }, + { + "hex": "#e879f9", + "hsl": "hsl(292,91.4%,72.5%)", + "rgb": "rgb(232,121,249)", + "scale": 400, + "rgbChannel": "232 121 249", + "hslChannel": "292 91.4% 72.5%" + }, + { + "hex": "#d946ef", + "hsl": "hsl(292.2,84.1%,60.6%)", + "rgb": "rgb(217,70,239)", + "scale": 500, + "rgbChannel": "217 70 239", + "hslChannel": "292.2 84.1% 60.6%" + }, + { + "hex": "#c026d3", + "hsl": "hsl(293.4,69.5%,48.8%)", + "rgb": "rgb(192,38,211)", + "scale": 600, + "rgbChannel": "192 38 211", + "hslChannel": "293.4 69.5% 48.8%" + }, + { + "hex": "#a21caf", + "hsl": "hsl(294.7,72.4%,39.8%)", + "rgb": "rgb(162,28,175)", + "scale": 700, + "rgbChannel": "162 28 175", + "hslChannel": "294.7 72.4% 39.8%" + }, + { + "hex": "#86198f", + "hsl": "hsl(295.4,70.2%,32.9%)", + "rgb": "rgb(134,25,143)", + "scale": 800, + "rgbChannel": "134 25 143", + "hslChannel": "295.4 70.2% 32.9%" + }, + { + "hex": "#701a75", + "hsl": "hsl(296.7,63.6%,28%)", + "rgb": "rgb(112,26,117)", + "scale": 900, + "rgbChannel": "112 26 117", + "hslChannel": "296.7 63.6% 28%" + }, + { + "hex": "#4a044e", + "hsl": "hsl(296.8,90.2%,16.1%)", + "rgb": "rgb(74,4,78)", + "scale": 950, + "rgbChannel": "74 4 78", + "hslChannel": "296.8 90.2% 16.1%" + } + ], + "gray": [ + { + "hex": "#f9fafb", + "hsl": "hsl(210,20%,98%)", + "rgb": "rgb(249,250,251)", + "scale": 50, + "rgbChannel": "249 250 251", + "hslChannel": "210 20% 98%" + }, + { + "hex": "#f3f4f6", + "hsl": "hsl(220,14.3%,95.9%)", + "rgb": "rgb(243,244,246)", + "scale": 100, + "rgbChannel": "243 244 246", + "hslChannel": "220 14.3% 95.9%" + }, + { + "hex": "#e5e7eb", + "hsl": "hsl(220,13%,91%)", + "rgb": "rgb(229,231,235)", + "scale": 200, + "rgbChannel": "229 231 235", + "hslChannel": "220 13% 91%" + }, + { + "hex": "#d1d5db", + "hsl": "hsl(216,12.2%,83.9%)", + "rgb": "rgb(209,213,219)", + "scale": 300, + "rgbChannel": "209 213 219", + "hslChannel": "216 12.2% 83.9%" + }, + { + "hex": "#9ca3af", + "hsl": "hsl(217.9,10.6%,64.9%)", + "rgb": "rgb(156,163,175)", + "scale": 400, + "rgbChannel": "156 163 175", + "hslChannel": "217.9 10.6% 64.9%" + }, + { + "hex": "#6b7280", + "hsl": "hsl(220,8.9%,46.1%)", + "rgb": "rgb(107,114,128)", + "scale": 500, + "rgbChannel": "107 114 128", + "hslChannel": "220 8.9% 46.1%" + }, + { + "hex": "#4b5563", + "hsl": "hsl(215,13.8%,34.1%)", + "rgb": "rgb(75,85,99)", + "scale": 600, + "rgbChannel": "75 85 99", + "hslChannel": "215 13.8% 34.1%" + }, + { + "hex": "#374151", + "hsl": "hsl(216.9,19.1%,26.7%)", + "rgb": "rgb(55,65,81)", + "scale": 700, + "rgbChannel": "55 65 81", + "hslChannel": "216.9 19.1% 26.7%" + }, + { + "hex": "#1f2937", + "hsl": "hsl(215,27.9%,16.9%)", + "rgb": "rgb(31,41,55)", + "scale": 800, + "rgbChannel": "31 41 55", + "hslChannel": "215 27.9% 16.9%" + }, + { + "hex": "#111827", + "hsl": "hsl(220.9,39.3%,11%)", + "rgb": "rgb(17,24,39)", + "scale": 900, + "rgbChannel": "17 24 39", + "hslChannel": "220.9 39.3% 11%" + }, + { + "hex": "#030712", + "hsl": "hsl(224,71.4%,4.1%)", + "rgb": "rgb(3,7,18)", + "scale": 950, + "rgbChannel": "3 7 18", + "hslChannel": "224 71.4% 4.1%" + } + ], + "green": [ + { + "hex": "#f0fdf4", + "hsl": "hsl(138.5,76.5%,96.7%)", + "rgb": "rgb(240,253,244)", + "scale": 50, + "rgbChannel": "240 253 244", + "hslChannel": "138.5 76.5% 96.7%" + }, + { + "hex": "#dcfce7", + "hsl": "hsl(140.6,84.2%,92.5%)", + "rgb": "rgb(220,252,231)", + "scale": 100, + "rgbChannel": "220 252 231", + "hslChannel": "140.6 84.2% 92.5%" + }, + { + "hex": "#bbf7d0", + "hsl": "hsl(141,78.9%,85.1%)", + "rgb": "rgb(187,247,208)", + "scale": 200, + "rgbChannel": "187 247 208", + "hslChannel": "141 78.9% 85.1%" + }, + { + "hex": "#86efac", + "hsl": "hsl(141.7,76.6%,73.1%)", + "rgb": "rgb(134,239,172)", + "scale": 300, + "rgbChannel": "134 239 172", + "hslChannel": "141.7 76.6% 73.1%" + }, + { + "hex": "#4ade80", + "hsl": "hsl(141.9,69.2%,58%)", + "rgb": "rgb(74,222,128)", + "scale": 400, + "rgbChannel": "74 222 128", + "hslChannel": "141.9 69.2% 58%" + }, + { + "hex": "#22c55e", + "hsl": "hsl(142.1,70.6%,45.3%)", + "rgb": "rgb(34,197,94)", + "scale": 500, + "rgbChannel": "34 197 94", + "hslChannel": "142.1 70.6% 45.3%" + }, + { + "hex": "#16a34a", + "hsl": "hsl(142.1,76.2%,36.3%)", + "rgb": "rgb(22,163,74)", + "scale": 600, + "rgbChannel": "22 163 74", + "hslChannel": "142.1 76.2% 36.3%" + }, + { + "hex": "#15803d", + "hsl": "hsl(142.4,71.8%,29.2%)", + "rgb": "rgb(21,128,61)", + "scale": 700, + "rgbChannel": "21 128 61", + "hslChannel": "142.4 71.8% 29.2%" + }, + { + "hex": "#166534", + "hsl": "hsl(142.8,64.2%,24.1%)", + "rgb": "rgb(22,101,52)", + "scale": 800, + "rgbChannel": "22 101 52", + "hslChannel": "142.8 64.2% 24.1%" + }, + { + "hex": "#14532d", + "hsl": "hsl(143.8,61.2%,20.2%)", + "rgb": "rgb(20,83,45)", + "scale": 900, + "rgbChannel": "20 83 45", + "hslChannel": "143.8 61.2% 20.2%" + }, + { + "hex": "#052e16", + "hsl": "hsl(144.9,80.4%,10%)", + "rgb": "rgb(5,46,22)", + "scale": 950, + "rgbChannel": "5 46 22", + "hslChannel": "144.9 80.4% 10%" + } + ], + "indigo": [ + { + "hex": "#eef2ff", + "hsl": "hsl(225.9,100%,96.7%)", + "rgb": "rgb(238,242,255)", + "scale": 50, + "rgbChannel": "238 242 255", + "hslChannel": "225.9 100% 96.7%" + }, + { + "hex": "#e0e7ff", + "hsl": "hsl(226.5,100%,93.9%)", + "rgb": "rgb(224,231,255)", + "scale": 100, + "rgbChannel": "224 231 255", + "hslChannel": "226.5 100% 93.9%" + }, + { + "hex": "#c7d2fe", + "hsl": "hsl(228,96.5%,88.8%)", + "rgb": "rgb(199,210,254)", + "scale": 200, + "rgbChannel": "199 210 254", + "hslChannel": "228 96.5% 88.8%" + }, + { + "hex": "#a5b4fc", + "hsl": "hsl(229.7,93.5%,81.8%)", + "rgb": "rgb(165,180,252)", + "scale": 300, + "rgbChannel": "165 180 252", + "hslChannel": "229.7 93.5% 81.8%" + }, + { + "hex": "#818cf8", + "hsl": "hsl(234.5,89.5%,73.9%)", + "rgb": "rgb(129,140,248)", + "scale": 400, + "rgbChannel": "129 140 248", + "hslChannel": "234.5 89.5% 73.9%" + }, + { + "hex": "#6366f1", + "hsl": "hsl(238.7,83.5%,66.7%)", + "rgb": "rgb(99,102,241)", + "scale": 500, + "rgbChannel": "99 102 241", + "hslChannel": "238.7 83.5% 66.7%" + }, + { + "hex": "#4f46e5", + "hsl": "hsl(243.4,75.4%,58.6%)", + "rgb": "rgb(79,70,229)", + "scale": 600, + "rgbChannel": "79 70 229", + "hslChannel": "243.4 75.4% 58.6%" + }, + { + "hex": "#4338ca", + "hsl": "hsl(244.5,57.9%,50.6%)", + "rgb": "rgb(67,56,202)", + "scale": 700, + "rgbChannel": "67 56 202", + "hslChannel": "244.5 57.9% 50.6%" + }, + { + "hex": "#3730a3", + "hsl": "hsl(243.7,54.5%,41.4%)", + "rgb": "rgb(55,48,163)", + "scale": 800, + "rgbChannel": "55 48 163", + "hslChannel": "243.7 54.5% 41.4%" + }, + { + "hex": "#312e81", + "hsl": "hsl(242.2,47.4%,34.3%)", + "rgb": "rgb(49,46,129)", + "scale": 900, + "rgbChannel": "49 46 129", + "hslChannel": "242.2 47.4% 34.3%" + }, + { + "hex": "#1e1b4b", + "hsl": "hsl(243.8,47.1%,20%)", + "rgb": "rgb(30,27,75)", + "scale": 950, + "rgbChannel": "30 27 75", + "hslChannel": "243.8 47.1% 20%" + } + ], + "inherit": "inherit", + "lime": [ + { + "hex": "#f7fee7", + "hsl": "hsl(78.3,92%,95.1%)", + "rgb": "rgb(247,254,231)", + "scale": 50, + "rgbChannel": "247 254 231", + "hslChannel": "78.3 92% 95.1%" + }, + { + "hex": "#ecfccb", + "hsl": "hsl(79.6,89.1%,89.2%)", + "rgb": "rgb(236,252,203)", + "scale": 100, + "rgbChannel": "236 252 203", + "hslChannel": "79.6 89.1% 89.2%" + }, + { + "hex": "#d9f99d", + "hsl": "hsl(80.9,88.5%,79.6%)", + "rgb": "rgb(217,249,157)", + "scale": 200, + "rgbChannel": "217 249 157", + "hslChannel": "80.9 88.5% 79.6%" + }, + { + "hex": "#bef264", + "hsl": "hsl(82,84.5%,67.1%)", + "rgb": "rgb(190,242,100)", + "scale": 300, + "rgbChannel": "190 242 100", + "hslChannel": "82 84.5% 67.1%" + }, + { + "hex": "#a3e635", + "hsl": "hsl(82.7,78%,55.5%)", + "rgb": "rgb(163,230,53)", + "scale": 400, + "rgbChannel": "163 230 53", + "hslChannel": "82.7 78% 55.5%" + }, + { + "hex": "#84cc16", + "hsl": "hsl(83.7,80.5%,44.3%)", + "rgb": "rgb(132,204,22)", + "scale": 500, + "rgbChannel": "132 204 22", + "hslChannel": "83.7 80.5% 44.3%" + }, + { + "hex": "#65a30d", + "hsl": "hsl(84.8,85.2%,34.5%)", + "rgb": "rgb(101,163,13)", + "scale": 600, + "rgbChannel": "101 163 13", + "hslChannel": "84.8 85.2% 34.5%" + }, + { + "hex": "#4d7c0f", + "hsl": "hsl(85.9,78.4%,27.3%)", + "rgb": "rgb(77,124,15)", + "scale": 700, + "rgbChannel": "77 124 15", + "hslChannel": "85.9 78.4% 27.3%" + }, + { + "hex": "#3f6212", + "hsl": "hsl(86.3,69%,22.7%)", + "rgb": "rgb(63,98,18)", + "scale": 800, + "rgbChannel": "63 98 18", + "hslChannel": "86.3 69% 22.7%" + }, + { + "hex": "#365314", + "hsl": "hsl(87.6,61.2%,20.2%)", + "rgb": "rgb(54,83,20)", + "scale": 900, + "rgbChannel": "54 83 20", + "hslChannel": "87.6 61.2% 20.2%" + }, + { + "hex": "#1a2e05", + "hsl": "hsl(89.3,80.4%,10%)", + "rgb": "rgb(26,46,5)", + "scale": 950, + "rgbChannel": "26 46 5", + "hslChannel": "89.3 80.4% 10%" + } + ], + "neutral": [ + { + "hex": "#fafafa", + "hsl": "hsl(0,0%,98%)", + "rgb": "rgb(250,250,250)", + "scale": 50, + "rgbChannel": "250 250 250", + "hslChannel": "0 0% 98%" + }, + { + "hex": "#f5f5f5", + "hsl": "hsl(0,0%,96.1%)", + "rgb": "rgb(245,245,245)", + "scale": 100, + "rgbChannel": "245 245 245", + "hslChannel": "0 0% 96.1%" + }, + { + "hex": "#e5e5e5", + "hsl": "hsl(0,0%,89.8%)", + "rgb": "rgb(229,229,229)", + "scale": 200, + "rgbChannel": "229 229 229", + "hslChannel": "0 0% 89.8%" + }, + { + "hex": "#d4d4d4", + "hsl": "hsl(0,0%,83.1%)", + "rgb": "rgb(212,212,212)", + "scale": 300, + "rgbChannel": "212 212 212", + "hslChannel": "0 0% 83.1%" + }, + { + "hex": "#a3a3a3", + "hsl": "hsl(0,0%,63.9%)", + "rgb": "rgb(163,163,163)", + "scale": 400, + "rgbChannel": "163 163 163", + "hslChannel": "0 0% 63.9%" + }, + { + "hex": "#737373", + "hsl": "hsl(0,0%,45.1%)", + "rgb": "rgb(115,115,115)", + "scale": 500, + "rgbChannel": "115 115 115", + "hslChannel": "0 0% 45.1%" + }, + { + "hex": "#525252", + "hsl": "hsl(0,0%,32.2%)", + "rgb": "rgb(82,82,82)", + "scale": 600, + "rgbChannel": "82 82 82", + "hslChannel": "0 0% 32.2%" + }, + { + "hex": "#404040", + "hsl": "hsl(0,0%,25.1%)", + "rgb": "rgb(64,64,64)", + "scale": 700, + "rgbChannel": "64 64 64", + "hslChannel": "0 0% 25.1%" + }, + { + "hex": "#262626", + "hsl": "hsl(0,0%,14.9%)", + "rgb": "rgb(38,38,38)", + "scale": 800, + "rgbChannel": "38 38 38", + "hslChannel": "0 0% 14.9%" + }, + { + "hex": "#171717", + "hsl": "hsl(0,0%,9%)", + "rgb": "rgb(23,23,23)", + "scale": 900, + "rgbChannel": "23 23 23", + "hslChannel": "0 0% 9%" + }, + { + "hex": "#0a0a0a", + "hsl": "hsl(0,0%,3.9%)", + "rgb": "rgb(10,10,10)", + "scale": 950, + "rgbChannel": "10 10 10", + "hslChannel": "0 0% 3.9%" + } + ], + "orange": [ + { + "hex": "#fff7ed", + "hsl": "hsl(33.3,100%,96.5%)", + "rgb": "rgb(255,247,237)", + "scale": 50, + "rgbChannel": "255 247 237", + "hslChannel": "33.3 100% 96.5%" + }, + { + "hex": "#ffedd5", + "hsl": "hsl(34.3,100%,91.8%)", + "rgb": "rgb(255,237,213)", + "scale": 100, + "rgbChannel": "255 237 213", + "hslChannel": "34.3 100% 91.8%" + }, + { + "hex": "#fed7aa", + "hsl": "hsl(32.1,97.7%,83.1%)", + "rgb": "rgb(254,215,170)", + "scale": 200, + "rgbChannel": "254 215 170", + "hslChannel": "32.1 97.7% 83.1%" + }, + { + "hex": "#fdba74", + "hsl": "hsl(30.7,97.2%,72.4%)", + "rgb": "rgb(253,186,116)", + "scale": 300, + "rgbChannel": "253 186 116", + "hslChannel": "30.7 97.2% 72.4%" + }, + { + "hex": "#fb923c", + "hsl": "hsl(27,96%,61%)", + "rgb": "rgb(251,146,60)", + "scale": 400, + "rgbChannel": "251 146 60", + "hslChannel": "27 96% 61%" + }, + { + "hex": "#f97316", + "hsl": "hsl(24.6,95%,53.1%)", + "rgb": "rgb(249,115,22)", + "scale": 500, + "rgbChannel": "249 115 22", + "hslChannel": "24.6 95% 53.1%" + }, + { + "hex": "#ea580c", + "hsl": "hsl(20.5,90.2%,48.2%)", + "rgb": "rgb(234,88,12)", + "scale": 600, + "rgbChannel": "234 88 12", + "hslChannel": "20.5 90.2% 48.2%" + }, + { + "hex": "#c2410c", + "hsl": "hsl(17.5,88.3%,40.4%)", + "rgb": "rgb(194,65,12)", + "scale": 700, + "rgbChannel": "194 65 12", + "hslChannel": "17.5 88.3% 40.4%" + }, + { + "hex": "#9a3412", + "hsl": "hsl(15,79.1%,33.7%)", + "rgb": "rgb(154,52,18)", + "scale": 800, + "rgbChannel": "154 52 18", + "hslChannel": "15 79.1% 33.7%" + }, + { + "hex": "#7c2d12", + "hsl": "hsl(15.3,74.6%,27.8%)", + "rgb": "rgb(124,45,18)", + "scale": 900, + "rgbChannel": "124 45 18", + "hslChannel": "15.3 74.6% 27.8%" + }, + { + "hex": "#431407", + "hsl": "hsl(13,81.1%,14.5%)", + "rgb": "rgb(67,20,7)", + "scale": 950, + "rgbChannel": "67 20 7", + "hslChannel": "13 81.1% 14.5%" + } + ], + "pink": [ + { + "hex": "#fdf2f8", + "hsl": "hsl(327.3,73.3%,97.1%)", + "rgb": "rgb(253,242,248)", + "scale": 50, + "rgbChannel": "253 242 248", + "hslChannel": "327.3 73.3% 97.1%" + }, + { + "hex": "#fce7f3", + "hsl": "hsl(325.7,77.8%,94.7%)", + "rgb": "rgb(252,231,243)", + "scale": 100, + "rgbChannel": "252 231 243", + "hslChannel": "325.7 77.8% 94.7%" + }, + { + "hex": "#fbcfe8", + "hsl": "hsl(325.9,84.6%,89.8%)", + "rgb": "rgb(251,207,232)", + "scale": 200, + "rgbChannel": "251 207 232", + "hslChannel": "325.9 84.6% 89.8%" + }, + { + "hex": "#f9a8d4", + "hsl": "hsl(327.4,87.1%,81.8%)", + "rgb": "rgb(249,168,212)", + "scale": 300, + "rgbChannel": "249 168 212", + "hslChannel": "327.4 87.1% 81.8%" + }, + { + "hex": "#f472b6", + "hsl": "hsl(328.6,85.5%,70.2%)", + "rgb": "rgb(244,114,182)", + "scale": 400, + "rgbChannel": "244 114 182", + "hslChannel": "328.6 85.5% 70.2%" + }, + { + "hex": "#ec4899", + "hsl": "hsl(330.4,81.2%,60.4%)", + "rgb": "rgb(236,72,153)", + "scale": 500, + "rgbChannel": "236 72 153", + "hslChannel": "330.4 81.2% 60.4%" + }, + { + "hex": "#db2777", + "hsl": "hsl(333.3,71.4%,50.6%)", + "rgb": "rgb(219,39,119)", + "scale": 600, + "rgbChannel": "219 39 119", + "hslChannel": "333.3 71.4% 50.6%" + }, + { + "hex": "#be185d", + "hsl": "hsl(335.1,77.6%,42%)", + "rgb": "rgb(190,24,93)", + "scale": 700, + "rgbChannel": "190 24 93", + "hslChannel": "335.1 77.6% 42%" + }, + { + "hex": "#9d174d", + "hsl": "hsl(335.8,74.4%,35.3%)", + "rgb": "rgb(157,23,77)", + "scale": 800, + "rgbChannel": "157 23 77", + "hslChannel": "335.8 74.4% 35.3%" + }, + { + "hex": "#831843", + "hsl": "hsl(335.9,69%,30.4%)", + "rgb": "rgb(131,24,67)", + "scale": 900, + "rgbChannel": "131 24 67", + "hslChannel": "335.9 69% 30.4%" + }, + { + "hex": "#500724", + "hsl": "hsl(336.2,83.9%,17.1%)", + "rgb": "rgb(80,7,36)", + "scale": 950, + "rgbChannel": "80 7 36", + "hslChannel": "336.2 83.9% 17.1%" + } + ], + "purple": [ + { + "hex": "#faf5ff", + "hsl": "hsl(270,100%,98%)", + "rgb": "rgb(250,245,255)", + "scale": 50, + "rgbChannel": "250 245 255", + "hslChannel": "270 100% 98%" + }, + { + "hex": "#f3e8ff", + "hsl": "hsl(268.7,100%,95.5%)", + "rgb": "rgb(243,232,255)", + "scale": 100, + "rgbChannel": "243 232 255", + "hslChannel": "268.7 100% 95.5%" + }, + { + "hex": "#e9d5ff", + "hsl": "hsl(268.6,100%,91.8%)", + "rgb": "rgb(233,213,255)", + "scale": 200, + "rgbChannel": "233 213 255", + "hslChannel": "268.6 100% 91.8%" + }, + { + "hex": "#d8b4fe", + "hsl": "hsl(269.2,97.4%,85.1%)", + "rgb": "rgb(216,180,254)", + "scale": 300, + "rgbChannel": "216 180 254", + "hslChannel": "269.2 97.4% 85.1%" + }, + { + "hex": "#c084fc", + "hsl": "hsl(270,95.2%,75.3%)", + "rgb": "rgb(192,132,252)", + "scale": 400, + "rgbChannel": "192 132 252", + "hslChannel": "270 95.2% 75.3%" + }, + { + "hex": "#a855f7", + "hsl": "hsl(270.7,91%,65.1%)", + "rgb": "rgb(168,85,247)", + "scale": 500, + "rgbChannel": "168 85 247", + "hslChannel": "270.7 91% 65.1%" + }, + { + "hex": "#9333ea", + "hsl": "hsl(271.5,81.3%,55.9%)", + "rgb": "rgb(147,51,234)", + "scale": 600, + "rgbChannel": "147 51 234", + "hslChannel": "271.5 81.3% 55.9%" + }, + { + "hex": "#7e22ce", + "hsl": "hsl(272.1,71.7%,47.1%)", + "rgb": "rgb(126,34,206)", + "scale": 700, + "rgbChannel": "126 34 206", + "hslChannel": "272.1 71.7% 47.1%" + }, + { + "hex": "#6b21a8", + "hsl": "hsl(272.9,67.2%,39.4%)", + "rgb": "rgb(107,33,168)", + "scale": 800, + "rgbChannel": "107 33 168", + "hslChannel": "272.9 67.2% 39.4%" + }, + { + "hex": "#581c87", + "hsl": "hsl(273.6,65.6%,32%)", + "rgb": "rgb(88,28,135)", + "scale": 900, + "rgbChannel": "88 28 135", + "hslChannel": "273.6 65.6% 32%" + }, + { + "hex": "#3b0764", + "hsl": "hsl(273.5,86.9%,21%)", + "rgb": "rgb(59,7,100)", + "scale": 950, + "rgbChannel": "59 7 100", + "hslChannel": "273.5 86.9% 21%" + } + ], + "red": [ + { + "hex": "#fef2f2", + "hsl": "hsl(0,85.7%,97.3%)", + "rgb": "rgb(254,242,242)", + "scale": 50, + "rgbChannel": "254 242 242", + "hslChannel": "0 85.7% 97.3%" + }, + { + "hex": "#fee2e2", + "hsl": "hsl(0,93.3%,94.1%)", + "rgb": "rgb(254,226,226)", + "scale": 100, + "rgbChannel": "254 226 226", + "hslChannel": "0 93.3% 94.1%" + }, + { + "hex": "#fecaca", + "hsl": "hsl(0,96.3%,89.4%)", + "rgb": "rgb(254,202,202)", + "scale": 200, + "rgbChannel": "254 202 202", + "hslChannel": "0 96.3% 89.4%" + }, + { + "hex": "#fca5a5", + "hsl": "hsl(0,93.5%,81.8%)", + "rgb": "rgb(252,165,165)", + "scale": 300, + "rgbChannel": "252 165 165", + "hslChannel": "0 93.5% 81.8%" + }, + { + "hex": "#f87171", + "hsl": "hsl(0,90.6%,70.8%)", + "rgb": "rgb(248,113,113)", + "scale": 400, + "rgbChannel": "248 113 113", + "hslChannel": "0 90.6% 70.8%" + }, + { + "hex": "#ef4444", + "hsl": "hsl(0,84.2%,60.2%)", + "rgb": "rgb(239,68,68)", + "scale": 500, + "rgbChannel": "239 68 68", + "hslChannel": "0 84.2% 60.2%" + }, + { + "hex": "#dc2626", + "hsl": "hsl(0,72.2%,50.6%)", + "rgb": "rgb(220,38,38)", + "scale": 600, + "rgbChannel": "220 38 38", + "hslChannel": "0 72.2% 50.6%" + }, + { + "hex": "#b91c1c", + "hsl": "hsl(0,73.7%,41.8%)", + "rgb": "rgb(185,28,28)", + "scale": 700, + "rgbChannel": "185 28 28", + "hslChannel": "0 73.7% 41.8%" + }, + { + "hex": "#991b1b", + "hsl": "hsl(0,70%,35.3%)", + "rgb": "rgb(153,27,27)", + "scale": 800, + "rgbChannel": "153 27 27", + "hslChannel": "0 70% 35.3%" + }, + { + "hex": "#7f1d1d", + "hsl": "hsl(0,62.8%,30.6%)", + "rgb": "rgb(127,29,29)", + "scale": 900, + "rgbChannel": "127 29 29", + "hslChannel": "0 62.8% 30.6%" + }, + { + "hex": "#450a0a", + "hsl": "hsl(0,74.7%,15.5%)", + "rgb": "rgb(69,10,10)", + "scale": 950, + "rgbChannel": "69 10 10", + "hslChannel": "0 74.7% 15.5%" + } + ], + "rose": [ + { + "hex": "#fff1f2", + "hsl": "hsl(355.7,100%,97.3%)", + "rgb": "rgb(255,241,242)", + "scale": 50, + "rgbChannel": "255 241 242", + "hslChannel": "355.7 100% 97.3%" + }, + { + "hex": "#ffe4e6", + "hsl": "hsl(355.6,100%,94.7%)", + "rgb": "rgb(255,228,230)", + "scale": 100, + "rgbChannel": "255 228 230", + "hslChannel": "355.6 100% 94.7%" + }, + { + "hex": "#fecdd3", + "hsl": "hsl(352.7,96.1%,90%)", + "rgb": "rgb(254,205,211)", + "scale": 200, + "rgbChannel": "254 205 211", + "hslChannel": "352.7 96.1% 90%" + }, + { + "hex": "#fda4af", + "hsl": "hsl(352.6,95.7%,81.8%)", + "rgb": "rgb(253,164,175)", + "scale": 300, + "rgbChannel": "253 164 175", + "hslChannel": "352.6 95.7% 81.8%" + }, + { + "hex": "#fb7185", + "hsl": "hsl(351.3,94.5%,71.4%)", + "rgb": "rgb(251,113,133)", + "scale": 400, + "rgbChannel": "251 113 133", + "hslChannel": "351.3 94.5% 71.4%" + }, + { + "hex": "#f43f5e", + "hsl": "hsl(349.7,89.2%,60.2%)", + "rgb": "rgb(244,63,94)", + "scale": 500, + "rgbChannel": "244 63 94", + "hslChannel": "349.7 89.2% 60.2%" + }, + { + "hex": "#e11d48", + "hsl": "hsl(346.8,77.2%,49.8%)", + "rgb": "rgb(225,29,72)", + "scale": 600, + "rgbChannel": "225 29 72", + "hslChannel": "346.8 77.2% 49.8%" + }, + { + "hex": "#be123c", + "hsl": "hsl(345.3,82.7%,40.8%)", + "rgb": "rgb(190,18,60)", + "scale": 700, + "rgbChannel": "190 18 60", + "hslChannel": "345.3 82.7% 40.8%" + }, + { + "hex": "#9f1239", + "hsl": "hsl(343.4,79.7%,34.7%)", + "rgb": "rgb(159,18,57)", + "scale": 800, + "rgbChannel": "159 18 57", + "hslChannel": "343.4 79.7% 34.7%" + }, + { + "hex": "#881337", + "hsl": "hsl(341.5,75.5%,30.4%)", + "rgb": "rgb(136,19,55)", + "scale": 900, + "rgbChannel": "136 19 55", + "hslChannel": "341.5 75.5% 30.4%" + }, + { + "hex": "#4c0519", + "hsl": "hsl(343.1,87.7%,15.9%)", + "rgb": "rgb(76,5,25)", + "scale": 950, + "rgbChannel": "76 5 25", + "hslChannel": "343.1 87.7% 15.9%" + } + ], + "sky": [ + { + "hex": "#f0f9ff", + "hsl": "hsl(204,100%,97.1%)", + "rgb": "rgb(240,249,255)", + "scale": 50, + "rgbChannel": "240 249 255", + "hslChannel": "204 100% 97.1%" + }, + { + "hex": "#e0f2fe", + "hsl": "hsl(204,93.8%,93.7%)", + "rgb": "rgb(224,242,254)", + "scale": 100, + "rgbChannel": "224 242 254", + "hslChannel": "204 93.8% 93.7%" + }, + { + "hex": "#bae6fd", + "hsl": "hsl(200.6,94.4%,86.1%)", + "rgb": "rgb(186,230,253)", + "scale": 200, + "rgbChannel": "186 230 253", + "hslChannel": "200.6 94.4% 86.1%" + }, + { + "hex": "#7dd3fc", + "hsl": "hsl(199.4,95.5%,73.9%)", + "rgb": "rgb(125,211,252)", + "scale": 300, + "rgbChannel": "125 211 252", + "hslChannel": "199.4 95.5% 73.9%" + }, + { + "hex": "#38bdf8", + "hsl": "hsl(198.4,93.2%,59.6%)", + "rgb": "rgb(56,189,248)", + "scale": 400, + "rgbChannel": "56 189 248", + "hslChannel": "198.4 93.2% 59.6%" + }, + { + "hex": "#0ea5e9", + "hsl": "hsl(198.6,88.7%,48.4%)", + "rgb": "rgb(14,165,233)", + "scale": 500, + "rgbChannel": "14 165 233", + "hslChannel": "198.6 88.7% 48.4%" + }, + { + "hex": "#0284c7", + "hsl": "hsl(200.4,98%,39.4%)", + "rgb": "rgb(2,132,199)", + "scale": 600, + "rgbChannel": "2 132 199", + "hslChannel": "200.4 98% 39.4%" + }, + { + "hex": "#0369a1", + "hsl": "hsl(201.3,96.3%,32.2%)", + "rgb": "rgb(3,105,161)", + "scale": 700, + "rgbChannel": "3 105 161", + "hslChannel": "201.3 96.3% 32.2%" + }, + { + "hex": "#075985", + "hsl": "hsl(201,90%,27.5%)", + "rgb": "rgb(7,89,133)", + "scale": 800, + "rgbChannel": "7 89 133", + "hslChannel": "201 90% 27.5%" + }, + { + "hex": "#0c4a6e", + "hsl": "hsl(202,80.3%,23.9%)", + "rgb": "rgb(12,74,110)", + "scale": 900, + "rgbChannel": "12 74 110", + "hslChannel": "202 80.3% 23.9%" + }, + { + "hex": "#082f49", + "hsl": "hsl(204,80.2%,15.9%)", + "rgb": "rgb(8,47,73)", + "scale": 950, + "rgbChannel": "8 47 73", + "hslChannel": "204 80.2% 15.9%" + } + ], + "slate": [ + { + "hex": "#f8fafc", + "hsl": "hsl(210,40%,98%)", + "rgb": "rgb(248,250,252)", + "scale": 50, + "rgbChannel": "248 250 252", + "hslChannel": "210 40% 98%" + }, + { + "hex": "#f1f5f9", + "hsl": "hsl(210,40%,96.1%)", + "rgb": "rgb(241,245,249)", + "scale": 100, + "rgbChannel": "241 245 249", + "hslChannel": "210 40% 96.1%" + }, + { + "hex": "#e2e8f0", + "hsl": "hsl(214.3,31.8%,91.4%)", + "rgb": "rgb(226,232,240)", + "scale": 200, + "rgbChannel": "226 232 240", + "hslChannel": "214.3 31.8% 91.4%" + }, + { + "hex": "#cbd5e1", + "hsl": "hsl(212.7,26.8%,83.9%)", + "rgb": "rgb(203,213,225)", + "scale": 300, + "rgbChannel": "203 213 225", + "hslChannel": "212.7 26.8% 83.9%" + }, + { + "hex": "#94a3b8", + "hsl": "hsl(215,20.2%,65.1%)", + "rgb": "rgb(148,163,184)", + "scale": 400, + "rgbChannel": "148 163 184", + "hslChannel": "215 20.2% 65.1%" + }, + { + "hex": "#64748b", + "hsl": "hsl(215.4,16.3%,46.9%)", + "rgb": "rgb(100,116,139)", + "scale": 500, + "rgbChannel": "100 116 139", + "hslChannel": "215.4 16.3% 46.9%" + }, + { + "hex": "#475569", + "hsl": "hsl(215.3,19.3%,34.5%)", + "rgb": "rgb(71,85,105)", + "scale": 600, + "rgbChannel": "71 85 105", + "hslChannel": "215.3 19.3% 34.5%" + }, + { + "hex": "#334155", + "hsl": "hsl(215.3,25%,26.7%)", + "rgb": "rgb(51,65,85)", + "scale": 700, + "rgbChannel": "51 65 85", + "hslChannel": "215.3 25% 26.7%" + }, + { + "hex": "#1e293b", + "hsl": "hsl(217.2,32.6%,17.5%)", + "rgb": "rgb(30,41,59)", + "scale": 800, + "rgbChannel": "30 41 59", + "hslChannel": "217.2 32.6% 17.5%" + }, + { + "hex": "#0f172a", + "hsl": "hsl(222.2,47.4%,11.2%)", + "rgb": "rgb(15,23,42)", + "scale": 900, + "rgbChannel": "15 23 42", + "hslChannel": "222.2 47.4% 11.2%" + }, + { + "hex": "#020617", + "hsl": "hsl(222.2,84%,4.9%)", + "rgb": "rgb(2,6,23)", + "scale": 950, + "rgbChannel": "2 6 23", + "hslChannel": "222.2 84% 4.9%" + } + ], + "stone": [ + { + "hex": "#fafaf9", + "hsl": "hsl(60,9.1%,97.8%)", + "rgb": "rgb(250,250,249)", + "scale": 50, + "rgbChannel": "250 250 249", + "hslChannel": "60 9.1% 97.8%" + }, + { + "hex": "#f5f5f4", + "hsl": "hsl(60,4.8%,95.9%)", + "rgb": "rgb(245,245,244)", + "scale": 100, + "rgbChannel": "245 245 244", + "hslChannel": "60 4.8% 95.9%" + }, + { + "hex": "#e7e5e4", + "hsl": "hsl(20,5.9%,90%)", + "rgb": "rgb(231,229,228)", + "scale": 200, + "rgbChannel": "231 229 228", + "hslChannel": "20 5.9% 90%" + }, + { + "hex": "#d6d3d1", + "hsl": "hsl(24,5.7%,82.9%)", + "rgb": "rgb(214,211,209)", + "scale": 300, + "rgbChannel": "214 211 209", + "hslChannel": "24 5.7% 82.9%" + }, + { + "hex": "#a8a29e", + "hsl": "hsl(24,5.4%,63.9%)", + "rgb": "rgb(168,162,158)", + "scale": 400, + "rgbChannel": "168 162 158", + "hslChannel": "24 5.4% 63.9%" + }, + { + "hex": "#78716c", + "hsl": "hsl(25,5.3%,44.7%)", + "rgb": "rgb(120,113,108)", + "scale": 500, + "rgbChannel": "120 113 108", + "hslChannel": "25 5.3% 44.7%" + }, + { + "hex": "#57534e", + "hsl": "hsl(33.3,5.5%,32.4%)", + "rgb": "rgb(87,83,78)", + "scale": 600, + "rgbChannel": "87 83 78", + "hslChannel": "33.3 5.5% 32.4%" + }, + { + "hex": "#44403c", + "hsl": "hsl(30,6.3%,25.1%)", + "rgb": "rgb(68,64,60)", + "scale": 700, + "rgbChannel": "68 64 60", + "hslChannel": "30 6.3% 25.1%" + }, + { + "hex": "#292524", + "hsl": "hsl(12,6.5%,15.1%)", + "rgb": "rgb(41,37,36)", + "scale": 800, + "rgbChannel": "41 37 36", + "hslChannel": "12 6.5% 15.1%" + }, + { + "hex": "#1c1917", + "hsl": "hsl(24,9.8%,10%)", + "rgb": "rgb(28,25,23)", + "scale": 900, + "rgbChannel": "28 25 23", + "hslChannel": "24 9.8% 10%" + }, + { + "hex": "#0c0a09", + "hsl": "hsl(20,14.3%,4.1%)", + "rgb": "rgb(12,10,9)", + "scale": 950, + "rgbChannel": "12 10 9", + "hslChannel": "20 14.3% 4.1%" + } + ], + "teal": [ + { + "hex": "#f0fdfa", + "hsl": "hsl(166.2,76.5%,96.7%)", + "rgb": "rgb(240,253,250)", + "scale": 50, + "rgbChannel": "240 253 250", + "hslChannel": "166.2 76.5% 96.7%" + }, + { + "hex": "#ccfbf1", + "hsl": "hsl(167.2,85.5%,89.2%)", + "rgb": "rgb(204,251,241)", + "scale": 100, + "rgbChannel": "204 251 241", + "hslChannel": "167.2 85.5% 89.2%" + }, + { + "hex": "#99f6e4", + "hsl": "hsl(168.4,83.8%,78.2%)", + "rgb": "rgb(153,246,228)", + "scale": 200, + "rgbChannel": "153 246 228", + "hslChannel": "168.4 83.8% 78.2%" + }, + { + "hex": "#5eead4", + "hsl": "hsl(170.6,76.9%,64.3%)", + "rgb": "rgb(94,234,212)", + "scale": 300, + "rgbChannel": "94 234 212", + "hslChannel": "170.6 76.9% 64.3%" + }, + { + "hex": "#2dd4bf", + "hsl": "hsl(172.5,66%,50.4%)", + "rgb": "rgb(45,212,191)", + "scale": 400, + "rgbChannel": "45 212 191", + "hslChannel": "172.5 66% 50.4%" + }, + { + "hex": "#14b8a6", + "hsl": "hsl(173.4,80.4%,40%)", + "rgb": "rgb(20,184,166)", + "scale": 500, + "rgbChannel": "20 184 166", + "hslChannel": "173.4 80.4% 40%" + }, + { + "hex": "#0d9488", + "hsl": "hsl(174.7,83.9%,31.6%)", + "rgb": "rgb(13,148,136)", + "scale": 600, + "rgbChannel": "13 148 136", + "hslChannel": "174.7 83.9% 31.6%" + }, + { + "hex": "#0f766e", + "hsl": "hsl(175.3,77.4%,26.1%)", + "rgb": "rgb(15,118,110)", + "scale": 700, + "rgbChannel": "15 118 110", + "hslChannel": "175.3 77.4% 26.1%" + }, + { + "hex": "#115e59", + "hsl": "hsl(176.1,69.4%,21.8%)", + "rgb": "rgb(17,94,89)", + "scale": 800, + "rgbChannel": "17 94 89", + "hslChannel": "176.1 69.4% 21.8%" + }, + { + "hex": "#134e4a", + "hsl": "hsl(175.9,60.8%,19%)", + "rgb": "rgb(19,78,74)", + "scale": 900, + "rgbChannel": "19 78 74", + "hslChannel": "175.9 60.8% 19%" + }, + { + "hex": "#042f2e", + "hsl": "hsl(178.6,84.3%,10%)", + "rgb": "rgb(4,47,46)", + "scale": 950, + "rgbChannel": "4 47 46", + "hslChannel": "178.6 84.3% 10%" + } + ], + "transparent": "transparent", + "violet": [ + { + "hex": "#f5f3ff", + "hsl": "hsl(250,100%,97.6%)", + "rgb": "rgb(245,243,255)", + "scale": 50, + "rgbChannel": "245 243 255", + "hslChannel": "250 100% 97.6%" + }, + { + "hex": "#ede9fe", + "hsl": "hsl(251.4,91.3%,95.5%)", + "rgb": "rgb(237,233,254)", + "scale": 100, + "rgbChannel": "237 233 254", + "hslChannel": "251.4 91.3% 95.5%" + }, + { + "hex": "#ddd6fe", + "hsl": "hsl(250.5,95.2%,91.8%)", + "rgb": "rgb(221,214,254)", + "scale": 200, + "rgbChannel": "221 214 254", + "hslChannel": "250.5 95.2% 91.8%" + }, + { + "hex": "#c4b5fd", + "hsl": "hsl(252.5,94.7%,85.1%)", + "rgb": "rgb(196,181,253)", + "scale": 300, + "rgbChannel": "196 181 253", + "hslChannel": "252.5 94.7% 85.1%" + }, + { + "hex": "#a78bfa", + "hsl": "hsl(255.1,91.7%,76.3%)", + "rgb": "rgb(167,139,250)", + "scale": 400, + "rgbChannel": "167 139 250", + "hslChannel": "255.1 91.7% 76.3%" + }, + { + "hex": "#8b5cf6", + "hsl": "hsl(258.3,89.5%,66.3%)", + "rgb": "rgb(139,92,246)", + "scale": 500, + "rgbChannel": "139 92 246", + "hslChannel": "258.3 89.5% 66.3%" + }, + { + "hex": "#7c3aed", + "hsl": "hsl(262.1,83.3%,57.8%)", + "rgb": "rgb(124,58,237)", + "scale": 600, + "rgbChannel": "124 58 237", + "hslChannel": "262.1 83.3% 57.8%" + }, + { + "hex": "#6d28d9", + "hsl": "hsl(263.4,70%,50.4%)", + "rgb": "rgb(109,40,217)", + "scale": 700, + "rgbChannel": "109 40 217", + "hslChannel": "263.4 70% 50.4%" + }, + { + "hex": "#5b21b6", + "hsl": "hsl(263.4,69.3%,42.2%)", + "rgb": "rgb(91,33,182)", + "scale": 800, + "rgbChannel": "91 33 182", + "hslChannel": "263.4 69.3% 42.2%" + }, + { + "hex": "#4c1d95", + "hsl": "hsl(263.5,67.4%,34.9%)", + "rgb": "rgb(76,29,149)", + "scale": 900, + "rgbChannel": "76 29 149", + "hslChannel": "263.5 67.4% 34.9%" + }, + { + "hex": "#1e1b4b", + "hsl": "hsl(261.2,72.6%,22.9%)", + "rgb": "rgb(46,16,101)", + "scale": 950, + "rgbChannel": "46 16 101", + "hslChannel": "261.2 72.6% 22.9%" + } + ], + "white": { + "hex": "#ffffff", + "hsl": "hsl(0,0%,100%)", + "rgb": "rgb(255,255,255)", + "rgbChannel": "255 255 255", + "hslChannel": "0 0% 100%" + }, + "yellow": [ + { + "hex": "#fefce8", + "hsl": "hsl(54.5,91.7%,95.3%)", + "rgb": "rgb(254,252,232)", + "scale": 50, + "rgbChannel": "254 252 232", + "hslChannel": "54.5 91.7% 95.3%" + }, + { + "hex": "#fef9c3", + "hsl": "hsl(54.9,96.7%,88%)", + "rgb": "rgb(254,249,195)", + "scale": 100, + "rgbChannel": "254 249 195", + "hslChannel": "54.9 96.7% 88%" + }, + { + "hex": "#fef08a", + "hsl": "hsl(52.8,98.3%,76.9%)", + "rgb": "rgb(254,240,138)", + "scale": 200, + "rgbChannel": "254 240 138", + "hslChannel": "52.8 98.3% 76.9%" + }, + { + "hex": "#fde047", + "hsl": "hsl(50.4,97.8%,63.5%)", + "rgb": "rgb(253,224,71)", + "scale": 300, + "rgbChannel": "253 224 71", + "hslChannel": "50.4 97.8% 63.5%" + }, + { + "hex": "#facc15", + "hsl": "hsl(47.9,95.8%,53.1%)", + "rgb": "rgb(250,204,21)", + "scale": 400, + "rgbChannel": "250 204 21", + "hslChannel": "47.9 95.8% 53.1%" + }, + { + "hex": "#eab308", + "hsl": "hsl(45.4,93.4%,47.5%)", + "rgb": "rgb(234,179,8)", + "scale": 500, + "rgbChannel": "234 179 8", + "hslChannel": "45.4 93.4% 47.5%" + }, + { + "hex": "#ca8a04", + "hsl": "hsl(40.6,96.1%,40.4%)", + "rgb": "rgb(202,138,4)", + "scale": 600, + "rgbChannel": "202 138 4", + "hslChannel": "40.6 96.1% 40.4%" + }, + { + "hex": "#a16207", + "hsl": "hsl(35.5,91.7%,32.9%)", + "rgb": "rgb(161,98,7)", + "scale": 700, + "rgbChannel": "161 98 7", + "hslChannel": "35.5 91.7% 32.9%" + }, + { + "hex": "#854d0e", + "hsl": "hsl(31.8,81%,28.8%)", + "rgb": "rgb(133,77,14)", + "scale": 800, + "rgbChannel": "133 77 14", + "hslChannel": "31.8 81% 28.8%" + }, + { + "hex": "#713f12", + "hsl": "hsl(28.4,72.5%,25.7%)", + "rgb": "rgb(113,63,18)", + "scale": 900, + "rgbChannel": "113 63 18", + "hslChannel": "28.4 72.5% 25.7%" + }, + { + "hex": "#422006", + "hsl": "hsl(26,83.3%,14.1%)", + "rgb": "rgb(66,32,6)", + "scale": 950, + "rgbChannel": "66 32 6", + "hslChannel": "26 83.3% 14.1%" + } + ], + "zinc": [ + { + "hex": "#fafafa", + "hsl": "hsl(0,0%,98%)", + "rgb": "rgb(250,250,250)", + "scale": 50, + "rgbChannel": "250 250 250", + "hslChannel": "0 0% 98%" + }, + { + "hex": "#f4f4f5", + "hsl": "hsl(240,4.8%,95.9%)", + "rgb": "rgb(244,244,245)", + "scale": 100, + "rgbChannel": "244 244 245", + "hslChannel": "240 4.8% 95.9%" + }, + { + "hex": "#e4e4e7", + "hsl": "hsl(240,5.9%,90%)", + "rgb": "rgb(228,228,231)", + "scale": 200, + "rgbChannel": "228 228 231", + "hslChannel": "240 5.9% 90%" + }, + { + "hex": "#d4d4d8", + "hsl": "hsl(240,4.9%,83.9%)", + "rgb": "rgb(212,212,216)", + "scale": 300, + "rgbChannel": "212 212 216", + "hslChannel": "240 4.9% 83.9%" + }, + { + "hex": "#a1a1aa", + "hsl": "hsl(240,5%,64.9%)", + "rgb": "rgb(161,161,170)", + "scale": 400, + "rgbChannel": "161 161 170", + "hslChannel": "240 5% 64.9%" + }, + { + "hex": "#71717a", + "hsl": "hsl(240,3.8%,46.1%)", + "rgb": "rgb(113,113,122)", + "scale": 500, + "rgbChannel": "113 113 122", + "hslChannel": "240 3.8% 46.1%" + }, + { + "hex": "#52525b", + "hsl": "hsl(240,5.2%,33.9%)", + "rgb": "rgb(82,82,91)", + "scale": 600, + "rgbChannel": "82 82 91", + "hslChannel": "240 5.2% 33.9%" + }, + { + "hex": "#3f3f46", + "hsl": "hsl(240,5.3%,26.1%)", + "rgb": "rgb(63,63,70)", + "scale": 700, + "rgbChannel": "63 63 70", + "hslChannel": "240 5.3% 26.1%" + }, + { + "hex": "#27272a", + "hsl": "hsl(240,3.7%,15.9%)", + "rgb": "rgb(39,39,42)", + "scale": 800, + "rgbChannel": "39 39 42", + "hslChannel": "240 3.7% 15.9%" + }, + { + "hex": "#18181b", + "hsl": "hsl(240,5.9%,10%)", + "rgb": "rgb(24,24,27)", + "scale": 900, + "rgbChannel": "24 24 27", + "hslChannel": "240 5.9% 10%" + }, + { + "hex": "#09090b", + "hsl": "hsl(240,10%,3.9%)", + "rgb": "rgb(9,9,11)", + "scale": 950, + "rgbChannel": "9 9 11", + "hslChannel": "240 10% 3.9%" + } + ] +} \ No newline at end of file diff --git a/apps/www/public/r/colors/neutral.json b/apps/www/public/r/colors/neutral.json new file mode 100644 index 0000000000..d5188ec25d --- /dev/null +++ b/apps/www/public/r/colors/neutral.json @@ -0,0 +1,92 @@ +{ + "inlineColors": { + "dark": { + "accent": "neutral-800", + "accent-foreground": "neutral-50", + "background": "neutral-950", + "border": "neutral-800", + "card": "neutral-950", + "card-foreground": "neutral-50", + "destructive": "red-900", + "destructive-foreground": "neutral-50", + "foreground": "neutral-50", + "input": "neutral-800", + "muted": "neutral-800", + "muted-foreground": "neutral-400", + "popover": "neutral-950", + "popover-foreground": "neutral-50", + "primary": "neutral-50", + "primary-foreground": "neutral-900", + "ring": "neutral-300", + "secondary": "neutral-800", + "secondary-foreground": "neutral-50" + }, + "light": { + "accent": "neutral-100", + "accent-foreground": "neutral-900", + "background": "white", + "border": "neutral-200", + "card": "white", + "card-foreground": "neutral-950", + "destructive": "red-500", + "destructive-foreground": "neutral-50", + "foreground": "neutral-950", + "input": "neutral-200", + "muted": "neutral-100", + "muted-foreground": "neutral-500", + "popover": "white", + "popover-foreground": "neutral-950", + "primary": "neutral-900", + "primary-foreground": "neutral-50", + "ring": "neutral-950", + "secondary": "neutral-100", + "secondary-foreground": "neutral-900" + } + }, + "cssVars": { + "dark": { + "accent": "0 0% 14.9%", + "accent-foreground": "0 0% 98%", + "background": "0 0% 3.9%", + "border": "0 0% 14.9%", + "card": "0 0% 3.9%", + "card-foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + "foreground": "0 0% 98%", + "input": "0 0% 14.9%", + "muted": "0 0% 14.9%", + "muted-foreground": "0 0% 63.9%", + "popover": "0 0% 3.9%", + "popover-foreground": "0 0% 98%", + "primary": "0 0% 98%", + "primary-foreground": "0 0% 9%", + "ring": "0 0% 83.1%", + "secondary": "0 0% 14.9%", + "secondary-foreground": "0 0% 98%" + }, + "light": { + "accent": "0 0% 96.1%", + "accent-foreground": "0 0% 9%", + "background": "0 0% 100%", + "border": "0 0% 89.8%", + "card": "0 0% 100%", + "card-foreground": "0 0% 3.9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "foreground": "0 0% 3.9%", + "input": "0 0% 89.8%", + "muted": "0 0% 96.1%", + "muted-foreground": "0 0% 45.1%", + "popover": "0 0% 100%", + "popover-foreground": "0 0% 3.9%", + "primary": "0 0% 9%", + "primary-foreground": "0 0% 98%", + "ring": "0 0% 3.9%", + "secondary": "0 0% 96.1%", + "secondary-foreground": "0 0% 9%" + } + }, + "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" +} \ No newline at end of file diff --git a/apps/www/public/r/colors/slate.json b/apps/www/public/r/colors/slate.json new file mode 100644 index 0000000000..56b7d98725 --- /dev/null +++ b/apps/www/public/r/colors/slate.json @@ -0,0 +1,92 @@ +{ + "inlineColors": { + "dark": { + "accent": "slate-800", + "accent-foreground": "slate-50", + "background": "slate-950", + "border": "slate-800", + "card": "slate-950", + "card-foreground": "slate-50", + "destructive": "red-900", + "destructive-foreground": "slate-50", + "foreground": "slate-50", + "input": "slate-800", + "muted": "slate-800", + "muted-foreground": "slate-400", + "popover": "slate-950", + "popover-foreground": "slate-50", + "primary": "slate-50", + "primary-foreground": "slate-900", + "ring": "slate-300", + "secondary": "slate-800", + "secondary-foreground": "slate-50" + }, + "light": { + "accent": "slate-100", + "accent-foreground": "slate-900", + "background": "white", + "border": "slate-200", + "card": "white", + "card-foreground": "slate-950", + "destructive": "red-500", + "destructive-foreground": "slate-50", + "foreground": "slate-950", + "input": "slate-200", + "muted": "slate-100", + "muted-foreground": "slate-500", + "popover": "white", + "popover-foreground": "slate-950", + "primary": "slate-900", + "primary-foreground": "slate-50", + "ring": "slate-950", + "secondary": "slate-100", + "secondary-foreground": "slate-900" + } + }, + "cssVars": { + "dark": { + "accent": "217.2 32.6% 17.5%", + "accent-foreground": "210 40% 98%", + "background": "222.2 84% 4.9%", + "border": "217.2 32.6% 17.5%", + "card": "222.2 84% 4.9%", + "card-foreground": "210 40% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 40% 98%", + "foreground": "210 40% 98%", + "input": "217.2 32.6% 17.5%", + "muted": "217.2 32.6% 17.5%", + "muted-foreground": "215 20.2% 65.1%", + "popover": "222.2 84% 4.9%", + "popover-foreground": "210 40% 98%", + "primary": "210 40% 98%", + "primary-foreground": "222.2 47.4% 11.2%", + "ring": "212.7 26.8% 83.9%", + "secondary": "217.2 32.6% 17.5%", + "secondary-foreground": "210 40% 98%" + }, + "light": { + "accent": "210 40% 96.1%", + "accent-foreground": "222.2 47.4% 11.2%", + "background": "0 0% 100%", + "border": "214.3 31.8% 91.4%", + "card": "0 0% 100%", + "card-foreground": "222.2 84% 4.9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 40% 98%", + "foreground": "222.2 84% 4.9%", + "input": "214.3 31.8% 91.4%", + "muted": "210 40% 96.1%", + "muted-foreground": "215.4 16.3% 46.9%", + "popover": "0 0% 100%", + "popover-foreground": "222.2 84% 4.9%", + "primary": "222.2 47.4% 11.2%", + "primary-foreground": "210 40% 98%", + "ring": "222.2 84% 4.9%", + "secondary": "210 40% 96.1%", + "secondary-foreground": "222.2 47.4% 11.2%" + } + }, + "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" +} \ No newline at end of file diff --git a/apps/www/public/r/colors/stone.json b/apps/www/public/r/colors/stone.json new file mode 100644 index 0000000000..89cd6dff50 --- /dev/null +++ b/apps/www/public/r/colors/stone.json @@ -0,0 +1,92 @@ +{ + "inlineColors": { + "dark": { + "accent": "stone-800", + "accent-foreground": "stone-50", + "background": "stone-950", + "border": "stone-800", + "card": "stone-950", + "card-foreground": "stone-50", + "destructive": "red-900", + "destructive-foreground": "stone-50", + "foreground": "stone-50", + "input": "stone-800", + "muted": "stone-800", + "muted-foreground": "stone-400", + "popover": "stone-950", + "popover-foreground": "stone-50", + "primary": "stone-50", + "primary-foreground": "stone-900", + "ring": "stone-300", + "secondary": "stone-800", + "secondary-foreground": "stone-50" + }, + "light": { + "accent": "stone-100", + "accent-foreground": "stone-900", + "background": "white", + "border": "stone-200", + "card": "white", + "card-foreground": "stone-950", + "destructive": "red-500", + "destructive-foreground": "stone-50", + "foreground": "stone-950", + "input": "stone-200", + "muted": "stone-100", + "muted-foreground": "stone-500", + "popover": "white", + "popover-foreground": "stone-950", + "primary": "stone-900", + "primary-foreground": "stone-50", + "ring": "stone-950", + "secondary": "stone-100", + "secondary-foreground": "stone-900" + } + }, + "cssVars": { + "dark": { + "accent": "12 6.5% 15.1%", + "accent-foreground": "60 9.1% 97.8%", + "background": "20 14.3% 4.1%", + "border": "12 6.5% 15.1%", + "card": "20 14.3% 4.1%", + "card-foreground": "60 9.1% 97.8%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "60 9.1% 97.8%", + "foreground": "60 9.1% 97.8%", + "input": "12 6.5% 15.1%", + "muted": "12 6.5% 15.1%", + "muted-foreground": "24 5.4% 63.9%", + "popover": "20 14.3% 4.1%", + "popover-foreground": "60 9.1% 97.8%", + "primary": "60 9.1% 97.8%", + "primary-foreground": "24 9.8% 10%", + "ring": "24 5.7% 82.9%", + "secondary": "12 6.5% 15.1%", + "secondary-foreground": "60 9.1% 97.8%" + }, + "light": { + "accent": "60 4.8% 95.9%", + "accent-foreground": "24 9.8% 10%", + "background": "0 0% 100%", + "border": "20 5.9% 90%", + "card": "0 0% 100%", + "card-foreground": "20 14.3% 4.1%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "60 9.1% 97.8%", + "foreground": "20 14.3% 4.1%", + "input": "20 5.9% 90%", + "muted": "60 4.8% 95.9%", + "muted-foreground": "25 5.3% 44.7%", + "popover": "0 0% 100%", + "popover-foreground": "20 14.3% 4.1%", + "primary": "24 9.8% 10%", + "primary-foreground": "60 9.1% 97.8%", + "ring": "20 14.3% 4.1%", + "secondary": "60 4.8% 95.9%", + "secondary-foreground": "24 9.8% 10%" + } + }, + "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" +} \ No newline at end of file diff --git a/apps/www/public/r/colors/zinc.json b/apps/www/public/r/colors/zinc.json new file mode 100644 index 0000000000..940841648e --- /dev/null +++ b/apps/www/public/r/colors/zinc.json @@ -0,0 +1,92 @@ +{ + "inlineColors": { + "dark": { + "accent": "zinc-800", + "accent-foreground": "zinc-50", + "background": "zinc-950", + "border": "zinc-800", + "card": "zinc-950", + "card-foreground": "zinc-50", + "destructive": "red-900", + "destructive-foreground": "zinc-50", + "foreground": "zinc-50", + "input": "zinc-800", + "muted": "zinc-800", + "muted-foreground": "zinc-400", + "popover": "zinc-950", + "popover-foreground": "zinc-50", + "primary": "zinc-50", + "primary-foreground": "zinc-900", + "ring": "zinc-300", + "secondary": "zinc-800", + "secondary-foreground": "zinc-50" + }, + "light": { + "accent": "zinc-100", + "accent-foreground": "zinc-900", + "background": "white", + "border": "zinc-200", + "card": "white", + "card-foreground": "zinc-950", + "destructive": "red-500", + "destructive-foreground": "zinc-50", + "foreground": "zinc-950", + "input": "zinc-200", + "muted": "zinc-100", + "muted-foreground": "zinc-500", + "popover": "white", + "popover-foreground": "zinc-950", + "primary": "zinc-900", + "primary-foreground": "zinc-50", + "ring": "zinc-950", + "secondary": "zinc-100", + "secondary-foreground": "zinc-900" + } + }, + "cssVars": { + "dark": { + "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%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "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": "0 0% 98%", + "primary-foreground": "240 5.9% 10%", + "ring": "240 4.9% 83.9%", + "secondary": "240 3.7% 15.9%", + "secondary-foreground": "0 0% 98%" + }, + "light": { + "accent": "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + "background": "0 0% 100%", + "border": "240 5.9% 90%", + "card": "0 0% 100%", + "card-foreground": "240 10% 3.9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "foreground": "240 10% 3.9%", + "input": "240 5.9% 90%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "240 5.9% 10%", + "primary-foreground": "0 0% 98%", + "ring": "240 10% 3.9%", + "secondary": "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%" + } + }, + "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ", + "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" +} \ No newline at end of file diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json new file mode 100644 index 0000000000..05a1d3220d --- /dev/null +++ b/apps/www/public/r/index.json @@ -0,0 +1,1242 @@ +[ + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/editor.tsx", + "type": "registry:ui" + } + ], + "name": "editor", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-cloud" + ], + "files": [ + { + "path": "plate-ui/cloud.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/cloud-attachment-element.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/cloud-image-element.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/cloud-resize-controls.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/cloud-status-bar.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/cloud-toolbar-buttons.tsx", + "type": "registry:ui" + } + ], + "name": "cloud", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-code-block" + ], + "files": [ + { + "path": "plate-ui/code-block-element.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/code-block-element.css", + "type": "registry:ui" + }, + { + "path": "plate-ui/code-block-combobox.tsx", + "type": "registry:ui" + } + ], + "name": "code-block-element", + "registryDependencies": [ + "command" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-layout" + ], + "files": [ + { + "path": "plate-ui/column-element.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/column-group-element.tsx", + "type": "registry:ui" + } + ], + "name": "column-element", + "registryDependencies": [ + "command", + "resizable" + ], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/color-dropdown-menu.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/color-constants.ts", + "type": "registry:ui" + }, + { + "path": "plate-ui/color-dropdown-menu-items.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/color-input.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/color-picker.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/colors-custom.tsx", + "type": "registry:ui" + } + ], + "name": "color-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar", + "separator", + "button", + "tooltip" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-comments" + ], + "files": [ + { + "path": "plate-ui/comments-popover.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-avatar.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-create-form.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-item.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-more-dropdown.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-reply-items.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-resolve-button.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/comment-value.tsx", + "type": "registry:ui" + } + ], + "name": "comments-popover", + "registryDependencies": [ + "popover", + "avatar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-dnd", + "react-dnd", + "react-dnd-html5-backend" + ], + "files": [ + { + "path": "plate-ui/draggable.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/with-draggables.tsx", + "type": "registry:ui" + } + ], + "name": "draggable", + "registryDependencies": [ + "tooltip" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-popover" + ], + "files": [ + { + "path": "plate-ui/emoji-dropdown-menu.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-toolbar-dropdown.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-icons.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-picker.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-picker-content.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-picker-navigation.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-picker-preview.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-picker-search-and-clear.tsx", + "type": "registry:ui" + }, + { + "path": "plate-ui/emoji-picker-search-bar.tsx", + "type": "registry:ui" + } + ], + "name": "emoji-dropdown-menu", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-emoji" + ], + "files": [ + { + "path": "plate-ui/emoji-input-element.tsx", + "type": "registry:ui" + } + ], + "name": "emoji-input-element", + "registryDependencies": [ + "inline-combobox" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-alignment" + ], + "files": [ + { + "path": "plate-ui/align-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "align-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-avatar" + ], + "files": [ + { + "path": "plate-ui/avatar.tsx", + "type": "registry:ui" + } + ], + "name": "avatar", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-block-quote" + ], + "files": [ + { + "path": "plate-ui/blockquote-element.tsx", + "type": "registry:ui" + } + ], + "name": "blockquote-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-date" + ], + "files": [ + { + "path": "plate-ui/date-element.tsx", + "type": "registry:ui" + } + ], + "name": "date-element", + "registryDependencies": [ + "calendar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "react-day-picker@8.10.1", + "date-fns" + ], + "files": [ + { + "path": "plate-ui/calendar.tsx", + "type": "registry:ui" + } + ], + "name": "calendar", + "registryDependencies": [ + "button" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-slot" + ], + "files": [ + { + "path": "plate-ui/button.tsx", + "type": "registry:ui" + } + ], + "name": "button", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-caption" + ], + "files": [ + { + "path": "plate-ui/caption.tsx", + "type": "registry:ui" + } + ], + "name": "caption", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-checkbox" + ], + "files": [ + { + "path": "plate-ui/checkbox.tsx", + "type": "registry:ui" + } + ], + "name": "checkbox", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "path": "plate-ui/code-leaf.tsx", + "type": "registry:ui" + } + ], + "name": "code-leaf", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-code-block" + ], + "files": [ + { + "path": "plate-ui/code-line-element.tsx", + "type": "registry:ui" + } + ], + "name": "code-line-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-code-block" + ], + "files": [ + { + "path": "plate-ui/code-syntax-leaf.tsx", + "type": "registry:ui" + } + ], + "name": "code-syntax-leaf", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "cmdk" + ], + "files": [ + { + "path": "plate-ui/command.tsx", + "type": "registry:ui" + } + ], + "name": "command", + "registryDependencies": [ + "dialog" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-comments" + ], + "files": [ + { + "path": "plate-ui/comment-leaf.tsx", + "type": "registry:ui" + } + ], + "name": "comment-leaf", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/comment-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "comment-toolbar-button", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/cursor-overlay.tsx", + "type": "registry:ui" + } + ], + "name": "cursor-overlay", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-dialog" + ], + "files": [ + { + "path": "plate-ui/dialog.tsx", + "type": "registry:ui" + } + ], + "name": "dialog", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-dropdown-menu" + ], + "files": [ + { + "path": "plate-ui/dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "dropdown-menu", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-excalidraw" + ], + "files": [ + { + "path": "plate-ui/excalidraw-element.tsx", + "type": "registry:ui" + } + ], + "name": "excalidraw-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/fixed-toolbar.tsx", + "type": "registry:ui" + } + ], + "name": "fixed-toolbar", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "path": "plate-ui/fixed-toolbar-buttons.tsx", + "type": "registry:ui" + } + ], + "name": "fixed-toolbar-buttons", + "registryDependencies": [ + "toolbar", + "insert-dropdown-menu", + "mark-toolbar-button", + "mode-dropdown-menu", + "turn-into-dropdown-menu" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-floating" + ], + "files": [ + { + "path": "plate-ui/floating-toolbar.tsx", + "type": "registry:ui" + } + ], + "name": "floating-toolbar", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "path": "plate-ui/floating-toolbar-buttons.tsx", + "type": "registry:ui" + } + ], + "name": "floating-toolbar-buttons", + "registryDependencies": [ + "mark-toolbar-button", + "more-dropdown-menu", + "turn-into-dropdown-menu" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-heading" + ], + "files": [ + { + "path": "plate-ui/heading-element.tsx", + "type": "registry:ui" + } + ], + "name": "heading-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-highlight" + ], + "files": [ + { + "path": "plate-ui/highlight-leaf.tsx", + "type": "registry:ui" + } + ], + "name": "highlight-leaf", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-horizontal-rule" + ], + "files": [ + { + "path": "plate-ui/hr-element.tsx", + "type": "registry:ui" + } + ], + "name": "hr-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-media" + ], + "files": [ + { + "path": "plate-ui/image-element.tsx", + "type": "registry:ui" + } + ], + "name": "image-element", + "registryDependencies": [ + "media-popover", + "caption", + "resizable" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-indent-list" + ], + "files": [ + { + "path": "plate-ui/indent-list-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "indent-list-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-indent" + ], + "files": [ + { + "path": "plate-ui/indent-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "indent-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@ariakit/react", + "@udecode/plate-combobox" + ], + "files": [ + { + "path": "plate-ui/inline-combobox.tsx", + "type": "registry:ui" + } + ], + "name": "inline-combobox", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/input.tsx", + "type": "registry:ui" + } + ], + "name": "input", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-block-quote", + "@udecode/plate-heading" + ], + "files": [ + { + "path": "plate-ui/insert-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "insert-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-kbd" + ], + "files": [ + { + "path": "plate-ui/kbd-leaf.tsx", + "type": "registry:ui" + } + ], + "name": "kbd-leaf", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-line-height" + ], + "files": [ + { + "path": "plate-ui/line-height-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "line-height-dropdown-menu", + "registryDependencies": [ + "toolbar", + "dropdown-menu" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-link" + ], + "files": [ + { + "path": "plate-ui/link-element.tsx", + "type": "registry:ui" + } + ], + "name": "link-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-link" + ], + "files": [ + { + "path": "plate-ui/link-floating-toolbar.tsx", + "type": "registry:ui" + } + ], + "name": "link-floating-toolbar", + "registryDependencies": [ + "button", + "input", + "popover", + "separator" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-link" + ], + "files": [ + { + "path": "plate-ui/link-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "link-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-list" + ], + "files": [ + { + "path": "plate-ui/list-element.tsx", + "type": "registry:ui" + } + ], + "name": "list-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-list" + ], + "files": [ + { + "path": "plate-ui/list-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "list-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "path": "plate-ui/mark-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "mark-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-media", + "react-tweet", + "react-lite-youtube-embed" + ], + "files": [ + { + "path": "plate-ui/media-embed-element.tsx", + "type": "registry:ui" + } + ], + "name": "media-embed-element", + "registryDependencies": [ + "media-popover", + "caption", + "resizable" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-media" + ], + "files": [ + { + "path": "plate-ui/media-popover.tsx", + "type": "registry:ui" + } + ], + "name": "media-popover", + "registryDependencies": [ + "button", + "input", + "popover", + "separator" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-media" + ], + "files": [ + { + "path": "plate-ui/media-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "media-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-mention" + ], + "files": [ + { + "path": "plate-ui/mention-element.tsx", + "type": "registry:ui" + } + ], + "name": "mention-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-mention" + ], + "files": [ + { + "path": "plate-ui/mention-input-element.tsx", + "type": "registry:ui" + } + ], + "name": "mention-input-element", + "registryDependencies": [ + "inline-combobox" + ], + "type": "registry:ui" + }, + { + "dependencies": [], + "files": [ + { + "path": "plate-ui/mode-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "mode-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "path": "plate-ui/more-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "more-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-indent" + ], + "files": [ + { + "path": "plate-ui/outdent-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "outdent-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "files": [ + { + "path": "plate-ui/paragraph-element.tsx", + "type": "registry:ui" + } + ], + "name": "paragraph-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-heading" + ], + "files": [ + { + "path": "plate-ui/placeholder.tsx", + "type": "registry:ui" + } + ], + "name": "placeholder", + "registryDependencies": [ + "paragraph-element" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-popover" + ], + "files": [ + { + "path": "plate-ui/popover.tsx", + "type": "registry:ui" + } + ], + "name": "popover", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-find-replace" + ], + "files": [ + { + "path": "plate-ui/search-highlight-leaf.tsx", + "type": "registry:ui" + } + ], + "name": "search-highlight-leaf", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-separator" + ], + "files": [ + { + "path": "plate-ui/separator.tsx", + "type": "registry:ui" + } + ], + "name": "separator", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-heading", + "@udecode/plate-indent-list" + ], + "files": [ + { + "path": "plate-ui/slash-input-element.tsx", + "type": "registry:ui" + } + ], + "name": "slash-input-element", + "registryDependencies": [ + "inline-combobox" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "path": "plate-ui/table-cell-element.tsx", + "type": "registry:ui" + } + ], + "name": "table-cell-element", + "registryDependencies": [ + "resizable" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "path": "plate-ui/table-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "table-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "path": "plate-ui/table-element.tsx", + "type": "registry:ui" + } + ], + "name": "table-element", + "registryDependencies": [ + "dropdown-menu" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "path": "plate-ui/table-row-element.tsx", + "type": "registry:ui" + } + ], + "name": "table-row-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-list" + ], + "files": [ + { + "path": "plate-ui/todo-list-element.tsx", + "type": "registry:ui" + } + ], + "name": "todo-list-element", + "registryDependencies": [ + "checkbox" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-toggle" + ], + "files": [ + { + "path": "plate-ui/toggle-element.tsx", + "type": "registry:ui" + } + ], + "name": "toggle-element", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-toggle" + ], + "files": [ + { + "path": "plate-ui/toggle-toolbar-button.tsx", + "type": "registry:ui" + } + ], + "name": "toggle-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-toolbar" + ], + "files": [ + { + "path": "plate-ui/toolbar.tsx", + "type": "registry:ui" + } + ], + "name": "toolbar", + "registryDependencies": [ + "tooltip", + "separator" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@radix-ui/react-tooltip" + ], + "files": [ + { + "path": "plate-ui/tooltip.tsx", + "type": "registry:ui" + } + ], + "name": "tooltip", + "registryDependencies": [], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-block-quote", + "@udecode/plate-heading" + ], + "files": [ + { + "path": "plate-ui/turn-into-dropdown-menu.tsx", + "type": "registry:ui" + } + ], + "name": "turn-into-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" + }, + { + "dependencies": [ + "@udecode/plate-resizable" + ], + "files": [ + { + "path": "plate-ui/resizable.tsx", + "type": "registry:ui" + } + ], + "name": "resizable", + "registryDependencies": [], + "type": "registry:ui" + } +] \ No newline at end of file diff --git a/apps/www/public/r/styles/default/align-dropdown-menu.json b/apps/www/public/r/styles/default/align-dropdown-menu.json new file mode 100644 index 0000000000..c7021beead --- /dev/null +++ b/apps/www/public/r/styles/default/align-dropdown-menu.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "@udecode/plate-alignment" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n \n \n \n \n \n \n\n \n \n {items.map(({ icon: Icon, value: itemValue }) => (\n \n \n \n ))}\n \n \n \n );\n}\n", + "path": "plate-ui/align-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "align-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/avatar.json b/apps/www/public/r/styles/default/avatar.json new file mode 100644 index 0000000000..70bcfc351e --- /dev/null +++ b/apps/www/public/r/styles/default/avatar.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-avatar" + ], + "files": [ + { + "content": "'use client';\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { withCn } from '@udecode/cn';\n\nexport const Avatar = withCn(\n AvatarPrimitive.Root,\n 'relative flex size-10 shrink-0 overflow-hidden rounded-full'\n);\n\nexport const AvatarImage = withCn(\n AvatarPrimitive.Image,\n 'aspect-square size-full'\n);\n\nexport const AvatarFallback = withCn(\n AvatarPrimitive.Fallback,\n 'flex size-full items-center justify-center rounded-full bg-muted'\n);\n", + "path": "plate-ui/avatar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "avatar", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/blockquote-element.json b/apps/www/public/r/styles/default/blockquote-element.json new file mode 100644 index 0000000000..5b55d29b44 --- /dev/null +++ b/apps/www/public/r/styles/default/blockquote-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-block-quote" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n
{children}
\n \n );\n }\n);\n", + "path": "plate-ui/blockquote-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "blockquote-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/button.json b/apps/www/public/r/styles/default/button.json new file mode 100644 index 0000000000..7beeda0cdc --- /dev/null +++ b/apps/www/public/r/styles/default/button.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-slot" + ], + "files": [ + { + "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n defaultVariants: {\n size: 'default',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n size: {\n default: 'h-10 px-4 py-2',\n icon: 'size-10',\n lg: 'h-11 rounded-md px-8',\n none: '',\n sm: 'h-9 rounded-md px-3',\n sms: 'size-9 rounded-md px-0',\n xs: 'h-8 rounded-md px-3',\n },\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", + "path": "plate-ui/button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "button", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/calendar.json b/apps/www/public/r/styles/default/calendar.json new file mode 100644 index 0000000000..1b6e34ceec --- /dev/null +++ b/apps/www/public/r/styles/default/calendar.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "react-day-picker@8.10.1", + "date-fns" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\n\nimport { cn } from '@udecode/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { buttonVariants } from './button';\n\nexport type CalendarProps = React.ComponentProps;\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n ,\n IconRight: () => ,\n }}\n showOutsideDays={showOutsideDays}\n {...props}\n />\n );\n}\n\nCalendar.displayName = 'Calendar';\n\nexport { Calendar };\n", + "path": "plate-ui/calendar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "calendar", + "registryDependencies": [ + "button" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/caption.json b/apps/www/public/r/styles/default/caption.json new file mode 100644 index 0000000000..0b54b6daeb --- /dev/null +++ b/apps/www/public/r/styles/default/caption.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-caption" + ], + "files": [ + { + "content": "import {\n cn,\n createPrimitiveComponent,\n withCn,\n withVariants,\n} from '@udecode/cn';\nimport {\n Caption as CaptionPrimitive,\n CaptionTextarea as CaptionTextareaPrimitive,\n useCaptionButton,\n useCaptionButtonState,\n} from '@udecode/plate-caption/react';\nimport { cva } from 'class-variance-authority';\n\nimport { Button } from './button';\n\nconst captionVariants = cva('max-w-full', {\n defaultVariants: {\n align: 'center',\n },\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n 'align',\n]);\n\nexport const CaptionTextarea = withCn(\n CaptionTextareaPrimitive,\n cn(\n 'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n 'focus:outline-none focus:[&::placeholder]:opacity-0',\n 'text-center print:placeholder:text-transparent'\n )\n);\n\nexport const CaptionButton = createPrimitiveComponent(Button)({\n propsHook: useCaptionButton,\n stateHook: useCaptionButtonState,\n});\n", + "path": "plate-ui/caption.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "caption", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/checkbox.json b/apps/www/public/r/styles/default/checkbox.json new file mode 100644 index 0000000000..fa82dd5000 --- /dev/null +++ b/apps/www/public/r/styles/default/checkbox.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-checkbox" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Checkbox = withRef(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n )\n);\n", + "path": "plate-ui/checkbox.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "checkbox", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/cloud.json b/apps/www/public/r/styles/default/cloud.json new file mode 100644 index 0000000000..e0bdc07c42 --- /dev/null +++ b/apps/www/public/r/styles/default/cloud.json @@ -0,0 +1,46 @@ +{ + "dependencies": [ + "@udecode/plate-cloud" + ], + "files": [ + { + "content": "export * from './cloud-attachment-element';\n\nexport * from './cloud-image-element';\n\nexport * from './cloud-resize-controls';\n\nexport * from './cloud-status-bar';\n\nexport * from './cloud-toolbar-buttons';\n", + "path": "plate-ui/cloud.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudAttachmentElement,\n useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n extends PlateElementProps {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n
\n \n
\n
\n
{element.filename}
\n \n
\n {element.bytes} bytes\n
\n
\n
\n \n {upload.status === 'success' && (\n \n \n \n )}\n \n {children}\n \n );\n}\n", + "path": "plate-ui/cloud-attachment-element.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps {}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, setSize, size, src, srcSet, upload } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n }}\n contentEditable={false}\n >\n {src === '' ? (\n \n ) : (\n \n )}\n
\n \n
\n {selected && focused && (\n \n )}\n \n {children}\n \n );\n}\n", + "path": "plate-ui/cloud-image-element.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React, {\n type Dispatch,\n type SetStateAction,\n useCallback,\n useRef,\n useState,\n} from 'react';\n\nimport { resizeInWidth } from '@portive/client';\nimport {\n type TCloudImageElement,\n CloudImagePlugin,\n} from '@udecode/plate-cloud';\nimport { setNodes } from '@udecode/plate-common';\nimport { findNodePath, useEditorRef } from '@udecode/plate-common/react';\n\ntype ImageSize = { height: number; width: number };\n\ntype SetImageSize = Dispatch>;\n\n/** The resize label that shows the width/height of the image */\nfunction ResizeLabel({ size }: { size: { height: number; width: number } }) {\n const isBelow = size.width < 100 || size.height < 100;\n const bottom = isBelow ? -24 : 4;\n\n return (\n \n {size.width} × {size.height}\n \n );\n}\n\n/** The little divets on the resize handle bar. */\nconst barStyle = {\n background: 'rgba(255,255,255,0.75)',\n height: 16,\n position: 'absolute',\n top: 8,\n width: 1,\n} as const;\n\n/** The handle used to drag resize an image */\nfunction ResizeHandles({\n onMouseDown,\n}: {\n onMouseDown: React.MouseEventHandler;\n}) {\n return (\n <>\n {/* Invisible Handle */}\n \n {/* Visible Handle */}\n \n
\n
\n
\n
\n
\n \n );\n}\n\nexport function ResizeControls({\n element,\n setSize,\n size,\n}: {\n element: TCloudImageElement;\n setSize: SetImageSize;\n size: ImageSize;\n}) {\n const editor = useEditorRef();\n const [isResizing, setIsResizing] = useState(false);\n\n const { maxResizeWidth, minResizeWidth } =\n editor.getOptions(CloudImagePlugin);\n\n const currentSizeRef = useRef<{ height: number; width: number }>();\n\n const onMouseDown = useCallback(\n (mouseDownEvent: React.MouseEvent) => {\n setIsResizing(true);\n const startX = mouseDownEvent.clientX;\n const startWidth = size.width;\n const minWidth = minResizeWidth;\n const maxWidth = Math.min(element.maxWidth, maxResizeWidth);\n\n /**\n * Handle resize dragging through an event handler on mouseMove on the\n * document.\n */\n function onDocumentMouseMove(mouseMoveEvent: MouseEvent) {\n mouseMoveEvent.preventDefault();\n mouseMoveEvent.stopPropagation();\n /** Calculate the proposed width based on drag position */\n const proposedWidth = startWidth + mouseMoveEvent.clientX - startX;\n\n /** Constrain the proposed with between min, max and original width */\n const nextWidth = Math.min(maxWidth, Math.max(minWidth, proposedWidth));\n\n const currentSize = resizeInWidth(\n { height: element.maxHeight, width: element.maxWidth },\n nextWidth\n );\n\n currentSizeRef.current = currentSize;\n setSize(currentSize);\n }\n\n const originalCursor = document.body.style.cursor;\n\n /** When the user releases the mouse, remove all the event handlers */\n function onDocumentMouseUp() {\n setIsResizing(false);\n document.removeEventListener('mousemove', onDocumentMouseMove);\n document.removeEventListener('mouseup', onDocumentMouseUp);\n document.body.style.cursor = originalCursor;\n\n const at = findNodePath(editor, element);\n\n if (!currentSizeRef.current) return;\n\n setNodes(editor, currentSizeRef.current, { at });\n }\n\n /** Attach document event listeners */\n document.addEventListener('mousemove', onDocumentMouseMove);\n document.addEventListener('mouseup', onDocumentMouseUp);\n\n /**\n * While dragging, we want the cursor to be `ew-resize` (left-right arrow)\n * even if the cursor happens to not be exactly on the handle at the\n * moment due to a delay in the cursor moving to a location and the image\n * resizing to it.\n *\n * Also, image has max width/height and the cursor can fall outside of it.\n */\n document.body.style.cursor = 'ew-resize';\n },\n [size.width, minResizeWidth, element, maxResizeWidth, setSize, editor]\n );\n\n if (element.width < minResizeWidth) return null;\n\n return (\n <>\n {isResizing ? : null}\n \n \n );\n}\n", + "path": "plate-ui/cloud-resize-controls.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';\n\nimport type { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nimport { cn } from '@udecode/cn';\n\nexport function ProgressBar({\n className,\n upload,\n ...props\n}: {\n upload: UploadProgress;\n} & HTMLAttributes) {\n const [width, setWidth] = useState(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) setWidth(ref.current.offsetWidth);\n }, []);\n\n /**\n * This formula looks a little funny because we want the `0` value of the\n * progress bar to have a width that is still the height of the progress bar.\n *\n * This is for a few reasons:\n *\n * 1. We want the zero point to start with the progress bar being a circle\n * 2. If we want rounded edges, if the width is shorter than the height, we get\n * an oval instead of a circle\n * 3. The halfway point looks visually wrong because of the circle progress bar\n * when it is technically at the halfway point.\n */\n const progressWidth =\n width == null\n ? 0\n : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n return (\n \n \n
\n );\n}\n\nexport function FailBar({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n );\n}\n\nexport function StatusBar(props: {\n upload: Upload;\n children?: React.ReactNode;\n}) {\n const { children, upload } = props;\n\n switch (upload.status) {\n case 'progress': {\n return ;\n }\n case 'error': {\n return Upload Failed;\n }\n case 'not-found': {\n return Uploading...;\n }\n case 'success': {\n return children || null;\n }\n default: {\n throw new Error(`Should be unreachable`);\n }\n }\n}\n", + "path": "plate-ui/cloud-status-bar.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { CloudPlugin } from '@udecode/plate-cloud';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nconst buttonStyle: React.CSSProperties = {\n background: '#f0f0f0',\n border: 'none',\n cursor: 'pointer',\n marginRight: 4,\n padding: 8,\n};\n\nexport function CloudToolbarButtons() {\n const { api, editor } = useEditorPlugin(CloudPlugin);\n\n const getSaveValue = () => {\n console.info('editor.children', editor.children);\n console.info('editor.cloud.getSaveValue()', api.cloud.getSaveValue());\n };\n\n const finishUploads = async () => {\n await api.cloud.finishUploads();\n };\n\n return (\n <>\n \n \n \n Note: After clicking a button, output will be shown in console.\n \n \n );\n}\n", + "path": "plate-ui/cloud-toolbar-buttons.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "cloud", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/code-block-element.json b/apps/www/public/r/styles/default/code-block-element.json new file mode 100644 index 0000000000..8690146cfd --- /dev/null +++ b/apps/www/public/r/styles/default/code-block-element.json @@ -0,0 +1,30 @@ +{ + "dependencies": [ + "@udecode/plate-code-block" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n \n
\n          {children}\n        
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n }\n);\n", + "path": "plate-ui/code-block-element.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": ".slate-code_block code[class*='language-'],\n.slate-code_block pre[class*='language-'] {\n background: hsl(230, 1%, 98%);\n color: hsl(230, 8%, 24%);\n font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',\n monospace;\n direction: ltr;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n line-height: 1.5;\n -moz-tab-size: 2;\n -o-tab-size: 2;\n tab-size: 2;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n}\n\n/* Selection */\n.slate-code_block code[class*='language-']::-moz-selection,\n.slate-code_block code[class*='language-'] *::-moz-selection,\n.slate-code_block pre[class*='language-'] *::-moz-selection {\n background: hsl(230, 1%, 90%);\n color: inherit;\n}\n\n.slate-code_block code[class*='language-']::selection,\n.slate-code_block code[class*='language-'] *::selection,\n.slate-code_block pre[class*='language-'] *::selection {\n background: hsl(230, 1%, 90%);\n color: inherit;\n}\n\n/* Code blocks */\n.slate-code_block pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border-radius: 0.3em;\n}\n\n/* Inline code */\n.slate-code_block :not(pre) > code[class*='language-'] {\n padding: 0.2em 0.3em;\n border-radius: 0.3em;\n white-space: normal;\n}\n\n.token.comment,\n.token.prolog,\n.token.cdata {\n color: hsl(230, 4%, 64%);\n}\n\n.token.doctype,\n.token.punctuation,\n.token.entity {\n color: hsl(230, 8%, 24%);\n}\n\n.token.attr-name,\n.token.class-name,\n.token.boolean,\n.token.constant,\n.token.number,\n.token.atrule {\n color: hsl(35, 99%, 36%);\n}\n\n.token.keyword {\n color: hsl(301, 63%, 40%);\n}\n\n.token.property,\n.token.tag,\n.token.symbol,\n.token.deleted,\n.token.important {\n color: hsl(5, 74%, 59%);\n}\n\n.token.selector,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted,\n.token.regex,\n.token.attr-value,\n.token.attr-value > .token.punctuation {\n color: hsl(119, 34%, 47%);\n}\n\n.token.variable,\n.token.operator,\n.token.function {\n color: hsl(221, 87%, 60%);\n}\n\n.token.url {\n color: hsl(198, 99%, 37%);\n}\n\n/* HTML overrides */\n.token.attr-value > .token.punctuation.attr-equals,\n.token.special-attr > .token.attr-value > .token.value.css {\n color: hsl(230, 8%, 24%);\n}\n\n/* CSS overrides */\n.language-css .token.selector {\n color: hsl(5, 74%, 59%);\n}\n\n.language-css .token.property {\n color: hsl(230, 8%, 24%);\n}\n\n.language-css .token.function,\n.language-css .token.url > .token.function {\n color: hsl(198, 99%, 37%);\n}\n\n.language-css .token.url > .token.string.url {\n color: hsl(119, 34%, 47%);\n}\n\n.language-css .token.important,\n.language-css .token.atrule .token.rule {\n color: hsl(301, 63%, 40%);\n}\n\n/* JS overrides */\n.language-javascript .token.operator {\n color: hsl(301, 63%, 40%);\n}\n\n.language-javascript\n .token.template-string\n > .token.interpolation\n > .token.interpolation-punctuation.punctuation {\n color: hsl(344, 84%, 43%);\n}\n\n/* JSON overrides */\n.language-json .token.operator {\n color: hsl(230, 8%, 24%);\n}\n\n.language-json .token.null.keyword {\n color: hsl(35, 99%, 36%);\n}\n\n/* MD overrides */\n.language-markdown .token.url,\n.language-markdown .token.url > .token.operator,\n.language-markdown .token.url-reference.url > .token.string {\n color: hsl(230, 8%, 24%);\n}\n\n.language-markdown .token.url > .token.content {\n color: hsl(221, 87%, 60%);\n}\n\n.language-markdown .token.url > .token.url,\n.language-markdown .token.url-reference.url {\n color: hsl(198, 99%, 37%);\n}\n\n.language-markdown .token.blockquote.punctuation,\n.language-markdown .token.hr.punctuation {\n color: hsl(230, 4%, 64%);\n font-style: italic;\n}\n\n.language-markdown .token.code-snippet {\n color: hsl(119, 34%, 47%);\n}\n\n.language-markdown .token.bold .token.content {\n color: hsl(35, 99%, 36%);\n}\n\n.language-markdown .token.italic .token.content {\n color: hsl(301, 63%, 40%);\n}\n\n.language-markdown .token.strike .token.content,\n.language-markdown .token.strike .token.punctuation,\n.language-markdown .token.list.punctuation,\n.language-markdown .token.title.important > .token.punctuation {\n color: hsl(5, 74%, 59%);\n}\n\n/* General */\n.token.bold {\n font-weight: bold;\n}\n\n.token.comment,\n.token.italic {\n font-style: italic;\n}\n\n.token.entity {\n cursor: help;\n}\n\n.token.namespace {\n opacity: 0.8;\n}\n\n/* Plugin overrides */\n/* Selectors should have higher specificity than those in the plugins' default stylesheets */\n\n/* Show Invisibles plugin overrides */\n.token.token.tab:not(:empty):before,\n.token.token.cr:before,\n.token.token.lf:before,\n.token.token.space:before {\n color: hsla(230, 8%, 24%, 0.2);\n}\n\n/* Toolbar plugin overrides */\n/* Space out all buttons and move them away from the right edge of the code block */\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item {\n margin-right: 0.4em;\n}\n\n/* Styling the buttons */\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > button,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > a,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > span {\n background: hsl(230, 1%, 90%);\n color: hsl(230, 6%, 44%);\n padding: 0.1em 0.4em;\n border-radius: 0.3em;\n}\n\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,\ndiv.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {\n background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */\n color: hsl(230, 8%, 24%);\n}\n\n/* Line Highlight plugin overrides */\n/* The highlighted line itself */\n.line-highlight.line-highlight {\n background: hsla(230, 8%, 24%, 0.05);\n}\n\n/* Default line numbers in Line Highlight plugin */\n.line-highlight.line-highlight:before,\n.line-highlight.line-highlight[data-end]:after {\n background: hsl(230, 1%, 90%);\n color: hsl(230, 8%, 24%);\n padding: 0.1em 0.6em;\n border-radius: 0.3em;\n box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */\n}\n\n/* Hovering over a linkable line number (in the gutter area) */\n/* Requires Line Numbers plugin as well */\npre[id].linkable-line-numbers.linkable-line-numbers\n span.line-numbers-rows\n > span:hover:before {\n background-color: hsla(230, 8%, 24%, 0.05);\n}\n\n/* Line Numbers and Command Line plugins overrides */\n/* Line separating gutter from coding area */\n.line-numbers.line-numbers .line-numbers-rows,\n.command-line .command-line-prompt {\n border-right-color: hsla(230, 8%, 24%, 0.2);\n}\n\n/* Stuff in the gutter */\n.line-numbers .line-numbers-rows > span:before,\n.command-line .command-line-prompt > span:before {\n color: hsl(230, 1%, 62%);\n}\n\n/* Match Braces plugin overrides */\n/* Note: Outline colour is inherited from the braces */\n.rainbow-braces .token.token.punctuation.brace-level-1,\n.rainbow-braces .token.token.punctuation.brace-level-5,\n.rainbow-braces .token.token.punctuation.brace-level-9 {\n color: hsl(5, 74%, 59%);\n}\n\n.rainbow-braces .token.token.punctuation.brace-level-2,\n.rainbow-braces .token.token.punctuation.brace-level-6,\n.rainbow-braces .token.token.punctuation.brace-level-10 {\n color: hsl(119, 34%, 47%);\n}\n\n.rainbow-braces .token.token.punctuation.brace-level-3,\n.rainbow-braces .token.token.punctuation.brace-level-7,\n.rainbow-braces .token.token.punctuation.brace-level-11 {\n color: hsl(221, 87%, 60%);\n}\n\n.rainbow-braces .token.token.punctuation.brace-level-4,\n.rainbow-braces .token.token.punctuation.brace-level-8,\n.rainbow-braces .token.token.punctuation.brace-level-12 {\n color: hsl(301, 63%, 40%);\n}\n\n/* Diff Highlight plugin overrides */\n/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */\npre.diff-highlight > code .token.token.deleted:not(.prefix),\npre > code.diff-highlight .token.token.deleted:not(.prefix) {\n background-color: hsla(353, 100%, 66%, 0.15);\n}\n\npre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,\npre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {\n background-color: hsla(353, 95%, 66%, 0.25);\n}\n\npre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,\npre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,\npre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {\n background-color: hsla(353, 95%, 66%, 0.25);\n}\n\npre.diff-highlight > code .token.token.inserted:not(.prefix),\npre > code.diff-highlight .token.token.inserted:not(.prefix) {\n background-color: hsla(137, 100%, 55%, 0.15);\n}\n\npre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,\npre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {\n background-color: hsla(135, 73%, 55%, 0.25);\n}\n\npre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,\npre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,\npre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {\n background-color: hsla(135, 73%, 55%, 0.25);\n}\n\n/* Previewers plugin overrides */\n/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */\n/* Border around popup */\n.prism-previewer.prism-previewer:before,\n.prism-previewer-gradient.prism-previewer-gradient div {\n border-color: hsl(0, 0, 95%);\n}\n\n/* Angle and time should remain as circles and are hence not included */\n.prism-previewer-color.prism-previewer-color:before,\n.prism-previewer-gradient.prism-previewer-gradient div,\n.prism-previewer-easing.prism-previewer-easing:before {\n border-radius: 0.3em;\n}\n\n/* Triangles pointing to the code */\n.prism-previewer.prism-previewer:after {\n border-top-color: hsl(0, 0, 95%);\n}\n\n.prism-previewer-flipped.prism-previewer-flipped.after {\n border-bottom-color: hsl(0, 0, 95%);\n}\n\n/* Background colour within the popup */\n.prism-previewer-angle.prism-previewer-angle:before,\n.prism-previewer-time.prism-previewer-time:before,\n.prism-previewer-easing.prism-previewer-easing {\n background: hsl(0, 0%, 100%);\n}\n\n/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */\n/* For time, this is the alternate colour */\n.prism-previewer-angle.prism-previewer-angle circle,\n.prism-previewer-time.prism-previewer-time circle {\n stroke: hsl(230, 8%, 24%);\n stroke-opacity: 1;\n}\n\n/* Stroke colours of the handle, direction point, and vector itself */\n.prism-previewer-easing.prism-previewer-easing circle,\n.prism-previewer-easing.prism-previewer-easing path,\n.prism-previewer-easing.prism-previewer-easing line {\n stroke: hsl(230, 8%, 24%);\n}\n\n/* Fill colour of the handle */\n.prism-previewer-easing.prism-previewer-easing circle {\n fill: transparent;\n}\n", + "path": "plate-ui/code-block-element.css", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\n/* eslint-disable unicorn/prefer-export-from */\n\nimport React, { useState } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block/react';\n// Prism must be imported before all language files\nimport Prism from 'prismjs';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nimport 'prismjs/components/prism-antlr4.js';\nimport 'prismjs/components/prism-bash.js';\nimport 'prismjs/components/prism-c.js';\nimport 'prismjs/components/prism-cmake.js';\nimport 'prismjs/components/prism-coffeescript.js';\nimport 'prismjs/components/prism-cpp.js';\nimport 'prismjs/components/prism-csharp.js';\nimport 'prismjs/components/prism-css.js';\nimport 'prismjs/components/prism-dart.js';\n// import 'prismjs/components/prism-django.js';\nimport 'prismjs/components/prism-docker.js';\n// import 'prismjs/components/prism-ejs.js';\nimport 'prismjs/components/prism-erlang.js';\nimport 'prismjs/components/prism-git.js';\nimport 'prismjs/components/prism-go.js';\nimport 'prismjs/components/prism-graphql.js';\nimport 'prismjs/components/prism-groovy.js';\nimport 'prismjs/components/prism-java.js';\nimport 'prismjs/components/prism-javascript.js';\nimport 'prismjs/components/prism-json.js';\nimport 'prismjs/components/prism-jsx.js';\nimport 'prismjs/components/prism-kotlin.js';\nimport 'prismjs/components/prism-latex.js';\nimport 'prismjs/components/prism-less.js';\nimport 'prismjs/components/prism-lua.js';\nimport 'prismjs/components/prism-makefile.js';\nimport 'prismjs/components/prism-markdown.js';\nimport 'prismjs/components/prism-matlab.js';\nimport 'prismjs/components/prism-mermaid.js';\nimport 'prismjs/components/prism-objectivec.js';\nimport 'prismjs/components/prism-perl.js';\n// import 'prismjs/components/prism-php.js';\nimport 'prismjs/components/prism-powershell.js';\nimport 'prismjs/components/prism-properties.js';\nimport 'prismjs/components/prism-protobuf.js';\nimport 'prismjs/components/prism-python.js';\nimport 'prismjs/components/prism-r.js';\nimport 'prismjs/components/prism-ruby.js';\nimport 'prismjs/components/prism-sass.js';\nimport 'prismjs/components/prism-scala.js';\nimport 'prismjs/components/prism-scheme.js';\nimport 'prismjs/components/prism-scss.js';\nimport 'prismjs/components/prism-sql.js';\nimport 'prismjs/components/prism-swift.js';\nimport 'prismjs/components/prism-tsx.js';\nimport 'prismjs/components/prism-typescript.js';\nimport 'prismjs/components/prism-wasm.js';\nimport 'prismjs/components/prism-yaml.js';\n\nexport { Prism };\n\nconst languages: { label: string; value: string }[] = [\n { label: 'Plain Text', value: 'text' },\n { label: 'Bash', value: 'bash' },\n { label: 'CSS', value: 'css' },\n { label: 'Git', value: 'git' },\n { label: 'GraphQL', value: 'graphql' },\n { label: 'HTML', value: 'html' },\n { label: 'JavaScript', value: 'javascript' },\n { label: 'JSON', value: 'json' },\n { label: 'JSX', value: 'jsx' },\n { label: 'Markdown', value: 'markdown' },\n { label: 'SQL', value: 'sql' },\n { label: 'SVG', value: 'svg' },\n { label: 'TSX', value: 'tsx' },\n { label: 'TypeScript', value: 'typescript' },\n { label: 'WebAssembly', value: 'wasm' },\n { label: 'ANTLR4', value: 'antlr4' },\n { label: 'C', value: 'c' },\n { label: 'CMake', value: 'cmake' },\n { label: 'CoffeeScript', value: 'coffeescript' },\n { label: 'C#', value: 'csharp' },\n { label: 'Dart', value: 'dart' },\n { label: 'Django', value: 'django' },\n { label: 'Docker', value: 'docker' },\n { label: 'EJS', value: 'ejs' },\n { label: 'Erlang', value: 'erlang' },\n { label: 'Go', value: 'go' },\n { label: 'Groovy', value: 'groovy' },\n { label: 'Java', value: 'java' },\n { label: 'Kotlin', value: 'kotlin' },\n { label: 'LaTeX', value: 'latex' },\n { label: 'Less', value: 'less' },\n { label: 'Lua', value: 'lua' },\n { label: 'Makefile', value: 'makefile' },\n { label: 'Markup', value: 'markup' },\n { label: 'MATLAB', value: 'matlab' },\n { label: 'Mermaid', value: 'mermaid' },\n { label: 'Objective-C', value: 'objectivec' },\n { label: 'Perl', value: 'perl' },\n { label: 'PHP', value: 'php' },\n { label: 'PowerShell', value: 'powershell' },\n { label: '.properties', value: 'properties' },\n { label: 'Protocol Buffers', value: 'protobuf' },\n { label: 'Python', value: 'python' },\n { label: 'R', value: 'r' },\n { label: 'Ruby', value: 'ruby' },\n { label: 'Sass (Sass)', value: 'sass' },\n // FIXME: Error with current scala grammar\n { label: 'Scala', value: 'scala' },\n { label: 'Scheme', value: 'scheme' },\n { label: 'Sass (Scss)', value: 'scss' },\n { label: 'Shell', value: 'shell' },\n { label: 'Swift', value: 'swift' },\n { label: 'XML', value: 'xml' },\n { label: 'YAML', value: 'yaml' },\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n const [value, setValue] = useState('');\n\n if (state.readOnly) return null;\n\n const items = languages.filter(\n (language) =>\n !value ||\n language.label.toLowerCase().includes(value.toLowerCase()) ||\n language.value.toLowerCase().includes(value.toLowerCase())\n );\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n setValue(value)}\n placeholder=\"Search language...\"\n />\n No language found.\n\n \n {items.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n", + "path": "plate-ui/code-block-combobox.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "code-block-element", + "registryDependencies": [ + "command" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/code-leaf.json b/apps/www/public/r/styles/default/code-leaf.json new file mode 100644 index 0000000000..8bad418f95 --- /dev/null +++ b/apps/www/public/r/styles/default/code-leaf.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n", + "path": "plate-ui/code-leaf.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "code-leaf", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/code-line-element.json b/apps/www/public/r/styles/default/code-line-element.json new file mode 100644 index 0000000000..eed0120cb4 --- /dev/null +++ b/apps/www/public/r/styles/default/code-line-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-code-block" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const CodeLineElement = withRef((props, ref) => (\n \n));\n", + "path": "plate-ui/code-line-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "code-line-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/code-syntax-leaf.json b/apps/www/public/r/styles/default/code-syntax-leaf.json new file mode 100644 index 0000000000..aee34edf07 --- /dev/null +++ b/apps/www/public/r/styles/default/code-syntax-leaf.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-code-block" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useCodeSyntaxLeaf } from '@udecode/plate-code-block/react';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeSyntaxLeaf = withRef(\n ({ children, ...props }, ref) => {\n const { leaf } = props;\n\n const { tokenProps } = useCodeSyntaxLeaf({ leaf });\n\n return (\n \n {children}\n \n );\n }\n);\n", + "path": "plate-ui/code-syntax-leaf.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "code-syntax-leaf", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/color-dropdown-menu.json b/apps/www/public/r/styles/default/color-dropdown-menu.json new file mode 100644 index 0000000000..efc5a7ad01 --- /dev/null +++ b/apps/www/public/r/styles/default/color-dropdown-menu.json @@ -0,0 +1,50 @@ +{ + "dependencies": [], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useColorDropdownMenu,\n useColorDropdownMenuState,\n} from '@udecode/plate-font/react';\n\nimport { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';\nimport { ColorPicker } from './color-picker';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport type TColor = {\n isBrightColor: boolean;\n name: string;\n value: string;\n};\n\ntype ColorDropdownMenuProps = {\n nodeType: string;\n tooltip?: string;\n} & DropdownMenuProps;\n\nexport function ColorDropdownMenu({\n children,\n nodeType,\n tooltip,\n}: ColorDropdownMenuProps) {\n const state = useColorDropdownMenuState({\n closeOnSelect: true,\n colors: DEFAULT_COLORS,\n customColors: DEFAULT_CUSTOM_COLORS,\n nodeType,\n });\n\n const { buttonProps, menuProps } = useColorDropdownMenu(state);\n\n return (\n \n \n \n {children}\n \n \n\n \n \n \n \n );\n}\n", + "path": "plate-ui/color-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "export const DEFAULT_COLORS = [\n {\n isBrightColor: false,\n name: 'black',\n value: '#000000',\n },\n {\n isBrightColor: false,\n name: 'dark grey 4',\n value: '#434343',\n },\n {\n isBrightColor: false,\n name: 'dark grey 3',\n value: '#666666',\n },\n {\n isBrightColor: false,\n name: 'dark grey 2',\n value: '#999999',\n },\n {\n isBrightColor: false,\n name: 'dark grey 1',\n value: '#B7B7B7',\n },\n {\n isBrightColor: false,\n name: 'grey',\n value: '#CCCCCC',\n },\n {\n isBrightColor: false,\n name: 'light grey 1',\n value: '#D9D9D9',\n },\n {\n isBrightColor: true,\n name: 'light grey 2',\n value: '#EFEFEF',\n },\n {\n isBrightColor: true,\n name: 'light grey 3',\n value: '#F3F3F3',\n },\n {\n isBrightColor: true,\n name: 'white',\n value: '#FFFFFF',\n },\n {\n isBrightColor: false,\n name: 'red berry',\n value: '#980100',\n },\n {\n isBrightColor: false,\n name: 'red',\n value: '#FE0000',\n },\n {\n isBrightColor: false,\n name: 'orange',\n value: '#FE9900',\n },\n {\n isBrightColor: true,\n name: 'yellow',\n value: '#FEFF00',\n },\n {\n isBrightColor: false,\n name: 'green',\n value: '#00FF00',\n },\n {\n isBrightColor: false,\n name: 'cyan',\n value: '#00FFFF',\n },\n {\n isBrightColor: false,\n name: 'cornflower blue',\n value: '#4B85E8',\n },\n {\n isBrightColor: false,\n name: 'blue',\n value: '#1300FF',\n },\n {\n isBrightColor: false,\n name: 'purple',\n value: '#9900FF',\n },\n {\n isBrightColor: false,\n name: 'magenta',\n value: '#FF00FF',\n },\n\n {\n isBrightColor: false,\n name: 'light red berry 3',\n value: '#E6B8AF',\n },\n {\n isBrightColor: false,\n name: 'light red 3',\n value: '#F4CCCC',\n },\n {\n isBrightColor: true,\n name: 'light orange 3',\n value: '#FCE4CD',\n },\n {\n isBrightColor: true,\n name: 'light yellow 3',\n value: '#FFF2CC',\n },\n {\n isBrightColor: true,\n name: 'light green 3',\n value: '#D9EAD3',\n },\n {\n isBrightColor: false,\n name: 'light cyan 3',\n value: '#D0DFE3',\n },\n {\n isBrightColor: false,\n name: 'light cornflower blue 3',\n value: '#C9DAF8',\n },\n {\n isBrightColor: true,\n name: 'light blue 3',\n value: '#CFE1F3',\n },\n {\n isBrightColor: true,\n name: 'light purple 3',\n value: '#D9D2E9',\n },\n {\n isBrightColor: true,\n name: 'light magenta 3',\n value: '#EAD1DB',\n },\n\n {\n isBrightColor: false,\n name: 'light red berry 2',\n value: '#DC7E6B',\n },\n {\n isBrightColor: false,\n name: 'light red 2',\n value: '#EA9999',\n },\n {\n isBrightColor: false,\n name: 'light orange 2',\n value: '#F9CB9C',\n },\n {\n isBrightColor: true,\n name: 'light yellow 2',\n value: '#FFE598',\n },\n {\n isBrightColor: false,\n name: 'light green 2',\n value: '#B7D6A8',\n },\n {\n isBrightColor: false,\n name: 'light cyan 2',\n value: '#A1C4C9',\n },\n {\n isBrightColor: false,\n name: 'light cornflower blue 2',\n value: '#A4C2F4',\n },\n {\n isBrightColor: false,\n name: 'light blue 2',\n value: '#9FC5E8',\n },\n {\n isBrightColor: false,\n name: 'light purple 2',\n value: '#B5A7D5',\n },\n {\n isBrightColor: false,\n name: 'light magenta 2',\n value: '#D5A6BD',\n },\n\n {\n isBrightColor: false,\n name: 'light red berry 1',\n value: '#CC4125',\n },\n {\n isBrightColor: false,\n name: 'light red 1',\n value: '#E06666',\n },\n {\n isBrightColor: false,\n name: 'light orange 1',\n value: '#F6B26B',\n },\n {\n isBrightColor: false,\n name: 'light yellow 1',\n value: '#FFD966',\n },\n {\n isBrightColor: false,\n name: 'light green 1',\n value: '#93C47D',\n },\n {\n isBrightColor: false,\n name: 'light cyan 1',\n value: '#76A5AE',\n },\n {\n isBrightColor: false,\n name: 'light cornflower blue 1',\n value: '#6C9EEB',\n },\n {\n isBrightColor: false,\n name: 'light blue 1',\n value: '#6FA8DC',\n },\n {\n isBrightColor: false,\n name: 'light purple 1',\n value: '#8D7CC3',\n },\n {\n isBrightColor: false,\n name: 'light magenta 1',\n value: '#C27BA0',\n },\n\n {\n isBrightColor: false,\n name: 'dark red berry 1',\n value: '#A61B00',\n },\n {\n isBrightColor: false,\n name: 'dark red 1',\n value: '#CC0000',\n },\n {\n isBrightColor: false,\n name: 'dark orange 1',\n value: '#E59138',\n },\n {\n isBrightColor: false,\n name: 'dark yellow 1',\n value: '#F1C231',\n },\n {\n isBrightColor: false,\n name: 'dark green 1',\n value: '#6AA74F',\n },\n {\n isBrightColor: false,\n name: 'dark cyan 1',\n value: '#45818E',\n },\n {\n isBrightColor: false,\n name: 'dark cornflower blue 1',\n value: '#3B78D8',\n },\n {\n isBrightColor: false,\n name: 'dark blue 1',\n value: '#3E84C6',\n },\n {\n isBrightColor: false,\n name: 'dark purple 1',\n value: '#664EA6',\n },\n {\n isBrightColor: false,\n name: 'dark magenta 1',\n value: '#A64D78',\n },\n\n {\n isBrightColor: false,\n name: 'dark red berry 2',\n value: '#84200D',\n },\n {\n isBrightColor: false,\n name: 'dark red 2',\n value: '#990001',\n },\n {\n isBrightColor: false,\n name: 'dark orange 2',\n value: '#B45F05',\n },\n {\n isBrightColor: false,\n name: 'dark yellow 2',\n value: '#BF9002',\n },\n {\n isBrightColor: false,\n name: 'dark green 2',\n value: '#38761D',\n },\n {\n isBrightColor: false,\n name: 'dark cyan 2',\n value: '#124F5C',\n },\n {\n isBrightColor: false,\n name: 'dark cornflower blue 2',\n value: '#1155CB',\n },\n {\n isBrightColor: false,\n name: 'dark blue 2',\n value: '#0C5394',\n },\n {\n isBrightColor: false,\n name: 'dark purple 2',\n value: '#351C75',\n },\n {\n isBrightColor: false,\n name: 'dark magenta 2',\n value: '#741B47',\n },\n\n {\n isBrightColor: false,\n name: 'dark red berry 3',\n value: '#5B0F00',\n },\n {\n isBrightColor: false,\n name: 'dark red 3',\n value: '#660000',\n },\n {\n isBrightColor: false,\n name: 'dark orange 3',\n value: '#783F04',\n },\n {\n isBrightColor: false,\n name: 'dark yellow 3',\n value: '#7E6000',\n },\n {\n isBrightColor: false,\n name: 'dark green 3',\n value: '#274E12',\n },\n {\n isBrightColor: false,\n name: 'dark cyan 3',\n value: '#0D343D',\n },\n {\n isBrightColor: false,\n name: 'dark cornflower blue 3',\n value: '#1B4487',\n },\n {\n isBrightColor: false,\n name: 'dark blue 3',\n value: '#083763',\n },\n {\n isBrightColor: false,\n name: 'dark purple 3',\n value: '#1F124D',\n },\n {\n isBrightColor: false,\n name: 'dark magenta 3',\n value: '#4C1130',\n },\n];\n\nexport const DEFAULT_CUSTOM_COLORS = [\n {\n isBrightColor: false,\n name: 'dark orange 3',\n value: '#783F04',\n },\n {\n isBrightColor: false,\n name: 'dark grey 3',\n value: '#666666',\n },\n {\n isBrightColor: false,\n name: 'dark grey 2',\n value: '#999999',\n },\n {\n isBrightColor: false,\n name: 'light cornflower blue 1',\n value: '#6C9EEB',\n },\n {\n isBrightColor: false,\n name: 'dark magenta 3',\n value: '#4C1130',\n },\n];\n", + "path": "plate-ui/color-constants.ts", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n value: string;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? : null}\n \n );\n\n return name ? (\n \n {content}\n {name}\n \n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n colors: TColor[];\n updateColor: (color: string) => void;\n color?: string;\n} & React.HTMLAttributes;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n \n {colors.map(({ isBrightColor, name, value }) => (\n \n ))}\n \n );\n}\n", + "path": "plate-ui/color-dropdown-menu-items.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useComposedRef } from '@udecode/plate-common/react';\nimport { useColorInput } from '@udecode/plate-font/react';\n\nexport const ColorInput = withRef<'input'>(\n ({ children, className, value = '#000000', ...props }, ref) => {\n const { childProps, inputRef } = useColorInput();\n\n return (\n
\n {React.Children.map(children, (child) => {\n if (!child) return child;\n\n return React.cloneElement(child as React.ReactElement, childProps);\n })}\n\n \n
\n );\n }\n);\n", + "path": "plate-ui/color-input.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n \n \n\n \n\n \n {color && (\n \n Clear\n \n )}\n \n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n", + "path": "plate-ui/color-picker.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n useColorsCustom,\n useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport type { TColor } from './color-dropdown-menu';\n\nimport { buttonVariants } from './button';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorsCustomProps = {\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n};\n\nexport function ColorsCustom({\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n}: ColorsCustomProps) {\n const state = useColorsCustomState({\n color,\n colors,\n customColors,\n updateCustomColor,\n });\n const { inputProps, menuItemProps } = useColorsCustom(state);\n\n return (\n
\n \n \n CUSTOM\n \n \n\n \n
\n );\n}\n", + "path": "plate-ui/colors-custom.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "color-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar", + "separator", + "button", + "tooltip" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/column-element.json b/apps/www/public/r/styles/default/column-element.json new file mode 100644 index 0000000000..30c842633f --- /dev/null +++ b/apps/www/public/r/styles/default/column-element.json @@ -0,0 +1,25 @@ +{ + "dependencies": [ + "@udecode/plate-layout" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement();\n\n return (\n \n {children}\n
\n );\n })\n);\n", + "path": "plate-ui/column-element.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PlateElement,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n \n
{children}
\n
\n
\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n
\n \n \n \n \n \n \n \n\n \n \n
\n \n
\n );\n}\n", + "path": "plate-ui/column-group-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "column-element", + "registryDependencies": [ + "command", + "resizable" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/command.json b/apps/www/public/r/styles/default/command.json new file mode 100644 index 0000000000..27e905e3d3 --- /dev/null +++ b/apps/www/public/r/styles/default/command.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "cmdk" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport type { DialogProps } from '@radix-ui/react-dialog';\n\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n CommandPrimitive,\n 'flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport const CommandInput = withRef(\n ({ className, ...props }, ref) => (\n
\n \n \n
\n )\n);\n\nexport const CommandList = withCn(\n CommandPrimitive.List,\n 'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n CommandPrimitive.Empty,\n 'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n CommandPrimitive.Group,\n 'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n CommandPrimitive.Separator,\n '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n CommandPrimitive.Item,\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n", + "path": "plate-ui/command.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "command", + "registryDependencies": [ + "dialog" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/comment-leaf.json b/apps/www/public/r/styles/default/comment-leaf.json new file mode 100644 index 0000000000..744474f69c --- /dev/null +++ b/apps/www/public/r/styles/default/comment-leaf.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-comments" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport type { TCommentText } from '@udecode/plate-comments';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments/react';\nimport { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, leaf, nodeProps } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n", + "path": "plate-ui/comment-leaf.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "comment-leaf", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/comment-toolbar-button.json b/apps/www/public/r/styles/default/comment-toolbar-button.json new file mode 100644 index 0000000000..eac032483c --- /dev/null +++ b/apps/www/public/r/styles/default/comment-toolbar-button.json @@ -0,0 +1,14 @@ +{ + "dependencies": [], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { useCommentAddButton } from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function CommentToolbarButton() {\n const { hidden, props } = useCommentAddButton();\n\n if (hidden) return null;\n\n return (\n \n \n \n );\n}\n", + "path": "plate-ui/comment-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "comment-toolbar-button", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/comments-popover.json b/apps/www/public/r/styles/default/comments-popover.json new file mode 100644 index 0000000000..1886c715e0 --- /dev/null +++ b/apps/www/public/r/styles/default/comments-popover.json @@ -0,0 +1,61 @@ +{ + "dependencies": [ + "@udecode/plate-comments" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n CommentProvider,\n CommentsPositioner,\n SCOPE_ACTIVE_COMMENT,\n useFloatingCommentsContentState,\n useFloatingCommentsState,\n} from '@udecode/plate-comments/react';\nimport { PortalBody } from '@udecode/plate-common/react';\n\nimport { CommentCreateForm } from './comment-create-form';\nimport { CommentItem } from './comment-item';\nimport { CommentReplyItems } from './comment-reply-items';\nimport { popoverVariants } from './popover';\n\nexport type FloatingCommentsContentProps = {\n disableForm?: boolean;\n};\n\nexport function CommentsPopoverContent(props: FloatingCommentsContentProps) {\n const { disableForm } = props;\n\n const { activeCommentId, hasNoComment, myUserId, ref } =\n useFloatingCommentsContentState();\n\n return (\n \n
\n {!hasNoComment && (\n <>\n \n\n \n \n )}\n\n {!!myUserId && !disableForm && }\n
\n \n );\n}\n\nexport function CommentsPopover() {\n const { activeCommentId, loaded } = useFloatingCommentsState();\n\n if (!loaded || !activeCommentId) return null;\n\n return (\n \n \n \n \n \n );\n}\n", + "path": "plate-ui/comments-popover.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from './avatar';\n\nexport function CommentAvatar({ userId }: { userId: string | null }) {\n const { useOption } = useEditorPlugin(CommentsPlugin);\n const user = useOption('userById', userId);\n\n if (!user) return null;\n\n return (\n \n \n {user.name?.[0]}\n \n );\n}\n", + "path": "plate-ui/comment-avatar.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n CommentNewSubmitButton,\n CommentNewTextarea,\n CommentsPlugin,\n} from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\n\nimport { buttonVariants } from './button';\nimport { CommentAvatar } from './comment-avatar';\nimport { inputVariants } from './input';\n\nexport function CommentCreateForm() {\n const { useOption } = useEditorPlugin(CommentsPlugin);\n\n const myUserId = useOption('myUserId');\n\n return (\n
\n \n\n
\n \n\n \n Comment\n \n
\n
\n );\n}\n", + "path": "plate-ui/comment-create-form.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n CommentProvider,\n CommentsPlugin,\n useCommentItemContentState,\n} from '@udecode/plate-comments/react';\nimport { useEditorPlugin } from '@udecode/plate-common/react';\nimport { formatDistance } from 'date-fns';\n\nimport { CommentAvatar } from './comment-avatar';\nimport { CommentMoreDropdown } from './comment-more-dropdown';\nimport { CommentResolveButton } from './comment-resolve-button';\nimport { CommentValue } from './comment-value';\n\ntype PlateCommentProps = {\n commentId: string;\n};\n\nfunction CommentItemContent() {\n const {\n comment,\n commentText,\n editingValue,\n isMyComment,\n isReplyComment,\n user,\n } = useCommentItemContentState();\n\n return (\n
\n
\n \n\n

{user?.name}

\n\n
\n {formatDistance(comment.createdAt, Date.now())} ago\n
\n\n {isMyComment && (\n
\n {isReplyComment ? null : }\n\n \n
\n )}\n
\n\n
\n {editingValue ? (\n \n ) : (\n
{commentText}
\n )}\n
\n
\n );\n}\n\nexport function CommentItem({ commentId }: PlateCommentProps) {\n const { useOption } = useEditorPlugin(CommentsPlugin);\n const comment = useOption('commentById', commentId);\n\n if (!comment) return null;\n\n return (\n \n \n \n );\n}\n", + "path": "plate-ui/comment-item.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useCommentDeleteButton,\n useCommentDeleteButtonState,\n useCommentEditButton,\n useCommentEditButtonState,\n} from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport function CommentMoreDropdown() {\n const editButtonState = useCommentEditButtonState();\n const { props: editProps } = useCommentEditButton(editButtonState);\n const deleteButtonState = useCommentDeleteButtonState();\n const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n return (\n \n \n \n \n \n Edit comment\n Delete comment\n \n \n );\n}\n", + "path": "plate-ui/comment-more-dropdown.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport {\n SCOPE_ACTIVE_COMMENT,\n useCommentReplies,\n} from '@udecode/plate-comments/react';\n\nimport { CommentItem } from './comment-item';\n\nexport function CommentReplyItems() {\n const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);\n\n return (\n <>\n {Object.keys(commentReplies).map((id) => (\n \n ))}\n \n );\n}\n", + "path": "plate-ui/comment-reply-items.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n CommentResolveButton as CommentResolveButtonPrimitive,\n useComment,\n} from '@udecode/plate-comments/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\n\nexport function CommentResolveButton() {\n const comment = useComment()!;\n\n return (\n \n {comment.isResolved ? (\n \n ) : (\n \n )}\n \n );\n}\n", + "path": "plate-ui/comment-resolve-button.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n CommentEditActions,\n CommentEditTextarea,\n} from '@udecode/plate-comments/react';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\n\nexport function CommentValue() {\n return (\n
\n \n\n
\n \n Cancel\n \n\n \n Save\n \n
\n
\n );\n}\n", + "path": "plate-ui/comment-value.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "comments-popover", + "registryDependencies": [ + "popover", + "avatar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/cursor-overlay.json b/apps/www/public/r/styles/default/cursor-overlay.json new file mode 100644 index 0000000000..353b337305 --- /dev/null +++ b/apps/www/public/r/styles/default/cursor-overlay.json @@ -0,0 +1,14 @@ +{ + "dependencies": [], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n createPlatePlugin,\n findEventRange,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type CursorData,\n type CursorOverlayProps,\n type CursorProps,\n type CursorState,\n CursorOverlay as CursorOverlayPrimitive,\n} from '@udecode/plate-cursor';\nimport { DndPlugin } from '@udecode/plate-dnd';\n\nexport function Cursor({\n caretPosition,\n classNames,\n data,\n disableCaret,\n disableSelection,\n selectionRects,\n}: CursorProps) {\n const { style, selectionStyle = style } = data ?? ({} as CursorData);\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const editor = useEditorRef();\n const dynamicCursors = editor.useOption(DragOverCursorPlugin, 'cursors');\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n\nconst DragOverCursorPlugin = createPlatePlugin({\n key: 'dragOverCursor',\n options: { cursors: {} as Record> },\n handlers: {\n onDragEnd: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragLeave: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n onDragOver: ({ editor, event, plugin }) => {\n if (editor.getOptions(DndPlugin).isDragging) return;\n\n const range = findEventRange(editor, event);\n\n if (!range) return;\n\n editor.setOption(plugin, 'cursors', {\n drag: {\n key: 'drag',\n data: {\n style: {\n backgroundColor: 'hsl(222.2 47.4% 11.2%)',\n width: 3,\n },\n },\n selection: range,\n },\n });\n },\n onDrop: ({ editor, plugin }) => {\n editor.setOption(plugin, 'cursors', {});\n },\n },\n});\n", + "path": "plate-ui/cursor-overlay.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "cursor-overlay", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/date-element.json b/apps/www/public/r/styles/default/date-element.json new file mode 100644 index 0000000000..c032708515 --- /dev/null +++ b/apps/www/public/r/styles/default/date-element.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-date" + ], + "files": [ + { + "content": "'use client';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { setNodes } from '@udecode/plate-common';\nimport { PlateElement, findNodePath } from '@udecode/plate-common/react';\n\nimport { Calendar } from './calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nexport const DateElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { editor, element } = props;\n\n return (\n \n \n \n \n {element.date ? (\n (() => {\n const today = new Date();\n const elementDate = new Date(element.date as string);\n const isToday =\n elementDate.getDate() === today.getDate() &&\n elementDate.getMonth() === today.getMonth() &&\n elementDate.getFullYear() === today.getFullYear();\n\n const isYesterday =\n new Date(\n today.setDate(today.getDate() - 1)\n ).toDateString() === elementDate.toDateString();\n const isTomorrow =\n new Date(\n today.setDate(today.getDate() + 2)\n ).toDateString() === elementDate.toDateString();\n\n if (isToday) return 'Today';\n if (isYesterday) return 'Yesterday';\n if (isTomorrow) return 'Tomorrow';\n\n return elementDate.toLocaleDateString(undefined, {\n day: 'numeric',\n month: 'long',\n year: 'numeric',\n });\n })()\n ) : (\n Pick a date\n )}\n \n \n \n {\n if (!date) return;\n\n setNodes(\n editor,\n { date: date.toDateString() },\n { at: findNodePath(editor, element) }\n );\n }}\n mode=\"single\"\n initialFocus\n />\n \n \n {children}\n \n );\n }\n);\n", + "path": "plate-ui/date-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "date-element", + "registryDependencies": [ + "calendar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/dialog.json b/apps/www/public/r/styles/default/dialog.json new file mode 100644 index 0000000000..5cdad6293d --- /dev/null +++ b/apps/www/public/r/styles/default/dialog.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-dialog" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Dialog = DialogPrimitive.Root;\n\nexport const DialogTrigger = DialogPrimitive.Trigger;\n\nexport const DialogPortal = DialogPrimitive.Portal;\n\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = withCn(\n DialogPrimitive.Overlay,\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n);\n\nexport const DialogContent = withRef(\n ({ children, className, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n )\n);\n\nexport const DialogHeader = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col space-y-1.5 text-center sm:text-left'\n);\n\nexport const DialogFooter = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'\n);\n\nexport const DialogTitle = withCn(\n DialogPrimitive.Title,\n 'text-lg font-semibold leading-none tracking-tight'\n);\n\nexport const DialogDescription = withCn(\n DialogPrimitive.Description,\n 'text-sm text-muted-foreground'\n);\n", + "path": "plate-ui/dialog.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "dialog", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/draggable.json b/apps/www/public/r/styles/default/draggable.json new file mode 100644 index 0000000000..2cad99ce70 --- /dev/null +++ b/apps/www/public/r/styles/default/draggable.json @@ -0,0 +1,26 @@ +{ + "dependencies": [ + "@udecode/plate-dnd", + "react-dnd", + "react-dnd-html5-backend" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport type { ClassNames, TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /** Block. */\n block: string;\n\n /** Block and gutter. */\n blockAndGutter: string;\n\n /** Block toolbar in the gutter. */\n blockToolbar: string;\n\n /**\n * Block toolbar wrapper in the gutter left. It has the height of a line\n * of the block.\n */\n blockToolbarWrapper: string;\n\n blockWrapper: string;\n\n /** Button to dnd the block, in the block toolbar. */\n dragHandle: string;\n\n /** Icon of the drag button, in the drag icon. */\n dragIcon: string;\n\n /** Show a dropline above or below the block when dragging a block. */\n dropLine: string;\n\n /** Gutter at the left side of the editor. It has the height of the block */\n gutterLeft: string;\n }> {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nconst DragHandle = () => {\n const editor = useEditorRef();\n\n return (\n \n \n {\n event.stopPropagation();\n event.preventDefault();\n\n // if (element.id) {\n // editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);\n // api.blockContextMenu.show(editor.id, event as any);\n // }\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n );\n};\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n droplineProps,\n groupProps,\n gutterLeftProps,\n previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n \n \n
\n \n \n {isHovered && }\n
\n \n \n \n\n
\n {children}\n\n {!!dropLine && (\n \n )}\n
\n \n );\n }\n);\n", + "path": "plate-ui/draggable.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import type { FC } from 'react';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n createNodesWithHOC,\n} from '@udecode/plate-common/react';\nimport {\n type WithDraggableOptions,\n withDraggable as withDraggablePrimitive,\n} from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n BulletedListPlugin,\n NumberedListPlugin,\n} from '@udecode/plate-list/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { type DraggableProps, Draggable } from './draggable';\n\nexport const withDraggable = (\n Component: FC,\n options?: WithDraggableOptions<\n Partial>\n >\n) =>\n withDraggablePrimitive(Draggable, Component, options as any);\n\nexport const withDraggablesPrimitive = createNodesWithHOC(withDraggable);\n\nexport const withDraggables = (components: any) => {\n return withDraggablesPrimitive(components, [\n {\n keys: [\n ParagraphPlugin.key,\n BulletedListPlugin.key,\n NumberedListPlugin.key,\n ],\n level: 0,\n },\n {\n key: HEADING_KEYS.h1,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.875em]',\n },\n },\n },\n {\n key: HEADING_KEYS.h2,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'px-0 pb-1 text-[1.5em]',\n },\n },\n },\n {\n key: HEADING_KEYS.h3,\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',\n },\n },\n },\n {\n keys: [HEADING_KEYS.h4, HEADING_KEYS.h5],\n draggableProps: {\n classNames: {\n blockToolbarWrapper: 'h-[1.3em]',\n gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',\n },\n },\n },\n {\n keys: [ParagraphPlugin.key],\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-[3px] px-0 pb-0',\n },\n },\n },\n {\n keys: [HEADING_KEYS.h6, BulletedListPlugin.key, NumberedListPlugin.key],\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n },\n {\n key: BlockquotePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'px-0 pb-0',\n },\n },\n },\n {\n key: CodeBlockPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-6 px-0 pb-0',\n },\n },\n },\n {\n key: ImagePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: MediaEmbedPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: ExcalidrawPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: TogglePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: ColumnPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-0 px-0 pb-0',\n },\n },\n },\n {\n key: PlaceholderPlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n },\n {\n key: TablePlugin.key,\n draggableProps: {\n classNames: {\n gutterLeft: 'pt-3 px-0 pb-0',\n },\n },\n },\n ]);\n};\n", + "path": "plate-ui/with-draggables.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "draggable", + "registryDependencies": [ + "tooltip" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/dropdown-menu.json b/apps/www/public/r/styles/default/dropdown-menu.json new file mode 100644 index 0000000000..a402ada7cd --- /dev/null +++ b/apps/www/public/r/styles/default/dropdown-menu.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-dropdown-menu" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n cn,\n createPrimitiveElement,\n withCn,\n withProps,\n withRef,\n withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n typeof DropdownMenuPrimitive.SubTrigger,\n {\n inset?: boolean;\n }\n>(({ children, className, inset, ...props }, ref) => (\n \n {children}\n \n \n));\n\nexport const DropdownMenuSubContent = withCn(\n DropdownMenuPrimitive.SubContent,\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n className: cn(\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n ),\n sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n \n \n \n));\n\nconst menuItemVariants = cva(\n cn(\n 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n ),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuItem = withVariants(\n DropdownMenuPrimitive.Item,\n menuItemVariants,\n ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n typeof DropdownMenuPrimitive.CheckboxItem\n>(({ children, className, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\n\nexport const DropdownMenuRadioItem = withRef<\n typeof DropdownMenuPrimitive.RadioItem,\n {\n hideIcon?: boolean;\n }\n>(({ children, className, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\n\nconst dropdownMenuLabelVariants = cva(\n cn('select-none px-2 py-1.5 text-sm font-semibold'),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuLabel = withVariants(\n DropdownMenuPrimitive.Label,\n dropdownMenuLabelVariants,\n ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n DropdownMenuPrimitive.Separator,\n '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n const [open, setOpen] = useState(false);\n\n const onOpenChange = useCallback(\n (_value = !open) => {\n setOpen(_value);\n },\n [open]\n );\n\n return {\n open,\n onOpenChange,\n };\n};\n", + "path": "plate-ui/dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "dropdown-menu", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/editor.json b/apps/www/public/r/styles/default/editor.json new file mode 100644 index 0000000000..fe33ac37e5 --- /dev/null +++ b/apps/www/public/r/styles/default/editor.json @@ -0,0 +1,14 @@ +{ + "dependencies": [], + "files": [ + { + "content": "import React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport { PlateContent } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorVariants = cva(\n cn(\n 'relative overflow-x-auto whitespace-pre-wrap break-words text-foreground',\n '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',\n '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n focusRing: true,\n size: 'sm',\n variant: 'outline',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focusRing: {\n false: '',\n true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n size: {\n md: 'text-base',\n sm: 'text-sm',\n },\n variant: {\n ghost: '',\n outline: 'border border-input',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nconst Editor = React.forwardRef(\n (\n {\n className,\n disabled,\n focusRing,\n focused,\n readOnly,\n size,\n variant,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n
\n );\n }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n", + "path": "plate-ui/editor.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "editor", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/emoji-dropdown-menu.json b/apps/www/public/r/styles/default/emoji-dropdown-menu.json new file mode 100644 index 0000000000..e67936adb2 --- /dev/null +++ b/apps/www/public/r/styles/default/emoji-dropdown-menu.json @@ -0,0 +1,66 @@ +{ + "dependencies": [ + "@radix-ui/react-popover" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport {\n type EmojiDropdownMenuOptions,\n useEmojiDropdownMenuState,\n} from '@udecode/plate-emoji/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';\nimport { EmojiPicker } from './emoji-picker';\nimport { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';\nimport { ToolbarButton } from './toolbar';\n\ntype EmojiDropdownMenuProps = {\n options?: EmojiDropdownMenuOptions;\n} & React.ComponentPropsWithoutRef;\n\nexport function EmojiDropdownMenu({\n options,\n ...props\n}: EmojiDropdownMenuProps) {\n const { emojiPickerState, isOpen, setIsOpen } =\n useEmojiDropdownMenuState(options);\n\n return (\n \n \n \n }\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n >\n \n \n );\n}\n", + "path": "plate-ui/emoji-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import React, { type ReactNode } from 'react';\n\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n children: ReactNode;\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n};\n\nexport function EmojiToolbarDropdown({\n children,\n control,\n isOpen,\n setIsOpen,\n}: EmojiToolbarDropdownProps) {\n return (\n \n {control}\n\n \n {children}\n \n \n );\n}\n", + "path": "plate-ui/emoji-toolbar-dropdown.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import type React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\n\nimport {\n AppleIcon,\n ClockIcon,\n CompassIcon,\n DeleteIcon,\n FlagIcon,\n LeafIcon,\n LightbulbIcon,\n MusicIcon,\n SearchIcon,\n SmileIcon,\n StarIcon,\n} from 'lucide-react';\n\nexport const emojiCategoryIcons: Record<\n EmojiCategoryList,\n { outline: React.ReactElement; solid: React.ReactElement }\n> = {\n activity: {\n outline: (\n \n \n \n \n \n \n ),\n // Needed to add another solid variant - outline will be used for now\n solid: (\n \n \n \n \n \n \n ),\n },\n\n custom: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n flags: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n foods: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n frequent: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n nature: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n objects: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n people: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n places: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n symbols: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n};\n\nexport const emojiSearchIcons = {\n delete: ,\n\n loupe: ,\n};\n", + "path": "plate-ui/emoji-icons.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import React from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { EmojiSettings } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n clearSearch,\n emoji,\n emojiLibrary,\n focusedCategory,\n hasFound,\n i18n,\n icons,\n isSearching,\n refs,\n searchResult,\n searchValue,\n setSearch,\n settings = EmojiSettings,\n visibleCategories,\n handleCategoryClick,\n onMouseOver,\n onSelectEmoji,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n", + "path": "plate-ui/emoji-picker.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import { memo, useCallback } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'emojiLibrary'\n | 'i18n'\n | 'isSearching'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'refs'\n | 'searchResult'\n | 'settings'\n | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n emoji: Emoji;\n index: number;\n onMouseOver: (emoji?: Emoji) => void;\n onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n row: GridRow;\n} & Pick;\n\nconst Button = memo(\n ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n aria-label={emoji.skins[0].native}\n data-index={index}\n tabIndex={-1}\n type=\"button\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ emojiLibrary, row, onMouseOver, onSelectEmoji }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n emojiLibrary,\n i18n,\n isSearching = false,\n refs,\n searchResult,\n settings = EmojiSettings,\n visibleCategories,\n onMouseOver,\n onSelectEmoji,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n (categoryId: any) => {\n return visibleCategories.has(categoryId)\n ? visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n", + "path": "plate-ui/emoji-picker-content.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\nimport type {\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\n\nexport type EmojiPickerNavigationProps = {\n onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n UseEmojiPickerType,\n 'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n emojiLibrary,\n focusedCategory,\n i18n,\n icons,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { position, width } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n title={i18n.categories[id]}\n aria-label={i18n.categories[id]}\n type=\"button\"\n >\n {icons.categories[id].outline}\n \n ))}\n \n
\n \n );\n}\n", + "path": "plate-ui/emoji-picker-navigation.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nexport type EmojiPickerPreviewProps = Pick<\n UseEmojiPickerType,\n 'emoji' | 'hasFound' | 'i18n' | 'isSearching'\n>;\n\nexport type EmojiPreviewProps = Pick;\n\nexport type NoEmojiPreviewProps = Pick;\n\nexport type PickAnEmojiPreviewProps = NoEmojiPreviewProps;\n\nfunction EmojiPreview({ emoji }: EmojiPreviewProps) {\n return (\n
\n
\n {emoji?.skins[0].native}\n
\n
\n
{emoji?.name}
\n
{`:${emoji?.id}:`}
\n
\n
\n );\n}\n\nfunction NoEmoji({ i18n }: NoEmojiPreviewProps) {\n return (\n
\n
😢
\n
\n
\n {i18n.searchNoResultsTitle}\n
\n
{i18n.searchNoResultsSubtitle}
\n
\n
\n );\n}\n\nfunction PickAnEmoji({ i18n }: PickAnEmojiPreviewProps) {\n return (\n
\n
☝️
\n
\n
{i18n.pick}
\n
\n
\n );\n}\n\nexport function EmojiPickerPreview({\n emoji,\n hasFound = true,\n i18n,\n isSearching = false,\n ...props\n}: EmojiPickerPreviewProps) {\n const showPickEmoji = !emoji && !(isSearching && !hasFound);\n const showNoEmoji = isSearching && !hasFound;\n const showPreview = emoji;\n\n return (\n <>\n {showPreview && }\n {showPickEmoji && }\n {showNoEmoji && }\n \n );\n}\n", + "path": "plate-ui/emoji-picker-preview.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nimport { cn } from '@udecode/cn';\nimport { DeleteIcon, SearchIcon } from 'lucide-react';\n\nimport { Button } from './button';\n\nexport type EmojiPickerSearchAndClearProps = Pick<\n UseEmojiPickerType,\n 'clearSearch' | 'i18n' | 'searchValue'\n>;\n\nexport function EmojiPickerSearchAndClear({\n clearSearch,\n i18n,\n searchValue,\n}: EmojiPickerSearchAndClearProps) {\n return (\n
\n \n \n
\n {searchValue && (\n \n \n \n )}\n \n );\n}\n", + "path": "plate-ui/emoji-picker-search-and-clear.tsx", + "target": "", + "type": "registry:ui" + }, + { + "content": "import type { ReactNode } from 'react';\n\nimport type { UseEmojiPickerType } from '@udecode/plate-emoji/react';\n\nexport type EmojiPickerSearchBarProps = {\n children: ReactNode;\n} & Pick;\n\nexport function EmojiPickerSearchBar({\n children,\n i18n,\n searchValue,\n setSearch,\n}: EmojiPickerSearchBarProps) {\n return (\n
\n
\n setSearch(event.target.value)}\n placeholder={i18n.search}\n aria-label=\"Search\"\n autoComplete=\"off\"\n type=\"text\"\n />\n {children}\n
\n
\n );\n}\n", + "path": "plate-ui/emoji-picker-search-bar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "emoji-dropdown-menu", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/emoji-input-element.json b/apps/www/public/r/styles/default/emoji-input-element.json new file mode 100644 index 0000000000..ceef1bb623 --- /dev/null +++ b/apps/www/public/r/styles/default/emoji-input-element.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-emoji" + ], + "files": [ + { + "content": "import React, { useMemo, useState } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';\n\nimport { useDebounce } from '@/hooks/use-debounce';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nexport const EmojiInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [value, setValue] = useState('');\n const debouncedValue = useDebounce(value, 100);\n const isPending = value !== debouncedValue;\n\n const filteredEmojis = useMemo(() => {\n if (debouncedValue.trim().length === 0) return [];\n\n return EmojiInlineIndexSearch.getInstance()\n .search(debouncedValue.replace(/:$/, ''))\n .get();\n }, [debouncedValue]);\n\n return (\n \n \n \n\n \n {!isPending && (\n No matching emoji found\n )}\n\n {filteredEmojis.map((emoji) => (\n insertEmoji(editor, emoji)}\n >\n {emoji.skins[0].native} {emoji.name}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", + "path": "plate-ui/emoji-input-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "emoji-input-element", + "registryDependencies": [ + "inline-combobox" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/excalidraw-element.json b/apps/www/public/r/styles/default/excalidraw-element.json new file mode 100644 index 0000000000..216544d224 --- /dev/null +++ b/apps/www/public/r/styles/default/excalidraw-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-excalidraw" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nexport const ExcalidrawElement = withRef(\n ({ nodeProps, ...props }, ref) => {\n const { children, element } = props;\n\n const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n element,\n });\n\n return (\n \n
\n
\n {Excalidraw && (\n \n )}\n
\n
\n {children}\n
\n );\n }\n);\n", + "path": "plate-ui/excalidraw-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "excalidraw-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/fixed-toolbar-buttons.json b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json new file mode 100644 index 0000000000..c124afefcf --- /dev/null +++ b/apps/www/public/r/styles/default/fixed-toolbar-buttons.json @@ -0,0 +1,22 @@ +{ + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { InsertDropdownMenu } from './insert-dropdown-menu';\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { ModeDropdownMenu } from './mode-dropdown-menu';\nimport { ToolbarGroup } from './toolbar';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FixedToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n
\n \n {!readOnly && (\n <>\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n )}\n\n
\n\n \n \n \n
\n
\n );\n}\n", + "path": "plate-ui/fixed-toolbar-buttons.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "fixed-toolbar-buttons", + "registryDependencies": [ + "toolbar", + "insert-dropdown-menu", + "mark-toolbar-button", + "mode-dropdown-menu", + "turn-into-dropdown-menu" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/fixed-toolbar.json b/apps/www/public/r/styles/default/fixed-toolbar.json new file mode 100644 index 0000000000..4b3a2201a1 --- /dev/null +++ b/apps/www/public/r/styles/default/fixed-toolbar.json @@ -0,0 +1,16 @@ +{ + "dependencies": [], + "files": [ + { + "content": "import { withCn } from '@udecode/cn';\n\nimport { Toolbar } from './toolbar';\n\nexport const FixedToolbar = withCn(\n Toolbar,\n 'supports-backdrop-blur:bg-background/60 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur'\n);\n", + "path": "plate-ui/fixed-toolbar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "fixed-toolbar", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/floating-toolbar-buttons.json b/apps/www/public/r/styles/default/floating-toolbar-buttons.json new file mode 100644 index 0000000000..a82d31fcd1 --- /dev/null +++ b/apps/www/public/r/styles/default/floating-toolbar-buttons.json @@ -0,0 +1,20 @@ +{ + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport {\n BoldPlugin,\n CodePlugin,\n ItalicPlugin,\n StrikethroughPlugin,\n UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { useEditorReadOnly } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { MarkToolbarButton } from './mark-toolbar-button';\nimport { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';\n\nexport function FloatingToolbarButtons() {\n const readOnly = useEditorReadOnly();\n\n return (\n <>\n {!readOnly && (\n <>\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n \n );\n}\n", + "path": "plate-ui/floating-toolbar-buttons.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "floating-toolbar-buttons", + "registryDependencies": [ + "mark-toolbar-button", + "more-dropdown-menu", + "turn-into-dropdown-menu" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/floating-toolbar.json b/apps/www/public/r/styles/default/floating-toolbar.json new file mode 100644 index 0000000000..af61bbd306 --- /dev/null +++ b/apps/www/public/r/styles/default/floating-toolbar.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-floating" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PortalBody,\n useComposedRef,\n useEditorId,\n useEventEditorSelectors,\n} from '@udecode/plate-common/react';\nimport {\n type FloatingToolbarState,\n flip,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n typeof Toolbar,\n {\n state?: FloatingToolbarState;\n }\n>(({ children, state, ...props }, componentRef) => {\n const editorId = useEditorId();\n const focusedEditorId = useEventEditorSelectors.focus();\n\n const floatingToolbarState = useFloatingToolbarState({\n editorId,\n focusedEditorId,\n ...state,\n floatingOptions: {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n padding: 12,\n }),\n ],\n placement: 'top',\n ...state?.floatingOptions,\n },\n });\n\n const {\n hidden,\n props: rootProps,\n ref: floatingRef,\n } = useFloatingToolbar(floatingToolbarState);\n\n const ref = useComposedRef(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n \n \n {children}\n \n \n );\n});\n", + "path": "plate-ui/floating-toolbar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "floating-toolbar", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/heading-element.json b/apps/www/public/r/styles/default/heading-element.json new file mode 100644 index 0000000000..d303d0196e --- /dev/null +++ b/apps/www/public/r/styles/default/heading-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-heading" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst headingVariants = cva('', {\n variants: {\n isFirstBlock: {\n false: '',\n true: 'mt-0',\n },\n variant: {\n h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',\n h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',\n h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n },\n});\n\nconst HeadingElementVariants = withVariants(PlateElement, headingVariants, [\n 'isFirstBlock',\n 'variant',\n]);\n\nexport const HeadingElement = withRef(\n ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {\n const { editor, element } = props;\n\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", + "path": "plate-ui/heading-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "heading-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/highlight-leaf.json b/apps/www/public/r/styles/default/highlight-leaf.json new file mode 100644 index 0000000000..69e88f4af4 --- /dev/null +++ b/apps/www/public/r/styles/default/highlight-leaf.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-highlight" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const HighlightLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", + "path": "plate-ui/highlight-leaf.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "highlight-leaf", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/hr-element.json b/apps/www/public/r/styles/default/hr-element.json new file mode 100644 index 0000000000..2f40010324 --- /dev/null +++ b/apps/www/public/r/styles/default/hr-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-horizontal-rule" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const HrElement = withRef(\n ({ className, nodeProps, ...props }, ref) => {\n const { children } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n
\n \n
\n {children}\n
\n );\n }\n);\n", + "path": "plate-ui/hr-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "hr-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/image-element.json b/apps/www/public/r/styles/default/image-element.json new file mode 100644 index 0000000000..305022c002 --- /dev/null +++ b/apps/www/public/r/styles/default/image-element.json @@ -0,0 +1,20 @@ +{ + "dependencies": [ + "@udecode/plate-media" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n
\n );\n }\n )\n);\n", + "path": "plate-ui/image-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "image-element", + "registryDependencies": [ + "media-popover", + "caption", + "resizable" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/indent-list-toolbar-button.json b/apps/www/public/r/styles/default/indent-list-toolbar-button.json new file mode 100644 index 0000000000..23b6684f0b --- /dev/null +++ b/apps/www/public/r/styles/default/indent-list-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-indent-list" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { ListStyleType } from '@udecode/plate-indent-list';\nimport {\n useIndentListToolbarButton,\n useIndentListToolbarButtonState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentListToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: ListStyleType;\n }\n>(({ nodeType = ListStyleType.Disc }, ref) => {\n const state = useIndentListToolbarButtonState({ nodeType });\n const { props } = useIndentListToolbarButton(state);\n\n return (\n \n {nodeType === ListStyleType.Disc ? : }\n \n );\n});\n", + "path": "plate-ui/indent-list-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "indent-list-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/indent-toolbar-button.json b/apps/www/public/r/styles/default/indent-toolbar-button.json new file mode 100644 index 0000000000..c2ad89f8f7 --- /dev/null +++ b/apps/www/public/r/styles/default/indent-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-indent" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useIndentButton } from '@udecode/plate-indent/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentToolbarButton = withRef(\n (rest, ref) => {\n const { props } = useIndentButton();\n\n return (\n \n \n \n );\n }\n);\n", + "path": "plate-ui/indent-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "indent-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/index.json b/apps/www/public/r/styles/default/index.json new file mode 100644 index 0000000000..d13e4c8203 --- /dev/null +++ b/apps/www/public/r/styles/default/index.json @@ -0,0 +1,21 @@ +{ + "name": "default", + "type": "registry:style", + "dependencies": [ + "tailwindcss-animate", + "class-variance-authority", + "lucide-react" + ], + "registryDependencies": [ + "utils" + ], + "tailwind": { + "config": { + "plugins": [ + "require(\"tailwindcss-animate\")" + ] + } + }, + "cssVars": {}, + "files": [] +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/inline-combobox.json b/apps/www/public/r/styles/default/inline-combobox.json new file mode 100644 index 0000000000..bc19d2a5cd --- /dev/null +++ b/apps/www/public/r/styles/default/inline-combobox.json @@ -0,0 +1,17 @@ +{ + "dependencies": [ + "@ariakit/react", + "@udecode/plate-combobox" + ], + "files": [ + { + "content": "import React, {\n type HTMLAttributes,\n type ReactNode,\n type RefObject,\n createContext,\n forwardRef,\n startTransition,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport type { PointRef } from 'slate';\n\nimport {\n type ComboboxItemProps,\n Combobox,\n ComboboxItem,\n ComboboxPopover,\n ComboboxProvider,\n Portal,\n useComboboxContext,\n useComboboxStore,\n} from '@ariakit/react';\nimport { cn } from '@udecode/cn';\nimport { filterWords } from '@udecode/plate-combobox';\nimport {\n type UseComboboxInputResult,\n useComboboxInput,\n useHTMLInputCursorState,\n} from '@udecode/plate-combobox/react';\nimport {\n type TElement,\n createPointRef,\n getPointBefore,\n insertText,\n moveSelection,\n} from '@udecode/plate-common';\nimport {\n findNodePath,\n useComposedRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\ntype FilterFn = (\n item: { value: string; keywords?: string[] },\n search: string\n) => boolean;\n\ninterface InlineComboboxContextValue {\n filter: FilterFn | false;\n inputProps: UseComboboxInputResult['props'];\n inputRef: RefObject;\n removeInput: UseComboboxInputResult['removeInput'];\n setHasEmpty: (hasEmpty: boolean) => void;\n showTrigger: boolean;\n trigger: string;\n}\n\nconst InlineComboboxContext = createContext(\n null as any\n);\n\nexport const defaultFilter: FilterFn = ({ keywords = [], value }, search) =>\n [value, ...keywords].some((keyword) => filterWords(keyword, search));\n\ninterface InlineComboboxProps {\n children: ReactNode;\n element: TElement;\n trigger: string;\n filter?: FilterFn | false;\n hideWhenNoValue?: boolean;\n setValue?: (value: string) => void;\n showTrigger?: boolean;\n value?: string;\n}\n\nconst InlineCombobox = ({\n children,\n element,\n filter = defaultFilter,\n hideWhenNoValue = false,\n setValue: setValueProp,\n showTrigger = true,\n trigger,\n value: valueProp,\n}: InlineComboboxProps) => {\n const editor = useEditorRef();\n const inputRef = React.useRef(null);\n const cursorState = useHTMLInputCursorState(inputRef);\n\n const [valueState, setValueState] = useState('');\n const hasValueProp = valueProp !== undefined;\n const value = hasValueProp ? valueProp : valueState;\n\n const setValue = useCallback(\n (newValue: string) => {\n setValueProp?.(newValue);\n\n if (!hasValueProp) {\n setValueState(newValue);\n }\n },\n [setValueProp, hasValueProp]\n );\n\n /**\n * Track the point just before the input element so we know where to\n * insertText if the combobox closes due to a selection change.\n */\n const [insertPoint, setInsertPoint] = useState(null);\n\n useEffect(() => {\n const path = findNodePath(editor, element);\n\n if (!path) return;\n\n const point = getPointBefore(editor, path);\n\n if (!point) return;\n\n const pointRef = createPointRef(editor, point);\n setInsertPoint(pointRef);\n\n return () => {\n pointRef.unref();\n };\n }, [editor, element]);\n\n const { props: inputProps, removeInput } = useComboboxInput({\n cancelInputOnBlur: false,\n cursorState,\n ref: inputRef,\n onCancelInput: (cause) => {\n if (cause !== 'backspace') {\n insertText(editor, trigger + value, {\n at: insertPoint?.current ?? undefined,\n });\n }\n if (cause === 'arrowLeft' || cause === 'arrowRight') {\n moveSelection(editor, {\n distance: 1,\n reverse: cause === 'arrowLeft',\n });\n }\n },\n });\n\n const [hasEmpty, setHasEmpty] = useState(false);\n\n const contextValue: InlineComboboxContextValue = useMemo(\n () => ({\n filter,\n inputProps,\n inputRef,\n removeInput,\n setHasEmpty,\n showTrigger,\n trigger,\n }),\n [\n trigger,\n showTrigger,\n filter,\n inputRef,\n inputProps,\n removeInput,\n setHasEmpty,\n ]\n );\n\n const store = useComboboxStore({\n // open: ,\n setValue: (newValue) => startTransition(() => setValue(newValue)),\n });\n\n const items = store.useState('items');\n\n /**\n * If there is no active ID and the list of items changes, select the first\n * item.\n */\n useEffect(() => {\n if (!store.getState().activeId) {\n store.setActiveId(store.first());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [items, store]);\n\n return (\n \n 0 || hasEmpty) &&\n (!hideWhenNoValue || value.length > 0)\n }\n store={store}\n >\n \n {children}\n \n \n \n );\n};\n\nconst InlineComboboxInput = forwardRef<\n HTMLInputElement,\n HTMLAttributes\n>(({ className, ...props }, propRef) => {\n const {\n inputProps,\n inputRef: contextRef,\n showTrigger,\n trigger,\n } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n const value = store.useState('value');\n\n const ref = useComposedRef(propRef, contextRef);\n\n /**\n * To create an auto-resizing input, we render a visually hidden span\n * containing the input value and position the input element on top of it.\n * This works well for all cases except when input exceeds the width of the\n * container.\n */\n\n return (\n <>\n {showTrigger && trigger}\n\n \n \n {value || '\\u200B'}\n \n\n \n \n \n );\n});\n\nInlineComboboxInput.displayName = 'InlineComboboxInput';\n\nconst InlineComboboxContent: typeof ComboboxPopover = ({\n className,\n ...props\n}) => {\n // Portal prevents CSS from leaking into popover\n return (\n \n \n \n );\n};\n\nconst comboboxItemVariants = cva(\n 'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n {\n defaultVariants: {\n interactive: true,\n },\n variants: {\n interactive: {\n false: '',\n true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',\n },\n },\n }\n);\n\nexport type InlineComboboxItemProps = {\n keywords?: string[];\n} & ComboboxItemProps &\n Required>;\n\nconst InlineComboboxItem = ({\n className,\n keywords,\n onClick,\n ...props\n}: InlineComboboxItemProps) => {\n const { value } = props;\n\n const { filter, removeInput } = useContext(InlineComboboxContext);\n\n const store = useComboboxContext()!;\n\n // Optimization: Do not subscribe to value if filter is false\n const search = filter && store.useState('value');\n\n const visible = useMemo(\n () => !filter || filter({ keywords, value }, search as string),\n [filter, value, keywords, search]\n );\n\n if (!visible) return null;\n\n return (\n {\n removeInput(true);\n onClick?.(event);\n }}\n {...props}\n />\n );\n};\n\nconst InlineComboboxEmpty = ({\n children,\n className,\n}: HTMLAttributes) => {\n const { setHasEmpty } = useContext(InlineComboboxContext);\n const store = useComboboxContext()!;\n const items = store.useState('items');\n\n useEffect(() => {\n setHasEmpty(true);\n\n return () => {\n setHasEmpty(false);\n };\n }, [setHasEmpty]);\n\n if (items.length > 0) return null;\n\n return (\n \n {children}\n \n );\n};\n\nexport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n};\n", + "path": "plate-ui/inline-combobox.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "inline-combobox", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json new file mode 100644 index 0000000000..6f913b7f35 --- /dev/null +++ b/apps/www/public/r/styles/default/input.json @@ -0,0 +1,14 @@ +{ + "dependencies": [], + "files": [ + { + "content": "import { withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n {\n defaultVariants: {\n h: 'md',\n variant: 'default',\n },\n variants: {\n h: {\n md: 'h-10 px-3 py-2',\n sm: 'h-9 px-3 py-2',\n },\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n },\n }\n);\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n", + "path": "plate-ui/input.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "input", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/insert-dropdown-menu.json b/apps/www/public/r/styles/default/insert-dropdown-menu.json new file mode 100644 index 0000000000..e4574215c1 --- /dev/null +++ b/apps/www/public/r/styles/default/insert-dropdown-menu.json @@ -0,0 +1,20 @@ +{ + "dependencies": [ + "@udecode/plate-block-quote", + "@udecode/plate-heading" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { insertEmptyElement } from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n items: [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: TablePlugin.key,\n // label: 'Table',\n // description: 'Table',\n // icon: Icons.table,\n // },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n // {\n // value: HorizontalRulePlugin.key,\n // label: 'Divider',\n // description: 'Divider (---)',\n // icon: Icons.hr,\n // },\n ],\n label: 'Basic blocks',\n },\n // {\n // label: 'Media',\n // items: [\n // {\n // value: CodeBlockPlugin.key,\n // label: 'Code',\n // description: 'Code (```)',\n // icon: Icons.codeblock,\n // },\n // {\n // value: ImagePlugin.key,\n // label: 'Image',\n // description: 'Image',\n // icon: Icons.image,\n // },\n // {\n // value: MediaEmbedPlugin.key,\n // label: 'Embed',\n // description: 'Embed',\n // icon: Icons.embed,\n // },\n // {\n // value: ExcalidrawPlugin.key,\n // label: 'Excalidraw',\n // description: 'Excalidraw',\n // icon: Icons.excalidraw,\n // },\n // ],\n // },\n // {\n // label: 'Inline',\n // items: [\n // {\n // value: LinkPlugin.key,\n // label: 'Link',\n // description: 'Link',\n // icon: Icons.link,\n // },\n // ],\n // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {items.map(({ items: nestedItems, label }, index) => (\n \n {index !== 0 && }\n\n {label}\n {nestedItems.map(\n ({ icon: Icon, label: itemLabel, value: type }) => (\n {\n switch (type) {\n // case CodeBlockPlugin.key: {\n // insertEmptyCodeBlock(editor);\n //\n // break;\n // }\n // case ImagePlugin.key: {\n // await insertMedia(editor, { type: ImagePlugin.key });\n //\n // break;\n // }\n // case MediaEmbedPlugin.key: {\n // await insertMedia(editor, {\n // type: MediaEmbedPlugin.key,\n // });\n //\n // break;\n // }\n // case 'ul':\n // case 'ol': {\n // insertEmptyElement(editor, ParagraphPlugin.key, {\n // select: true,\n // nextBlock: true,\n // });\n //\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n //\n // break;\n // }\n // case TablePlugin.key: {\n // insertTable(editor);\n //\n // break;\n // }\n // case LinkPlugin.key: {\n // triggerFloatingLink(editor, { focused: true });\n //\n // break;\n // }\n default: {\n insertEmptyElement(editor, type, {\n nextBlock: true,\n select: true,\n });\n }\n }\n\n focusEditor(editor);\n }}\n >\n \n {itemLabel}\n \n )\n )}\n \n ))}\n \n \n );\n}\n", + "path": "plate-ui/insert-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "insert-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/kbd-leaf.json b/apps/www/public/r/styles/default/kbd-leaf.json new file mode 100644 index 0000000000..c0591669d6 --- /dev/null +++ b/apps/www/public/r/styles/default/kbd-leaf.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-kbd" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const KbdLeaf = withRef(\n ({ children, className, ...props }, ref) => (\n \n {children}\n \n )\n);\n", + "path": "plate-ui/kbd-leaf.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "kbd-leaf", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/line-height-dropdown-menu.json b/apps/www/public/r/styles/default/line-height-dropdown-menu.json new file mode 100644 index 0000000000..c5206046b0 --- /dev/null +++ b/apps/www/public/r/styles/default/line-height-dropdown-menu.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "@udecode/plate-line-height" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useLineHeightDropdownMenu,\n useLineHeightDropdownMenuState,\n} from '@udecode/plate-line-height/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {\n const openState = useOpenState();\n const state = useLineHeightDropdownMenuState();\n const { radioGroupProps } = useLineHeightDropdownMenu(state);\n\n return (\n \n \n \n \n \n \n\n \n \n {state.values.map((_value) => (\n \n {_value}\n \n ))}\n \n \n \n );\n}\n", + "path": "plate-ui/line-height-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "line-height-dropdown-menu", + "registryDependencies": [ + "toolbar", + "dropdown-menu" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/link-element.json b/apps/www/public/r/styles/default/link-element.json new file mode 100644 index 0000000000..2403a9bbb3 --- /dev/null +++ b/apps/www/public/r/styles/default/link-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-link" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { TLinkElement } from '@udecode/plate-link';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useLink } from '@udecode/plate-link/react';\n\nexport const LinkElement = withRef(\n ({ children, className, ...props }, ref) => {\n const element = useElement();\n const { props: linkProps } = useLink({ element });\n\n return (\n \n {children}\n \n );\n }\n);\n", + "path": "plate-ui/link-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "link-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/link-floating-toolbar.json b/apps/www/public/r/styles/default/link-floating-toolbar.json new file mode 100644 index 0000000000..8b9ff6eb19 --- /dev/null +++ b/apps/www/public/r/styles/default/link-floating-toolbar.json @@ -0,0 +1,21 @@ +{ + "dependencies": [ + "@udecode/plate-link" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { useFormInputProps } from '@udecode/plate-common/react';\nimport {\n type UseVirtualFloatingOptions,\n flip,\n offset,\n} from '@udecode/plate-floating';\nimport {\n type LinkFloatingToolbarState,\n FloatingLinkUrlInput,\n LinkOpenButton,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n middleware: [\n offset(12),\n flip({\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n padding: 12,\n }),\n ],\n placement: 'bottom-start',\n};\n\nexport interface LinkFloatingToolbarProps {\n state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n const insertState = useFloatingLinkInsertState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n hidden,\n props: insertProps,\n ref: insertRef,\n textInputProps,\n } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n editButtonProps,\n props: editProps,\n ref: editRef,\n unlinkButtonProps,\n } = useFloatingLinkEdit(editState);\n const inputProps = useFormInputProps({\n preventDefaultOnEnterKeydown: true,\n });\n\n if (hidden) return null;\n\n const input = (\n
\n
\n
\n \n
\n\n \n
\n \n
\n
\n \n
\n \n
\n
\n );\n\n const editContent = editState.isEditing ? (\n input\n ) : (\n
\n \n Edit link\n \n\n \n\n \n \n \n\n \n\n \n \n \n
\n );\n\n return (\n <>\n \n {input}\n \n\n \n {editContent}\n \n \n );\n}\n", + "path": "plate-ui/link-floating-toolbar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "link-floating-toolbar", + "registryDependencies": [ + "button", + "input", + "popover", + "separator" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/link-toolbar-button.json b/apps/www/public/r/styles/default/link-toolbar-button.json new file mode 100644 index 0000000000..8b5c675a42 --- /dev/null +++ b/apps/www/public/r/styles/default/link-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-link" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useLinkToolbarButton,\n useLinkToolbarButtonState,\n} from '@udecode/plate-link/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const LinkToolbarButton = withRef((rest, ref) => {\n const state = useLinkToolbarButtonState();\n const { props } = useLinkToolbarButton(state);\n\n return (\n \n \n \n );\n});\n", + "path": "plate-ui/link-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "link-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/list-element.json b/apps/www/public/r/styles/default/list-element.json new file mode 100644 index 0000000000..8e7e5db116 --- /dev/null +++ b/apps/www/public/r/styles/default/list-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-list" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ol: 'list-decimal',\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n },\n },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n 'variant',\n]);\n\nexport const ListElement = withRef(\n ({ children, variant = 'ul', ...props }, ref) => {\n const Component = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n", + "path": "plate-ui/list-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "list-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/list-toolbar-button.json b/apps/www/public/r/styles/default/list-toolbar-button.json new file mode 100644 index 0000000000..c7adf0008d --- /dev/null +++ b/apps/www/public/r/styles/default/list-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-list" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n BulletedListPlugin,\n useListToolbarButton,\n useListToolbarButtonState,\n} from '@udecode/plate-list/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ListToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: string;\n }\n>(({ nodeType = BulletedListPlugin.key, ...rest }, ref) => {\n const state = useListToolbarButtonState({ nodeType });\n const { props } = useListToolbarButton(state);\n\n return (\n \n {nodeType === BulletedListPlugin.key ? : }\n \n );\n});\n", + "path": "plate-ui/list-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "list-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/mark-toolbar-button.json b/apps/www/public/r/styles/default/mark-toolbar-button.json new file mode 100644 index 0000000000..c5e554328d --- /dev/null +++ b/apps/www/public/r/styles/default/mark-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useMarkToolbarButton,\n useMarkToolbarButtonState,\n} from '@udecode/plate-common/react';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MarkToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType: string;\n clear?: string[] | string;\n }\n>(({ clear, nodeType, ...rest }, ref) => {\n const state = useMarkToolbarButtonState({ clear, nodeType });\n const { props } = useMarkToolbarButton(state);\n\n return ;\n});\n", + "path": "plate-ui/mark-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "mark-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/media-embed-element.json b/apps/www/public/r/styles/default/media-embed-element.json new file mode 100644 index 0000000000..230ee02b18 --- /dev/null +++ b/apps/www/public/r/styles/default/media-embed-element.json @@ -0,0 +1,22 @@ +{ + "dependencies": [ + "@udecode/plate-media", + "react-tweet", + "react-lite-youtube-embed" + ], + "files": [ + { + "content": "import React from 'react';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common/react';\nimport { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';\nimport { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n Resizable,\n ResizeHandle,\n mediaResizeHandleVariants,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n ResizableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const {\n align = 'center',\n embed,\n focused,\n isTweet,\n isVideo,\n isYoutube,\n readOnly,\n selected,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:size-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n
\n );\n })\n);\n", + "path": "plate-ui/media-embed-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "media-embed-element", + "registryDependencies": [ + "media-popover", + "caption", + "resizable" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/media-popover.json b/apps/www/public/r/styles/default/media-popover.json new file mode 100644 index 0000000000..41bfb7c992 --- /dev/null +++ b/apps/www/public/r/styles/default/media-popover.json @@ -0,0 +1,21 @@ +{ + "dependencies": [ + "@udecode/plate-media" + ], + "files": [ + { + "content": "import React, { useEffect } from 'react';\n\nimport {\n type WithRequiredKey,\n isSelectionExpanded,\n} from '@udecode/plate-common';\nimport {\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n FloatingMedia as FloatingMediaPrimitive,\n floatingMediaActions,\n useFloatingMediaSelectors,\n} from '@udecode/plate-media/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { CaptionButton } from './caption';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n children: React.ReactNode;\n plugin: WithRequiredKey;\n}\n\nexport function MediaPopover({ children, plugin }: MediaPopoverProps) {\n const readOnly = useReadOnly();\n const selected = useSelected();\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n const isOpen = !readOnly && selected && selectionCollapsed;\n const isEditing = useFloatingMediaSelectors().isEditing();\n\n useEffect(() => {\n if (!isOpen && isEditing) {\n floatingMediaActions.isEditing(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n\n e.preventDefault()}\n >\n {isEditing ? (\n
\n
\n
\n \n
\n\n \n
\n
\n ) : (\n
\n \n Edit link\n \n\n Caption\n\n \n\n \n
\n )}\n \n
\n );\n}\n", + "path": "plate-ui/media-popover.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "media-popover", + "registryDependencies": [ + "button", + "input", + "popover", + "separator" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/media-toolbar-button.json b/apps/www/public/r/styles/default/media-toolbar-button.json new file mode 100644 index 0000000000..32f49e291d --- /dev/null +++ b/apps/www/public/r/styles/default/media-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-media" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n type ImagePlugin,\n type MediaEmbedPlugin,\n useMediaToolbarButton,\n} from '@udecode/plate-media/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: typeof ImagePlugin.key | typeof MediaEmbedPlugin.key;\n }\n>(({ nodeType, ...rest }, ref) => {\n const { props } = useMediaToolbarButton({ nodeType });\n\n return (\n \n \n \n );\n});\n", + "path": "plate-ui/media-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "media-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/mention-element.json b/apps/www/public/r/styles/default/mention-element.json new file mode 100644 index 0000000000..654419f28d --- /dev/null +++ b/apps/www/public/r/styles/default/mention-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-mention" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { TMentionElement } from '@udecode/plate-mention';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler } from '@udecode/plate-common';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const MentionElement = withRef<\n typeof PlateElement,\n {\n prefix?: string;\n renderLabel?: (mentionable: TMentionElement) => string;\n onClick?: (mentionNode: any) => void;\n }\n>(({ children, className, prefix, renderLabel, onClick, ...props }, ref) => {\n const element = useElement();\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n );\n});\n", + "path": "plate-ui/mention-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "mention-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/mention-input-element.json b/apps/www/public/r/styles/default/mention-input-element.json new file mode 100644 index 0000000000..0c7ed62d07 --- /dev/null +++ b/apps/www/public/r/styles/default/mention-input-element.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-mention" + ], + "files": [ + { + "content": "import React, { useState } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport { getMentionOnSelectItem } from '@udecode/plate-mention';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\nconst onSelectItem = getMentionOnSelectItem();\n\nexport const MentionInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n const [search, setSearch] = useState('');\n\n return (\n \n \n \n \n \n\n \n No results found\n\n {MENTIONABLES.map((item) => (\n onSelectItem(editor, item, search)}\n >\n {item.text}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n\nexport const MENTIONABLES = [\n { key: '0', text: 'Aayla Secura' },\n { key: '1', text: 'Adi Gallia' },\n {\n key: '2',\n text: 'Admiral Dodd Rancit',\n },\n {\n key: '3',\n text: 'Admiral Firmus Piett',\n },\n {\n key: '4',\n text: 'Admiral Gial Ackbar',\n },\n { key: '5', text: 'Admiral Ozzel' },\n { key: '6', text: 'Admiral Raddus' },\n {\n key: '7',\n text: 'Admiral Terrinald Screed',\n },\n { key: '8', text: 'Admiral Trench' },\n {\n key: '9',\n text: 'Admiral U.O. Statura',\n },\n { key: '10', text: 'Agen Kolar' },\n { key: '11', text: 'Agent Kallus' },\n {\n key: '12',\n text: 'Aiolin and Morit Astarte',\n },\n { key: '13', text: 'Aks Moe' },\n { key: '14', text: 'Almec' },\n { key: '15', text: 'Alton Kastle' },\n { key: '16', text: 'Amee' },\n { key: '17', text: 'AP-5' },\n { key: '18', text: 'Armitage Hux' },\n { key: '19', text: 'Artoo' },\n { key: '20', text: 'Arvel Crynyd' },\n { key: '21', text: 'Asajj Ventress' },\n { key: '22', text: 'Aurra Sing' },\n { key: '23', text: 'AZI-3' },\n { key: '24', text: 'Bala-Tik' },\n { key: '25', text: 'Barada' },\n { key: '26', text: 'Bargwill Tomder' },\n { key: '27', text: 'Baron Papanoida' },\n { key: '28', text: 'Barriss Offee' },\n { key: '29', text: 'Baze Malbus' },\n { key: '30', text: 'Bazine Netal' },\n { key: '31', text: 'BB-8' },\n { key: '32', text: 'BB-9E' },\n { key: '33', text: 'Ben Quadinaros' },\n { key: '34', text: 'Berch Teller' },\n { key: '35', text: 'Beru Lars' },\n { key: '36', text: 'Bib Fortuna' },\n {\n key: '37',\n text: 'Biggs Darklighter',\n },\n { key: '38', text: 'Black Krrsantan' },\n { key: '39', text: 'Bo-Katan Kryze' },\n { key: '40', text: 'Boba Fett' },\n { key: '41', text: 'Bobbajo' },\n { key: '42', text: 'Bodhi Rook' },\n { key: '43', text: 'Borvo the Hutt' },\n { key: '44', text: 'Boss Nass' },\n { key: '45', text: 'Bossk' },\n {\n key: '46',\n text: 'Breha Antilles-Organa',\n },\n { key: '47', text: 'Bren Derlin' },\n { key: '48', text: 'Brendol Hux' },\n { key: '49', text: 'BT-1' },\n];\n", + "path": "plate-ui/mention-input-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "mention-input-element", + "registryDependencies": [ + "inline-combobox" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/mode-dropdown-menu.json b/apps/www/public/r/styles/default/mode-dropdown-menu.json new file mode 100644 index 0000000000..4f581a36ec --- /dev/null +++ b/apps/www/public/r/styles/default/mode-dropdown-menu.json @@ -0,0 +1,17 @@ +{ + "dependencies": [], + "files": [ + { + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n focusEditor,\n useEditorReadOnly,\n useEditorRef,\n usePlateStore,\n} from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const setReadOnly = usePlateStore().set.readOnly();\n const readOnly = useEditorReadOnly();\n const openState = useOpenState();\n\n let value = 'editing';\n\n if (readOnly) value = 'viewing';\n\n const item: any = {\n editing: (\n <>\n \n Editing\n \n ),\n viewing: (\n <>\n \n Viewing\n \n ),\n };\n\n return (\n \n \n \n {item[value]}\n
\n \n\n \n {\n if (newValue !== 'viewing') {\n setReadOnly(false);\n }\n if (newValue === 'viewing') {\n setReadOnly(true);\n\n return;\n }\n if (newValue === 'editing') {\n focusEditor(editor);\n\n return;\n }\n }}\n >\n \n {item.editing}\n \n\n \n {item.viewing}\n \n \n \n \n );\n}\n", + "path": "plate-ui/mode-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "mode-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/more-dropdown-menu.json b/apps/www/public/r/styles/default/more-dropdown-menu.json new file mode 100644 index 0000000000..2d094658c8 --- /dev/null +++ b/apps/www/public/r/styles/default/more-dropdown-menu.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "@udecode/plate-basic-marks" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n SubscriptPlugin,\n SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {\n editor.tf.toggle.mark({\n key: SuperscriptPlugin.key,\n clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n editor.tf.toggle.mark({\n key: SubscriptPlugin.key,\n clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n );\n}\n", + "path": "plate-ui/more-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "more-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/outdent-toolbar-button.json b/apps/www/public/r/styles/default/outdent-toolbar-button.json new file mode 100644 index 0000000000..1613701961 --- /dev/null +++ b/apps/www/public/r/styles/default/outdent-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-indent" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useOutdentButton } from '@udecode/plate-indent/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const OutdentToolbarButton = withRef(\n (rest, ref) => {\n const { props } = useOutdentButton();\n\n return (\n \n \n \n );\n }\n);\n", + "path": "plate-ui/outdent-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "outdent-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/paragraph-element.json b/apps/www/public/r/styles/default/paragraph-element.json new file mode 100644 index 0000000000..30c24b2058 --- /dev/null +++ b/apps/www/public/r/styles/default/paragraph-element.json @@ -0,0 +1,13 @@ +{ + "files": [ + { + "content": "import { withCn } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const ParagraphElement = withCn(PlateElement, 'm-0 px-0 py-1');\n", + "path": "plate-ui/paragraph-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "paragraph-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/placeholder.json b/apps/www/public/r/styles/default/placeholder.json new file mode 100644 index 0000000000..7c6f98d460 --- /dev/null +++ b/apps/www/public/r/styles/default/placeholder.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-heading" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport {\n type PlaceholderProps,\n createNodeHOC,\n createNodesHOC,\n usePlaceholderState,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n const { children, nodeProps, placeholder } = props;\n\n const { enabled } = usePlaceholderState(props);\n\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n className: child.props.className,\n nodeProps: {\n ...nodeProps,\n className: cn(\n enabled &&\n 'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n ),\n placeholder,\n },\n });\n });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\n\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n withPlaceholdersPrimitive(components, [\n {\n key: ParagraphPlugin.key,\n hideOnBlur: true,\n placeholder: 'Type a paragraph',\n query: {\n maxLevel: 1,\n },\n },\n {\n key: HEADING_KEYS.h1,\n hideOnBlur: false,\n placeholder: 'Untitled',\n },\n ]);\n", + "path": "plate-ui/placeholder.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "placeholder", + "registryDependencies": [ + "paragraph-element" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/plate-types.json b/apps/www/public/r/styles/default/plate-types.json new file mode 100644 index 0000000000..728d50626b --- /dev/null +++ b/apps/www/public/r/styles/default/plate-types.json @@ -0,0 +1,13 @@ +{ + "external": true, + "files": [ + { + "content": "import type React from 'react';\n\nimport type { usePlaygroundEditor } from '@/registry/default/example/playground-demo';\nimport type { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport type {\n CodeBlockPlugin,\n CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport type { TCommentText } from '@udecode/plate-comments';\nimport type { ElementOf, TElement, TText } from '@udecode/plate-common';\nimport type { TExcalidrawElement } from '@udecode/plate-excalidraw';\nimport type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport type { HEADING_KEYS } from '@udecode/plate-heading';\nimport type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport type { TLinkElement } from '@udecode/plate-link';\nimport type { LinkPlugin } from '@udecode/plate-link/react';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\nimport type {\n BulletedListPlugin,\n ListItemPlugin,\n NumberedListPlugin,\n TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';\nimport type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport type {\n TMentionElement,\n TMentionInputElement,\n} from '@udecode/plate-mention';\nimport type {\n MentionInputPlugin,\n MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport type { TTableElement } from '@udecode/plate-table';\nimport type {\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport type { TToggleElement } from '@udecode/plate-toggle';\nimport type { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport {\n type ParagraphPlugin,\n useEditorRef,\n} from '@udecode/plate-common/react';\n\n/** Text */\n\nexport type EmptyText = {\n text: '';\n};\n\nexport type PlainText = {\n text: string;\n};\n\nexport interface RichText extends TText, TCommentText {\n backgroundColor?: React.CSSProperties['backgroundColor'];\n bold?: boolean;\n code?: boolean;\n color?: React.CSSProperties['color'];\n fontFamily?: React.CSSProperties['fontFamily'];\n fontSize?: React.CSSProperties['fontSize'];\n fontWeight?: React.CSSProperties['fontWeight'];\n italic?: boolean;\n kbd?: boolean;\n strikethrough?: boolean;\n subscript?: boolean;\n underline?: boolean;\n}\n\n/** Inline Elements */\n\nexport interface MyLinkElement extends TLinkElement {\n children: RichText[];\n type: typeof LinkPlugin.key;\n}\n\nexport interface MyMentionInputElement extends TMentionInputElement {\n children: [PlainText];\n type: typeof MentionInputPlugin.key;\n}\n\nexport interface MyMentionElement extends TMentionElement {\n children: [EmptyText];\n type: typeof MentionPlugin.key;\n}\n\nexport type MyInlineElement =\n | MyLinkElement\n | MyMentionElement\n | MyMentionInputElement;\n\nexport type MyInlineDescendant = MyInlineElement | RichText;\n\nexport type MyInlineChildren = MyInlineDescendant[];\n\n/** Block props */\n\nexport interface MyIndentProps {\n indent?: number;\n}\n\nexport interface MyIndentListProps extends MyIndentProps {\n listRestart?: number;\n listStart?: number;\n listStyleType?: string;\n}\n\nexport interface MyLineHeightProps {\n lineHeight?: React.CSSProperties['lineHeight'];\n}\n\nexport interface MyAlignProps {\n align?: React.CSSProperties['textAlign'];\n}\n\nexport interface MyBlockElement\n extends TElement,\n MyIndentListProps,\n MyLineHeightProps {\n id?: string;\n}\n\n/** Blocks */\n\nexport interface MyParagraphElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof ParagraphPlugin.key;\n}\n\nexport interface MyH1Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h1;\n}\n\nexport interface MyH2Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h2;\n}\n\nexport interface MyH3Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h3;\n}\n\nexport interface MyH4Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h4;\n}\n\nexport interface MyH5Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h5;\n}\n\nexport interface MyH6Element extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof HEADING_KEYS.h6;\n}\n\nexport interface MyBlockquoteElement extends MyBlockElement {\n children: MyInlineChildren;\n type: typeof BlockquotePlugin.key;\n}\n\nexport interface MyCodeBlockElement extends MyBlockElement {\n children: MyCodeLineElement[];\n type: typeof CodeBlockPlugin.key;\n}\n\nexport interface MyCodeLineElement extends TElement {\n children: PlainText[];\n type: typeof CodeLinePlugin.key;\n}\n\nexport interface MyTableElement extends TTableElement, MyBlockElement {\n children: MyTableRowElement[];\n type: typeof TablePlugin.key;\n}\n\nexport interface MyTableRowElement extends TElement {\n children: MyTableCellElement[];\n type: typeof TableRowPlugin.key;\n}\n\nexport interface MyTableCellElement extends TElement {\n children: MyNestableBlock[];\n type: typeof TableCellPlugin.key;\n}\n\nexport interface MyBulletedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof BulletedListPlugin.key;\n}\n\nexport interface MyNumberedListElement extends TElement, MyBlockElement {\n children: MyListItemElement[];\n type: typeof NumberedListPlugin.key;\n}\n\nexport interface MyListItemElement extends TElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof ListItemPlugin.key;\n}\n\nexport interface MyTodoListElement\n extends TTodoListItemElement,\n MyBlockElement {\n children: MyInlineChildren;\n type: typeof TodoListPlugin.key;\n}\n\nexport interface MyToggleElement extends TToggleElement, MyBlockElement {\n children: MyInlineChildren;\n type: typeof TogglePlugin.key;\n}\n\nexport interface MyImageElement extends TImageElement, MyBlockElement {\n children: [EmptyText];\n type: typeof ImagePlugin.key;\n}\n\nexport interface MyMediaEmbedElement\n extends TMediaEmbedElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof MediaEmbedPlugin.key;\n}\n\nexport interface MyHrElement extends MyBlockElement {\n children: [EmptyText];\n type: typeof HorizontalRulePlugin.key;\n}\n\nexport interface MyExcalidrawElement\n extends TExcalidrawElement,\n MyBlockElement {\n children: [EmptyText];\n type: typeof ExcalidrawPlugin.key;\n}\n\nexport type MyNestableBlock = MyParagraphElement;\n\nexport type MyElement = ElementOf;\n\nexport type MyBlock = Exclude;\n\nexport type MyRootBlock =\n | MyBlockquoteElement\n | MyBulletedListElement\n | MyCodeBlockElement\n | MyExcalidrawElement\n | MyH1Element\n | MyH2Element\n | MyH3Element\n | MyH4Element\n | MyH5Element\n | MyH6Element\n | MyHrElement\n | MyImageElement\n | MyMediaEmbedElement\n | MyNumberedListElement\n | MyParagraphElement\n | MyTableElement\n | MyTodoListElement\n | MyToggleElement;\n\n/** Editor types */\n\nexport type MyValue = MyRootBlock[];\n\nexport type MyEditor = ReturnType;\n\nexport const useMyEditorRef = () => useEditorRef();\n", + "path": "lib/plate-types.ts", + "target": "", + "type": "registry:lib" + } + ], + "name": "plate-types", + "type": "registry:lib" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/popover.json b/apps/www/public/r/styles/default/popover.json new file mode 100644 index 0000000000..05f59cbf2f --- /dev/null +++ b/apps/www/public/r/styles/default/popover.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-popover" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const Popover = PopoverPrimitive.Root;\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\n\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nexport const PopoverContent = withRef(\n ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => (\n \n \n \n )\n);\n", + "path": "plate-ui/popover.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "popover", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/resizable.json b/apps/www/public/r/styles/default/resizable.json new file mode 100644 index 0000000000..bef4ba55a8 --- /dev/null +++ b/apps/www/public/r/styles/default/resizable.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-resizable" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n bottom: 'w-full cursor-row-resize',\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n ResizeHandlePrimitive,\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n (props, ref) => (\n \n )\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n center: 'mx-auto',\n left: 'mr-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n", + "path": "plate-ui/resizable.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "resizable", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/search-highlight-leaf.json b/apps/www/public/r/styles/default/search-highlight-leaf.json new file mode 100644 index 0000000000..27c4a5f165 --- /dev/null +++ b/apps/www/public/r/styles/default/search-highlight-leaf.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-find-replace" + ], + "files": [ + { + "content": "import { withCn } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100');\n", + "path": "plate-ui/search-highlight-leaf.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "search-highlight-leaf", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/separator.json b/apps/www/public/r/styles/default/separator.json new file mode 100644 index 0000000000..cc5ff32e73 --- /dev/null +++ b/apps/www/public/r/styles/default/separator.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-separator" + ], + "files": [ + { + "content": "'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { withProps, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nconst separatorVariants = cva('shrink-0 bg-border', {\n defaultVariants: {\n orientation: 'horizontal',\n },\n variants: {\n orientation: {\n horizontal: 'h-px w-full',\n vertical: 'h-full w-px',\n },\n },\n});\n\nexport const Separator = withVariants(\n withProps(SeparatorPrimitive.Root, {\n decorative: true,\n orientation: 'horizontal',\n }),\n separatorVariants\n);\n", + "path": "plate-ui/separator.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "separator", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/slash-input-element.json b/apps/www/public/r/styles/default/slash-input-element.json new file mode 100644 index 0000000000..f026267f31 --- /dev/null +++ b/apps/www/public/r/styles/default/slash-input-element.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "@udecode/plate-heading", + "@udecode/plate-indent-list" + ], + "files": [ + { + "content": "import React, { type ComponentType, type SVGProps } from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { type PlateEditor, PlateElement } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n InlineCombobox,\n InlineComboboxContent,\n InlineComboboxEmpty,\n InlineComboboxInput,\n InlineComboboxItem,\n} from './inline-combobox';\n\ninterface SlashCommandRule {\n icon: ComponentType>;\n onSelect: (editor: PlateEditor) => void;\n value: string;\n keywords?: string[];\n}\n\nconst rules: SlashCommandRule[] = [\n {\n icon: Icons.h1,\n value: 'Heading 1',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h1 });\n },\n },\n {\n icon: Icons.h2,\n value: 'Heading 2',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h2 });\n },\n },\n {\n icon: Icons.h3,\n value: 'Heading 3',\n onSelect: (editor) => {\n editor.tf.toggle.block({ type: HEADING_KEYS.h3 });\n },\n },\n {\n icon: Icons.ul,\n keywords: ['ul', 'unordered list'],\n value: 'Bulleted list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Disc,\n });\n },\n },\n {\n icon: Icons.ol,\n keywords: ['ol', 'ordered list'],\n value: 'Numbered list',\n onSelect: (editor) => {\n toggleIndentList(editor, {\n listStyleType: ListStyleType.Decimal,\n });\n },\n },\n {\n icon: Icons.add,\n keywords: ['inline', 'date'],\n value: 'Date',\n onSelect: (editor) => {\n editor.getTransforms(DatePlugin).insert.date();\n },\n },\n];\n\nexport const SlashInputElement = withRef(\n ({ className, ...props }, ref) => {\n const { children, editor, element } = props;\n\n return (\n \n \n \n\n \n \n No matching commands found\n \n\n {rules.map(({ icon: Icon, keywords, value, onSelect }) => (\n onSelect(editor)}\n keywords={keywords}\n >\n \n {value}\n \n ))}\n \n \n\n {children}\n \n );\n }\n);\n", + "path": "plate-ui/slash-input-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "slash-input-element", + "registryDependencies": [ + "inline-combobox" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-cell-element.json b/apps/www/public/r/styles/default/table-cell-element.json new file mode 100644 index 0000000000..a17957cf64 --- /dev/null +++ b/apps/www/public/r/styles/default/table-cell-element.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table/react';\n\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n isHeader?: boolean;\n }\n>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {\n const { element } = props;\n\n const {\n borders,\n colIndex,\n colSpan,\n hovered,\n hoveredLeft,\n isSelectingCell,\n readOnly,\n rowIndex,\n rowSize,\n selected,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n colSpan,\n rowIndex,\n });\n\n const { bottomProps, hiddenLeft, leftProps, rightProps } =\n useTableCellElementResizable(resizableState);\n\n const Cell = isHeader ? 'th' : 'td';\n\n return (\n _*]:m-0',\n 'before:size-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n \n );\n});\n\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n", + "path": "plate-ui/table-cell-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "table-cell-element", + "registryDependencies": [ + "resizable" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-dropdown-menu.json b/apps/www/public/r/styles/default/table-dropdown-menu.json new file mode 100644 index 0000000000..eab4f072f7 --- /dev/null +++ b/apps/www/public/r/styles/default/table-dropdown-menu.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { someNode } from '@udecode/plate-common';\nimport {\n focusEditor,\n useEditorPlugin,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { deleteTable, insertTableRow } from '@udecode/plate-table';\nimport {\n TablePlugin,\n deleteColumn,\n deleteRow,\n insertTable,\n} from '@udecode/plate-table/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n const tableSelected = useEditorSelector(\n (editor) => someNode(editor, { match: { type: TablePlugin.key } }),\n []\n );\n\n const { editor, tf } = useEditorPlugin(TablePlugin);\n\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n \n \n \n Table\n \n \n {\n insertTable(editor);\n focusEditor(editor);\n }}\n >\n \n Insert table\n \n {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n \n Delete table\n \n \n \n\n \n \n \n Column\n \n \n {\n tf.insert.tableColumn();\n focusEditor(editor);\n }}\n >\n \n Insert column after\n \n {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n \n Delete column\n \n \n \n\n \n \n \n Row\n \n \n {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n \n Insert row after\n \n {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n \n Delete row\n \n \n \n \n \n );\n}\n", + "path": "plate-ui/table-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "table-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-element.json b/apps/www/public/r/styles/default/table-element.json new file mode 100644 index 0000000000..abba3ca04d --- /dev/null +++ b/apps/www/public/r/styles/default/table-element.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { TTableElement } from '@udecode/plate-table';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n TableProvider,\n mergeTableCells,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n mergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n contentEditable={false}\n isMenu\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n
\n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n
\n
\n );\n })\n);\n", + "path": "plate-ui/table-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "table-element", + "registryDependencies": [ + "dropdown-menu" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/table-row-element.json b/apps/www/public/r/styles/default/table-row-element.json new file mode 100644 index 0000000000..d0b11642cd --- /dev/null +++ b/apps/www/public/r/styles/default/table-row-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-table" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const TableRowElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n }\n>(({ children, hideBorder, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n", + "path": "plate-ui/table-row-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "table-row-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/theme-daylight.json b/apps/www/public/r/styles/default/theme-daylight.json new file mode 100644 index 0000000000..4caa9ed2af --- /dev/null +++ b/apps/www/public/r/styles/default/theme-daylight.json @@ -0,0 +1,58 @@ +{ + "cssVars": { + "dark": { + "accent": "36 64% 57%", + "accent-foreground": "36 72% 17%", + "background": "36 39% 88%", + "border": "36 45% 60%", + "card": "36 46% 82%", + "card-foreground": "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%", + "destructive-foreground": "0 0% 98%", + "foreground": "36 45% 15%", + "input": "36 45% 60%", + "muted": "36 33% 75%", + "muted-foreground": "36 45% 25%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "36 45% 70%", + "primary-foreground": "36 45% 11%", + "ring": "36 45% 30%", + "secondary": "40 35% 77%", + "secondary-foreground": "36 45% 25%" + }, + "light": { + "accent": "36 64% 57%", + "accent-foreground": "36 72% 17%", + "background": "36 39% 88%", + "border": "36 45% 60%", + "card": "36 46% 82%", + "card-foreground": "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%", + "destructive-foreground": "0 0% 98%", + "foreground": "36 45% 15%", + "input": "36 45% 60%", + "muted": "36 33% 75%", + "muted-foreground": "36 45% 25%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "36 45% 70%", + "primary-foreground": "36 45% 11%", + "ring": "36 45% 30%", + "secondary": "40 35% 77%", + "secondary-foreground": "36 45% 25%" + } + }, + "name": "theme-daylight", + "type": "registry:theme" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/theme-emerald.json b/apps/www/public/r/styles/default/theme-emerald.json new file mode 100644 index 0000000000..40bdec100d --- /dev/null +++ b/apps/www/public/r/styles/default/theme-emerald.json @@ -0,0 +1,58 @@ +{ + "cssVars": { + "dark": { + "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%", + "destructive-foreground": "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%", + "primary-foreground": "356 29% 98%", + "ring": "142 86% 28%", + "secondary": "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%" + }, + "light": { + "accent": "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + "background": "0 0% 100%", + "border": "240 5.9% 90%", + "card": "0 0% 100%", + "card-foreground": "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%", + "destructive-foreground": "0 0% 98%", + "foreground": "240 10% 3.9%", + "input": "240 5.9% 90%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 45%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "142 86% 28%", + "primary-foreground": "356 29% 98%", + "ring": "142 86% 28%", + "secondary": "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%" + } + }, + "name": "theme-emerald", + "type": "registry:theme" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/theme-midnight.json b/apps/www/public/r/styles/default/theme-midnight.json new file mode 100644 index 0000000000..995298a3f4 --- /dev/null +++ b/apps/www/public/r/styles/default/theme-midnight.json @@ -0,0 +1,58 @@ +{ + "cssVars": { + "dark": { + "accent": "240 0% 13%", + "accent-foreground": "60 0% 100%", + "background": "240 5% 6%", + "border": "240 6% 20%", + "card": "240 4% 10%", + "card-foreground": "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%", + "destructive-foreground": "0 0% 98%", + "foreground": "60 5% 90%", + "input": "240 6% 20%", + "muted": "240 5% 25%", + "muted-foreground": "60 5% 85%", + "popover": "240 5% 15%", + "popover-foreground": "60 5% 85%", + "primary": "240 0% 90%", + "primary-foreground": "60 0% 0%", + "ring": "240 5% 90%", + "secondary": "240 4% 15%", + "secondary-foreground": "60 5% 85%" + }, + "light": { + "accent": "240 0% 13%", + "accent-foreground": "60 0% 100%", + "background": "240 5% 6%", + "border": "240 6% 20%", + "card": "240 4% 10%", + "card-foreground": "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%", + "destructive-foreground": "0 0% 98%", + "foreground": "60 5% 90%", + "input": "240 6% 20%", + "muted": "240 5% 25%", + "muted-foreground": "60 5% 85%", + "popover": "240 5% 15%", + "popover-foreground": "60 5% 85%", + "primary": "240 0% 90%", + "primary-foreground": "60 0% 0%", + "ring": "240 5% 90%", + "secondary": "240 4% 15%", + "secondary-foreground": "60 5% 85%" + } + }, + "name": "theme-midnight", + "type": "registry:theme" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/todo-list-element.json b/apps/www/public/r/styles/default/todo-list-element.json new file mode 100644 index 0000000000..3bd6e5a247 --- /dev/null +++ b/apps/www/public/r/styles/default/todo-list-element.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-list" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoListElement = withRef(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n", + "path": "plate-ui/todo-list-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "todo-list-element", + "registryDependencies": [ + "checkbox" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/toggle-element.json b/apps/www/public/r/styles/default/toggle-element.json new file mode 100644 index 0000000000..6c583fcdef --- /dev/null +++ b/apps/www/public/r/styles/default/toggle-element.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@udecode/plate-toggle" + ], + "files": [ + { + "content": "import { withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common/react';\nimport {\n useToggleButton,\n useToggleButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nexport const ToggleElement = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const state = useToggleButtonState(element.id as string);\n const { buttonProps, open } = useToggleButton(state);\n\n return (\n \n
\n \n {open ? : }\n \n {children}\n
\n
\n );\n }\n);\n", + "path": "plate-ui/toggle-element.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "toggle-element", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/toggle-toolbar-button.json b/apps/www/public/r/styles/default/toggle-toolbar-button.json new file mode 100644 index 0000000000..511152b3e7 --- /dev/null +++ b/apps/www/public/r/styles/default/toggle-toolbar-button.json @@ -0,0 +1,18 @@ +{ + "dependencies": [ + "@udecode/plate-toggle" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n useToggleToolbarButton,\n useToggleToolbarButtonState,\n} from '@udecode/plate-toggle/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ToggleToolbarButton = withRef(\n (rest, ref) => {\n const state = useToggleToolbarButtonState();\n const { props } = useToggleToolbarButton(state);\n\n return (\n \n \n \n );\n }\n);\n", + "path": "plate-ui/toggle-toolbar-button.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "toggle-toolbar-button", + "registryDependencies": [ + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json new file mode 100644 index 0000000000..9197df6d92 --- /dev/null +++ b/apps/www/public/r/styles/default/toolbar.json @@ -0,0 +1,19 @@ +{ + "dependencies": [ + "@radix-ui/react-toolbar" + ], + "files": [ + { + "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n ToolbarPrimitive.ToolbarToggleGroup,\n 'flex items-center'\n);\n\nexport const ToolbarLink = withCn(\n ToolbarPrimitive.Link,\n 'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n ToolbarPrimitive.Separator,\n 'my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n '[&_svg:not([data-icon])]:size-5'\n ),\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n size: {\n default: 'h-10 px-3',\n lg: 'h-11 px-5',\n sm: 'h-9 px-2',\n },\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n {\n isDropdown?: boolean;\n pressed?: boolean;\n } & Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps\n >(\n (\n { children, className, isDropdown, pressed, size, variant, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
{children}
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\n ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<\n 'div',\n {\n noSeparator?: boolean;\n }\n>(({ children, className, noSeparator }, ref) => {\n const childArr = React.Children.map(children, (c) => c);\n\n if (!childArr || childArr.length === 0) return null;\n\n return (\n
\n {!noSeparator && (\n
\n \n
\n )}\n\n
{children}
\n
\n );\n});\n", + "path": "plate-ui/toolbar.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "toolbar", + "registryDependencies": [ + "tooltip", + "separator" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/tooltip.json b/apps/www/public/r/styles/default/tooltip.json new file mode 100644 index 0000000000..949704ca00 --- /dev/null +++ b/apps/www/public/r/styles/default/tooltip.json @@ -0,0 +1,16 @@ +{ + "dependencies": [ + "@radix-ui/react-tooltip" + ], + "files": [ + { + "content": "'use client';\n\nimport React from 'react';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\nexport const Tooltip = TooltipPrimitive.Root;\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n withProps(TooltipPrimitive.Content, {\n sideOffset: 4,\n }),\n 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'\n);\n\nexport function withTooltip<\n T extends React.ComponentType | keyof HTMLElementTagNameMap,\n>(Component: T) {\n return React.forwardRef<\n React.ElementRef,\n {\n tooltipContentProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltipProps?: Omit<\n React.ComponentPropsWithoutRef,\n 'children'\n >;\n tooltip?: React.ReactNode;\n } & React.ComponentPropsWithoutRef\n >(function ExtendComponent(\n { tooltip, tooltipContentProps, tooltipProps, ...props },\n ref\n ) {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n const component = ;\n\n if (tooltip && mounted) {\n return (\n \n {component}\n\n \n {tooltip}\n \n \n );\n }\n\n return component;\n });\n}\n", + "path": "plate-ui/tooltip.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "tooltip", + "registryDependencies": [], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json new file mode 100644 index 0000000000..0ccbce78a8 --- /dev/null +++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json @@ -0,0 +1,20 @@ +{ + "dependencies": [ + "@udecode/plate-block-quote", + "@udecode/plate-heading" + ], + "files": [ + { + "content": "import React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n collapseSelection,\n getNodeEntries,\n isBlock,\n} from '@udecode/plate-common';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useEditorSelector,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n description: 'Paragraph',\n icon: Icons.paragraph,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n description: 'Heading 1',\n icon: Icons.h1,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n description: 'Heading 2',\n icon: Icons.h2,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n description: 'Heading 3',\n icon: Icons.h3,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n];\n\nconst defaultItem = items.find((item) => item.value === ParagraphPlugin.key)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const value: string = useEditorSelector((editor) => {\n let initialNodeType: string = ParagraphPlugin.key;\n let allNodesMatchInitialNodeType = false;\n const codeBlockEntries = getNodeEntries(editor, {\n match: (n) => isBlock(editor, n),\n mode: 'highest',\n });\n const nodes = Array.from(codeBlockEntries);\n\n if (nodes.length > 0) {\n initialNodeType = nodes[0][0].type as string;\n allNodesMatchInitialNodeType = nodes.every(([node]) => {\n const type: string = (node?.type as string) || ParagraphPlugin.key;\n\n return type === initialNodeType;\n });\n }\n\n return allNodesMatchInitialNodeType ? initialNodeType : ParagraphPlugin.key;\n }, []);\n\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const selectedItem =\n items.find((item) => item.value === value) ?? defaultItem;\n const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n return (\n \n \n \n \n {selectedItemLabel}\n \n \n\n \n Turn into\n\n {\n // if (type === 'ul' || type === 'ol') {\n // if (settingsStore.get.checkedId(IndentListPlugin.key)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n // } else {\n // unwrapList(editor);\n editor.tf.toggle.block({ type });\n // }\n\n collapseSelection(editor);\n focusEditor(editor);\n }}\n >\n {items.map(({ icon: Icon, label, value: itemValue }) => (\n \n \n {label}\n \n ))}\n \n \n \n );\n}\n", + "path": "plate-ui/turn-into-dropdown-menu.tsx", + "target": "", + "type": "registry:ui" + } + ], + "name": "turn-into-dropdown-menu", + "registryDependencies": [ + "dropdown-menu", + "toolbar" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/use-debounce.json b/apps/www/public/r/styles/default/use-debounce.json new file mode 100644 index 0000000000..9fb7aafb2b --- /dev/null +++ b/apps/www/public/r/styles/default/use-debounce.json @@ -0,0 +1,11 @@ +{ + "files": [ + { + "content": "import * as React from 'react';\n\nexport const useDebounce = (value: T, delay = 500) => {\n const [debouncedValue, setDebouncedValue] = React.useState(value);\n\n React.useEffect(() => {\n const handler: NodeJS.Timeout = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cancel the timeout if value changes (also on delay change or unmount)\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n};\n", + "path": "hooks/use-debounce.ts", + "type": "registry:hook" + } + ], + "name": "use-debounce", + "type": "registry:hook" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/utils.json b/apps/www/public/r/styles/default/utils.json new file mode 100644 index 0000000000..9f9205a62a --- /dev/null +++ b/apps/www/public/r/styles/default/utils.json @@ -0,0 +1,15 @@ +{ + "dependencies": [ + "clsx", + "tailwind-merge" + ], + "files": [ + { + "content": "import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n", + "path": "lib/utils.ts", + "type": "registry:lib" + } + ], + "name": "utils", + "type": "registry:lib" +} \ No newline at end of file diff --git a/apps/www/public/r/styles/index.json b/apps/www/public/r/styles/index.json new file mode 100644 index 0000000000..ffaacc0086 --- /dev/null +++ b/apps/www/public/r/styles/index.json @@ -0,0 +1,6 @@ +[ + { + "label": "Default", + "name": "default" + } +] \ No newline at end of file diff --git a/apps/www/public/r/themes.css b/apps/www/public/r/themes.css new file mode 100644 index 0000000000..41f074cc5c --- /dev/null +++ b/apps/www/public/r/themes.css @@ -0,0 +1,768 @@ + +.theme-zinc { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 5.9% 10%; + + --radius: 0.5rem; +} + +.dark .theme-zinc { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 240 3.7% 25%; + --input: 240 3.7% 25%; + + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 240 4.9% 83.9%; +} + +.theme-slate { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --radius: 0.5rem; +} + +.dark .theme-slate { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 217.2 32.6% 17.5%; +} + +.theme-stone { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 24 9.8% 10%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20 14.3% 4.1%; + + --radius: 0.95rem; +} + +.dark .theme-stone { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 60 9.1% 97.8%; + --primary-foreground: 24 9.8% 10%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 24 5.7% 82.9%; +} + +.theme-gray { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 220.9 39.3% 11%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 210 20% 98%; + + --ring: 224 71.4% 4.1%; + + --radius: 0.35rem; +} + +.dark .theme-gray { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 210 20% 98%; + --primary-foreground: 220.9 39.3% 11%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 216 12.2% 83.9%; +} + +.theme-neutral { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 0% 3.9%; + + --radius: ; +} + +.dark .theme-neutral { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 0% 83.1%; +} + +.theme-red { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 72.2% 50.6%; + + --radius: 0.4rem; +} + +.dark .theme-red { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + + --ring: 0 72.2% 50.6%; +} + +.theme-rose { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + + --ring: 346.8 77.2% 49.8%; + + --radius: 0.5rem; +} + +.dark .theme-rose { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; + + --muted: 0 0% 15%; + --muted-foreground: 240 5% 64.9%; + + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; + + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; + + --border: 240 3.7% 25%; + --input: 240 3.7% 25%; + + --primary: 346.8 77.2% 49.8%; + --primary-foreground: 355.7 100% 97.3%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + + --ring: 346.8 77.2% 49.8%; +} + +.theme-orange { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 24.6 95% 53.1%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 24.6 95% 53.1%; + + --radius: 0.95rem; +} + +.dark .theme-orange { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 60 9.1% 97.8%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20.5 90.2% 48.2%; +} + +.theme-green { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; + + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 0 0% 98%; + + --ring: 142.1 76.2% 36.3%; + + --radius: ; +} + +.dark .theme-green { + --background: 20 14.3% 4.1%; + --foreground: 0 0% 95%; + + --muted: 0 0% 15%; + --muted-foreground: 240 5% 64.9%; + + --popover: 0 0% 9%; + --popover-foreground: 0 0% 95%; + + --card: 24 9.8% 10%; + --card-foreground: 0 0% 95%; + + --border: 240 3.7% 25%; + --input: 240 3.7% 25%; + + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; + + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 0 0% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + + --ring: 142.4 71.8% 29.2%; +} + +.theme-blue { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 221.2 83.2% 53.3%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 210 40% 98%; + + --ring: 221.2 83.2% 53.3%; + + --radius: ; +} + +.dark .theme-blue { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --ring: 224.3 76.3% 48%; +} + +.theme-yellow { + --background: 0 0% 100%; + --foreground: 20 14.3% 4.1%; + + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + + --popover: 0 0% 100%; + --popover-foreground: 20 14.3% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 20 14.3% 4.1%; + + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + + --primary: 47.9 95.8% 53.1%; + --primary-foreground: 26 83.3% 14.1%; + + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 20 14.3% 4.1%; + + --radius: 0.95rem; +} + +.dark .theme-yellow { + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + + --primary: 47.9 95.8% 53.1%; + --primary-foreground: 26 83.3% 14.1%; + + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 60 9.1% 97.8%; + + --ring: 35.5 91.7% 32.9%; +} + +.theme-violet { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 262.1 83.3% 57.8%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 72.22% 50.59%; + --destructive-foreground: 210 20% 98%; + + --ring: 262.1 83.3% 57.8%; + + --radius: ; +} + +.dark .theme-violet { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 263.4 70% 50.4%; + --primary-foreground: 210 20% 98%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 263.4 70% 50.4%; +} \ No newline at end of file diff --git a/apps/www/public/r/themes/gray.json b/apps/www/public/r/themes/gray.json new file mode 100644 index 0000000000..d189d77175 --- /dev/null +++ b/apps/www/public/r/themes/gray.json @@ -0,0 +1,48 @@ +{ + "name": "gray", + "label": "Gray", + "cssVars": { + "dark": { + "accent": "215 27.9% 16.9%", + "accent-foreground": "210 20% 98%", + "background": "224 71.4% 4.1%", + "border": "215 27.9% 16.9%", + "card": "224 71.4% 4.1%", + "card-foreground": "210 20% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 20% 98%", + "foreground": "210 20% 98%", + "input": "215 27.9% 16.9%", + "muted": "215 27.9% 16.9%", + "muted-foreground": "217.9 10.6% 64.9%", + "popover": "224 71.4% 4.1%", + "popover-foreground": "210 20% 98%", + "primary": "210 20% 98%", + "primary-foreground": "220.9 39.3% 11%", + "ring": "216 12.2% 83.9%", + "secondary": "215 27.9% 16.9%", + "secondary-foreground": "210 20% 98%" + }, + "light": { + "accent": "220 14.3% 95.9%", + "accent-foreground": "220.9 39.3% 11%", + "background": "0 0% 100%", + "border": "220 13% 91%", + "card": "0 0% 100%", + "card-foreground": "224 71.4% 4.1%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 20% 98%", + "foreground": "224 71.4% 4.1%", + "input": "220 13% 91%", + "muted": "220 14.3% 95.9%", + "muted-foreground": "220 8.9% 46.1%", + "popover": "0 0% 100%", + "popover-foreground": "224 71.4% 4.1%", + "primary": "220.9 39.3% 11%", + "primary-foreground": "210 20% 98%", + "ring": "224 71.4% 4.1%", + "secondary": "220 14.3% 95.9%", + "secondary-foreground": "220.9 39.3% 11%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/r/themes/neutral.json b/apps/www/public/r/themes/neutral.json new file mode 100644 index 0000000000..9f19b2c228 --- /dev/null +++ b/apps/www/public/r/themes/neutral.json @@ -0,0 +1,48 @@ +{ + "name": "neutral", + "label": "Neutral", + "cssVars": { + "dark": { + "accent": "0 0% 14.9%", + "accent-foreground": "0 0% 98%", + "background": "0 0% 3.9%", + "border": "0 0% 14.9%", + "card": "0 0% 3.9%", + "card-foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + "foreground": "0 0% 98%", + "input": "0 0% 14.9%", + "muted": "0 0% 14.9%", + "muted-foreground": "0 0% 63.9%", + "popover": "0 0% 3.9%", + "popover-foreground": "0 0% 98%", + "primary": "0 0% 98%", + "primary-foreground": "0 0% 9%", + "ring": "0 0% 83.1%", + "secondary": "0 0% 14.9%", + "secondary-foreground": "0 0% 98%" + }, + "light": { + "accent": "0 0% 96.1%", + "accent-foreground": "0 0% 9%", + "background": "0 0% 100%", + "border": "0 0% 89.8%", + "card": "0 0% 100%", + "card-foreground": "0 0% 3.9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "foreground": "0 0% 3.9%", + "input": "0 0% 89.8%", + "muted": "0 0% 96.1%", + "muted-foreground": "0 0% 45.1%", + "popover": "0 0% 100%", + "popover-foreground": "0 0% 3.9%", + "primary": "0 0% 9%", + "primary-foreground": "0 0% 98%", + "ring": "0 0% 3.9%", + "secondary": "0 0% 96.1%", + "secondary-foreground": "0 0% 9%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/r/themes/slate.json b/apps/www/public/r/themes/slate.json new file mode 100644 index 0000000000..8e699614d6 --- /dev/null +++ b/apps/www/public/r/themes/slate.json @@ -0,0 +1,48 @@ +{ + "name": "slate", + "label": "Slate", + "cssVars": { + "dark": { + "accent": "217.2 32.6% 17.5%", + "accent-foreground": "210 40% 98%", + "background": "222.2 84% 4.9%", + "border": "217.2 32.6% 17.5%", + "card": "222.2 84% 4.9%", + "card-foreground": "210 40% 98%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "210 40% 98%", + "foreground": "210 40% 98%", + "input": "217.2 32.6% 17.5%", + "muted": "217.2 32.6% 17.5%", + "muted-foreground": "215 20.2% 65.1%", + "popover": "222.2 84% 4.9%", + "popover-foreground": "210 40% 98%", + "primary": "210 40% 98%", + "primary-foreground": "222.2 47.4% 11.2%", + "ring": "212.7 26.8% 83.9%", + "secondary": "217.2 32.6% 17.5%", + "secondary-foreground": "210 40% 98%" + }, + "light": { + "accent": "210 40% 96.1%", + "accent-foreground": "222.2 47.4% 11.2%", + "background": "0 0% 100%", + "border": "214.3 31.8% 91.4%", + "card": "0 0% 100%", + "card-foreground": "222.2 84% 4.9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "210 40% 98%", + "foreground": "222.2 84% 4.9%", + "input": "214.3 31.8% 91.4%", + "muted": "210 40% 96.1%", + "muted-foreground": "215.4 16.3% 46.9%", + "popover": "0 0% 100%", + "popover-foreground": "222.2 84% 4.9%", + "primary": "222.2 47.4% 11.2%", + "primary-foreground": "210 40% 98%", + "ring": "222.2 84% 4.9%", + "secondary": "210 40% 96.1%", + "secondary-foreground": "222.2 47.4% 11.2%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/r/themes/stone.json b/apps/www/public/r/themes/stone.json new file mode 100644 index 0000000000..2df3646b33 --- /dev/null +++ b/apps/www/public/r/themes/stone.json @@ -0,0 +1,48 @@ +{ + "name": "stone", + "label": "Stone", + "cssVars": { + "dark": { + "accent": "12 6.5% 15.1%", + "accent-foreground": "60 9.1% 97.8%", + "background": "20 14.3% 4.1%", + "border": "12 6.5% 15.1%", + "card": "20 14.3% 4.1%", + "card-foreground": "60 9.1% 97.8%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "60 9.1% 97.8%", + "foreground": "60 9.1% 97.8%", + "input": "12 6.5% 15.1%", + "muted": "12 6.5% 15.1%", + "muted-foreground": "24 5.4% 63.9%", + "popover": "20 14.3% 4.1%", + "popover-foreground": "60 9.1% 97.8%", + "primary": "60 9.1% 97.8%", + "primary-foreground": "24 9.8% 10%", + "ring": "24 5.7% 82.9%", + "secondary": "12 6.5% 15.1%", + "secondary-foreground": "60 9.1% 97.8%" + }, + "light": { + "accent": "60 4.8% 95.9%", + "accent-foreground": "24 9.8% 10%", + "background": "0 0% 100%", + "border": "20 5.9% 90%", + "card": "0 0% 100%", + "card-foreground": "20 14.3% 4.1%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "60 9.1% 97.8%", + "foreground": "20 14.3% 4.1%", + "input": "20 5.9% 90%", + "muted": "60 4.8% 95.9%", + "muted-foreground": "25 5.3% 44.7%", + "popover": "0 0% 100%", + "popover-foreground": "20 14.3% 4.1%", + "primary": "24 9.8% 10%", + "primary-foreground": "60 9.1% 97.8%", + "ring": "20 14.3% 4.1%", + "secondary": "60 4.8% 95.9%", + "secondary-foreground": "24 9.8% 10%" + } + } +} \ No newline at end of file diff --git a/apps/www/public/r/themes/zinc.json b/apps/www/public/r/themes/zinc.json new file mode 100644 index 0000000000..4d691a7f97 --- /dev/null +++ b/apps/www/public/r/themes/zinc.json @@ -0,0 +1,48 @@ +{ + "name": "zinc", + "label": "Zinc", + "cssVars": { + "dark": { + "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%", + "destructive": "0 62.8% 30.6%", + "destructive-foreground": "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": "0 0% 98%", + "primary-foreground": "240 5.9% 10%", + "ring": "240 4.9% 83.9%", + "secondary": "240 3.7% 15.9%", + "secondary-foreground": "0 0% 98%" + }, + "light": { + "accent": "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + "background": "0 0% 100%", + "border": "240 5.9% 90%", + "card": "0 0% 100%", + "card-foreground": "240 10% 3.9%", + "destructive": "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + "foreground": "240 10% 3.9%", + "input": "240 5.9% 90%", + "muted": "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", + "popover": "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + "primary": "240 5.9% 10%", + "primary-foreground": "0 0% 98%", + "ring": "240 10% 3.9%", + "secondary": "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%" + } + } +} \ No newline at end of file diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 3babbba869..6febe8205d 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -210,7 +210,7 @@ export const Index: Record = { const targetFile = file.replace(item.name, `${chunkName}`) const targetFilePath = path.join( cwd(), - `registry/${style.name}/${type}/${chunkName}.tsx` + `src/registry/${style.name}/${type}/${chunkName}.tsx` ) // Write component file. @@ -230,7 +230,7 @@ export const Index: Record = { ) // // Write the source file for blocks only. - sourceFilename = `__registry__/${style.name}/${type}/${item.name}.tsx` + sourceFilename = `src/__registry__/${style.name}/${type}/${item.name}.tsx` if (item.files) { const files = item.files.map((file) => @@ -239,7 +239,7 @@ export const Index: Record = { : file ) if (files?.length) { - sourceFilename = `__registry__/${style.name}/${files[0].path}` + sourceFilename = `src/__registry__/${style.name}/${files[0].path}` } } @@ -326,9 +326,13 @@ export const Index: Record = { "utf8" ) + // Write style index. - rimraf.sync(path.join(process.cwd(), "__registry__/index.tsx")) - await fs.writeFile(path.join(process.cwd(), "__registry__/index.tsx"), index) + if (!existsSync(path.join(process.cwd(), "src/__registry__"))) { + await fs.mkdir(path.join(process.cwd(), "src/__registry__"), { recursive: true }) + } + rimraf.sync(path.join(process.cwd(), "src/__registry__/index.tsx")) + await fs.writeFile(path.join(process.cwd(), "src/__registry__/index.tsx"), index) } // ---------------------------------------------------------------------------- @@ -363,7 +367,7 @@ async function buildStyles(registry: Registry) { : _file const content = await fs.readFile( - path.join(process.cwd(), "registry", style.name, file.path), + path.join(process.cwd(), "src/registry", style.name, file.path), "utf8" ) diff --git a/apps/www/src/__registry__/.autogenerated b/apps/www/src/__registry__/.autogenerated deleted file mode 100644 index 7a0c795cb0..0000000000 --- a/apps/www/src/__registry__/.autogenerated +++ /dev/null @@ -1 +0,0 @@ -// The content of this directory is autogenerated by the registry server. \ No newline at end of file diff --git a/apps/www/src/__registry__/.gitkeep b/apps/www/src/__registry__/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/www/src/__registry__/README.md b/apps/www/src/__registry__/README.md deleted file mode 100644 index 66e50b7cbf..0000000000 --- a/apps/www/src/__registry__/README.md +++ /dev/null @@ -1 +0,0 @@ -> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index d0581e3578..27b2f3e487 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -1,1104 +1,1120 @@ // @ts-nocheck // This file is autogenerated by scripts/build-registry.ts // Do not edit this file directly. -import * as React from 'react' +import * as React from "react" + export const Index: Record = { - 'default': { - 'editor': { - name: 'editor', - type: 'components:plate-ui', + "default": { + "editor": { + name: "editor", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/editor.tsx'], + files: ["registry/default/plate-ui/editor.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/editor.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/editor')), + chunks: [] }, - 'cloud': { - name: 'cloud', - type: 'components:plate-ui', + "cloud": { + name: "cloud", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/cloud.tsx','registry/default/plate-ui/cloud-attachment-element.tsx','registry/default/plate-ui/cloud-image-element.tsx','registry/default/plate-ui/cloud-resize-controls.tsx','registry/default/plate-ui/cloud-status-bar.tsx','registry/default/plate-ui/cloud-toolbar-buttons.tsx'], + files: ["registry/default/plate-ui/cloud.tsx","registry/default/plate-ui/cloud-attachment-element.tsx","registry/default/plate-ui/cloud-image-element.tsx","registry/default/plate-ui/cloud-resize-controls.tsx","registry/default/plate-ui/cloud-status-bar.tsx","registry/default/plate-ui/cloud-toolbar-buttons.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/cloud.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/cloud')), + chunks: [] }, - 'cloud-attachment-element': { - name: 'cloud-attachment-element', - type: 'components:plate-ui', - registryDependencies: [], - files: ['registry/default/plate-ui/cloud-attachment-element.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/cloud-attachment-element')), - }, - 'cloud-image-element': { - name: 'cloud-image-element', - type: 'components:plate-ui', - registryDependencies: [], - files: ['registry/default/plate-ui/cloud-image-element.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/cloud-image-element')), - }, - 'cloud-resize-controls': { - name: 'cloud-resize-controls', - type: 'components:plate-ui', - registryDependencies: [], - files: ['registry/default/plate-ui/cloud-resize-controls.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/cloud-resize-controls')), - }, - 'cloud-status-bar': { - name: 'cloud-status-bar', - type: 'components:plate-ui', - registryDependencies: [], - files: ['registry/default/plate-ui/cloud-status-bar.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/cloud-status-bar')), - }, - 'cloud-toolbar-buttons': { - name: 'cloud-toolbar-buttons', - type: 'components:plate-ui', - registryDependencies: [], - files: ['registry/default/plate-ui/cloud-toolbar-buttons.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/cloud-toolbar-buttons')), - }, - 'code-block-element': { - name: 'code-block-element', - type: 'components:plate-ui', + "code-block-element": { + name: "code-block-element", + type: "registry:ui", registryDependencies: ["command"], - files: ['registry/default/plate-ui/code-block-element.tsx','registry/default/plate-ui/code-block-element.css','registry/default/plate-ui/code-block-combobox.tsx'], + files: ["registry/default/plate-ui/code-block-element.tsx","registry/default/plate-ui/code-block-element.css","registry/default/plate-ui/code-block-combobox.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/code-block-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/code-block-element')), - }, - 'code-block-combobox': { - name: 'code-block-combobox', - type: 'components:plate-ui', - registryDependencies: ["command"], - files: ['registry/default/plate-ui/code-block-combobox.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/code-block-combobox')), + chunks: [] }, - 'column-element': { - name: 'column-element', - type: 'components:plate-ui', + "column-element": { + name: "column-element", + type: "registry:ui", registryDependencies: ["command","resizable"], - files: ['registry/default/plate-ui/column-element.tsx','registry/default/plate-ui/column-group-element.tsx'], + files: ["registry/default/plate-ui/column-element.tsx","registry/default/plate-ui/column-group-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/column-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/column-element')), + chunks: [] }, - 'column-group-element': { - name: 'column-group-element', - type: 'components:plate-ui', - registryDependencies: ["command","resizable"], - files: ['registry/default/plate-ui/column-group-element.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/column-group-element')), - }, - 'color-dropdown-menu': { - name: 'color-dropdown-menu', - type: 'components:plate-ui', + "color-dropdown-menu": { + name: "color-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], - files: ['registry/default/plate-ui/color-dropdown-menu.tsx','registry/default/plate-ui/color-constants.ts','registry/default/plate-ui/color-dropdown-menu-items.tsx','registry/default/plate-ui/color-input.tsx','registry/default/plate-ui/color-picker.tsx','registry/default/plate-ui/colors-custom.tsx'], + files: ["registry/default/plate-ui/color-dropdown-menu.tsx","registry/default/plate-ui/color-constants.ts","registry/default/plate-ui/color-dropdown-menu-items.tsx","registry/default/plate-ui/color-input.tsx","registry/default/plate-ui/color-picker.tsx","registry/default/plate-ui/colors-custom.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/color-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/color-dropdown-menu')), - }, - 'color-constants': { - name: 'color-constants', - type: 'components:plate-ui', - registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], - files: ['registry/default/plate-ui/color-constants.ts'], - component: React.lazy(() => import('@/registry/default/plate-ui/color-constants')), + chunks: [] }, - 'color-dropdown-menu-items': { - name: 'color-dropdown-menu-items', - type: 'components:plate-ui', - registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], - files: ['registry/default/plate-ui/color-dropdown-menu-items.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/color-dropdown-menu-items')), - }, - 'color-input': { - name: 'color-input', - type: 'components:plate-ui', - registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], - files: ['registry/default/plate-ui/color-input.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/color-input')), - }, - 'color-picker': { - name: 'color-picker', - type: 'components:plate-ui', - registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], - files: ['registry/default/plate-ui/color-picker.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/color-picker')), - }, - 'colors-custom': { - name: 'colors-custom', - type: 'components:plate-ui', - registryDependencies: ["dropdown-menu","toolbar","separator","button","tooltip"], - files: ['registry/default/plate-ui/colors-custom.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/colors-custom')), - }, - 'comments-popover': { - name: 'comments-popover', - type: 'components:plate-ui', + "comments-popover": { + name: "comments-popover", + type: "registry:ui", registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comments-popover.tsx','registry/default/plate-ui/comment-avatar.tsx','registry/default/plate-ui/comment-create-form.tsx','registry/default/plate-ui/comment-item.tsx','registry/default/plate-ui/comment-more-dropdown.tsx','registry/default/plate-ui/comment-reply-items.tsx','registry/default/plate-ui/comment-resolve-button.tsx','registry/default/plate-ui/comment-value.tsx'], + files: ["registry/default/plate-ui/comments-popover.tsx","registry/default/plate-ui/comment-avatar.tsx","registry/default/plate-ui/comment-create-form.tsx","registry/default/plate-ui/comment-item.tsx","registry/default/plate-ui/comment-more-dropdown.tsx","registry/default/plate-ui/comment-reply-items.tsx","registry/default/plate-ui/comment-resolve-button.tsx","registry/default/plate-ui/comment-value.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/comments-popover.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/comments-popover')), - }, - 'comment-avatar': { - name: 'comment-avatar', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-avatar.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-avatar')), - }, - 'comment-create-form': { - name: 'comment-create-form', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-create-form.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-create-form')), - }, - 'comment-item': { - name: 'comment-item', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-item.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-item')), - }, - 'comment-more-dropdown': { - name: 'comment-more-dropdown', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-more-dropdown.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-more-dropdown')), - }, - 'comment-reply-items': { - name: 'comment-reply-items', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-reply-items.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-reply-items')), - }, - 'comment-resolve-button': { - name: 'comment-resolve-button', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-resolve-button.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-resolve-button')), - }, - 'comment-value': { - name: 'comment-value', - type: 'components:plate-ui', - registryDependencies: ["popover","avatar"], - files: ['registry/default/plate-ui/comment-value.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/comment-value')), + chunks: [] }, - 'draggable': { - name: 'draggable', - type: 'components:plate-ui', + "draggable": { + name: "draggable", + type: "registry:ui", registryDependencies: ["tooltip"], - files: ['registry/default/plate-ui/draggable.tsx','registry/default/plate-ui/with-draggables.tsx'], + files: ["registry/default/plate-ui/draggable.tsx","registry/default/plate-ui/with-draggables.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/draggable.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/draggable')), - }, - 'with-draggables': { - name: 'with-draggables', - type: 'components:plate-ui', - registryDependencies: ["tooltip"], - files: ['registry/default/plate-ui/with-draggables.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/with-draggables')), + chunks: [] }, - 'emoji-dropdown-menu': { - name: 'emoji-dropdown-menu', - type: 'components:plate-ui', + "emoji-dropdown-menu": { + name: "emoji-dropdown-menu", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-dropdown-menu.tsx','registry/default/plate-ui/emoji-toolbar-dropdown.tsx','registry/default/plate-ui/emoji-icons.tsx','registry/default/plate-ui/emoji-picker.tsx','registry/default/plate-ui/emoji-picker-content.tsx','registry/default/plate-ui/emoji-picker-navigation.tsx','registry/default/plate-ui/emoji-picker-preview.tsx','registry/default/plate-ui/emoji-picker-search-and-clear.tsx','registry/default/plate-ui/emoji-picker-search-bar.tsx'], + files: ["registry/default/plate-ui/emoji-dropdown-menu.tsx","registry/default/plate-ui/emoji-toolbar-dropdown.tsx","registry/default/plate-ui/emoji-icons.tsx","registry/default/plate-ui/emoji-picker.tsx","registry/default/plate-ui/emoji-picker-content.tsx","registry/default/plate-ui/emoji-picker-navigation.tsx","registry/default/plate-ui/emoji-picker-preview.tsx","registry/default/plate-ui/emoji-picker-search-and-clear.tsx","registry/default/plate-ui/emoji-picker-search-bar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/emoji-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-dropdown-menu')), - }, - 'emoji-toolbar-dropdown': { - name: 'emoji-toolbar-dropdown', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-toolbar-dropdown.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-toolbar-dropdown')), - }, - 'emoji-icons': { - name: 'emoji-icons', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-icons.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-icons')), - }, - 'emoji-picker': { - name: 'emoji-picker', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-picker.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-picker')), + chunks: [] }, - 'emoji-picker-content': { - name: 'emoji-picker-content', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-picker-content.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-picker-content')), - }, - 'emoji-picker-navigation': { - name: 'emoji-picker-navigation', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-picker-navigation.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-picker-navigation')), - }, - 'emoji-picker-preview': { - name: 'emoji-picker-preview', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-picker-preview.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-picker-preview')), - }, - 'emoji-picker-search-and-clear': { - name: 'emoji-picker-search-and-clear', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-picker-search-and-clear.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-picker-search-and-clear')), - }, - 'emoji-picker-search-bar': { - name: 'emoji-picker-search-bar', - type: 'components:plate-ui', - registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/emoji-picker-search-bar.tsx'], - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-picker-search-bar')), - }, - 'emoji-input-element': { - name: 'emoji-input-element', - type: 'components:plate-ui', + "emoji-input-element": { + name: "emoji-input-element", + type: "registry:ui", registryDependencies: ["inline-combobox"], - files: ['registry/default/plate-ui/emoji-input-element.tsx'], + files: ["registry/default/plate-ui/emoji-input-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/emoji-input-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/emoji-input-element')), + chunks: [] }, - 'align-dropdown-menu': { - name: 'align-dropdown-menu', - type: 'components:plate-ui', + "align-dropdown-menu": { + name: "align-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], - files: ['registry/default/plate-ui/align-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/align-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/align-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/align-dropdown-menu')), + chunks: [] }, - 'avatar': { - name: 'avatar', - type: 'components:plate-ui', + "avatar": { + name: "avatar", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/avatar.tsx'], + files: ["registry/default/plate-ui/avatar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/avatar.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/avatar')), + chunks: [] }, - 'blockquote-element': { - name: 'blockquote-element', - type: 'components:plate-ui', + "blockquote-element": { + name: "blockquote-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/blockquote-element.tsx'], + files: ["registry/default/plate-ui/blockquote-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/blockquote-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/blockquote-element')), + chunks: [] }, - 'date-element': { - name: 'date-element', - type: 'components:plate-ui', + "date-element": { + name: "date-element", + type: "registry:ui", registryDependencies: ["calendar"], - files: ['registry/default/plate-ui/date-element.tsx'], + files: ["registry/default/plate-ui/date-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/date-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/date-element')), + chunks: [] }, - 'calendar': { - name: 'calendar', - type: 'components:plate-ui', + "calendar": { + name: "calendar", + type: "registry:ui", registryDependencies: ["button"], - files: ['registry/default/plate-ui/calendar.tsx'], + files: ["registry/default/plate-ui/calendar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/calendar.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/calendar')), + chunks: [] }, - 'button': { - name: 'button', - type: 'components:plate-ui', + "button": { + name: "button", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/button.tsx'], + files: ["registry/default/plate-ui/button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/button')), + chunks: [] }, - 'caption': { - name: 'caption', - type: 'components:plate-ui', + "caption": { + name: "caption", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/caption.tsx'], + files: ["registry/default/plate-ui/caption.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/caption.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/caption')), + chunks: [] }, - 'checkbox': { - name: 'checkbox', - type: 'components:plate-ui', + "checkbox": { + name: "checkbox", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/checkbox.tsx'], + files: ["registry/default/plate-ui/checkbox.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/checkbox.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/checkbox')), + chunks: [] }, - 'code-leaf': { - name: 'code-leaf', - type: 'components:plate-ui', + "code-leaf": { + name: "code-leaf", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/code-leaf.tsx'], + files: ["registry/default/plate-ui/code-leaf.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/code-leaf.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/code-leaf')), + chunks: [] }, - 'code-line-element': { - name: 'code-line-element', - type: 'components:plate-ui', + "code-line-element": { + name: "code-line-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/code-line-element.tsx'], + files: ["registry/default/plate-ui/code-line-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/code-line-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/code-line-element')), + chunks: [] }, - 'code-syntax-leaf': { - name: 'code-syntax-leaf', - type: 'components:plate-ui', + "code-syntax-leaf": { + name: "code-syntax-leaf", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/code-syntax-leaf.tsx'], + files: ["registry/default/plate-ui/code-syntax-leaf.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/code-syntax-leaf.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/code-syntax-leaf')), + chunks: [] }, - 'command': { - name: 'command', - type: 'components:plate-ui', + "command": { + name: "command", + type: "registry:ui", registryDependencies: ["dialog"], - files: ['registry/default/plate-ui/command.tsx'], + files: ["registry/default/plate-ui/command.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/command.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/command')), + chunks: [] }, - 'comment-leaf': { - name: 'comment-leaf', - type: 'components:plate-ui', + "comment-leaf": { + name: "comment-leaf", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/comment-leaf.tsx'], + files: ["registry/default/plate-ui/comment-leaf.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/comment-leaf.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/comment-leaf')), + chunks: [] }, - 'comment-toolbar-button': { - name: 'comment-toolbar-button', - type: 'components:plate-ui', + "comment-toolbar-button": { + name: "comment-toolbar-button", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/comment-toolbar-button.tsx'], + files: ["registry/default/plate-ui/comment-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/comment-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/comment-toolbar-button')), + chunks: [] }, - 'cursor-overlay': { - name: 'cursor-overlay', - type: 'components:plate-ui', + "cursor-overlay": { + name: "cursor-overlay", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/cursor-overlay.tsx'], + files: ["registry/default/plate-ui/cursor-overlay.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/cursor-overlay.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/cursor-overlay')), + chunks: [] }, - 'dialog': { - name: 'dialog', - type: 'components:plate-ui', + "dialog": { + name: "dialog", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/dialog.tsx'], + files: ["registry/default/plate-ui/dialog.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/dialog.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/dialog')), + chunks: [] }, - 'dropdown-menu': { - name: 'dropdown-menu', - type: 'components:plate-ui', + "dropdown-menu": { + name: "dropdown-menu", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/dropdown-menu.tsx'], + files: ["registry/default/plate-ui/dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/dropdown-menu')), + chunks: [] }, - 'excalidraw-element': { - name: 'excalidraw-element', - type: 'components:plate-ui', + "excalidraw-element": { + name: "excalidraw-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/excalidraw-element.tsx'], + files: ["registry/default/plate-ui/excalidraw-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/excalidraw-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/excalidraw-element')), + chunks: [] }, - 'fixed-toolbar': { - name: 'fixed-toolbar', - type: 'components:plate-ui', + "fixed-toolbar": { + name: "fixed-toolbar", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/fixed-toolbar.tsx'], + files: ["registry/default/plate-ui/fixed-toolbar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/fixed-toolbar.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/fixed-toolbar')), + chunks: [] }, - 'fixed-toolbar-buttons': { - name: 'fixed-toolbar-buttons', - type: 'components:plate-ui', + "fixed-toolbar-buttons": { + name: "fixed-toolbar-buttons", + type: "registry:ui", registryDependencies: ["toolbar","insert-dropdown-menu","mark-toolbar-button","mode-dropdown-menu","turn-into-dropdown-menu"], - files: ['registry/default/plate-ui/fixed-toolbar-buttons.tsx'], + files: ["registry/default/plate-ui/fixed-toolbar-buttons.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/fixed-toolbar-buttons.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/fixed-toolbar-buttons')), + chunks: [] }, - 'floating-toolbar': { - name: 'floating-toolbar', - type: 'components:plate-ui', + "floating-toolbar": { + name: "floating-toolbar", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/floating-toolbar.tsx'], + files: ["registry/default/plate-ui/floating-toolbar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/floating-toolbar.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/floating-toolbar')), + chunks: [] }, - 'floating-toolbar-buttons': { - name: 'floating-toolbar-buttons', - type: 'components:plate-ui', + "floating-toolbar-buttons": { + name: "floating-toolbar-buttons", + type: "registry:ui", registryDependencies: ["mark-toolbar-button","more-dropdown-menu","turn-into-dropdown-menu"], - files: ['registry/default/plate-ui/floating-toolbar-buttons.tsx'], + files: ["registry/default/plate-ui/floating-toolbar-buttons.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/floating-toolbar-buttons.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/floating-toolbar-buttons')), + chunks: [] }, - 'heading-element': { - name: 'heading-element', - type: 'components:plate-ui', + "heading-element": { + name: "heading-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/heading-element.tsx'], + files: ["registry/default/plate-ui/heading-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/heading-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/heading-element')), + chunks: [] }, - 'highlight-leaf': { - name: 'highlight-leaf', - type: 'components:plate-ui', + "highlight-leaf": { + name: "highlight-leaf", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/highlight-leaf.tsx'], + files: ["registry/default/plate-ui/highlight-leaf.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/highlight-leaf.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/highlight-leaf')), + chunks: [] }, - 'hr-element': { - name: 'hr-element', - type: 'components:plate-ui', + "hr-element": { + name: "hr-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/hr-element.tsx'], + files: ["registry/default/plate-ui/hr-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/hr-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/hr-element')), + chunks: [] }, - 'image-element': { - name: 'image-element', - type: 'components:plate-ui', + "image-element": { + name: "image-element", + type: "registry:ui", registryDependencies: ["media-popover","caption","resizable"], - files: ['registry/default/plate-ui/image-element.tsx'], + files: ["registry/default/plate-ui/image-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/image-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/image-element')), + chunks: [] }, - 'indent-list-toolbar-button': { - name: 'indent-list-toolbar-button', - type: 'components:plate-ui', + "indent-list-toolbar-button": { + name: "indent-list-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/indent-list-toolbar-button.tsx'], + files: ["registry/default/plate-ui/indent-list-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/indent-list-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/indent-list-toolbar-button')), + chunks: [] }, - 'indent-toolbar-button': { - name: 'indent-toolbar-button', - type: 'components:plate-ui', + "indent-toolbar-button": { + name: "indent-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/indent-toolbar-button.tsx'], + files: ["registry/default/plate-ui/indent-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/indent-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/indent-toolbar-button')), + chunks: [] }, - 'inline-combobox': { - name: 'inline-combobox', - type: 'components:plate-ui', + "inline-combobox": { + name: "inline-combobox", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/inline-combobox.tsx'], + files: ["registry/default/plate-ui/inline-combobox.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/inline-combobox.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/inline-combobox')), + chunks: [] }, - 'input': { - name: 'input', - type: 'components:plate-ui', + "input": { + name: "input", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/input.tsx'], + files: ["registry/default/plate-ui/input.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/input.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/input')), + chunks: [] }, - 'insert-dropdown-menu': { - name: 'insert-dropdown-menu', - type: 'components:plate-ui', + "insert-dropdown-menu": { + name: "insert-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], - files: ['registry/default/plate-ui/insert-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/insert-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/insert-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/insert-dropdown-menu')), + chunks: [] }, - 'kbd-leaf': { - name: 'kbd-leaf', - type: 'components:plate-ui', + "kbd-leaf": { + name: "kbd-leaf", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/kbd-leaf.tsx'], + files: ["registry/default/plate-ui/kbd-leaf.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/kbd-leaf.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/kbd-leaf')), + chunks: [] }, - 'line-height-dropdown-menu': { - name: 'line-height-dropdown-menu', - type: 'components:plate-ui', + "line-height-dropdown-menu": { + name: "line-height-dropdown-menu", + type: "registry:ui", registryDependencies: ["toolbar","dropdown-menu"], - files: ['registry/default/plate-ui/line-height-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/line-height-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/line-height-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/line-height-dropdown-menu')), + chunks: [] }, - 'link-element': { - name: 'link-element', - type: 'components:plate-ui', + "link-element": { + name: "link-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/link-element.tsx'], + files: ["registry/default/plate-ui/link-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/link-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/link-element')), + chunks: [] }, - 'link-floating-toolbar': { - name: 'link-floating-toolbar', - type: 'components:plate-ui', + "link-floating-toolbar": { + name: "link-floating-toolbar", + type: "registry:ui", registryDependencies: ["button","input","popover","separator"], - files: ['registry/default/plate-ui/link-floating-toolbar.tsx'], + files: ["registry/default/plate-ui/link-floating-toolbar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/link-floating-toolbar.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/link-floating-toolbar')), + chunks: [] }, - 'link-toolbar-button': { - name: 'link-toolbar-button', - type: 'components:plate-ui', + "link-toolbar-button": { + name: "link-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/link-toolbar-button.tsx'], + files: ["registry/default/plate-ui/link-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/link-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/link-toolbar-button')), + chunks: [] }, - 'list-element': { - name: 'list-element', - type: 'components:plate-ui', + "list-element": { + name: "list-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/list-element.tsx'], + files: ["registry/default/plate-ui/list-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/list-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/list-element')), + chunks: [] }, - 'list-toolbar-button': { - name: 'list-toolbar-button', - type: 'components:plate-ui', + "list-toolbar-button": { + name: "list-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/list-toolbar-button.tsx'], + files: ["registry/default/plate-ui/list-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/list-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/list-toolbar-button')), + chunks: [] }, - 'mark-toolbar-button': { - name: 'mark-toolbar-button', - type: 'components:plate-ui', + "mark-toolbar-button": { + name: "mark-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/mark-toolbar-button.tsx'], + files: ["registry/default/plate-ui/mark-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/mark-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/mark-toolbar-button')), + chunks: [] }, - 'media-embed-element': { - name: 'media-embed-element', - type: 'components:plate-ui', + "media-embed-element": { + name: "media-embed-element", + type: "registry:ui", registryDependencies: ["media-popover","caption","resizable"], - files: ['registry/default/plate-ui/media-embed-element.tsx'], + files: ["registry/default/plate-ui/media-embed-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/media-embed-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/media-embed-element')), + chunks: [] }, - 'media-popover': { - name: 'media-popover', - type: 'components:plate-ui', + "media-popover": { + name: "media-popover", + type: "registry:ui", registryDependencies: ["button","input","popover","separator"], - files: ['registry/default/plate-ui/media-popover.tsx'], + files: ["registry/default/plate-ui/media-popover.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/media-popover.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/media-popover')), + chunks: [] }, - 'media-toolbar-button': { - name: 'media-toolbar-button', - type: 'components:plate-ui', + "media-toolbar-button": { + name: "media-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/media-toolbar-button.tsx'], + files: ["registry/default/plate-ui/media-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/media-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/media-toolbar-button')), + chunks: [] }, - 'mention-element': { - name: 'mention-element', - type: 'components:plate-ui', + "mention-element": { + name: "mention-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/mention-element.tsx'], + files: ["registry/default/plate-ui/mention-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/mention-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/mention-element')), + chunks: [] }, - 'mention-input-element': { - name: 'mention-input-element', - type: 'components:plate-ui', + "mention-input-element": { + name: "mention-input-element", + type: "registry:ui", registryDependencies: ["inline-combobox"], - files: ['registry/default/plate-ui/mention-input-element.tsx'], + files: ["registry/default/plate-ui/mention-input-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/mention-input-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/mention-input-element')), + chunks: [] }, - 'mode-dropdown-menu': { - name: 'mode-dropdown-menu', - type: 'components:plate-ui', + "mode-dropdown-menu": { + name: "mode-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], - files: ['registry/default/plate-ui/mode-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/mode-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/mode-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/mode-dropdown-menu')), + chunks: [] }, - 'more-dropdown-menu': { - name: 'more-dropdown-menu', - type: 'components:plate-ui', + "more-dropdown-menu": { + name: "more-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], - files: ['registry/default/plate-ui/more-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/more-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/more-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/more-dropdown-menu')), + chunks: [] }, - 'outdent-toolbar-button': { - name: 'outdent-toolbar-button', - type: 'components:plate-ui', + "outdent-toolbar-button": { + name: "outdent-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/outdent-toolbar-button.tsx'], + files: ["registry/default/plate-ui/outdent-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/outdent-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/outdent-toolbar-button')), + chunks: [] }, - 'paragraph-element': { - name: 'paragraph-element', - type: 'components:plate-ui', + "paragraph-element": { + name: "paragraph-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/paragraph-element.tsx'], + files: ["registry/default/plate-ui/paragraph-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/paragraph-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/paragraph-element')), + chunks: [] }, - 'placeholder': { - name: 'placeholder', - type: 'components:plate-ui', + "placeholder": { + name: "placeholder", + type: "registry:ui", registryDependencies: ["paragraph-element"], - files: ['registry/default/plate-ui/placeholder.tsx'], + files: ["registry/default/plate-ui/placeholder.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/placeholder.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/placeholder')), + chunks: [] }, - 'popover': { - name: 'popover', - type: 'components:plate-ui', + "popover": { + name: "popover", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/popover.tsx'], + files: ["registry/default/plate-ui/popover.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/popover.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/popover')), + chunks: [] }, - 'search-highlight-leaf': { - name: 'search-highlight-leaf', - type: 'components:plate-ui', + "search-highlight-leaf": { + name: "search-highlight-leaf", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/search-highlight-leaf.tsx'], + files: ["registry/default/plate-ui/search-highlight-leaf.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/search-highlight-leaf.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/search-highlight-leaf')), + chunks: [] }, - 'separator': { - name: 'separator', - type: 'components:plate-ui', + "separator": { + name: "separator", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/separator.tsx'], + files: ["registry/default/plate-ui/separator.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/separator.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/separator')), + chunks: [] }, - 'slash-input-element': { - name: 'slash-input-element', - type: 'components:plate-ui', + "slash-input-element": { + name: "slash-input-element", + type: "registry:ui", registryDependencies: ["inline-combobox"], - files: ['registry/default/plate-ui/slash-input-element.tsx'], + files: ["registry/default/plate-ui/slash-input-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/slash-input-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/slash-input-element')), + chunks: [] }, - 'table-cell-element': { - name: 'table-cell-element', - type: 'components:plate-ui', + "table-cell-element": { + name: "table-cell-element", + type: "registry:ui", registryDependencies: ["resizable"], - files: ['registry/default/plate-ui/table-cell-element.tsx'], + files: ["registry/default/plate-ui/table-cell-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/table-cell-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/table-cell-element')), + chunks: [] }, - 'table-dropdown-menu': { - name: 'table-dropdown-menu', - type: 'components:plate-ui', + "table-dropdown-menu": { + name: "table-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], - files: ['registry/default/plate-ui/table-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/table-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/table-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/table-dropdown-menu')), + chunks: [] }, - 'table-element': { - name: 'table-element', - type: 'components:plate-ui', + "table-element": { + name: "table-element", + type: "registry:ui", registryDependencies: ["dropdown-menu"], - files: ['registry/default/plate-ui/table-element.tsx'], + files: ["registry/default/plate-ui/table-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/table-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/table-element')), + chunks: [] }, - 'table-row-element': { - name: 'table-row-element', - type: 'components:plate-ui', + "table-row-element": { + name: "table-row-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/table-row-element.tsx'], + files: ["registry/default/plate-ui/table-row-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/table-row-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/table-row-element')), + chunks: [] }, - 'todo-list-element': { - name: 'todo-list-element', - type: 'components:plate-ui', + "todo-list-element": { + name: "todo-list-element", + type: "registry:ui", registryDependencies: ["checkbox"], - files: ['registry/default/plate-ui/todo-list-element.tsx'], + files: ["registry/default/plate-ui/todo-list-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/todo-list-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/todo-list-element')), + chunks: [] }, - 'toggle-element': { - name: 'toggle-element', - type: 'components:plate-ui', + "toggle-element": { + name: "toggle-element", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/toggle-element.tsx'], + files: ["registry/default/plate-ui/toggle-element.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/toggle-element.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/toggle-element')), + chunks: [] }, - 'toggle-toolbar-button': { - name: 'toggle-toolbar-button', - type: 'components:plate-ui', + "toggle-toolbar-button": { + name: "toggle-toolbar-button", + type: "registry:ui", registryDependencies: ["toolbar"], - files: ['registry/default/plate-ui/toggle-toolbar-button.tsx'], + files: ["registry/default/plate-ui/toggle-toolbar-button.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/toggle-toolbar-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/toggle-toolbar-button')), + chunks: [] }, - 'toolbar': { - name: 'toolbar', - type: 'components:plate-ui', + "toolbar": { + name: "toolbar", + type: "registry:ui", registryDependencies: ["tooltip","separator"], - files: ['registry/default/plate-ui/toolbar.tsx'], + files: ["registry/default/plate-ui/toolbar.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/toolbar.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/toolbar')), + chunks: [] }, - 'tooltip': { - name: 'tooltip', - type: 'components:plate-ui', + "tooltip": { + name: "tooltip", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/tooltip.tsx'], + files: ["registry/default/plate-ui/tooltip.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/tooltip.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/tooltip')), + chunks: [] }, - 'turn-into-dropdown-menu': { - name: 'turn-into-dropdown-menu', - type: 'components:plate-ui', + "turn-into-dropdown-menu": { + name: "turn-into-dropdown-menu", + type: "registry:ui", registryDependencies: ["dropdown-menu","toolbar"], - files: ['registry/default/plate-ui/turn-into-dropdown-menu.tsx'], + files: ["registry/default/plate-ui/turn-into-dropdown-menu.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/turn-into-dropdown-menu.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/turn-into-dropdown-menu')), + chunks: [] }, - 'resizable': { - name: 'resizable', - type: 'components:plate-ui', + "resizable": { + name: "resizable", + type: "registry:ui", registryDependencies: [], - files: ['registry/default/plate-ui/resizable.tsx'], + files: ["registry/default/plate-ui/resizable.tsx"], + component: React.lazy(() => import("@/registry/default/plate-ui/resizable.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/plate-ui/resizable')), + chunks: [] }, - 'editor-default': { - name: 'editor-default', - type: 'components:example', + "editor-default": { + name: "editor-default", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-default.tsx'], + files: ["registry/default/example/editor-default.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-default.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-default')), + chunks: [] }, - 'editor-disabled': { - name: 'editor-disabled', - type: 'components:example', + "editor-disabled": { + name: "editor-disabled", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-disabled.tsx'], + files: ["registry/default/example/editor-disabled.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-disabled.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-disabled')), + chunks: [] }, - 'editor-ghost': { - name: 'editor-ghost', - type: 'components:example', + "editor-ghost": { + name: "editor-ghost", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-ghost.tsx'], + files: ["registry/default/example/editor-ghost.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-ghost.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-ghost')), + chunks: [] }, - 'editor-label': { - name: 'editor-label', - type: 'components:example', + "editor-label": { + name: "editor-label", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-label.tsx'], + files: ["registry/default/example/editor-label.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-label.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-label')), + chunks: [] }, - 'editor-text': { - name: 'editor-text', - type: 'components:example', + "editor-text": { + name: "editor-text", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-text.tsx'], + files: ["registry/default/example/editor-text.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-text.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-text')), + chunks: [] }, - 'editor-button': { - name: 'editor-button', - type: 'components:example', + "editor-button": { + name: "editor-button", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-button.tsx'], + files: ["registry/default/example/editor-button.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-button.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-button')), + chunks: [] }, - 'editor-form': { - name: 'editor-form', - type: 'components:example', + "editor-form": { + name: "editor-form", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editor-form.tsx'], + files: ["registry/default/example/editor-form.tsx"], + component: React.lazy(() => import("@/registry/default/example/editor-form.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editor-form')), + chunks: [] }, - 'basic-editor-default-demo': { - name: 'basic-editor-default-demo', - type: 'components:example', + "basic-editor-default-demo": { + name: "basic-editor-default-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/basic-editor-default-demo.tsx'], + files: ["registry/default/example/basic-editor-default-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/basic-editor-default-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/basic-editor-default-demo')), + chunks: [] }, - 'controlled-demo': { - name: 'controlled-demo', - type: 'components:example', + "controlled-demo": { + name: "controlled-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/controlled-demo.tsx'], + files: ["registry/default/example/controlled-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/controlled-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/controlled-demo')), + chunks: [] }, - 'basic-editor-styling-demo': { - name: 'basic-editor-styling-demo', - type: 'components:example', + "basic-editor-styling-demo": { + name: "basic-editor-styling-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/basic-editor-styling-demo.tsx'], + files: ["registry/default/example/basic-editor-styling-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/basic-editor-styling-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/basic-editor-styling-demo')), + chunks: [] }, - 'basic-editor-handler-demo': { - name: 'basic-editor-handler-demo', - type: 'components:example', + "basic-editor-handler-demo": { + name: "basic-editor-handler-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/basic-editor-handler-demo.tsx'], + files: ["registry/default/example/basic-editor-handler-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/basic-editor-handler-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/basic-editor-handler-demo')), + chunks: [] }, - 'basic-editor-value-demo': { - name: 'basic-editor-value-demo', - type: 'components:example', + "basic-editor-value-demo": { + name: "basic-editor-value-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/basic-editor-value-demo.tsx'], + files: ["registry/default/example/basic-editor-value-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/basic-editor-value-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/basic-editor-value-demo')), + chunks: [] }, - 'basic-plugins-components-demo': { - name: 'basic-plugins-components-demo', - type: 'components:example', + "basic-plugins-components-demo": { + name: "basic-plugins-components-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/basic-plugins-components-demo.tsx'], + files: ["registry/default/example/basic-plugins-components-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/basic-plugins-components-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/basic-plugins-components-demo')), + chunks: [] }, - 'basic-plugins-default-demo': { - name: 'basic-plugins-default-demo', - type: 'components:example', + "basic-plugins-default-demo": { + name: "basic-plugins-default-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/basic-plugins-default-demo.tsx'], + files: ["registry/default/example/basic-plugins-default-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/basic-plugins-default-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/basic-plugins-default-demo')), + chunks: [] }, - 'cloud-demo': { - name: 'cloud-demo', - type: 'components:example', + "cloud-demo": { + name: "cloud-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/cloud-demo.tsx'], + files: ["registry/default/example/cloud-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/cloud-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/cloud-demo')), + chunks: [] }, - 'editable-voids-demo': { - name: 'editable-voids-demo', - type: 'components:example', + "editable-voids-demo": { + name: "editable-voids-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/editable-voids-demo.tsx'], + files: ["registry/default/example/editable-voids-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/editable-voids-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/editable-voids-demo')), + chunks: [] }, - 'find-replace-demo': { - name: 'find-replace-demo', - type: 'components:example', + "find-replace-demo": { + name: "find-replace-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/find-replace-demo.tsx'], + files: ["registry/default/example/find-replace-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/find-replace-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/find-replace-demo')), + chunks: [] }, - 'hundreds-blocks-demo': { - name: 'hundreds-blocks-demo', - type: 'components:example', + "hundreds-blocks-demo": { + name: "hundreds-blocks-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/hundreds-blocks-demo.tsx'], + files: ["registry/default/example/hundreds-blocks-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/hundreds-blocks-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/hundreds-blocks-demo')), + chunks: [] }, - 'hundreds-editors-demo': { - name: 'hundreds-editors-demo', - type: 'components:example', + "hundreds-editors-demo": { + name: "hundreds-editors-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/hundreds-editors-demo.tsx'], + files: ["registry/default/example/hundreds-editors-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/hundreds-editors-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/hundreds-editors-demo')), + chunks: [] }, - 'iframe-demo': { - name: 'iframe-demo', - type: 'components:example', + "iframe-demo": { + name: "iframe-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/iframe-demo.tsx'], + files: ["registry/default/example/iframe-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/iframe-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/iframe-demo')), + chunks: [] }, - 'mode-toggle': { - name: 'mode-toggle', - type: 'components:example', - registryDependencies: [], - files: ['registry/default/example/mode-toggle.tsx'], + "mode-toggle": { + name: "mode-toggle", + type: "registry:example", + registryDependencies: undefined, + files: ["registry/default/example/mode-toggle.tsx"], + component: React.lazy(() => import("@/registry/default/example/mode-toggle.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/mode-toggle')), + chunks: [] }, - 'multiple-editors-demo': { - name: 'multiple-editors-demo', - type: 'components:example', + "multiple-editors-demo": { + name: "multiple-editors-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/multiple-editors-demo.tsx'], + files: ["registry/default/example/multiple-editors-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/multiple-editors-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/multiple-editors-demo')), + chunks: [] }, - 'version-history-demo': { - name: 'version-history-demo', - type: 'components:example', + "version-history-demo": { + name: "version-history-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/version-history-demo.tsx'], + files: ["registry/default/example/version-history-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/version-history-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/version-history-demo')), + chunks: [] }, - 'playground-demo': { - name: 'playground-demo', - type: 'components:example', + "playground-demo": { + name: "playground-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/playground-demo.tsx'], + files: ["registry/default/example/playground-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/playground-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/playground-demo')), + chunks: [] }, - 'preview-md-demo': { - name: 'preview-md-demo', - type: 'components:example', + "preview-md-demo": { + name: "preview-md-demo", + type: "registry:example", registryDependencies: [], - files: ['registry/default/example/preview-md-demo.tsx'], + files: ["registry/default/example/preview-md-demo.tsx"], + component: React.lazy(() => import("@/registry/default/example/preview-md-demo.tsx")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/registry/default/example/preview-md-demo')), + chunks: [] }, - 'globals': { - name: 'globals', - type: 'components:component', - registryDependencies: [], - files: ['styles/globals.css'], + "plate-types": { + name: "plate-types", + type: "registry:lib", + registryDependencies: undefined, + files: ["registry/default/lib/plate-types.ts"], + component: React.lazy(() => import("@/registry/default/lib/plate-types.ts")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/styles/globals.css')), + chunks: [] }, - 'plate-types': { - name: 'plate-types', - type: 'components:component', - registryDependencies: [], - files: ['types/plate-types.ts'], + "utils": { + name: "utils", + type: "registry:lib", + registryDependencies: undefined, + files: ["registry/default/lib/utils.ts"], + component: React.lazy(() => import("@/registry/default/lib/utils.ts")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "use-debounce": { + name: "use-debounce", + type: "registry:hook", + registryDependencies: undefined, + files: ["registry/default/hooks/use-debounce.ts"], + component: React.lazy(() => import("@/registry/default/hooks/use-debounce.ts")), + source: "", category: "undefined", subcategory: "undefined", - component: React.lazy(() => import('@/types/plate-types.ts')), + chunks: [] }, }, } diff --git a/apps/www/src/app/_components/home-tabs.tsx b/apps/www/src/app/_components/home-tabs.tsx index 48b2d640db..fa604c3be5 100644 --- a/apps/www/src/app/_components/home-tabs.tsx +++ b/apps/www/src/app/_components/home-tabs.tsx @@ -9,7 +9,6 @@ import { parseAsBoolean, useQueryState } from 'nuqs'; import { BlockPreview } from '@/components/block-preview'; import { settingsStore } from '@/components/context/settings-store'; -import { ThemeWrapper } from '@/components/theme-wrapper'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Button } from '@/registry/default/plate-ui/button'; @@ -69,9 +68,7 @@ export default function HomeTabs() { - - - + diff --git a/apps/www/src/app/_components/installation-tab.tsx b/apps/www/src/app/_components/installation-tab.tsx index 1232bf02f7..1a0b9c692c 100644 --- a/apps/www/src/app/_components/installation-tab.tsx +++ b/apps/www/src/app/_components/installation-tab.tsx @@ -368,9 +368,6 @@ export default function InstallationTab() { const jsxCode: string[] = []; - if (isManual) { - addLine(``, true); - } if (hasDnd) { addLine(``, true); } @@ -412,9 +409,6 @@ export default function InstallationTab() { if (hasDnd) { addLine(``, false, true); } - if (isManual) { - addLine(``, false, true); - } const plateCode = [ `export function PlateEditor() {`, diff --git a/apps/www/src/app/announcement-button.tsx b/apps/www/src/app/announcement-button.tsx index ebe21b91a0..0de0181cf7 100644 --- a/apps/www/src/app/announcement-button.tsx +++ b/apps/www/src/app/announcement-button.tsx @@ -11,15 +11,19 @@ import { Separator } from '@/registry/default/plate-ui/separator'; export function AnnouncementButton() { return ( ); diff --git a/apps/www/src/app/page.tsx b/apps/www/src/app/page.tsx index 8a5db45d3b..33fe062f9f 100644 --- a/apps/www/src/app/page.tsx +++ b/apps/www/src/app/page.tsx @@ -30,16 +30,14 @@ export default function IndexPage() {
- Build your rich-text editor. -
- -
+ Build your rich-text editor +
Plugin system & primitive component library.
CLI for styled components. Customizable. Open Source.
-
+
diff --git a/apps/www/src/components/block-copy-button.tsx b/apps/www/src/components/block-copy-button.tsx index dac8a8918c..7f7617a581 100644 --- a/apps/www/src/components/block-copy-button.tsx +++ b/apps/www/src/components/block-copy-button.tsx @@ -11,6 +11,7 @@ import { Button } from '@/registry/default/plate-ui/button'; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from '@/registry/default/plate-ui/tooltip'; @@ -34,29 +35,33 @@ export function BlockCopyButton({ }, [hasCopied]); return ( - - - - - Copy code - + + + + + + + Copy code + + + ); } diff --git a/apps/www/src/components/block-preview.tsx b/apps/www/src/components/block-preview.tsx index a96301ef26..cb50066238 100644 --- a/apps/www/src/components/block-preview.tsx +++ b/apps/www/src/components/block-preview.tsx @@ -12,6 +12,7 @@ import { useLiftMode } from '@/hooks/use-lift-mode'; import PlaygroundDemo from '@/registry/default/example/playground-demo'; import { BlockToolbar } from './block-toolbar'; +import { ThemeWrapper } from './theme-wrapper'; import { ResizableHandle, ResizablePanel, @@ -59,7 +60,14 @@ export function BlockPreview({ setFullScreen={setFullScreen} /> - {fullScreen && } + {fullScreen && ( + + + + )} {!fullScreen && ( <> @@ -71,7 +79,9 @@ export function BlockPreview({ )} >
- + + +
@@ -90,7 +100,9 @@ export function BlockPreview({ minSize={30} >
- + + +
{/* {isLoading ? ( */} diff --git a/apps/www/src/components/context/providers.tsx b/apps/www/src/components/context/providers.tsx index e00cdd8f57..05fc73edf6 100644 --- a/apps/www/src/components/context/providers.tsx +++ b/apps/www/src/components/context/providers.tsx @@ -2,8 +2,6 @@ import { Provider as JotaiProvider } from 'jotai'; -import { TooltipProvider } from '@/registry/default/plate-ui/tooltip'; - import { ThemeProvider } from './theme-provider'; export function Providers({ children }: { children: React.ReactNode }) { @@ -15,13 +13,7 @@ export function Providers({ children }: { children: React.ReactNode }) { disableTransitionOnChange enableSystem > - - {children} - + {children} ); diff --git a/apps/www/src/components/copy-code-button.tsx b/apps/www/src/components/copy-code-button.tsx index f982f6c3f8..9587600dfc 100644 --- a/apps/www/src/components/copy-code-button.tsx +++ b/apps/www/src/components/copy-code-button.tsx @@ -2,28 +2,23 @@ import * as React from 'react'; import { CheckIcon, CopyIcon } from '@radix-ui/react-icons'; import { cn } from '@udecode/cn'; -import template from 'lodash.template'; +import { ClipboardIcon } from 'lucide-react'; import { useConfig } from '@/hooks/use-config'; +import { useThemesConfig } from '@/hooks/use-themes-config'; +import { type Theme, themeColorsToCssVariables } from '@/lib/themes'; import { Button } from '@/registry/default/plate-ui/button'; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from '@/registry/default/plate-ui/dialog'; -import { type BaseColor, baseColors } from '@/registry/registry-base-colors'; import { copyToClipboardWithMeta } from './copy-button'; export function CopyCodeButton({ className, + compact, ...props -}: React.ComponentProps) { +}: React.ComponentProps & { compact?: boolean }) { const [config] = useConfig(); - const activeTheme = baseColors.find((theme) => theme.name === config.theme); + const { themesConfig } = useThemesConfig(); + const activeTheme = themesConfig.activeTheme; const [hasCopied, setHasCopied] = React.useState(false); React.useEffect(() => { @@ -32,260 +27,81 @@ export function CopyCodeButton({ }, 2000); }, [hasCopied]); - return ( - <> - {activeTheme && ( - - )} - - - - - - - Theme - - Copy and paste the following code into your CSS file. - - -
- - {activeTheme && ( - - )} -
-
-
- - ); -} + const themeCode = React.useMemo(() => { + return getThemeCode(activeTheme, config.radius); + }, [activeTheme, config.radius]); -function CustomizerCode() { - const [config] = useConfig(); - const activeTheme = baseColors.find((theme) => theme.name === config.theme); + if (compact) { + return ( + + ); + } return ( -
- {/* eslint-disable-next-line react/no-unknown-property */} -
-
-          
-            @layer base {
-              :root {
-            
-                  --background:{' '}
-              {activeTheme?.cssVars.light.background};
-            
-            
-                  --foreground:{' '}
-              {activeTheme?.cssVars.light.foreground};
-            
-            {[
-              'card',
-              'popover',
-              'primary',
-              'secondary',
-              'muted',
-              'accent',
-              'destructive',
-            ].map((prefix) => (
-              <>
-                
-                      --{prefix}:{' '}
-                  {
-                    activeTheme?.cssVars.light[
-                      prefix as keyof typeof activeTheme.cssVars.light
-                    ]
-                  }
-                  ;
-                
-                
-                      --{prefix}-foreground:{' '}
-                  {
-                    activeTheme?.cssVars.light[
-                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
-                    ]
-                  }
-                  ;
-                
-              
-            ))}
-            
-                  --border:{' '}
-              {activeTheme?.cssVars.light.border};
-            
-            
-                  --input:{' '}
-              {activeTheme?.cssVars.light.input};
-            
-            
-                  --ring: {activeTheme?.cssVars.light.ring};
-            
-            
-                  --radius: {config.radius}rem;
-            
-              }
-             
-              .dark {
-            
-                  --background:{' '}
-              {activeTheme?.cssVars.dark.background};
-            
-            
-                  --foreground:{' '}
-              {activeTheme?.cssVars.dark.foreground};
-            
-            {[
-              'card',
-              'popover',
-              'primary',
-              'secondary',
-              'muted',
-              'accent',
-              'destructive',
-            ].map((prefix) => (
-              <>
-                
-                      --{prefix}:{' '}
-                  {
-                    activeTheme?.cssVars.dark[
-                      prefix as keyof typeof activeTheme.cssVars.dark
-                    ]
-                  }
-                  ;
-                
-                
-                      --{prefix}-foreground:{' '}
-                  {
-                    activeTheme?.cssVars.dark[
-                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
-                    ]
-                  }
-                  ;
-                
-              
-            ))}
-            
-                  --border:{' '}
-              {activeTheme?.cssVars.dark.border};
-            
-            
-                  --input: {activeTheme?.cssVars.dark.input}
-              ;
-            
-            
-                  --ring: {activeTheme?.cssVars.dark.ring};
-            
-              }
-            }
-          
-        
-
-
+ ); } -function getThemeCode(theme: BaseColor, radius: number) { +export function getThemeCode(theme: Theme, radius: number): string { if (!theme) { return ''; } - return template(BASE_STYLES_WITH_VARIABLES)({ - colors: theme.cssVars, - radius, - }); -} + const lightVars = themeColorsToCssVariables(theme.colors); + const darkVars = themeColorsToCssVariables(theme.colorsDark); -const BASE_STYLES_WITH_VARIABLES = ` + return `\ @layer base { :root { - --background: <%- colors.light["background"] %>; - --foreground: <%- colors.light["foreground"] %>; - --card: <%- colors.light["card"] %>; - --card-foreground: <%- colors.light["card-foreground"] %>; - --popover: <%- colors.light["popover"] %>; - --popover-foreground: <%- colors.light["popover-foreground"] %>; - --primary: <%- colors.light["primary"] %>; - --primary-foreground: <%- colors.light["primary-foreground"] %>; - --secondary: <%- colors.light["secondary"] %>; - --secondary-foreground: <%- colors.light["secondary-foreground"] %>; - --muted: <%- colors.light["muted"] %>; - --muted-foreground: <%- colors.light["muted-foreground"] %>; - --accent: <%- colors.light["accent"] %>; - --accent-foreground: <%- colors.light["accent-foreground"] %>; - --destructive: <%- colors.light["destructive"] %>; - --destructive-foreground: <%- colors.light["destructive-foreground"] %>; - --border: <%- colors.light["border"] %>; - --input: <%- colors.light["input"] %>; - --ring: <%- colors.light["ring"] %>; - --radius: <%- radius %>rem; +${Object.entries(lightVars) + .map(([key, value]) => ` ${key}: ${value};`) + .join('\n')} + --radius: ${radius}rem; } - + .dark { - --background: <%- colors.dark["background"] %>; - --foreground: <%- colors.dark["foreground"] %>; - --card: <%- colors.dark["card"] %>; - --card-foreground: <%- colors.dark["card-foreground"] %>; - --popover: <%- colors.dark["popover"] %>; - --popover-foreground: <%- colors.dark["popover-foreground"] %>; - --primary: <%- colors.dark["primary"] %>; - --primary-foreground: <%- colors.dark["primary-foreground"] %>; - --secondary: <%- colors.dark["secondary"] %>; - --secondary-foreground: <%- colors.dark["secondary-foreground"] %>; - --muted: <%- colors.dark["muted"] %>; - --muted-foreground: <%- colors.dark["muted-foreground"] %>; - --accent: <%- colors.dark["accent"] %>; - --accent-foreground: <%- colors.dark["accent-foreground"] %>; - --destructive: <%- colors.dark["destructive"] %>; - --destructive-foreground: <%- colors.dark["destructive-foreground"] %>; - --border: <%- colors.dark["border"] %>; - --input: <%- colors.dark["input"] %>; - --ring: <%- colors.dark["ring"] %>; +${Object.entries(darkVars) + .map(([key, value]) => ` ${key}: ${value};`) + .join('\n')} } } `; +} diff --git a/apps/www/src/components/customizer-drawer.tsx b/apps/www/src/components/customizer-drawer.tsx index af6b544d88..23c4277c8b 100644 --- a/apps/www/src/components/customizer-drawer.tsx +++ b/apps/www/src/components/customizer-drawer.tsx @@ -51,7 +51,7 @@ export default function CustomizerDrawer() { }} shouldScaleBackground={false} > - + @@ -66,7 +66,7 @@ export default function CustomizerDrawer() { modal={false} > diff --git a/apps/www/src/components/customizer-tabs.tsx b/apps/www/src/components/customizer-tabs.tsx index fdcf250d64..38cc1f42fe 100644 --- a/apps/www/src/components/customizer-tabs.tsx +++ b/apps/www/src/components/customizer-tabs.tsx @@ -9,8 +9,9 @@ export function CustomizerTabs() { const customizerTab = settingsStore.use.customizerTab(); return ( -
+
{ settingsStore.set.customizerTab(value); @@ -23,16 +24,10 @@ export function CustomizerTabs() {
- + - + diff --git a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx index 3538310145..1725abe31d 100644 --- a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx @@ -24,6 +24,7 @@ import { TablePlugin, insertTable } from '@udecode/plate-table/react'; import { CheckPlugin } from '@/components/context/check-plugin'; import { settingsStore } from '@/components/context/settings-store'; import { Icons } from '@/components/icons'; +import { useMyEditorRef } from '@/registry/default/lib/plate-types'; import { DropdownMenu, DropdownMenuContent, @@ -34,7 +35,6 @@ import { useOpenState, } from '@/registry/default/plate-ui/dropdown-menu'; import { ToolbarButton } from '@/registry/default/plate-ui/toolbar'; -import { useMyEditorRef } from '@/types/plate-types'; const items = [ { diff --git a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx index f6c720cd92..80e9e47806 100644 --- a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx @@ -23,6 +23,7 @@ import { ListPlugin } from '@udecode/plate-list/react'; import { CheckPlugin } from '@/components/context/check-plugin'; import { settingsStore } from '@/components/context/settings-store'; import { Icons } from '@/components/icons'; +import { useMyEditorRef } from '@/registry/default/lib/plate-types'; import { DropdownMenu, DropdownMenuContent, @@ -33,7 +34,6 @@ import { useOpenState, } from '@/registry/default/plate-ui/dropdown-menu'; import { ToolbarButton } from '@/registry/default/plate-ui/toolbar'; -import { useMyEditorRef } from '@/types/plate-types'; const items = [ { diff --git a/apps/www/src/components/plugins-tab-content.tsx b/apps/www/src/components/plugins-tab-content.tsx index eb19f2dffe..0584cded4c 100644 --- a/apps/www/src/components/plugins-tab-content.tsx +++ b/apps/www/src/components/plugins-tab-content.tsx @@ -6,7 +6,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { ArrowUpRight, Eye, EyeOff } from 'lucide-react'; import { customizerList } from '@/config/customizer-list'; -import { useDebounce } from '@/hooks/use-debounce'; +import { useDebounce } from '@/registry/default/hooks/use-debounce'; import { Button } from '@/registry/default/plate-ui/button'; import { Checkbox } from '@/registry/default/plate-ui/checkbox'; diff --git a/apps/www/src/components/setting-checkbox.tsx b/apps/www/src/components/setting-checkbox.tsx index 4335080d45..9a02a309d9 100644 --- a/apps/www/src/components/setting-checkbox.tsx +++ b/apps/www/src/components/setting-checkbox.tsx @@ -15,6 +15,7 @@ import { import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from '@/registry/default/plate-ui/tooltip'; @@ -50,26 +51,28 @@ export function SettingCheckbox({
- - -
- { - settingsStore.set.setCheckedIdNext(id, _checked); - }} - /> - -
-
+ + + +
+ { + settingsStore.set.setCheckedIdNext(id, _checked); + }} + /> + +
+
- - {description} - -
+ + {description} + +
+
{badges?.map((badge) => ( diff --git a/apps/www/src/components/settings-toggle.tsx b/apps/www/src/components/settings-toggle.tsx index 1c976fb763..5201c098fe 100644 --- a/apps/www/src/components/settings-toggle.tsx +++ b/apps/www/src/components/settings-toggle.tsx @@ -5,6 +5,7 @@ import React from 'react'; import { Tooltip, TooltipContent, + TooltipProvider, TooltipTrigger, } from '@/registry/default/plate-ui/tooltip'; @@ -16,19 +17,25 @@ export function SettingsToggle() { const showSettings = settingsStore.use.showSettings(); return ( - - - settingsStore.set.showSettings(pressed)} - pressed={showSettings} - > - - - + + + + + settingsStore.set.showSettings(pressed) + } + pressed={showSettings} + > + + + - {showSettings ? 'Hide' : 'Show'} settings - + + {showSettings ? 'Hide' : 'Show'} settings + + + ); } diff --git a/apps/www/src/components/theme-customizer.tsx b/apps/www/src/components/theme-customizer.tsx index 7c7b07c40d..f440f25c71 100644 --- a/apps/www/src/components/theme-customizer.tsx +++ b/apps/www/src/components/theme-customizer.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { - CheckIcon, InfoCircledIcon, MoonIcon, ResetIcon, @@ -13,31 +12,37 @@ import { cn } from '@udecode/cn'; import { useTheme } from 'next-themes'; import { useConfig } from '@/hooks/use-config'; +import { useMounted } from '@/hooks/use-mounted'; +import { useThemesConfig } from '@/hooks/use-themes-config'; +import { THEMES } from '@/lib/themes'; import { Button } from '@/registry/default/plate-ui/button'; import { Popover, PopoverContent, PopoverTrigger, } from '@/registry/default/plate-ui/popover'; -import { baseColors } from '@/registry/registry-base-colors'; +import { Separator } from '@/registry/default/plate-ui/separator'; -import { CopyCodeButton } from './copy-code-button'; +import { CopyCodeButton, getThemeCode } from './copy-code-button'; +import { ThemesSwitcher } from './themes-selector-mini'; import { Label } from './ui/label'; import { Skeleton } from './ui/skeleton'; export function ThemeCustomizer() { - const [mounted, setMounted] = React.useState(false); + const mounted = useMounted(); const [config, setConfig] = useConfig(); + const { setThemesConfig, themesConfig } = useThemesConfig(); + const activeTheme = themesConfig.activeTheme ?? THEMES['default-shadcn']; const { resolvedTheme: mode, setTheme: setMode } = useTheme(); - React.useEffect(() => { - setMounted(true); - }, []); + const themeCode = React.useMemo(() => { + return getThemeCode(activeTheme, config.radius); + }, [activeTheme, config.radius]); return ( - <> +
-
+
Customize
@@ -45,11 +50,9 @@ export function ThemeCustomizer() { Pick a style and color for your components.
- -
-
-
+
+
@@ -95,10 +98,13 @@ export function ThemeCustomizer() { className="ml-auto rounded-[0.5rem]" onClick={() => { setConfig({ - ...config, radius: 0.5, + style: 'default', theme: 'slate', }); + setThemesConfig({ + activeTheme: THEMES['default-shadcn'], + }); }} > @@ -106,51 +112,11 @@ export function ThemeCustomizer() {
-
- -
- {baseColors.map((theme) => { - const isActive = config.theme === theme.name; - - return mounted ? ( - - ) : ( - - ); - })} -
+
+ +
-
+
{['0', '0.3', '0.5', '0.75', '1.0'].map((value) => { @@ -176,7 +142,7 @@ export function ThemeCustomizer() { })}
-
+
{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 ( - - - - - - {theme.label} - - - ); - })} - - ) : ( -
- - - - - -
- )} +
- - - setTheme('light')}> - - Light - - setTheme('dark')}> - - Dark - - setTheme('system')}> - - System - - - + ); } 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 ( -
- - - - - - - - + + + + + + + + +
-
- + placeholder="" + focusRing={false} + /> - - - - - - - - - - - -
+ + + + + + + - - + +
- -
+ + + + +
+
); 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', }, ];