mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-01 08:34:12 +00:00
chore: rebuild registry
This commit is contained in:
shadcn
102
apps/www/public/r/colors/gray.json
Normal file
102
apps/www/public/r/colors/gray.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"inlineColors": {
|
||||
"light": {
|
||||
"background": "white",
|
||||
"foreground": "gray-950",
|
||||
"card": "white",
|
||||
"card-foreground": "gray-950",
|
||||
"popover": "white",
|
||||
"popover-foreground": "gray-950",
|
||||
"primary": "gray-900",
|
||||
"primary-foreground": "gray-50",
|
||||
"secondary": "gray-100",
|
||||
"secondary-foreground": "gray-900",
|
||||
"muted": "gray-100",
|
||||
"muted-foreground": "gray-500",
|
||||
"accent": "gray-100",
|
||||
"accent-foreground": "gray-900",
|
||||
"destructive": "red-500",
|
||||
"destructive-foreground": "gray-50",
|
||||
"border": "gray-200",
|
||||
"input": "gray-200",
|
||||
"ring": "gray-950"
|
||||
},
|
||||
"dark": {
|
||||
"background": "gray-950",
|
||||
"foreground": "gray-50",
|
||||
"card": "gray-950",
|
||||
"card-foreground": "gray-50",
|
||||
"popover": "gray-950",
|
||||
"popover-foreground": "gray-50",
|
||||
"primary": "gray-50",
|
||||
"primary-foreground": "gray-900",
|
||||
"secondary": "gray-800",
|
||||
"secondary-foreground": "gray-50",
|
||||
"muted": "gray-800",
|
||||
"muted-foreground": "gray-400",
|
||||
"accent": "gray-800",
|
||||
"accent-foreground": "gray-50",
|
||||
"destructive": "red-900",
|
||||
"destructive-foreground": "gray-50",
|
||||
"border": "gray-800",
|
||||
"input": "gray-800",
|
||||
"ring": "gray-300"
|
||||
}
|
||||
},
|
||||
"cssVars": {
|
||||
"light": {
|
||||
"background": "0 0% 100%",
|
||||
"foreground": "224 71.4% 4.1%",
|
||||
"card": "0 0% 100%",
|
||||
"card-foreground": "224 71.4% 4.1%",
|
||||
"popover": "0 0% 100%",
|
||||
"popover-foreground": "224 71.4% 4.1%",
|
||||
"primary": "220.9 39.3% 11%",
|
||||
"primary-foreground": "210 20% 98%",
|
||||
"secondary": "220 14.3% 95.9%",
|
||||
"secondary-foreground": "220.9 39.3% 11%",
|
||||
"muted": "220 14.3% 95.9%",
|
||||
"muted-foreground": "220 8.9% 46.1%",
|
||||
"accent": "220 14.3% 95.9%",
|
||||
"accent-foreground": "220.9 39.3% 11%",
|
||||
"destructive": "0 84.2% 60.2%",
|
||||
"destructive-foreground": "210 20% 98%",
|
||||
"border": "220 13% 91%",
|
||||
"input": "220 13% 91%",
|
||||
"ring": "224 71.4% 4.1%",
|
||||
"chart-1": "12 76% 61%",
|
||||
"chart-2": "173 58% 39%",
|
||||
"chart-3": "197 37% 24%",
|
||||
"chart-4": "43 74% 66%",
|
||||
"chart-5": "27 87% 67%"
|
||||
},
|
||||
"dark": {
|
||||
"background": "224 71.4% 4.1%",
|
||||
"foreground": "210 20% 98%",
|
||||
"card": "224 71.4% 4.1%",
|
||||
"card-foreground": "210 20% 98%",
|
||||
"popover": "224 71.4% 4.1%",
|
||||
"popover-foreground": "210 20% 98%",
|
||||
"primary": "210 20% 98%",
|
||||
"primary-foreground": "220.9 39.3% 11%",
|
||||
"secondary": "215 27.9% 16.9%",
|
||||
"secondary-foreground": "210 20% 98%",
|
||||
"muted": "215 27.9% 16.9%",
|
||||
"muted-foreground": "217.9 10.6% 64.9%",
|
||||
"accent": "215 27.9% 16.9%",
|
||||
"accent-foreground": "210 20% 98%",
|
||||
"destructive": "0 62.8% 30.6%",
|
||||
"destructive-foreground": "210 20% 98%",
|
||||
"border": "215 27.9% 16.9%",
|
||||
"input": "215 27.9% 16.9%",
|
||||
"ring": "216 12.2% 83.9%",
|
||||
"chart-1": "220 70% 50%",
|
||||
"chart-2": "160 60% 45%",
|
||||
"chart-3": "30 80% 55%",
|
||||
"chart-4": "280 65% 60%",
|
||||
"chart-5": "340 75% 55%"
|
||||
}
|
||||
},
|
||||
"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: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\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: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
}
|
||||
1999
apps/www/public/r/colors/index.json
Normal file
1999
apps/www/public/r/colors/index.json
Normal file
File diff suppressed because it is too large
Load Diff
102
apps/www/public/r/colors/neutral.json
Normal file
102
apps/www/public/r/colors/neutral.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"inlineColors": {
|
||||
"light": {
|
||||
"background": "white",
|
||||
"foreground": "neutral-950",
|
||||
"card": "white",
|
||||
"card-foreground": "neutral-950",
|
||||
"popover": "white",
|
||||
"popover-foreground": "neutral-950",
|
||||
"primary": "neutral-900",
|
||||
"primary-foreground": "neutral-50",
|
||||
"secondary": "neutral-100",
|
||||
"secondary-foreground": "neutral-900",
|
||||
"muted": "neutral-100",
|
||||
"muted-foreground": "neutral-500",
|
||||
"accent": "neutral-100",
|
||||
"accent-foreground": "neutral-900",
|
||||
"destructive": "red-500",
|
||||
"destructive-foreground": "neutral-50",
|
||||
"border": "neutral-200",
|
||||
"input": "neutral-200",
|
||||
"ring": "neutral-950"
|
||||
},
|
||||
"dark": {
|
||||
"background": "neutral-950",
|
||||
"foreground": "neutral-50",
|
||||
"card": "neutral-950",
|
||||
"card-foreground": "neutral-50",
|
||||
"popover": "neutral-950",
|
||||
"popover-foreground": "neutral-50",
|
||||
"primary": "neutral-50",
|
||||
"primary-foreground": "neutral-900",
|
||||
"secondary": "neutral-800",
|
||||
"secondary-foreground": "neutral-50",
|
||||
"muted": "neutral-800",
|
||||
"muted-foreground": "neutral-400",
|
||||
"accent": "neutral-800",
|
||||
"accent-foreground": "neutral-50",
|
||||
"destructive": "red-900",
|
||||
"destructive-foreground": "neutral-50",
|
||||
"border": "neutral-800",
|
||||
"input": "neutral-800",
|
||||
"ring": "neutral-300"
|
||||
}
|
||||
},
|
||||
"cssVars": {
|
||||
"light": {
|
||||
"background": "0 0% 100%",
|
||||
"foreground": "0 0% 3.9%",
|
||||
"card": "0 0% 100%",
|
||||
"card-foreground": "0 0% 3.9%",
|
||||
"popover": "0 0% 100%",
|
||||
"popover-foreground": "0 0% 3.9%",
|
||||
"primary": "0 0% 9%",
|
||||
"primary-foreground": "0 0% 98%",
|
||||
"secondary": "0 0% 96.1%",
|
||||
"secondary-foreground": "0 0% 9%",
|
||||
"muted": "0 0% 96.1%",
|
||||
"muted-foreground": "0 0% 45.1%",
|
||||
"accent": "0 0% 96.1%",
|
||||
"accent-foreground": "0 0% 9%",
|
||||
"destructive": "0 84.2% 60.2%",
|
||||
"destructive-foreground": "0 0% 98%",
|
||||
"border": "0 0% 89.8%",
|
||||
"input": "0 0% 89.8%",
|
||||
"ring": "0 0% 3.9%",
|
||||
"chart-1": "12 76% 61%",
|
||||
"chart-2": "173 58% 39%",
|
||||
"chart-3": "197 37% 24%",
|
||||
"chart-4": "43 74% 66%",
|
||||
"chart-5": "27 87% 67%"
|
||||
},
|
||||
"dark": {
|
||||
"background": "0 0% 3.9%",
|
||||
"foreground": "0 0% 98%",
|
||||
"card": "0 0% 3.9%",
|
||||
"card-foreground": "0 0% 98%",
|
||||
"popover": "0 0% 3.9%",
|
||||
"popover-foreground": "0 0% 98%",
|
||||
"primary": "0 0% 98%",
|
||||
"primary-foreground": "0 0% 9%",
|
||||
"secondary": "0 0% 14.9%",
|
||||
"secondary-foreground": "0 0% 98%",
|
||||
"muted": "0 0% 14.9%",
|
||||
"muted-foreground": "0 0% 63.9%",
|
||||
"accent": "0 0% 14.9%",
|
||||
"accent-foreground": "0 0% 98%",
|
||||
"destructive": "0 62.8% 30.6%",
|
||||
"destructive-foreground": "0 0% 98%",
|
||||
"border": "0 0% 14.9%",
|
||||
"input": "0 0% 14.9%",
|
||||
"ring": "0 0% 83.1%",
|
||||
"chart-1": "220 70% 50%",
|
||||
"chart-2": "160 60% 45%",
|
||||
"chart-3": "30 80% 55%",
|
||||
"chart-4": "280 65% 60%",
|
||||
"chart-5": "340 75% 55%"
|
||||
}
|
||||
},
|
||||
"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: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\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: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
}
|
||||
102
apps/www/public/r/colors/slate.json
Normal file
102
apps/www/public/r/colors/slate.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"inlineColors": {
|
||||
"light": {
|
||||
"background": "white",
|
||||
"foreground": "slate-950",
|
||||
"card": "white",
|
||||
"card-foreground": "slate-950",
|
||||
"popover": "white",
|
||||
"popover-foreground": "slate-950",
|
||||
"primary": "slate-900",
|
||||
"primary-foreground": "slate-50",
|
||||
"secondary": "slate-100",
|
||||
"secondary-foreground": "slate-900",
|
||||
"muted": "slate-100",
|
||||
"muted-foreground": "slate-500",
|
||||
"accent": "slate-100",
|
||||
"accent-foreground": "slate-900",
|
||||
"destructive": "red-500",
|
||||
"destructive-foreground": "slate-50",
|
||||
"border": "slate-200",
|
||||
"input": "slate-200",
|
||||
"ring": "slate-950"
|
||||
},
|
||||
"dark": {
|
||||
"background": "slate-950",
|
||||
"foreground": "slate-50",
|
||||
"card": "slate-950",
|
||||
"card-foreground": "slate-50",
|
||||
"popover": "slate-950",
|
||||
"popover-foreground": "slate-50",
|
||||
"primary": "slate-50",
|
||||
"primary-foreground": "slate-900",
|
||||
"secondary": "slate-800",
|
||||
"secondary-foreground": "slate-50",
|
||||
"muted": "slate-800",
|
||||
"muted-foreground": "slate-400",
|
||||
"accent": "slate-800",
|
||||
"accent-foreground": "slate-50",
|
||||
"destructive": "red-900",
|
||||
"destructive-foreground": "slate-50",
|
||||
"border": "slate-800",
|
||||
"input": "slate-800",
|
||||
"ring": "slate-300"
|
||||
}
|
||||
},
|
||||
"cssVars": {
|
||||
"light": {
|
||||
"background": "0 0% 100%",
|
||||
"foreground": "222.2 84% 4.9%",
|
||||
"card": "0 0% 100%",
|
||||
"card-foreground": "222.2 84% 4.9%",
|
||||
"popover": "0 0% 100%",
|
||||
"popover-foreground": "222.2 84% 4.9%",
|
||||
"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%",
|
||||
"muted": "210 40% 96.1%",
|
||||
"muted-foreground": "215.4 16.3% 46.9%",
|
||||
"accent": "210 40% 96.1%",
|
||||
"accent-foreground": "222.2 47.4% 11.2%",
|
||||
"destructive": "0 84.2% 60.2%",
|
||||
"destructive-foreground": "210 40% 98%",
|
||||
"border": "214.3 31.8% 91.4%",
|
||||
"input": "214.3 31.8% 91.4%",
|
||||
"ring": "222.2 84% 4.9%",
|
||||
"chart-1": "12 76% 61%",
|
||||
"chart-2": "173 58% 39%",
|
||||
"chart-3": "197 37% 24%",
|
||||
"chart-4": "43 74% 66%",
|
||||
"chart-5": "27 87% 67%"
|
||||
},
|
||||
"dark": {
|
||||
"background": "222.2 84% 4.9%",
|
||||
"foreground": "210 40% 98%",
|
||||
"card": "222.2 84% 4.9%",
|
||||
"card-foreground": "210 40% 98%",
|
||||
"popover": "222.2 84% 4.9%",
|
||||
"popover-foreground": "210 40% 98%",
|
||||
"primary": "210 40% 98%",
|
||||
"primary-foreground": "222.2 47.4% 11.2%",
|
||||
"secondary": "217.2 32.6% 17.5%",
|
||||
"secondary-foreground": "210 40% 98%",
|
||||
"muted": "217.2 32.6% 17.5%",
|
||||
"muted-foreground": "215 20.2% 65.1%",
|
||||
"accent": "217.2 32.6% 17.5%",
|
||||
"accent-foreground": "210 40% 98%",
|
||||
"destructive": "0 62.8% 30.6%",
|
||||
"destructive-foreground": "210 40% 98%",
|
||||
"border": "217.2 32.6% 17.5%",
|
||||
"input": "217.2 32.6% 17.5%",
|
||||
"ring": "212.7 26.8% 83.9%",
|
||||
"chart-1": "220 70% 50%",
|
||||
"chart-2": "160 60% 45%",
|
||||
"chart-3": "30 80% 55%",
|
||||
"chart-4": "280 65% 60%",
|
||||
"chart-5": "340 75% 55%"
|
||||
}
|
||||
},
|
||||
"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: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\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: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
}
|
||||
102
apps/www/public/r/colors/stone.json
Normal file
102
apps/www/public/r/colors/stone.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"inlineColors": {
|
||||
"light": {
|
||||
"background": "white",
|
||||
"foreground": "stone-950",
|
||||
"card": "white",
|
||||
"card-foreground": "stone-950",
|
||||
"popover": "white",
|
||||
"popover-foreground": "stone-950",
|
||||
"primary": "stone-900",
|
||||
"primary-foreground": "stone-50",
|
||||
"secondary": "stone-100",
|
||||
"secondary-foreground": "stone-900",
|
||||
"muted": "stone-100",
|
||||
"muted-foreground": "stone-500",
|
||||
"accent": "stone-100",
|
||||
"accent-foreground": "stone-900",
|
||||
"destructive": "red-500",
|
||||
"destructive-foreground": "stone-50",
|
||||
"border": "stone-200",
|
||||
"input": "stone-200",
|
||||
"ring": "stone-950"
|
||||
},
|
||||
"dark": {
|
||||
"background": "stone-950",
|
||||
"foreground": "stone-50",
|
||||
"card": "stone-950",
|
||||
"card-foreground": "stone-50",
|
||||
"popover": "stone-950",
|
||||
"popover-foreground": "stone-50",
|
||||
"primary": "stone-50",
|
||||
"primary-foreground": "stone-900",
|
||||
"secondary": "stone-800",
|
||||
"secondary-foreground": "stone-50",
|
||||
"muted": "stone-800",
|
||||
"muted-foreground": "stone-400",
|
||||
"accent": "stone-800",
|
||||
"accent-foreground": "stone-50",
|
||||
"destructive": "red-900",
|
||||
"destructive-foreground": "stone-50",
|
||||
"border": "stone-800",
|
||||
"input": "stone-800",
|
||||
"ring": "stone-300"
|
||||
}
|
||||
},
|
||||
"cssVars": {
|
||||
"light": {
|
||||
"background": "0 0% 100%",
|
||||
"foreground": "20 14.3% 4.1%",
|
||||
"card": "0 0% 100%",
|
||||
"card-foreground": "20 14.3% 4.1%",
|
||||
"popover": "0 0% 100%",
|
||||
"popover-foreground": "20 14.3% 4.1%",
|
||||
"primary": "24 9.8% 10%",
|
||||
"primary-foreground": "60 9.1% 97.8%",
|
||||
"secondary": "60 4.8% 95.9%",
|
||||
"secondary-foreground": "24 9.8% 10%",
|
||||
"muted": "60 4.8% 95.9%",
|
||||
"muted-foreground": "25 5.3% 44.7%",
|
||||
"accent": "60 4.8% 95.9%",
|
||||
"accent-foreground": "24 9.8% 10%",
|
||||
"destructive": "0 84.2% 60.2%",
|
||||
"destructive-foreground": "60 9.1% 97.8%",
|
||||
"border": "20 5.9% 90%",
|
||||
"input": "20 5.9% 90%",
|
||||
"ring": "20 14.3% 4.1%",
|
||||
"chart-1": "12 76% 61%",
|
||||
"chart-2": "173 58% 39%",
|
||||
"chart-3": "197 37% 24%",
|
||||
"chart-4": "43 74% 66%",
|
||||
"chart-5": "27 87% 67%"
|
||||
},
|
||||
"dark": {
|
||||
"background": "20 14.3% 4.1%",
|
||||
"foreground": "60 9.1% 97.8%",
|
||||
"card": "20 14.3% 4.1%",
|
||||
"card-foreground": "60 9.1% 97.8%",
|
||||
"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%",
|
||||
"secondary": "12 6.5% 15.1%",
|
||||
"secondary-foreground": "60 9.1% 97.8%",
|
||||
"muted": "12 6.5% 15.1%",
|
||||
"muted-foreground": "24 5.4% 63.9%",
|
||||
"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%",
|
||||
"border": "12 6.5% 15.1%",
|
||||
"input": "12 6.5% 15.1%",
|
||||
"ring": "24 5.7% 82.9%",
|
||||
"chart-1": "220 70% 50%",
|
||||
"chart-2": "160 60% 45%",
|
||||
"chart-3": "30 80% 55%",
|
||||
"chart-4": "280 65% 60%",
|
||||
"chart-5": "340 75% 55%"
|
||||
}
|
||||
},
|
||||
"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: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\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: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
}
|
||||
102
apps/www/public/r/colors/zinc.json
Normal file
102
apps/www/public/r/colors/zinc.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"inlineColors": {
|
||||
"light": {
|
||||
"background": "white",
|
||||
"foreground": "zinc-950",
|
||||
"card": "white",
|
||||
"card-foreground": "zinc-950",
|
||||
"popover": "white",
|
||||
"popover-foreground": "zinc-950",
|
||||
"primary": "zinc-900",
|
||||
"primary-foreground": "zinc-50",
|
||||
"secondary": "zinc-100",
|
||||
"secondary-foreground": "zinc-900",
|
||||
"muted": "zinc-100",
|
||||
"muted-foreground": "zinc-500",
|
||||
"accent": "zinc-100",
|
||||
"accent-foreground": "zinc-900",
|
||||
"destructive": "red-500",
|
||||
"destructive-foreground": "zinc-50",
|
||||
"border": "zinc-200",
|
||||
"input": "zinc-200",
|
||||
"ring": "zinc-950"
|
||||
},
|
||||
"dark": {
|
||||
"background": "zinc-950",
|
||||
"foreground": "zinc-50",
|
||||
"card": "zinc-950",
|
||||
"card-foreground": "zinc-50",
|
||||
"popover": "zinc-950",
|
||||
"popover-foreground": "zinc-50",
|
||||
"primary": "zinc-50",
|
||||
"primary-foreground": "zinc-900",
|
||||
"secondary": "zinc-800",
|
||||
"secondary-foreground": "zinc-50",
|
||||
"muted": "zinc-800",
|
||||
"muted-foreground": "zinc-400",
|
||||
"accent": "zinc-800",
|
||||
"accent-foreground": "zinc-50",
|
||||
"destructive": "red-900",
|
||||
"destructive-foreground": "zinc-50",
|
||||
"border": "zinc-800",
|
||||
"input": "zinc-800",
|
||||
"ring": "zinc-300"
|
||||
}
|
||||
},
|
||||
"cssVars": {
|
||||
"light": {
|
||||
"background": "0 0% 100%",
|
||||
"foreground": "240 10% 3.9%",
|
||||
"card": "0 0% 100%",
|
||||
"card-foreground": "240 10% 3.9%",
|
||||
"popover": "0 0% 100%",
|
||||
"popover-foreground": "240 10% 3.9%",
|
||||
"primary": "240 5.9% 10%",
|
||||
"primary-foreground": "0 0% 98%",
|
||||
"secondary": "240 4.8% 95.9%",
|
||||
"secondary-foreground": "240 5.9% 10%",
|
||||
"muted": "240 4.8% 95.9%",
|
||||
"muted-foreground": "240 3.8% 46.1%",
|
||||
"accent": "240 4.8% 95.9%",
|
||||
"accent-foreground": "240 5.9% 10%",
|
||||
"destructive": "0 84.2% 60.2%",
|
||||
"destructive-foreground": "0 0% 98%",
|
||||
"border": "240 5.9% 90%",
|
||||
"input": "240 5.9% 90%",
|
||||
"ring": "240 10% 3.9%",
|
||||
"chart-1": "12 76% 61%",
|
||||
"chart-2": "173 58% 39%",
|
||||
"chart-3": "197 37% 24%",
|
||||
"chart-4": "43 74% 66%",
|
||||
"chart-5": "27 87% 67%"
|
||||
},
|
||||
"dark": {
|
||||
"background": "240 10% 3.9%",
|
||||
"foreground": "0 0% 98%",
|
||||
"card": "240 10% 3.9%",
|
||||
"card-foreground": "0 0% 98%",
|
||||
"popover": "240 10% 3.9%",
|
||||
"popover-foreground": "0 0% 98%",
|
||||
"primary": "0 0% 98%",
|
||||
"primary-foreground": "240 5.9% 10%",
|
||||
"secondary": "240 3.7% 15.9%",
|
||||
"secondary-foreground": "0 0% 98%",
|
||||
"muted": "240 3.7% 15.9%",
|
||||
"muted-foreground": "240 5% 64.9%",
|
||||
"accent": "240 3.7% 15.9%",
|
||||
"accent-foreground": "0 0% 98%",
|
||||
"destructive": "0 62.8% 30.6%",
|
||||
"destructive-foreground": "0 0% 98%",
|
||||
"border": "240 3.7% 15.9%",
|
||||
"input": "240 3.7% 15.9%",
|
||||
"ring": "240 4.9% 83.9%",
|
||||
"chart-1": "220 70% 50%",
|
||||
"chart-2": "160 60% 45%",
|
||||
"chart-3": "30 80% 55%",
|
||||
"chart-4": "280 65% 60%",
|
||||
"chart-5": "340 75% 55%"
|
||||
}
|
||||
},
|
||||
"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: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\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: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
}
|
||||
647
apps/www/public/r/index.json
Normal file
647
apps/www/public/r/index.json
Normal file
@@ -0,0 +1,647 @@
|
||||
[
|
||||
{
|
||||
"name": "accordion",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/accordion.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
"tailwind": {
|
||||
"config": {
|
||||
"theme": {
|
||||
"extend": {
|
||||
"keyframes": {
|
||||
"accordion-down": {
|
||||
"from": {
|
||||
"height": "0"
|
||||
},
|
||||
"to": {
|
||||
"height": "var(--radix-accordion-content-height)"
|
||||
}
|
||||
},
|
||||
"accordion-up": {
|
||||
"from": {
|
||||
"height": "var(--radix-accordion-content-height)"
|
||||
},
|
||||
"to": {
|
||||
"height": "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"animation": {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "alert",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/alert.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "alert-dialog",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-alert-dialog"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/alert-dialog.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "aspect-ratio",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-aspect-ratio"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/aspect-ratio.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "avatar",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/avatar.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "badge",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/badge.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "breadcrumb",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slot"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/breadcrumb.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "button",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slot"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/button.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "calendar",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"react-day-picker@8.10.1",
|
||||
"date-fns"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/calendar.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "card",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/card.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "carousel",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"embla-carousel-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/carousel.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "chart",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"recharts",
|
||||
"lucide-react"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"card"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/chart.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-checkbox"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/checkbox.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "collapsible",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/collapsible.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "command",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"cmdk@1.0.0"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/command.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "context-menu",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-context-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/context-menu.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "dialog",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/dialog.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "drawer",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"vaul",
|
||||
"@radix-ui/react-dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/drawer.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "dropdown-menu",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/dropdown-menu.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "form",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-label",
|
||||
"@radix-ui/react-slot",
|
||||
"@hookform/resolvers",
|
||||
"zod",
|
||||
"react-hook-form"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/form.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hover-card",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-hover-card"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/hover-card.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "input",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/input.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "input-otp",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"input-otp"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/input-otp.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "label",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/label.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "menubar",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-menubar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/menubar.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "navigation-menu",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-navigation-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/navigation-menu.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "pagination",
|
||||
"type": "registry:ui",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/pagination.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "popover",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-popover"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/popover.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "progress",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-progress"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/progress.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "radio-group",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-radio-group"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/radio-group.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "resizable",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"react-resizable-panels"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/resizable.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "scroll-area",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-scroll-area"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/scroll-area.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "select",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-select"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/select.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "separator",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-separator"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/separator.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "sheet",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-dialog"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/sheet.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "skeleton",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/skeleton.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "slider",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slider"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/slider.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "sonner",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"sonner",
|
||||
"next-themes"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/sonner.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "switch",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-switch"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/switch.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "table",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/table.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "tabs",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-tabs"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/tabs.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "textarea",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/textarea.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "toast",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-toast"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/toast.tsx",
|
||||
"type": "registry:ui"
|
||||
},
|
||||
{
|
||||
"path": "hooks/use-toast.ts",
|
||||
"type": "registry:hook"
|
||||
},
|
||||
{
|
||||
"path": "ui/toaster.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "toggle",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-toggle"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/toggle.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "toggle-group",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-toggle-group"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"toggle"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/toggle-group.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "tooltip",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-tooltip"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/tooltip.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
45
apps/www/public/r/styles/default/accordion.json
Normal file
45
apps/www/public/r/styles/default/accordion.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "accordion",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-accordion"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/accordion.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <AccordionPrimitive.Item\n ref={ref}\n className={cn(\"border-b\", className)}\n {...props}\n />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n {...props}\n >\n <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
],
|
||||
"tailwind": {
|
||||
"config": {
|
||||
"theme": {
|
||||
"extend": {
|
||||
"keyframes": {
|
||||
"accordion-down": {
|
||||
"from": {
|
||||
"height": "0"
|
||||
},
|
||||
"to": {
|
||||
"height": "var(--radix-accordion-content-height)"
|
||||
}
|
||||
},
|
||||
"accordion-up": {
|
||||
"from": {
|
||||
"height": "var(--radix-accordion-content-height)"
|
||||
},
|
||||
"to": {
|
||||
"height": "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"animation": {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
apps/www/public/r/styles/default/alert-dialog.json
Normal file
18
apps/www/public/r/styles/default/alert-dialog.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "alert-dialog",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-alert-dialog"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/alert-dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n className={cn(\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 className\n )}\n {...props}\n ref={ref}\n />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <AlertDialogPortal>\n <AlertDialogOverlay />\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n className\n )}\n {...props}\n />\n </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-2 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold\", className)}\n {...props}\n />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={cn(buttonVariants(), className)}\n {...props}\n />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={cn(\n buttonVariants({ variant: \"outline\" }),\n \"mt-2 sm:mt-0\",\n className\n )}\n {...props}\n />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
12
apps/www/public/r/styles/default/alert.json
Normal file
12
apps/www/public/r/styles/default/alert.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "alert",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/alert.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n <div\n ref={ref}\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h5\n ref={ref}\n className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n {...props}\n />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n {...props}\n />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
15
apps/www/public/r/styles/default/aspect-ratio.json
Normal file
15
apps/www/public/r/styles/default/aspect-ratio.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "aspect-ratio",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-aspect-ratio"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/aspect-ratio.tsx",
|
||||
"content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
18
apps/www/public/r/styles/default/authentication-01.json
Normal file
18
apps/www/public/r/styles/default/authentication-01.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "authentication-01",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/authentication-01.tsx",
|
||||
"content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LoginForm() {\n return (\n <Card className=\"w-full max-w-sm\">\n <CardHeader>\n <CardTitle className=\"text-2xl\">Login</CardTitle>\n <CardDescription>\n Enter your email below to login to your account.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"grid gap-4\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" required />\n </div>\n </CardContent>\n <CardFooter>\n <Button className=\"w-full\">Sign in</Button>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
18
apps/www/public/r/styles/default/authentication-02.json
Normal file
18
apps/www/public/r/styles/default/authentication-02.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "authentication-02",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/authentication-02.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LoginForm() {\n return (\n <Card className=\"mx-auto max-w-sm\">\n <CardHeader>\n <CardTitle className=\"text-2xl\">Login</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <div className=\"flex items-center\">\n <Label htmlFor=\"password\">Password</Label>\n <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n Forgot your password?\n </Link>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Login\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Login with Google\n </Button>\n </div>\n <div className=\"mt-4 text-center text-sm\">\n Don't have an account?{\" \"}\n <Link href=\"#\" className=\"underline\">\n Sign up\n </Link>\n </div>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
18
apps/www/public/r/styles/default/authentication-03.json
Normal file
18
apps/www/public/r/styles/default/authentication-03.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "authentication-03",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/authentication-03.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function LoginForm() {\n return (\n <Card className=\"mx-auto max-w-sm\">\n <CardHeader>\n <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n <CardDescription>\n Enter your information to create an account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <div className=\"grid gap-4\">\n <div className=\"grid grid-cols-2 gap-4\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"first-name\">First name</Label>\n <Input id=\"first-name\" placeholder=\"Max\" required />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"last-name\">Last name</Label>\n <Input id=\"last-name\" placeholder=\"Robinson\" required />\n </div>\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"password\">Password</Label>\n <Input id=\"password\" type=\"password\" />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Create an account\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Sign up with GitHub\n </Button>\n </div>\n <div className=\"mt-4 text-center text-sm\">\n Already have an account?{\" \"}\n <Link href=\"#\" className=\"underline\">\n Sign in\n </Link>\n </div>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
18
apps/www/public/r/styles/default/authentication-04.json
Normal file
18
apps/www/public/r/styles/default/authentication-04.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "authentication-04",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/authentication-04.tsx",
|
||||
"content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Dashboard() {\n return (\n <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n <div className=\"flex items-center justify-center py-12\">\n <div className=\"mx-auto grid w-[350px] gap-6\">\n <div className=\"grid gap-2 text-center\">\n <h1 className=\"text-3xl font-bold\">Login</h1>\n <p className=\"text-balance text-muted-foreground\">\n Enter your email below to login to your account\n </p>\n </div>\n <div className=\"grid gap-4\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <div className=\"flex items-center\">\n <Label htmlFor=\"password\">Password</Label>\n <Link\n href=\"/forgot-password\"\n className=\"ml-auto inline-block text-sm underline\"\n >\n Forgot your password?\n </Link>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" className=\"w-full\">\n Login\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Login with Google\n </Button>\n </div>\n <div className=\"mt-4 text-center text-sm\">\n Don't have an account?{\" \"}\n <Link href=\"#\" className=\"underline\">\n Sign up\n </Link>\n </div>\n </div>\n </div>\n <div className=\"hidden bg-muted lg:block\">\n <Image\n src=\"/placeholder.svg\"\n alt=\"Image\"\n width=\"1920\"\n height=\"1080\"\n className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
15
apps/www/public/r/styles/default/avatar.json
Normal file
15
apps/www/public/r/styles/default/avatar.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "avatar",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/avatar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Root\n ref={ref}\n className={cn(\n \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Image>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Image\n ref={ref}\n className={cn(\"aspect-square h-full w-full\", className)}\n {...props}\n />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n <AvatarPrimitive.Fallback\n ref={ref}\n className={cn(\n \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n className\n )}\n {...props}\n />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
12
apps/www/public/r/styles/default/badge.json
Normal file
12
apps/www/public/r/styles/default/badge.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "badge",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/badge.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n )\n}\n\nexport { Badge, badgeVariants }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
15
apps/www/public/r/styles/default/breadcrumb.json
Normal file
15
apps/www/public/r/styles/default/breadcrumb.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "breadcrumb",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slot"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/breadcrumb.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<\"nav\"> & {\n separator?: React.ReactNode\n }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n HTMLOListElement,\n React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n <ol\n ref={ref}\n className={cn(\n \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n className\n )}\n {...props}\n />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn(\"inline-flex items-center gap-1.5\", className)}\n {...props}\n />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentPropsWithoutRef<\"a\"> & {\n asChild?: boolean\n }\n>(({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : \"a\"\n\n return (\n <Comp\n ref={ref}\n className={cn(\"transition-colors hover:text-foreground\", className)}\n {...props}\n />\n )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn(\"font-normal text-foreground\", className)}\n {...props}\n />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) => (\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"[&>svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? <ChevronRight />}\n </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"h-4 w-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
15
apps/www/public/r/styles/default/button.json
Normal file
15
apps/www/public/r/styles/default/button.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "button",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-slot"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/button.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst 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 variants: {\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 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 ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
19
apps/www/public/r/styles/default/calendar.json
Normal file
19
apps/www/public/r/styles/default/calendar.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "calendar",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"react-day-picker@8.10.1",
|
||||
"date-fns"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/calendar.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center\",\n caption_label: \"text-sm font-medium\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
12
apps/www/public/r/styles/default/card.json
Normal file
12
apps/www/public/r/styles/default/card.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "card",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/card.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n className\n )}\n {...props}\n />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\n \"text-2xl font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex items-center p-6 pt-0\", className)}\n {...props}\n />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
18
apps/www/public/r/styles/default/carousel.json
Normal file
18
apps/www/public/r/styles/default/carousel.json
Normal file
File diff suppressed because one or more lines are too long
16
apps/www/public/r/styles/default/chart-area-axes.json
Normal file
16
apps/www/public/r/styles/default/chart-area-axes.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-axes",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-axes.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Axes</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: -20,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <YAxis\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickCount={3}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-default.json
Normal file
16
apps/www/public/r/styles/default/chart-area-default.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-default",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-gradient.json
Normal file
16
apps/www/public/r/styles/default/chart-area-gradient.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-gradient",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-gradient.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Gradient</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <defs>\n <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-desktop)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop\n offset=\"5%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.8}\n />\n <stop\n offset=\"95%\"\n stopColor=\"var(--color-mobile)\"\n stopOpacity={0.1}\n />\n </linearGradient>\n </defs>\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"url(#fillMobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"url(#fillDesktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-icons.json
Normal file
16
apps/www/public/r/styles/default/chart-area-icons.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-icons",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-icons.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: TrendingDown,\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n icon: TrendingUp,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Icons</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n <ChartLegend content={<ChartLegendContent />} />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-interactive.json
Normal file
16
apps/www/public/r/styles/default/chart-area-interactive.json
Normal file
File diff suppressed because one or more lines are too long
16
apps/www/public/r/styles/default/chart-area-legend.json
Normal file
16
apps/www/public/r/styles/default/chart-area-legend.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-legend",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-legend.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Legend</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n <ChartLegend content={<ChartLegendContent />} />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-linear.json
Normal file
16
apps/www/public/r/styles/default/chart-area-linear.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-linear",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-linear.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Linear</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"linear\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-stacked-expand",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-stacked-expand.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-3))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n top: 12,\n }}\n stackOffset=\"expand\"\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"other\"\n type=\"natural\"\n fill=\"var(--color-other)\"\n fillOpacity={0.1}\n stroke=\"var(--color-other)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-stacked.json
Normal file
16
apps/www/public/r/styles/default/chart-area-stacked.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-stacked",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-stacked.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Stacked</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dot\" />}\n />\n <Area\n dataKey=\"mobile\"\n type=\"natural\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0.4}\n stroke=\"var(--color-mobile)\"\n stackId=\"a\"\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n stackId=\"a\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-area-step.json
Normal file
16
apps/www/public/r/styles/default/chart-area-step.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-area-step",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-area-step.tsx",
|
||||
"content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: Activity,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Area Chart - Step</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <AreaChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"step\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-active.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-active.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-active",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-active.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"browser\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar\n dataKey=\"visitors\"\n strokeWidth={2}\n radius={8}\n activeIndex={2}\n activeBar={({ ...props }) => {\n return (\n <Rectangle\n {...props}\n fillOpacity={0.8}\n stroke={props.payload.fill}\n strokeDasharray={4}\n strokeDashoffset={4}\n />\n )\n }}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-default.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-default.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-default",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-horizontal.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-horizontal.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-horizontal",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-horizontal.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Horizontal</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n left: -20,\n }}\n >\n <XAxis type=\"number\" dataKey=\"desktop\" hide />\n <YAxis\n dataKey=\"month\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-interactive.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-interactive.json
Normal file
File diff suppressed because one or more lines are too long
16
apps/www/public/r/styles/default/chart-bar-label-custom.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-label-custom.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-label-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n label: {\n color: \"hsl(var(--background))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n right: 16,\n }}\n >\n <CartesianGrid horizontal={false} />\n <YAxis\n dataKey=\"month\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n hide\n />\n <XAxis dataKey=\"desktop\" type=\"number\" hide />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Bar\n dataKey=\"desktop\"\n layout=\"vertical\"\n fill=\"var(--color-desktop)\"\n radius={4}\n >\n <LabelList\n dataKey=\"month\"\n position=\"insideLeft\"\n offset={8}\n className=\"fill-[--color-label]\"\n fontSize={12}\n />\n <LabelList\n dataKey=\"desktop\"\n position=\"right\"\n offset={8}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-label.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-label.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-label",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-label.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 20,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-mixed.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-mixed.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-mixed",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-mixed.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Mixed</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart\n accessibilityLayer\n data={chartData}\n layout=\"vertical\"\n margin={{\n left: 0,\n }}\n >\n <YAxis\n dataKey=\"browser\"\n type=\"category\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) =>\n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n <XAxis dataKey=\"visitors\" type=\"number\" hide />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-multiple.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-multiple.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-multiple",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-multiple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dashed\" />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-negative.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-negative.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-negative",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-negative.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", visitors: 186 },\n { month: \"February\", visitors: 205 },\n { month: \"March\", visitors: -207 },\n { month: \"April\", visitors: 173 },\n { month: \"May\", visitors: -209 },\n { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Negative</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel hideIndicator />}\n />\n <Bar dataKey=\"visitors\">\n <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n {chartData.map((item) => (\n <Cell\n key={item.month}\n fill={\n item.visitors > 0\n ? \"hsl(var(--chart-1))\"\n : \"hsl(var(--chart-2))\"\n }\n />\n ))}\n </Bar>\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-bar-stacked.json
Normal file
16
apps/www/public/r/styles/default/chart-bar-stacked.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-bar-stacked",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-bar-stacked.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n <ChartLegend content={<ChartLegendContent />} />\n <Bar\n dataKey=\"desktop\"\n stackId=\"a\"\n fill=\"var(--color-desktop)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"mobile\"\n stackId=\"a\"\n fill=\"var(--color-mobile)\"\n radius={[4, 4, 0, 0]}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-default.json
Normal file
16
apps/www/public/r/styles/default/chart-line-default.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-default",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-dots-colors.json
Normal file
16
apps/www/public/r/styles/default/chart-line-dots-colors.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-dots-colors",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-dots-colors.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"hsl(var(--chart-2))\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Dots Colors</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 24,\n left: 24,\n right: 24,\n }}\n >\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n indicator=\"line\"\n nameKey=\"visitors\"\n hideLabel\n />\n }\n />\n <Line\n dataKey=\"visitors\"\n type=\"natural\"\n stroke=\"var(--color-visitors)\"\n strokeWidth={2}\n dot={({ payload, ...props }) => {\n return (\n <Dot\n key={payload.browser}\n r={5}\n cx={props.cx}\n cy={props.cy}\n fill={payload.fill}\n stroke={payload.fill}\n />\n )\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-dots-custom.json
Normal file
16
apps/www/public/r/styles/default/chart-line-dots-custom.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-dots-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-dots-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Custom Dots</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={({ cx, cy, payload }) => {\n const r = 24\n return (\n <GitCommitVertical\n key={payload.month}\n x={cx - r / 2}\n y={cy - r / 2}\n width={r}\n height={r}\n fill=\"hsl(var(--background))\"\n stroke=\"var(--color-desktop)\"\n />\n )\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-dots.json
Normal file
16
apps/www/public/r/styles/default/chart-line-dots.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-dots",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-dots.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Dots</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-desktop)\",\n }}\n activeDot={{\n r: 6,\n }}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-interactive.json
Normal file
16
apps/www/public/r/styles/default/chart-line-interactive.json
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-label-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"hsl(var(--chart-2))\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 24,\n left: 24,\n right: 24,\n }}\n >\n <CartesianGrid vertical={false} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n indicator=\"line\"\n nameKey=\"visitors\"\n hideLabel\n />\n }\n />\n <Line\n dataKey=\"visitors\"\n type=\"natural\"\n stroke=\"var(--color-visitors)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-visitors)\",\n }}\n activeDot={{\n r: 6,\n }}\n >\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n dataKey=\"browser\"\n formatter={(value: keyof typeof chartConfig) =>\n chartConfig[value]?.label\n }\n />\n </Line>\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-label.json
Normal file
16
apps/www/public/r/styles/default/chart-line-label.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-label",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-label.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n top: 20,\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"natural\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={{\n fill: \"var(--color-desktop)\",\n }}\n activeDot={{\n r: 6,\n }}\n >\n <LabelList\n position=\"top\"\n offset={12}\n className=\"fill-foreground\"\n fontSize={12}\n />\n </Line>\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-linear.json
Normal file
16
apps/www/public/r/styles/default/chart-line-linear.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-linear",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-linear.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Linear</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"linear\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-multiple.json
Normal file
16
apps/www/public/r/styles/default/chart-line-multiple.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-multiple",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-multiple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Line\n dataKey=\"desktop\"\n type=\"monotone\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n <Line\n dataKey=\"mobile\"\n type=\"monotone\"\n stroke=\"var(--color-mobile)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2 text-sm\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-line-step.json
Normal file
16
apps/www/public/r/styles/default/chart-line-step.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-line-step",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-line-step.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Line Chart - Step</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <LineChart\n accessibilityLayer\n data={chartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Line\n dataKey=\"desktop\"\n type=\"step\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n <div className=\"flex gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-donut-active.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-donut-active.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-donut-active",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-donut-active.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut Active</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n activeIndex={0}\n activeShape={({\n outerRadius = 0,\n ...props\n }: PieSectorDataItem) => (\n <Sector {...props} outerRadius={outerRadius + 10} />\n )}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-donut-text.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-donut-text.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-donut-text",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-donut-text.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n const totalVisitors = React.useMemo(() => {\n return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut with Text</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n >\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text\n x={viewBox.cx}\n y={viewBox.cy}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n >\n <tspan\n x={viewBox.cx}\n y={viewBox.cy}\n className=\"fill-foreground text-3xl font-bold\"\n >\n {totalVisitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 24}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </Pie>\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-donut.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-donut.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-donut",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-donut.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-interactive.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-interactive.json
Normal file
File diff suppressed because one or more lines are too long
16
apps/www/public/r/styles/default/chart-pie-label-custom.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-label-custom.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-label-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Custom Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n labelLine={false}\n label={({ payload, ...props }) => {\n return (\n <text\n cx={props.cx}\n cy={props.cy}\n x={props.x}\n y={props.y}\n textAnchor={props.textAnchor}\n dominantBaseline={props.dominantBaseline}\n fill=\"hsla(var(--foreground))\"\n >\n {`${\n chartConfig[payload.browser as keyof typeof chartConfig]\n ?.label\n } (${payload.visitors})`}\n </text>\n )\n }}\n nameKey=\"browser\"\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-label-list.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-label-list.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-label-list",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-label-list.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Label List</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n />\n <Pie data={chartData} dataKey=\"visitors\">\n <LabelList\n dataKey=\"browser\"\n className=\"fill-background\"\n stroke=\"none\"\n fontSize={12}\n formatter={(value: keyof typeof chartConfig) =>\n chartConfig[value]?.label\n }\n />\n </Pie>\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-label.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-label.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-label",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-label.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n >\n <PieChart>\n <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-legend.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-legend.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-legend",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-legend.tsx",
|
||||
"content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Legend</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[300px]\"\n >\n <PieChart>\n <Pie data={chartData} dataKey=\"visitors\" />\n <ChartLegend\n content={<ChartLegendContent nameKey=\"browser\" />}\n className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-separator-none",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-separator-none.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Separator None</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={chartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n stroke=\"0\"\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-simple.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-simple.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-simple",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-simple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-pie-stacked.json
Normal file
16
apps/www/public/r/styles/default/chart-pie-stacked.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-pie-stacked",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-pie-stacked.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst desktopData = [\n { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n },\n mobile: {\n label: \"Mobile\",\n },\n january: {\n label: \"January\",\n color: \"hsl(var(--chart-1))\",\n },\n february: {\n label: \"February\",\n color: \"hsl(var(--chart-2))\",\n },\n march: {\n label: \"March\",\n color: \"hsl(var(--chart-3))\",\n },\n april: {\n label: \"April\",\n color: \"hsl(var(--chart-4))\",\n },\n may: {\n label: \"May\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Stacked</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n content={\n <ChartTooltipContent\n labelKey=\"visitors\"\n nameKey=\"month\"\n indicator=\"line\"\n labelFormatter={(_, payload) => {\n return chartConfig[\n payload?.[0].dataKey as keyof typeof chartConfig\n ].label\n }}\n />\n }\n />\n <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n <Pie\n data={mobileData}\n dataKey=\"mobile\"\n innerRadius={70}\n outerRadius={90}\n />\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-default.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-default.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-default",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <PolarAngleAxis dataKey=\"month\" />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-dots.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-dots.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-dots",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-dots.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center\">\n <CardTitle>Radar Chart - Dots</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <PolarAngleAxis dataKey=\"month\" />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n dot={{\n r: 4,\n fillOpacity: 1,\n }}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-grid-circle-fill",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-grid-circle-fill.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 285 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <PolarGrid\n className=\"fill-[--color-desktop] opacity-20\"\n gridType=\"circle\"\n />\n <PolarAngleAxis dataKey=\"month\" />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.5}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-grid-circle-no-lines",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-grid-circle-no-lines.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <PolarGrid gridType=\"circle\" radialLines={false} />\n <PolarAngleAxis dataKey=\"month\" />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n dot={{\n r: 4,\n fillOpacity: 1,\n }}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-grid-circle",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-grid-circle.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Grid Circle</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <PolarGrid gridType=\"circle\" />\n <PolarAngleAxis dataKey=\"month\" />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n dot={{\n r: 4,\n fillOpacity: 1,\n }}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-grid-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-grid-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Grid Custom</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n <PolarAngleAxis dataKey=\"month\" />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-grid-fill.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-grid-fill.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-grid-fill",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-grid-fill.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 285 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Grid Filled</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n <PolarAngleAxis dataKey=\"month\" />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.5}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-grid-none.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-grid-none.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-grid-none",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-grid-none.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Grid None</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <PolarAngleAxis dataKey=\"month\" />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n dot={{\n r: 4,\n fillOpacity: 1,\n }}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-icons.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-icons.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-icons",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-icons.tsx",
|
||||
"content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n icon: ArrowDownFromLine,\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n icon: ArrowUpFromLine,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Icons</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart\n data={chartData}\n margin={{\n top: -40,\n bottom: -10,\n }}\n >\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis dataKey=\"month\" />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-label-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Custom Label</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart\n data={chartData}\n margin={{\n top: 10,\n right: 10,\n bottom: 10,\n left: 10,\n }}\n >\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis\n dataKey=\"month\"\n tick={({ x, y, textAnchor, value, index, ...props }) => {\n const data = chartData[index]\n\n return (\n <text\n x={x}\n y={index === 0 ? y - 10 : y}\n textAnchor={textAnchor}\n fontSize={13}\n fontWeight={500}\n {...props}\n >\n <tspan>{data.desktop}</tspan>\n <tspan className=\"fill-muted-foreground\">/</tspan>\n <tspan>{data.mobile}</tspan>\n <tspan\n x={x}\n dy={\"1rem\"}\n fontSize={12}\n className=\"fill-muted-foreground\"\n >\n {data.month}\n </tspan>\n </text>\n )\n }}\n />\n\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-legend.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-legend.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-legend",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-legend.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Legend</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart\n data={chartData}\n margin={{\n top: -40,\n bottom: -10,\n }}\n >\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis dataKey=\"month\" />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-lines-only.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-lines-only.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-lines-only",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-lines-only.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 160 },\n { month: \"February\", desktop: 185, mobile: 170 },\n { month: \"March\", desktop: 207, mobile: 180 },\n { month: \"April\", desktop: 173, mobile: 160 },\n { month: \"May\", desktop: 160, mobile: 190 },\n { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Lines Only</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis dataKey=\"month\" />\n <PolarGrid radialLines={false} />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0}\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n />\n <Radar\n dataKey=\"mobile\"\n fill=\"var(--color-mobile)\"\n fillOpacity={0}\n stroke=\"var(--color-mobile)\"\n strokeWidth={2}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-multiple.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-multiple.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-multiple",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-multiple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Multiple</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis dataKey=\"month\" />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radar-radius.json
Normal file
16
apps/www/public/r/styles/default/chart-radar-radius.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radar-radius",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radar-radius.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Radius Axis</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={chartData}>\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n }\n />\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n <PolarRadiusAxis\n angle={60}\n stroke=\"hsla(var(--foreground))\"\n orientation=\"middle\"\n axisLine={false}\n />\n </RadarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radial-grid.json
Normal file
16
apps/www/public/r/styles/default/chart-radial-grid.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radial-grid",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radial-grid.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Grid</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n />\n <PolarGrid gridType=\"circle\" />\n <RadialBar dataKey=\"visitors\" />\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radial-label.json
Normal file
16
apps/www/public/r/styles/default/chart-radial-label.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radial-label",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radial-label.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Label</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadialBarChart\n data={chartData}\n startAngle={-90}\n endAngle={380}\n innerRadius={30}\n outerRadius={110}\n >\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n />\n <RadialBar dataKey=\"visitors\" background>\n <LabelList\n position=\"insideStart\"\n dataKey=\"browser\"\n className=\"fill-white capitalize mix-blend-luminosity\"\n fontSize={11}\n />\n </RadialBar>\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radial-shape.json
Normal file
16
apps/www/public/r/styles/default/chart-radial-shape.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radial-shape",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radial-shape.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Shape</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadialBarChart\n data={chartData}\n endAngle={100}\n innerRadius={80}\n outerRadius={140}\n >\n <PolarGrid\n gridType=\"circle\"\n radialLines={false}\n stroke=\"none\"\n className=\"first:fill-muted last:fill-background\"\n polarRadius={[86, 74]}\n />\n <RadialBar dataKey=\"visitors\" background />\n <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text\n x={viewBox.cx}\n y={viewBox.cy}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n >\n <tspan\n x={viewBox.cx}\n y={viewBox.cy}\n className=\"fill-foreground text-4xl font-bold\"\n >\n {chartData[0].visitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 24}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </PolarRadiusAxis>\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radial-simple.json
Normal file
16
apps/www/public/r/styles/default/chart-radial-simple.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radial-simple",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radial-simple.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"hsl(var(--chart-1))\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"hsl(var(--chart-3))\",\n },\n edge: {\n label: \"Edge\",\n color: \"hsl(var(--chart-4))\",\n },\n other: {\n label: \"Other\",\n color: \"hsl(var(--chart-5))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n />\n <RadialBar dataKey=\"visitors\" background />\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radial-stacked.json
Normal file
16
apps/www/public/r/styles/default/chart-radial-stacked.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radial-stacked",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radial-stacked.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"hsl(var(--chart-1))\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Stacked</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex flex-1 items-center pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square w-full max-w-[250px]\"\n >\n <RadialBarChart\n data={chartData}\n endAngle={180}\n innerRadius={80}\n outerRadius={130}\n >\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) - 16}\n className=\"fill-foreground text-2xl font-bold\"\n >\n {totalVisitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 4}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </PolarRadiusAxis>\n <RadialBar\n dataKey=\"desktop\"\n stackId=\"a\"\n cornerRadius={5}\n fill=\"var(--color-desktop)\"\n className=\"stroke-transparent stroke-2\"\n />\n <RadialBar\n dataKey=\"mobile\"\n fill=\"var(--color-mobile)\"\n stackId=\"a\"\n cornerRadius={5}\n className=\"stroke-transparent stroke-2\"\n />\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-radial-text.json
Normal file
16
apps/www/public/r/styles/default/chart-radial-text.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-radial-text",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-radial-text.tsx",
|
||||
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\nconst chartData = [\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Text</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadialBarChart\n data={chartData}\n startAngle={0}\n endAngle={250}\n innerRadius={80}\n outerRadius={110}\n >\n <PolarGrid\n gridType=\"circle\"\n radialLines={false}\n stroke=\"none\"\n className=\"first:fill-muted last:fill-background\"\n polarRadius={[86, 74]}\n />\n <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text\n x={viewBox.cx}\n y={viewBox.cy}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n >\n <tspan\n x={viewBox.cx}\n y={viewBox.cy}\n className=\"fill-foreground text-4xl font-bold\"\n >\n {chartData[0].visitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 24}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </PolarRadiusAxis>\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 font-medium leading-none\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-tooltip-advanced.json
Normal file
16
apps/www/public/r/styles/default/chart-tooltip-advanced.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-advanced",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-advanced.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Advanced</CardTitle>\n <CardDescription>\n Tooltip with custom formatter and total.\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={\n <ChartTooltipContent\n hideLabel\n className=\"w-[180px]\"\n formatter={(value, name, item, index) => (\n <>\n <div\n className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n style={\n {\n \"--color-bg\": `var(--color-${name})`,\n } as React.CSSProperties\n }\n />\n {chartConfig[name as keyof typeof chartConfig]?.label ||\n name}\n <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n {value}\n <span className=\"font-normal text-muted-foreground\">\n kcal\n </span>\n </div>\n {/* Add this after the last item */}\n {index === 1 && (\n <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n Total\n <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n {item.payload.running + item.payload.swimming}\n <span className=\"font-normal text-muted-foreground\">\n kcal\n </span>\n </div>\n </div>\n )}\n </>\n )}\n />\n }\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-tooltip-default.json
Normal file
16
apps/www/public/r/styles/default/chart-tooltip-default.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-default",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-default.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Default</CardTitle>\n <CardDescription>\n Default tooltip with ChartTooltipContent.\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={<ChartTooltipContent />}\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-formatter",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-formatter.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Formatter</CardTitle>\n <CardDescription>Tooltip with custom formatter .</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={\n <ChartTooltipContent\n hideLabel\n formatter={(value, name) => (\n <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n {chartConfig[name as keyof typeof chartConfig]?.label ||\n name}\n <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n {value}\n <span className=\"font-normal text-muted-foreground\">\n kcal\n </span>\n </div>\n </div>\n )}\n />\n }\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
16
apps/www/public/r/styles/default/chart-tooltip-icons.json
Normal file
16
apps/www/public/r/styles/default/chart-tooltip-icons.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-icons",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-icons.tsx",
|
||||
"content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n icon: Footprints,\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n icon: Waves,\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Icons</CardTitle>\n <CardDescription>Tooltip with icons.</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={<ChartTooltipContent hideLabel />}\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-indicator-line",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-indicator-line.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Line Indicator</CardTitle>\n <CardDescription>Tooltip with line indicator.</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={<ChartTooltipContent indicator=\"line\" />}\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-indicator-none",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-indicator-none.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - No Indicator</CardTitle>\n <CardDescription>Tooltip with no indicator.</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={<ChartTooltipContent hideIndicator />}\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-label-custom",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-label-custom.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n activities: {\n label: \"Activities\",\n },\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Custom label</CardTitle>\n <CardDescription>\n Tooltip with custom label from chartConfig.\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={\n <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n }\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-label-formatter",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-label-formatter.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - Label Formatter</CardTitle>\n <CardDescription>Tooltip with label formatter.</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={\n <ChartTooltipContent\n labelFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }}\n />\n }\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "chart-tooltip-label-none",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "block/chart-tooltip-label-none.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"hsl(var(--chart-1))\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"hsl(var(--chart-2))\",\n },\n} satisfies ChartConfig\n\nexport default function Component() {\n return (\n <Card>\n <CardHeader>\n <CardTitle>Tooltip - No Label</CardTitle>\n <CardDescription>Tooltip with no label.</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={chartConfig}>\n <BarChart accessibilityLayer data={chartData}>\n <XAxis\n dataKey=\"date\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n <Bar\n dataKey=\"running\"\n stackId=\"a\"\n fill=\"var(--color-running)\"\n radius={[0, 0, 4, 4]}\n />\n <Bar\n dataKey=\"swimming\"\n stackId=\"a\"\n fill=\"var(--color-swimming)\"\n radius={[4, 4, 0, 0]}\n />\n <ChartTooltip\n content={<ChartTooltipContent hideIndicator hideLabel />}\n cursor={false}\n defaultIndex={1}\n />\n </BarChart>\n </ChartContainer>\n </CardContent>\n </Card>\n )\n}\n",
|
||||
"type": "registry:block",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
19
apps/www/public/r/styles/default/chart.json
Normal file
19
apps/www/public/r/styles/default/chart.json
Normal file
File diff suppressed because one or more lines are too long
15
apps/www/public/r/styles/default/charts-01.json
Normal file
15
apps/www/public/r/styles/default/charts-01.json
Normal file
File diff suppressed because one or more lines are too long
15
apps/www/public/r/styles/default/checkbox.json
Normal file
15
apps/www/public/r/styles/default/checkbox.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-checkbox"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/checkbox.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n className={cn(\n \"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n className={cn(\"flex items-center justify-center text-current\")}\n >\n <Check className=\"h-4 w-4\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
15
apps/www/public/r/styles/default/collapsible.json
Normal file
15
apps/www/public/r/styles/default/collapsible.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "collapsible",
|
||||
"type": "registry:ui",
|
||||
"dependencies": [
|
||||
"@radix-ui/react-collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui/collapsible.tsx",
|
||||
"content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
|
||||
"type": "registry:ui",
|
||||
"target": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
18
apps/www/public/r/styles/default/command.json
Normal file
18
apps/www/public/r/styles/default/command.json
Normal file
File diff suppressed because one or more lines are too long
15
apps/www/public/r/styles/default/context-menu.json
Normal file
15
apps/www/public/r/styles/default/context-menu.json
Normal file
File diff suppressed because one or more lines are too long
18
apps/www/public/r/styles/default/dashboard-01.json
Normal file
18
apps/www/public/r/styles/default/dashboard-01.json
Normal file
File diff suppressed because one or more lines are too long
19
apps/www/public/r/styles/default/dashboard-02.json
Normal file
19
apps/www/public/r/styles/default/dashboard-02.json
Normal file
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user