From d8cdfd5a7f99b10b3ead4329fcdd5fa36e41fbdd Mon Sep 17 00:00:00 2001 From: debuggingfuture Date: Mon, 23 Dec 2024 10:07:38 +0800 Subject: [PATCH 01/28] add: draf --- CONTRIBUTING.md | 16 + package.json | 3 +- packages/ui-react/__registry__/index.tsx | 120 +++ packages/ui-react/package.json | 35 +- packages/ui-react/public/r/index.json | 28 + packages/ui-react/src/registry/.eslintrc.json | 6 + .../default/block/authentication-01.tsx | 45 + .../default/block/authentication-02.tsx | 67 ++ .../default/block/authentication-03.tsx | 72 ++ .../default/block/authentication-04.tsx | 74 ++ .../default/block/chart-area-axes.tsx | 110 +++ .../default/block/chart-area-default.tsx | 94 ++ .../default/block/chart-area-gradient.tsx | 130 +++ .../default/block/chart-area-icons.tsx | 112 +++ .../default/block/chart-area-interactive.tsx | 265 ++++++ .../default/block/chart-area-legend.tsx | 110 +++ .../default/block/chart-area-linear.tsx | 94 ++ .../block/chart-area-stacked-expand.tsx | 121 +++ .../default/block/chart-area-stacked.tsx | 107 +++ .../default/block/chart-area-step.tsx | 95 ++ .../default/block/chart-bar-active.tsx | 111 +++ .../default/block/chart-bar-default.tsx | 75 ++ .../default/block/chart-bar-horizontal.tsx | 83 ++ .../default/block/chart-bar-interactive.tsx | 221 +++++ .../default/block/chart-bar-label-custom.tsx | 119 +++ .../default/block/chart-bar-label.tsx | 88 ++ .../default/block/chart-bar-mixed.tsx | 103 ++ .../default/block/chart-bar-multiple.tsx | 80 ++ .../default/block/chart-bar-negative.tsx | 79 ++ .../default/block/chart-bar-stacked.tsx | 90 ++ .../default/block/chart-line-default.tsx | 88 ++ .../default/block/chart-line-dots-colors.tsx | 118 +++ .../default/block/chart-line-dots-custom.tsx | 105 ++ .../default/block/chart-line-dots.tsx | 97 ++ .../default/block/chart-line-interactive.tsx | 227 +++++ .../default/block/chart-line-label-custom.tsx | 123 +++ .../default/block/chart-line-label.tsx | 105 ++ .../default/block/chart-line-linear.tsx | 88 ++ .../default/block/chart-line-multiple.tsx | 100 ++ .../default/block/chart-line-step.tsx | 88 ++ .../default/block/chart-pie-donut-active.tsx | 102 ++ .../default/block/chart-pie-donut-text.tsx | 129 +++ .../default/block/chart-pie-donut.tsx | 93 ++ .../default/block/chart-pie-interactive.tsx | 192 ++++ .../default/block/chart-pie-label-custom.tsx | 110 +++ .../default/block/chart-pie-label-list.tsx | 97 ++ .../default/block/chart-pie-label.tsx | 85 ++ .../default/block/chart-pie-legend.tsx | 78 ++ .../block/chart-pie-separator-none.tsx | 93 ++ .../default/block/chart-pie-simple.tsx | 88 ++ .../default/block/chart-pie-stacked.tsx | 119 +++ .../default/block/chart-radar-default.tsx | 75 ++ .../default/block/chart-radar-dots.tsx | 79 ++ .../block/chart-radar-grid-circle-fill.tsx | 78 ++ .../chart-radar-grid-circle-no-lines.tsx | 82 ++ .../default/block/chart-radar-grid-circle.tsx | 82 ++ .../default/block/chart-radar-grid-custom.tsx | 78 ++ .../default/block/chart-radar-grid-fill.tsx | 78 ++ .../default/block/chart-radar-grid-none.tsx | 81 ++ .../default/block/chart-radar-icons.tsx | 94 ++ .../block/chart-radar-label-custom.tsx | 120 +++ .../default/block/chart-radar-legend.tsx | 92 ++ .../default/block/chart-radar-lines-only.tsx | 91 ++ .../default/block/chart-radar-multiple.tsx | 83 ++ .../default/block/chart-radar-radius.tsx | 96 ++ .../default/block/chart-radial-grid.tsx | 89 ++ .../default/block/chart-radial-label.tsx | 101 ++ .../default/block/chart-radial-shape.tsx | 108 +++ .../default/block/chart-radial-simple.tsx | 88 ++ .../default/block/chart-radial-stacked.tsx | 113 +++ .../default/block/chart-radial-text.tsx | 109 +++ .../default/block/chart-tooltip-advanced.tsx | 123 +++ .../default/block/chart-tooltip-default.tsx | 86 ++ .../default/block/chart-tooltip-formatter.tsx | 100 ++ .../default/block/chart-tooltip-icons.tsx | 87 ++ .../block/chart-tooltip-indicator-line.tsx | 84 ++ .../block/chart-tooltip-indicator-none.tsx | 84 ++ .../block/chart-tooltip-label-custom.tsx | 91 ++ .../block/chart-tooltip-label-formatter.tsx | 94 ++ .../block/chart-tooltip-label-none.tsx | 84 ++ .../default/block/charts-01-chunk-0.tsx | 154 +++ .../default/block/charts-01-chunk-1.tsx | 140 +++ .../default/block/charts-01-chunk-2.tsx | 129 +++ .../default/block/charts-01-chunk-3.tsx | 99 ++ .../default/block/charts-01-chunk-4.tsx | 117 +++ .../default/block/charts-01-chunk-5.tsx | 99 ++ .../default/block/charts-01-chunk-6.tsx | 98 ++ .../default/block/charts-01-chunk-7.tsx | 125 +++ .../src/registry/default/block/charts-01.tsx | 895 ++++++++++++++++++ .../default/block/dashboard-01-chunk-0.tsx | 25 + .../default/block/dashboard-01-chunk-1.tsx | 25 + .../default/block/dashboard-01-chunk-2.tsx | 25 + .../default/block/dashboard-01-chunk-3.tsx | 25 + .../default/block/dashboard-01-chunk-4.tsx | 150 +++ .../default/block/dashboard-01-chunk-5.tsx | 88 ++ .../registry/default/block/dashboard-01.tsx | 458 +++++++++ .../default/block/dashboard-02-chunk-0.tsx | 28 + .../default/block/dashboard-02-chunk-1.tsx | 22 + .../registry/default/block/dashboard-02.tsx | 247 +++++ .../default/block/dashboard-03-chunk-0.tsx | 128 +++ .../default/block/dashboard-03-chunk-1.tsx | 54 ++ .../registry/default/block/dashboard-03.tsx | 464 +++++++++ .../default/block/dashboard-04-chunk-0.tsx | 21 + .../default/block/dashboard-04-chunk-1.tsx | 33 + .../default/block/dashboard-04-chunk-2.tsx | 43 + .../registry/default/block/dashboard-04.tsx | 224 +++++ .../default/block/dashboard-05-chunk-0.tsx | 27 + .../default/block/dashboard-05-chunk-1.tsx | 28 + .../default/block/dashboard-05-chunk-2.tsx | 30 + .../default/block/dashboard-05-chunk-3.tsx | 174 ++++ .../default/block/dashboard-05-chunk-4.tsx | 189 ++++ .../registry/default/block/dashboard-05.tsx | 726 ++++++++++++++ .../default/block/dashboard-06-chunk-0.tsx | 289 ++++++ .../registry/default/block/dashboard-06.tsx | 637 +++++++++++++ .../default/block/dashboard-07-chunk-0.tsx | 46 + .../default/block/dashboard-07-chunk-1.tsx | 126 +++ .../default/block/dashboard-07-chunk-2.tsx | 56 ++ .../default/block/dashboard-07-chunk-3.tsx | 43 + .../default/block/dashboard-07-chunk-4.tsx | 60 ++ .../default/block/dashboard-07-chunk-5.tsx | 29 + .../registry/default/block/dashboard-07.tsx | 610 ++++++++++++ .../block/login-01/components/login-form.tsx | 59 ++ .../registry/default/block/login-01/page.tsx | 13 + .../sidebar-01/components/app-sidebar.tsx | 283 ++++++ .../block/sidebar-01/components/nav-main.tsx | 196 ++++ .../sidebar-01/components/nav-projects.tsx | 69 ++ .../sidebar-01/components/nav-secondary.tsx | 43 + .../block/sidebar-01/components/nav-user.tsx | 97 ++ .../sidebar-01/components/storage-card.tsx | 25 + .../sidebar-01/components/team-switcher.tsx | 79 ++ .../block/sidebar-01/hooks/use-sidebar.tsx | 12 + .../default/block/sidebar-01/page.tsx | 25 + .../default/block/sidebar-01/ui/sidebar.tsx | 204 ++++ .../default/example/accordion-demo.tsx | 33 + .../registry/default/example/alert-demo.tsx | 19 + .../default/example/alert-destructive.tsx | 19 + .../default/example/alert-dialog-demo.tsx | 35 + .../default/example/aspect-ratio-demo.tsx | 16 + .../registry/default/example/avatar-demo.tsx | 14 + .../registry/default/example/badge-demo.tsx | 5 + .../default/example/badge-destructive.tsx | 5 + .../default/example/badge-outline.tsx | 5 + .../default/example/badge-secondary.tsx | 5 + .../default/example/breadcrumb-demo.tsx | 49 + .../default/example/breadcrumb-dropdown.tsx | 50 + .../default/example/breadcrumb-ellipsis.tsx | 39 + .../default/example/breadcrumb-link.tsx | 34 + .../default/example/breadcrumb-responsive.tsx | 133 +++ .../default/example/breadcrumb-separator.tsx | 34 + .../default/example/button-as-child.tsx | 11 + .../registry/default/example/button-demo.tsx | 5 + .../default/example/button-destructive.tsx | 5 + .../registry/default/example/button-ghost.tsx | 5 + .../registry/default/example/button-icon.tsx | 11 + .../registry/default/example/button-link.tsx | 5 + .../default/example/button-loading.tsx | 12 + .../default/example/button-outline.tsx | 5 + .../default/example/button-secondary.tsx | 5 + .../default/example/button-with-icon.tsx | 11 + .../default/example/calendar-demo.tsx | 18 + .../default/example/calendar-form.tsx | 101 ++ .../example/calendar-react-hook-form.tsx | 101 ++ .../registry/default/example/card-demo.tsx | 78 ++ .../default/example/card-with-form.tsx | 59 ++ .../default/example/cards/activity-goal.tsx | 135 +++ .../default/example/cards/calendar.tsx | 26 + .../registry/default/example/cards/chat.tsx | 260 +++++ .../default/example/cards/cookie-settings.tsx | 60 ++ .../default/example/cards/create-account.tsx | 60 ++ .../default/example/cards/data-table.tsx | 335 +++++++ .../registry/default/example/cards/index.tsx | 63 ++ .../registry/default/example/cards/metric.tsx | 146 +++ .../default/example/cards/payment-method.tsx | 156 +++ .../default/example/cards/report-issue.tsx | 90 ++ .../registry/default/example/cards/share.tsx | 128 +++ .../registry/default/example/cards/stats.tsx | 133 +++ .../default/example/cards/team-members.tsx | 209 ++++ .../registry/default/example/carousel-api.tsx | 53 ++ .../default/example/carousel-demo.tsx | 32 + .../default/example/carousel-orientation.tsx | 38 + .../default/example/carousel-plugin.tsx | 42 + .../default/example/carousel-size.tsx | 37 + .../default/example/carousel-spacing.tsx | 32 + .../default/example/chart-bar-demo-axis.tsx | 44 + .../default/example/chart-bar-demo-grid.tsx | 37 + .../default/example/chart-bar-demo-legend.tsx | 53 ++ .../example/chart-bar-demo-tooltip.tsx | 50 + .../default/example/chart-bar-demo.tsx | 36 + .../default/example/chart-tooltip-demo.tsx | 218 +++++ .../default/example/checkbox-demo.tsx | 17 + .../default/example/checkbox-disabled.tsx | 15 + .../example/checkbox-form-multiple.tsx | 127 +++ .../default/example/checkbox-form-single.tsx | 73 ++ .../default/example/checkbox-with-text.tsx | 22 + .../default/example/collapsible-demo.tsx | 46 + .../default/example/combobox-demo.tsx | 94 ++ .../example/combobox-dropdown-menu.tsx | 111 +++ .../default/example/combobox-form.tsx | 138 +++ .../default/example/combobox-popover.tsx | 125 +++ .../default/example/combobox-responsive.tsx | 123 +++ .../registry/default/example/command-demo.tsx | 62 ++ .../default/example/command-dialog.tsx | 87 ++ .../default/example/context-menu-demo.tsx | 67 ++ .../default/example/data-table-demo.tsx | 312 ++++++ .../default/example/date-picker-demo.tsx | 43 + .../default/example/date-picker-form.tsx | 101 ++ .../example/date-picker-with-presets.tsx | 62 ++ .../example/date-picker-with-range.tsx | 65 ++ .../default/example/dialog-close-button.tsx | 56 ++ .../registry/default/example/dialog-demo.tsx | 55 ++ .../registry/default/example/drawer-demo.tsx | 134 +++ .../default/example/drawer-dialog.tsx | 87 ++ .../example/dropdown-menu-checkboxes.tsx | 53 ++ .../default/example/dropdown-menu-demo.tsx | 122 +++ .../example/dropdown-menu-radio-group.tsx | 35 + .../default/example/hover-card-demo.tsx | 43 + .../registry/default/example/input-demo.tsx | 5 + .../default/example/input-disabled.tsx | 5 + .../registry/default/example/input-file.tsx | 11 + .../registry/default/example/input-form.tsx | 68 ++ .../default/example/input-otp-controlled.tsx | 39 + .../default/example/input-otp-demo.tsx | 24 + .../default/example/input-otp-form.tsx | 82 ++ .../default/example/input-otp-pattern.tsx | 22 + .../default/example/input-otp-separator.tsx | 29 + .../default/example/input-with-button.tsx | 11 + .../default/example/input-with-label.tsx | 11 + .../default/example/input-with-text.tsx | 12 + .../registry/default/example/label-demo.tsx | 13 + .../registry/default/example/menubar-demo.tsx | 107 +++ .../registry/default/example/mode-toggle.tsx | 40 + .../default/example/navigation-menu-demo.tsx | 146 +++ .../default/example/pagination-demo.tsx | 38 + .../registry/default/example/popover-demo.tsx | 62 ++ .../default/example/progress-demo.tsx | 16 + .../default/example/radio-group-demo.tsx | 21 + .../default/example/radio-group-form.tsx | 88 ++ .../example/resizable-demo-with-handle.tsx | 36 + .../default/example/resizable-demo.tsx | 36 + .../default/example/resizable-handle.tsx | 26 + .../default/example/resizable-vertical.tsx | 26 + .../default/example/scroll-area-demo.tsx | 26 + .../example/scroll-area-horizontal-demo.tsx | 53 ++ .../registry/default/example/select-demo.tsx | 31 + .../registry/default/example/select-form.tsx | 84 ++ .../default/example/select-scrollable.tsx | 75 ++ .../default/example/separator-demo.tsx | 22 + .../registry/default/example/sheet-demo.tsx | 50 + .../registry/default/example/sheet-side.tsx | 60 ++ .../default/example/skeleton-card.tsx | 13 + .../default/example/skeleton-demo.tsx | 13 + .../registry/default/example/slider-demo.tsx | 16 + .../registry/default/example/sonner-demo.tsx | 22 + .../registry/default/example/switch-demo.tsx | 11 + .../registry/default/example/switch-form.tsx | 99 ++ .../registry/default/example/table-demo.tsx | 87 ++ .../registry/default/example/tabs-demo.tsx | 74 ++ .../default/example/textarea-demo.tsx | 5 + .../default/example/textarea-disabled.tsx | 5 + .../default/example/textarea-form.tsx | 74 ++ .../default/example/textarea-with-button.tsx | 11 + .../default/example/textarea-with-label.tsx | 11 + .../default/example/textarea-with-text.tsx | 14 + .../registry/default/example/toast-demo.tsx | 26 + .../default/example/toast-destructive.tsx | 25 + .../registry/default/example/toast-simple.tsx | 21 + .../default/example/toast-with-action.tsx | 24 + .../default/example/toast-with-title.tsx | 22 + .../registry/default/example/toggle-demo.tsx | 11 + .../default/example/toggle-disabled.tsx | 11 + .../default/example/toggle-group-demo.tsx | 22 + .../default/example/toggle-group-disabled.tsx | 22 + .../default/example/toggle-group-lg.tsx | 22 + .../default/example/toggle-group-outline.tsx | 22 + .../default/example/toggle-group-single.tsx | 22 + .../default/example/toggle-group-sm.tsx | 22 + .../registry/default/example/toggle-lg.tsx | 11 + .../default/example/toggle-outline.tsx | 11 + .../registry/default/example/toggle-sm.tsx | 11 + .../default/example/toggle-with-text.tsx | 12 + .../registry/default/example/tooltip-demo.tsx | 22 + .../default/example/typography-blockquote.tsx | 8 + .../default/example/typography-demo.tsx | 119 +++ .../default/example/typography-h1.tsx | 7 + .../default/example/typography-h2.tsx | 7 + .../default/example/typography-h3.tsx | 7 + .../default/example/typography-h4.tsx | 7 + .../example/typography-inline-code.tsx | 7 + .../default/example/typography-large.tsx | 3 + .../default/example/typography-lead.tsx | 8 + .../default/example/typography-list.tsx | 9 + .../default/example/typography-muted.tsx | 5 + .../registry/default/example/typography-p.tsx | 8 + .../default/example/typography-small.tsx | 5 + .../default/example/typography-table.tsx | 44 + .../src/registry/default/hooks/use-mobile.tsx | 19 + .../src/registry/default/hooks/use-toast.ts | 194 ++++ .../src/registry/default/lib/utils.ts | 6 + .../src/registry/default/ui/accordion.tsx | 58 ++ .../src/registry/default/ui/alert-dialog.tsx | 141 +++ .../src/registry/default/ui/alert.tsx | 59 ++ .../src/registry/default/ui/aspect-ratio.tsx | 7 + .../src/registry/default/ui/avatar.tsx | 50 + .../src/registry/default/ui/badge.tsx | 36 + .../src/registry/default/ui/breadcrumb.tsx | 115 +++ .../src/registry/default/ui/button.tsx | 56 ++ .../src/registry/default/ui/calendar.tsx | 66 ++ .../ui-react/src/registry/default/ui/card.tsx | 79 ++ .../src/registry/default/ui/carousel.tsx | 262 +++++ .../src/registry/default/ui/chart.tsx | 365 +++++++ .../src/registry/default/ui/checkbox.tsx | 30 + .../src/registry/default/ui/collapsible.tsx | 11 + .../src/registry/default/ui/command.tsx | 155 +++ .../src/registry/default/ui/context-menu.tsx | 200 ++++ .../src/registry/default/ui/dialog.tsx | 122 +++ .../src/registry/default/ui/drawer.tsx | 118 +++ .../src/registry/default/ui/dropdown-menu.tsx | 200 ++++ .../ui-react/src/registry/default/ui/form.tsx | 179 ++++ .../src/registry/default/ui/hover-card.tsx | 29 + .../src/registry/default/ui/input-otp.tsx | 71 ++ .../src/registry/default/ui/input.tsx | 25 + .../src/registry/default/ui/label.tsx | 26 + .../src/registry/default/ui/menubar.tsx | 236 +++++ .../registry/default/ui/navigation-menu.tsx | 128 +++ .../src/registry/default/ui/pagination.tsx | 117 +++ .../src/registry/default/ui/popover.tsx | 31 + .../src/registry/default/ui/progress.tsx | 28 + .../src/registry/default/ui/radio-group.tsx | 44 + .../src/registry/default/ui/resizable.tsx | 45 + .../src/registry/default/ui/scroll-area.tsx | 48 + .../src/registry/default/ui/select.tsx | 160 ++++ .../src/registry/default/ui/separator.tsx | 31 + .../src/registry/default/ui/sheet.tsx | 140 +++ .../src/registry/default/ui/skeleton.tsx | 15 + .../src/registry/default/ui/slider.tsx | 28 + .../src/registry/default/ui/sonner.tsx | 31 + .../src/registry/default/ui/switch.tsx | 29 + .../src/registry/default/ui/table.tsx | 117 +++ .../ui-react/src/registry/default/ui/tabs.tsx | 55 ++ .../src/registry/default/ui/textarea.tsx | 24 + .../src/registry/default/ui/toast.tsx | 129 +++ .../src/registry/default/ui/toaster.tsx | 35 + .../src/registry/default/ui/toggle-group.tsx | 61 ++ .../src/registry/default/ui/toggle.tsx | 45 + .../src/registry/default/ui/tooltip.tsx | 30 + packages/ui-react/src/registry/index.ts | 18 + .../src/registry/registry-examples.ts | 875 +++++++++++++++++ .../ui-react/src/registry/registry-hooks.ts | 24 + .../ui-react/src/registry/registry-lib.ts | 15 + .../ui-react/src/registry/registry-styles.ts | 8 + packages/ui-react/src/registry/registry-ui.ts | 321 +++++++ packages/ui-react/src/registry/schema.ts | 90 ++ .../ui-react/src/scripts/build-registry.mts | 352 +++++++ packages/ui-react/tsconfig.json | 3 +- packages/ui-react/tsconfig.scripts.json | 13 + pnpm-lock.yaml | 94 +- 356 files changed, 29970 insertions(+), 36 deletions(-) create mode 100644 CONTRIBUTING.md create mode 100644 packages/ui-react/__registry__/index.tsx create mode 100644 packages/ui-react/public/r/index.json create mode 100644 packages/ui-react/src/registry/.eslintrc.json create mode 100644 packages/ui-react/src/registry/default/block/authentication-01.tsx create mode 100644 packages/ui-react/src/registry/default/block/authentication-02.tsx create mode 100644 packages/ui-react/src/registry/default/block/authentication-03.tsx create mode 100644 packages/ui-react/src/registry/default/block/authentication-04.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-axes.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-default.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-gradient.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-icons.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-interactive.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-legend.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-linear.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-stacked-expand.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-stacked.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-area-step.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-active.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-default.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-horizontal.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-interactive.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-label-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-label.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-mixed.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-multiple.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-negative.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-bar-stacked.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-default.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-dots-colors.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-dots-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-dots.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-interactive.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-label-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-label.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-linear.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-multiple.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-line-step.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-donut-active.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-donut-text.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-donut.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-interactive.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-label-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-label-list.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-label.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-legend.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-separator-none.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-simple.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-pie-stacked.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-default.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-dots.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-grid-circle-fill.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-grid-circle-no-lines.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-grid-circle.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-grid-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-grid-fill.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-grid-none.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-icons.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-label-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-legend.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-lines-only.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-multiple.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radar-radius.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radial-grid.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radial-label.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radial-shape.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radial-simple.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radial-stacked.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-radial-text.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-advanced.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-default.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-formatter.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-icons.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-indicator-line.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-indicator-none.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-label-custom.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-label-formatter.tsx create mode 100644 packages/ui-react/src/registry/default/block/chart-tooltip-label-none.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-2.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-3.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-4.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-5.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-6.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01-chunk-7.tsx create mode 100644 packages/ui-react/src/registry/default/block/charts-01.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01-chunk-2.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01-chunk-3.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01-chunk-4.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01-chunk-5.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-01.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-02-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-02-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-02.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-03-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-03-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-03.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-04-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-04-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-04-chunk-2.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-04.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-05-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-05-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-05-chunk-2.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-05-chunk-3.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-05-chunk-4.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-05.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-06-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-06.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07-chunk-0.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07-chunk-1.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07-chunk-2.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07-chunk-3.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07-chunk-4.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07-chunk-5.tsx create mode 100644 packages/ui-react/src/registry/default/block/dashboard-07.tsx create mode 100644 packages/ui-react/src/registry/default/block/login-01/components/login-form.tsx create mode 100644 packages/ui-react/src/registry/default/block/login-01/page.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/app-sidebar.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/nav-main.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/nav-projects.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/nav-secondary.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/nav-user.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/storage-card.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/components/team-switcher.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/hooks/use-sidebar.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/page.tsx create mode 100644 packages/ui-react/src/registry/default/block/sidebar-01/ui/sidebar.tsx create mode 100644 packages/ui-react/src/registry/default/example/accordion-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/alert-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/alert-destructive.tsx create mode 100644 packages/ui-react/src/registry/default/example/alert-dialog-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/aspect-ratio-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/avatar-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/badge-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/badge-destructive.tsx create mode 100644 packages/ui-react/src/registry/default/example/badge-outline.tsx create mode 100644 packages/ui-react/src/registry/default/example/badge-secondary.tsx create mode 100644 packages/ui-react/src/registry/default/example/breadcrumb-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/breadcrumb-dropdown.tsx create mode 100644 packages/ui-react/src/registry/default/example/breadcrumb-ellipsis.tsx create mode 100644 packages/ui-react/src/registry/default/example/breadcrumb-link.tsx create mode 100644 packages/ui-react/src/registry/default/example/breadcrumb-responsive.tsx create mode 100644 packages/ui-react/src/registry/default/example/breadcrumb-separator.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-as-child.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-destructive.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-ghost.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-icon.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-link.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-loading.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-outline.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-secondary.tsx create mode 100644 packages/ui-react/src/registry/default/example/button-with-icon.tsx create mode 100644 packages/ui-react/src/registry/default/example/calendar-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/calendar-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/calendar-react-hook-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/card-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/card-with-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/activity-goal.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/calendar.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/chat.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/cookie-settings.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/create-account.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/data-table.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/index.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/metric.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/payment-method.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/report-issue.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/share.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/stats.tsx create mode 100644 packages/ui-react/src/registry/default/example/cards/team-members.tsx create mode 100644 packages/ui-react/src/registry/default/example/carousel-api.tsx create mode 100644 packages/ui-react/src/registry/default/example/carousel-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/carousel-orientation.tsx create mode 100644 packages/ui-react/src/registry/default/example/carousel-plugin.tsx create mode 100644 packages/ui-react/src/registry/default/example/carousel-size.tsx create mode 100644 packages/ui-react/src/registry/default/example/carousel-spacing.tsx create mode 100644 packages/ui-react/src/registry/default/example/chart-bar-demo-axis.tsx create mode 100644 packages/ui-react/src/registry/default/example/chart-bar-demo-grid.tsx create mode 100644 packages/ui-react/src/registry/default/example/chart-bar-demo-legend.tsx create mode 100644 packages/ui-react/src/registry/default/example/chart-bar-demo-tooltip.tsx create mode 100644 packages/ui-react/src/registry/default/example/chart-bar-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/chart-tooltip-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/checkbox-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/checkbox-disabled.tsx create mode 100644 packages/ui-react/src/registry/default/example/checkbox-form-multiple.tsx create mode 100644 packages/ui-react/src/registry/default/example/checkbox-form-single.tsx create mode 100644 packages/ui-react/src/registry/default/example/checkbox-with-text.tsx create mode 100644 packages/ui-react/src/registry/default/example/collapsible-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/combobox-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/combobox-dropdown-menu.tsx create mode 100644 packages/ui-react/src/registry/default/example/combobox-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/combobox-popover.tsx create mode 100644 packages/ui-react/src/registry/default/example/combobox-responsive.tsx create mode 100644 packages/ui-react/src/registry/default/example/command-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/command-dialog.tsx create mode 100644 packages/ui-react/src/registry/default/example/context-menu-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/data-table-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/date-picker-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/date-picker-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/date-picker-with-presets.tsx create mode 100644 packages/ui-react/src/registry/default/example/date-picker-with-range.tsx create mode 100644 packages/ui-react/src/registry/default/example/dialog-close-button.tsx create mode 100644 packages/ui-react/src/registry/default/example/dialog-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/drawer-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/drawer-dialog.tsx create mode 100644 packages/ui-react/src/registry/default/example/dropdown-menu-checkboxes.tsx create mode 100644 packages/ui-react/src/registry/default/example/dropdown-menu-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/dropdown-menu-radio-group.tsx create mode 100644 packages/ui-react/src/registry/default/example/hover-card-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-disabled.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-file.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-otp-controlled.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-otp-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-otp-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-otp-pattern.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-otp-separator.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-with-button.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-with-label.tsx create mode 100644 packages/ui-react/src/registry/default/example/input-with-text.tsx create mode 100644 packages/ui-react/src/registry/default/example/label-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/menubar-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/mode-toggle.tsx create mode 100644 packages/ui-react/src/registry/default/example/navigation-menu-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/pagination-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/popover-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/progress-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/radio-group-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/radio-group-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/resizable-demo-with-handle.tsx create mode 100644 packages/ui-react/src/registry/default/example/resizable-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/resizable-handle.tsx create mode 100644 packages/ui-react/src/registry/default/example/resizable-vertical.tsx create mode 100644 packages/ui-react/src/registry/default/example/scroll-area-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/scroll-area-horizontal-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/select-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/select-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/select-scrollable.tsx create mode 100644 packages/ui-react/src/registry/default/example/separator-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/sheet-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/sheet-side.tsx create mode 100644 packages/ui-react/src/registry/default/example/skeleton-card.tsx create mode 100644 packages/ui-react/src/registry/default/example/skeleton-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/slider-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/sonner-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/switch-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/switch-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/table-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/tabs-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/textarea-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/textarea-disabled.tsx create mode 100644 packages/ui-react/src/registry/default/example/textarea-form.tsx create mode 100644 packages/ui-react/src/registry/default/example/textarea-with-button.tsx create mode 100644 packages/ui-react/src/registry/default/example/textarea-with-label.tsx create mode 100644 packages/ui-react/src/registry/default/example/textarea-with-text.tsx create mode 100644 packages/ui-react/src/registry/default/example/toast-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/toast-destructive.tsx create mode 100644 packages/ui-react/src/registry/default/example/toast-simple.tsx create mode 100644 packages/ui-react/src/registry/default/example/toast-with-action.tsx create mode 100644 packages/ui-react/src/registry/default/example/toast-with-title.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-disabled.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-group-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-group-disabled.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-group-lg.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-group-outline.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-group-single.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-group-sm.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-lg.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-outline.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-sm.tsx create mode 100644 packages/ui-react/src/registry/default/example/toggle-with-text.tsx create mode 100644 packages/ui-react/src/registry/default/example/tooltip-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-blockquote.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-demo.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-h1.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-h2.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-h3.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-h4.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-inline-code.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-large.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-lead.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-list.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-muted.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-p.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-small.tsx create mode 100644 packages/ui-react/src/registry/default/example/typography-table.tsx create mode 100644 packages/ui-react/src/registry/default/hooks/use-mobile.tsx create mode 100644 packages/ui-react/src/registry/default/hooks/use-toast.ts create mode 100644 packages/ui-react/src/registry/default/lib/utils.ts create mode 100644 packages/ui-react/src/registry/default/ui/accordion.tsx create mode 100644 packages/ui-react/src/registry/default/ui/alert-dialog.tsx create mode 100644 packages/ui-react/src/registry/default/ui/alert.tsx create mode 100644 packages/ui-react/src/registry/default/ui/aspect-ratio.tsx create mode 100644 packages/ui-react/src/registry/default/ui/avatar.tsx create mode 100644 packages/ui-react/src/registry/default/ui/badge.tsx create mode 100644 packages/ui-react/src/registry/default/ui/breadcrumb.tsx create mode 100644 packages/ui-react/src/registry/default/ui/button.tsx create mode 100644 packages/ui-react/src/registry/default/ui/calendar.tsx create mode 100644 packages/ui-react/src/registry/default/ui/card.tsx create mode 100644 packages/ui-react/src/registry/default/ui/carousel.tsx create mode 100644 packages/ui-react/src/registry/default/ui/chart.tsx create mode 100644 packages/ui-react/src/registry/default/ui/checkbox.tsx create mode 100644 packages/ui-react/src/registry/default/ui/collapsible.tsx create mode 100644 packages/ui-react/src/registry/default/ui/command.tsx create mode 100644 packages/ui-react/src/registry/default/ui/context-menu.tsx create mode 100644 packages/ui-react/src/registry/default/ui/dialog.tsx create mode 100644 packages/ui-react/src/registry/default/ui/drawer.tsx create mode 100644 packages/ui-react/src/registry/default/ui/dropdown-menu.tsx create mode 100644 packages/ui-react/src/registry/default/ui/form.tsx create mode 100644 packages/ui-react/src/registry/default/ui/hover-card.tsx create mode 100644 packages/ui-react/src/registry/default/ui/input-otp.tsx create mode 100644 packages/ui-react/src/registry/default/ui/input.tsx create mode 100644 packages/ui-react/src/registry/default/ui/label.tsx create mode 100644 packages/ui-react/src/registry/default/ui/menubar.tsx create mode 100644 packages/ui-react/src/registry/default/ui/navigation-menu.tsx create mode 100644 packages/ui-react/src/registry/default/ui/pagination.tsx create mode 100644 packages/ui-react/src/registry/default/ui/popover.tsx create mode 100644 packages/ui-react/src/registry/default/ui/progress.tsx create mode 100644 packages/ui-react/src/registry/default/ui/radio-group.tsx create mode 100644 packages/ui-react/src/registry/default/ui/resizable.tsx create mode 100644 packages/ui-react/src/registry/default/ui/scroll-area.tsx create mode 100644 packages/ui-react/src/registry/default/ui/select.tsx create mode 100644 packages/ui-react/src/registry/default/ui/separator.tsx create mode 100644 packages/ui-react/src/registry/default/ui/sheet.tsx create mode 100644 packages/ui-react/src/registry/default/ui/skeleton.tsx create mode 100644 packages/ui-react/src/registry/default/ui/slider.tsx create mode 100644 packages/ui-react/src/registry/default/ui/sonner.tsx create mode 100644 packages/ui-react/src/registry/default/ui/switch.tsx create mode 100644 packages/ui-react/src/registry/default/ui/table.tsx create mode 100644 packages/ui-react/src/registry/default/ui/tabs.tsx create mode 100644 packages/ui-react/src/registry/default/ui/textarea.tsx create mode 100644 packages/ui-react/src/registry/default/ui/toast.tsx create mode 100644 packages/ui-react/src/registry/default/ui/toaster.tsx create mode 100644 packages/ui-react/src/registry/default/ui/toggle-group.tsx create mode 100644 packages/ui-react/src/registry/default/ui/toggle.tsx create mode 100644 packages/ui-react/src/registry/default/ui/tooltip.tsx create mode 100644 packages/ui-react/src/registry/index.ts create mode 100644 packages/ui-react/src/registry/registry-examples.ts create mode 100644 packages/ui-react/src/registry/registry-hooks.ts create mode 100644 packages/ui-react/src/registry/registry-lib.ts create mode 100644 packages/ui-react/src/registry/registry-styles.ts create mode 100644 packages/ui-react/src/registry/registry-ui.ts create mode 100644 packages/ui-react/src/registry/schema.ts create mode 100644 packages/ui-react/src/scripts/build-registry.mts create mode 100644 packages/ui-react/tsconfig.scripts.json diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..e808a390 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,16 @@ +## CONTRIBUTING + + + +### Repository setup and structure + +- Refers to https://github.com/fractaldotbox/geist-dapp-kit/issues/57 + + +### Implementation Guide + +- Refers to [/implementation_guide.md] + + + + diff --git a/package.json b/package.json index d31521cc..c52032d5 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@testing-library/react": "^16.0.1", "@vitejs/plugin-react": "^4.3.2", "vite": "^5.4.1", - "vitest": "^2.1.8" + "vitest": "^2.1.8", + "tsx": "^4.1.4" } } diff --git a/packages/ui-react/__registry__/index.tsx b/packages/ui-react/__registry__/index.tsx new file mode 100644 index 00000000..ae04943b --- /dev/null +++ b/packages/ui-react/__registry__/index.tsx @@ -0,0 +1,120 @@ +// @ts-nocheck +// This file is autogenerated by scripts/build-registry.ts +// Do not edit this file directly. +import * as React from "react" + +export const Index: Record = { + "new-york": { + "toggle": { + name: "toggle", + type: "registry:ui", + registryDependencies: undefined, + files: ["registry/new-york/ui/toggle.tsx"], + component: React.lazy(() => import("#registry/new-york/ui/toggle.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "tooltip": { + name: "tooltip", + type: "registry:ui", + registryDependencies: undefined, + files: ["registry/new-york/ui/tooltip.tsx"], + component: React.lazy(() => import("#registry/new-york/ui/tooltip.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "utils": { + name: "utils", + type: "registry:lib", + registryDependencies: undefined, + files: ["registry/new-york/lib/utils.ts"], + component: React.lazy(() => import("#registry/new-york/lib/utils.ts")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "use-mobile": { + name: "use-mobile", + type: "registry:hook", + registryDependencies: undefined, + files: ["registry/new-york/hooks/use-mobile.tsx"], + component: React.lazy(() => import("#registry/new-york/hooks/use-mobile.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "use-toast": { + name: "use-toast", + type: "registry:hook", + registryDependencies: undefined, + files: ["registry/new-york/hooks/use-toast.ts"], + component: React.lazy(() => import("#registry/new-york/hooks/use-toast.ts")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + }, "default": { + "toggle": { + name: "toggle", + type: "registry:ui", + registryDependencies: undefined, + files: ["registry/default/ui/toggle.tsx"], + component: React.lazy(() => import("#registry/default/ui/toggle.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "tooltip": { + name: "tooltip", + type: "registry:ui", + registryDependencies: undefined, + files: ["registry/default/ui/tooltip.tsx"], + component: React.lazy(() => import("#registry/default/ui/tooltip.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "utils": { + name: "utils", + type: "registry:lib", + registryDependencies: undefined, + files: ["registry/default/lib/utils.ts"], + component: React.lazy(() => import("#registry/default/lib/utils.ts")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "use-mobile": { + name: "use-mobile", + type: "registry:hook", + registryDependencies: undefined, + files: ["registry/default/hooks/use-mobile.tsx"], + component: React.lazy(() => import("#registry/default/hooks/use-mobile.tsx")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + "use-toast": { + name: "use-toast", + type: "registry:hook", + registryDependencies: undefined, + files: ["registry/default/hooks/use-toast.ts"], + component: React.lazy(() => import("#registry/default/hooks/use-toast.ts")), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [] + }, + }, +} diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index e856cbb1..130bf335 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -15,46 +15,45 @@ "test": "vitest", "test:unit": "VITEST_SUITES=unit vitest", "test:int": "VITEST_SUITES=int vitest", + "build:registry": "tsx --tsconfig ./tsconfig.scripts.json src/scripts/build-registry.mts", "generate:component": "turbo gen react-component" }, "devDependencies": { - "@geist/typescript-config": "workspace:*", - "@turbo/gen": "^1.12.4", - "@types/node": "^22.10.2", - "@types/react": "^18.3.12", - "@types/react-dom": "^18.3.1", - "typescript": "^5.7.2", - "vite": "^5.4.1", - "vite-plugin-node-polyfills": "^0.22.0", - "vitest": "^2.1.8", "@biomejs/biome": "^1.9.4", "@ethereum-attestation-service/eas-contracts": "1.7.1", "@faker-js/faker": "^8.2.0", + "@geist/typescript-config": "workspace:*", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.0.1", "@testing-library/react-hooks": "^8.0.1", + "@turbo/gen": "^1.12.4", + "@types/node": "^22.10.2", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.1", + "pako": "^2.1.0", "react-test-renderer": "^18.3.1", + "typescript": "^5.7.2", "typescript-eslint": "^8.0.1", - "pako": "^2.1.0" + "vite": "^5.4.1", + "vite-plugin-node-polyfills": "^0.22.0", + "vitest": "^2.1.8" }, "dependencies": { - "@geist/domain": "workspace:*", "@ensdomains/ensjs": "4.0.1-alpha.0", "@ensdomains/ensjs-react": "^0.0.3", "@ethereum-attestation-service/eas-sdk": "2.6.0", "@ethereumjs/rlp": "^5.0.2", + "@geist/domain": "workspace:*", + "@geist/graphql": "workspace:*", "@hookform/resolvers": "^3.9.0", "@ipld/dag-ucan": "^3.4.0", "@lighthouse-web3/kavach": "^0.1.9", "@lighthouse-web3/sdk": "^0.3.7", - "postcss": "^8.4.24", - "autoprefixer": "10.4.20", "@noble/ed25519": "2.1.0", "@noble/hashes": "^1.6.1", "@noble/secp256k1": "^2.1.0", "@openzeppelin/merkle-tree": "^1.0.7", - "@radix-ui/themes": "^3.1.6", "@privy-io/react-auth": "^1.95.2", "@radix-ui/colors": "^3.0.0", "@radix-ui/react-accessible-icon": "^1.0.3", @@ -88,7 +87,7 @@ "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-tooltip": "^1.1.2", - "@geist/graphql": "workspace:*", + "@radix-ui/themes": "^3.1.6", "@scure/base": "^1.1.9", "@storybook/components": "^8.3.6", "@storybook/icons": "^1.2.12", @@ -100,8 +99,8 @@ "@ucanto/interface": "^10.0.1", "@ucanto/transport": "^9.1.1", "@wagmi/core": "^2.13.8", - "wagmi": "^2.12.16", "@web3-storage/w3up-client": "^16.5.1", + "autoprefixer": "10.4.20", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "date-fns": "^4.1.0", @@ -114,10 +113,12 @@ "jsdom": "^25.0.1", "ky": "^1.7.2", "lodash": "^4.17.21", + "lodash.template": "^4.5.0", "lucide-react": "^0.446.0", "micro-eth-signer": "^0.12.0", "micro-packed": "^0.6.3", "multiformats": "^13.3.0", + "postcss": "^8.4.24", "react": "^18.3.1", "react-dom": "^18.3.1", "react-dropzone": "^14.2.9", @@ -127,7 +128,9 @@ "tailwind-merge": "^2.5.2", "tailwindcss": "^3.4.13", "tailwindcss-animate": "^1.0.7", + "ts-morph": "^24.0.0", "viem": "2.x", + "wagmi": "^2.12.16", "zod": "^3.23.8" } } diff --git a/packages/ui-react/public/r/index.json b/packages/ui-react/public/r/index.json new file mode 100644 index 00000000..7dee01cc --- /dev/null +++ b/packages/ui-react/public/r/index.json @@ -0,0 +1,28 @@ +[ + { + "name": "toggle", + "type": "registry:ui", + "dependencies": [ + "@radix-ui/react-toggle" + ], + "files": [ + { + "path": "ui/toggle.tsx", + "type": "registry:ui" + } + ] + }, + { + "name": "tooltip", + "type": "registry:ui", + "dependencies": [ + "@radix-ui/react-tooltip" + ], + "files": [ + { + "path": "ui/tooltip.tsx", + "type": "registry:ui" + } + ] + } +] \ No newline at end of file diff --git a/packages/ui-react/src/registry/.eslintrc.json b/packages/ui-react/src/registry/.eslintrc.json new file mode 100644 index 00000000..6579e1b2 --- /dev/null +++ b/packages/ui-react/src/registry/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://json.schemastore.org/eslintrc", + "rules": { + "react/no-unescaped-entities": "off" + } +} diff --git a/packages/ui-react/src/registry/default/block/authentication-01.tsx b/packages/ui-react/src/registry/default/block/authentication-01.tsx new file mode 100644 index 00000000..0352db53 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/authentication-01.tsx @@ -0,0 +1,45 @@ +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { Input } from "#registry/default/ui/input"; +import { Label } from "#registry/default/ui/label"; + +export const description = + "A simple login form with email and password. The submit button says 'Sign in'."; + +export const iframeHeight = "600px"; + +export const containerClassName = + "w-full h-screen flex items-center justify-center px-4"; + +export default function LoginForm() { + return ( + + + Login + + Enter your email below to login to your account. + + + +
+ + +
+
+ + +
+ + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/authentication-02.tsx b/packages/ui-react/src/registry/default/block/authentication-02.tsx new file mode 100644 index 00000000..76aeb495 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/authentication-02.tsx @@ -0,0 +1,67 @@ +import Link from "next/link"; + +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { Input } from "#registry/default/ui/input"; +import { Label } from "#registry/default/ui/label"; + +export const description = + "A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account."; + +export const iframeHeight = "600px"; + +export const containerClassName = + "w-full h-screen flex items-center justify-center px-4"; + +export default function LoginForm() { + return ( + + + Login + + Enter your email below to login to your account + + + +
+
+ + +
+
+
+ + + Forgot your password? + +
+ +
+ + +
+
+ Don't have an account?{" "} + + Sign up + +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/authentication-03.tsx b/packages/ui-react/src/registry/default/block/authentication-03.tsx new file mode 100644 index 00000000..bd09c92a --- /dev/null +++ b/packages/ui-react/src/registry/default/block/authentication-03.tsx @@ -0,0 +1,72 @@ +import Link from "next/link"; + +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { Input } from "#registry/default/ui/input"; +import { Label } from "#registry/default/ui/label"; + +export const description = + "A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account"; + +export const iframeHeight = "600px"; + +export const containerClassName = + "w-full h-screen flex items-center justify-center px-4"; + +export default function LoginForm() { + return ( + + + Sign Up + + Enter your information to create an account + + + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ + +
+
+ Already have an account?{" "} + + Sign in + +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/authentication-04.tsx b/packages/ui-react/src/registry/default/block/authentication-04.tsx new file mode 100644 index 00000000..4914af19 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/authentication-04.tsx @@ -0,0 +1,74 @@ +import Image from "next/image"; +import Link from "next/link"; + +import { Button } from "#registry/default/ui/button"; +import { Input } from "#registry/default/ui/input"; +import { Label } from "#registry/default/ui/label"; + +export const description = + "A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image."; + +export const iframeHeight = "800px"; + +export const containerClassName = "w-full h-full p-4 lg:p-0"; + +export default function Dashboard() { + return ( +
+
+
+
+

Login

+

+ Enter your email below to login to your account +

+
+
+
+ + +
+
+
+ + + Forgot your password? + +
+ +
+ + +
+
+ Don't have an account?{" "} + + Sign up + +
+
+
+
+ Image +
+
+ ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-axes.tsx b/packages/ui-react/src/registry/default/block/chart-area-axes.tsx new file mode 100644 index 00000000..369926bf --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-axes.tsx @@ -0,0 +1,110 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "An area chart with axes"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Axes + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-default.tsx b/packages/ui-react/src/registry/default/block/chart-area-default.tsx new file mode 100644 index 00000000..b6904f88 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-default.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A simple area chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-gradient.tsx b/packages/ui-react/src/registry/default/block/chart-area-gradient.tsx new file mode 100644 index 00000000..60faaa2b --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-gradient.tsx @@ -0,0 +1,130 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "An area chart with gradient fill"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Gradient + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + + + + + + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-icons.tsx b/packages/ui-react/src/registry/default/block/chart-area-icons.tsx new file mode 100644 index 00000000..34a1a720 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-icons.tsx @@ -0,0 +1,112 @@ +"use client"; + +import { TrendingDown, TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "An area chart with icons"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: TrendingDown, + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + icon: TrendingUp, + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Icons + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + } /> + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-interactive.tsx b/packages/ui-react/src/registry/default/block/chart-area-interactive.tsx new file mode 100644 index 00000000..86cf9167 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-interactive.tsx @@ -0,0 +1,265 @@ +"use client"; + +import * as React from "react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "#registry/default/ui/select"; + +export const description = "An interactive area chart"; + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + const [timeRange, setTimeRange] = React.useState("90d"); + + const filteredData = chartData.filter((item) => { + const date = new Date(item.date); + const now = new Date(); + let daysToSubtract = 90; + if (timeRange === "30d") { + daysToSubtract = 30; + } else if (timeRange === "7d") { + daysToSubtract = 7; + } + now.setDate(now.getDate() - daysToSubtract); + return date >= now; + }); + + return ( + + +
+ Area Chart - Interactive + + Showing total visitors for the last 3 months + +
+ + + + + + + + + + + + + + + + + { + const date = new Date(value); + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }); + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }); + }} + indicator="dot" + /> + } + /> + + + } /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-legend.tsx b/packages/ui-react/src/registry/default/block/chart-area-legend.tsx new file mode 100644 index 00000000..154a47a2 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-legend.tsx @@ -0,0 +1,110 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "An area chart with a legend"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Legend + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + } /> + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-linear.tsx b/packages/ui-react/src/registry/default/block/chart-area-linear.tsx new file mode 100644 index 00000000..6de001ca --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-linear.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A linear area chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Linear + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-stacked-expand.tsx b/packages/ui-react/src/registry/default/block/chart-area-stacked-expand.tsx new file mode 100644 index 00000000..ed24995e --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-stacked-expand.tsx @@ -0,0 +1,121 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked area chart with expand stacking"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80, other: 45 }, + { month: "February", desktop: 305, mobile: 200, other: 100 }, + { month: "March", desktop: 237, mobile: 120, other: 150 }, + { month: "April", desktop: 73, mobile: 190, other: 50 }, + { month: "May", desktop: 209, mobile: 130, other: 100 }, + { month: "June", desktop: 214, mobile: 140, other: 160 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-3))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Stacked Expanded + + Showing total visitors for the last 6months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-stacked.tsx b/packages/ui-react/src/registry/default/block/chart-area-stacked.tsx new file mode 100644 index 00000000..0eedf895 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-stacked.tsx @@ -0,0 +1,107 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked area chart"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Stacked + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-area-step.tsx b/packages/ui-react/src/registry/default/block/chart-area-step.tsx new file mode 100644 index 00000000..99fe2d12 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-area-step.tsx @@ -0,0 +1,95 @@ +"use client"; + +import { Activity, TrendingUp } from "lucide-react"; +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A step area chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: Activity, + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Area Chart - Step + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-active.tsx b/packages/ui-react/src/registry/default/block/chart-bar-active.tsx new file mode 100644 index 00000000..cc2d5b77 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-active.tsx @@ -0,0 +1,111 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A bar chart with an active bar"; + +const chartData = [ + { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Active + January - June 2024 + + + + + + + chartConfig[value as keyof typeof chartConfig]?.label + } + /> + } + /> + { + return ( + + ); + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-default.tsx b/packages/ui-react/src/registry/default/block/chart-bar-default.tsx new file mode 100644 index 00000000..da74af4b --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-default.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A bar chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-horizontal.tsx b/packages/ui-react/src/registry/default/block/chart-bar-horizontal.tsx new file mode 100644 index 00000000..52ac3a65 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-horizontal.tsx @@ -0,0 +1,83 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, XAxis, YAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A horizontal bar chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Horizontal + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-interactive.tsx b/packages/ui-react/src/registry/default/block/chart-bar-interactive.tsx new file mode 100644 index 00000000..ccd613d7 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-interactive.tsx @@ -0,0 +1,221 @@ +"use client"; + +import * as React from "react"; +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "An interactive bar chart"; + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +]; + +const chartConfig = { + views: { + label: "Page Views", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + const [activeChart, setActiveChart] = + React.useState("desktop"); + + const total = React.useMemo( + () => ({ + desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), + mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), + }), + [], + ); + + return ( + + +
+ Bar Chart - Interactive + + Showing total visitors for the last 3 months + +
+
+ {["desktop", "mobile"].map((key) => { + const chart = key as keyof typeof chartConfig; + return ( + + ); + })} +
+ + + + + + { + const date = new Date(value); + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }); + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }); + }} + /> + } + /> + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-label-custom.tsx b/packages/ui-react/src/registry/default/block/chart-bar-label-custom.tsx new file mode 100644 index 00000000..4fb76cee --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-label-custom.tsx @@ -0,0 +1,119 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { + Bar, + BarChart, + CartesianGrid, + LabelList, + XAxis, + YAxis, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A bar chart with a custom label"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + label: { + color: "hsl(var(--background))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Custom Label + January - June 2024 + + + + + + value.slice(0, 3)} + hide + /> + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-label.tsx b/packages/ui-react/src/registry/default/block/chart-bar-label.tsx new file mode 100644 index 00000000..6c8ddbbf --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-label.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A bar chart with a label"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Label + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-mixed.tsx b/packages/ui-react/src/registry/default/block/chart-bar-mixed.tsx new file mode 100644 index 00000000..3f9a5f52 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-mixed.tsx @@ -0,0 +1,103 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, XAxis, YAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A mixed bar chart"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Mixed + January - June 2024 + + + + + + chartConfig[value as keyof typeof chartConfig]?.label + } + /> + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-multiple.tsx b/packages/ui-react/src/registry/default/block/chart-bar-multiple.tsx new file mode 100644 index 00000000..1f7a8ff6 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-multiple.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A multiple bar chart"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-negative.tsx b/packages/ui-react/src/registry/default/block/chart-bar-negative.tsx new file mode 100644 index 00000000..e69f5a7f --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-negative.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A bar chart with negative values"; + +const chartData = [ + { month: "January", visitors: 186 }, + { month: "February", visitors: 205 }, + { month: "March", visitors: -207 }, + { month: "April", visitors: 173 }, + { month: "May", visitors: -209 }, + { month: "June", visitors: 214 }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Negative + January - June 2024 + + + + + + } + /> + + + {chartData.map((item) => ( + 0 + ? "hsl(var(--chart-1))" + : "hsl(var(--chart-2))" + } + /> + ))} + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-bar-stacked.tsx b/packages/ui-react/src/registry/default/block/chart-bar-stacked.tsx new file mode 100644 index 00000000..6d254a25 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-bar-stacked.tsx @@ -0,0 +1,90 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Bar Chart - Stacked + Legend + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + } /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-default.tsx b/packages/ui-react/src/registry/default/block/chart-line-default.tsx new file mode 100644 index 00000000..e90db173 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-default.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-dots-colors.tsx b/packages/ui-react/src/registry/default/block/chart-line-dots-colors.tsx new file mode 100644 index 00000000..3daccd61 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-dots-colors.tsx @@ -0,0 +1,118 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, Dot, Line, LineChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart with dots and colors"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + color: "hsl(var(--chart-2))", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Dots Colors + January - June 2024 + + + + + + + } + /> + { + return ( + + ); + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-dots-custom.tsx b/packages/ui-react/src/registry/default/block/chart-line-dots-custom.tsx new file mode 100644 index 00000000..76f322e1 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-dots-custom.tsx @@ -0,0 +1,105 @@ +"use client"; + +import { GitCommitVertical, TrendingUp } from "lucide-react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart with custom dots"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Custom Dots + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + { + const r = 24; + return ( + + ); + }} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-dots.tsx b/packages/ui-react/src/registry/default/block/chart-line-dots.tsx new file mode 100644 index 00000000..6affa565 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-dots.tsx @@ -0,0 +1,97 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart with dots"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Dots + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-interactive.tsx b/packages/ui-react/src/registry/default/block/chart-line-interactive.tsx new file mode 100644 index 00000000..293fd4ca --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-interactive.tsx @@ -0,0 +1,227 @@ +"use client"; + +import * as React from "react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "An interactive line chart"; + +const chartData = [ + { date: "2024-04-01", desktop: 222, mobile: 150 }, + { date: "2024-04-02", desktop: 97, mobile: 180 }, + { date: "2024-04-03", desktop: 167, mobile: 120 }, + { date: "2024-04-04", desktop: 242, mobile: 260 }, + { date: "2024-04-05", desktop: 373, mobile: 290 }, + { date: "2024-04-06", desktop: 301, mobile: 340 }, + { date: "2024-04-07", desktop: 245, mobile: 180 }, + { date: "2024-04-08", desktop: 409, mobile: 320 }, + { date: "2024-04-09", desktop: 59, mobile: 110 }, + { date: "2024-04-10", desktop: 261, mobile: 190 }, + { date: "2024-04-11", desktop: 327, mobile: 350 }, + { date: "2024-04-12", desktop: 292, mobile: 210 }, + { date: "2024-04-13", desktop: 342, mobile: 380 }, + { date: "2024-04-14", desktop: 137, mobile: 220 }, + { date: "2024-04-15", desktop: 120, mobile: 170 }, + { date: "2024-04-16", desktop: 138, mobile: 190 }, + { date: "2024-04-17", desktop: 446, mobile: 360 }, + { date: "2024-04-18", desktop: 364, mobile: 410 }, + { date: "2024-04-19", desktop: 243, mobile: 180 }, + { date: "2024-04-20", desktop: 89, mobile: 150 }, + { date: "2024-04-21", desktop: 137, mobile: 200 }, + { date: "2024-04-22", desktop: 224, mobile: 170 }, + { date: "2024-04-23", desktop: 138, mobile: 230 }, + { date: "2024-04-24", desktop: 387, mobile: 290 }, + { date: "2024-04-25", desktop: 215, mobile: 250 }, + { date: "2024-04-26", desktop: 75, mobile: 130 }, + { date: "2024-04-27", desktop: 383, mobile: 420 }, + { date: "2024-04-28", desktop: 122, mobile: 180 }, + { date: "2024-04-29", desktop: 315, mobile: 240 }, + { date: "2024-04-30", desktop: 454, mobile: 380 }, + { date: "2024-05-01", desktop: 165, mobile: 220 }, + { date: "2024-05-02", desktop: 293, mobile: 310 }, + { date: "2024-05-03", desktop: 247, mobile: 190 }, + { date: "2024-05-04", desktop: 385, mobile: 420 }, + { date: "2024-05-05", desktop: 481, mobile: 390 }, + { date: "2024-05-06", desktop: 498, mobile: 520 }, + { date: "2024-05-07", desktop: 388, mobile: 300 }, + { date: "2024-05-08", desktop: 149, mobile: 210 }, + { date: "2024-05-09", desktop: 227, mobile: 180 }, + { date: "2024-05-10", desktop: 293, mobile: 330 }, + { date: "2024-05-11", desktop: 335, mobile: 270 }, + { date: "2024-05-12", desktop: 197, mobile: 240 }, + { date: "2024-05-13", desktop: 197, mobile: 160 }, + { date: "2024-05-14", desktop: 448, mobile: 490 }, + { date: "2024-05-15", desktop: 473, mobile: 380 }, + { date: "2024-05-16", desktop: 338, mobile: 400 }, + { date: "2024-05-17", desktop: 499, mobile: 420 }, + { date: "2024-05-18", desktop: 315, mobile: 350 }, + { date: "2024-05-19", desktop: 235, mobile: 180 }, + { date: "2024-05-20", desktop: 177, mobile: 230 }, + { date: "2024-05-21", desktop: 82, mobile: 140 }, + { date: "2024-05-22", desktop: 81, mobile: 120 }, + { date: "2024-05-23", desktop: 252, mobile: 290 }, + { date: "2024-05-24", desktop: 294, mobile: 220 }, + { date: "2024-05-25", desktop: 201, mobile: 250 }, + { date: "2024-05-26", desktop: 213, mobile: 170 }, + { date: "2024-05-27", desktop: 420, mobile: 460 }, + { date: "2024-05-28", desktop: 233, mobile: 190 }, + { date: "2024-05-29", desktop: 78, mobile: 130 }, + { date: "2024-05-30", desktop: 340, mobile: 280 }, + { date: "2024-05-31", desktop: 178, mobile: 230 }, + { date: "2024-06-01", desktop: 178, mobile: 200 }, + { date: "2024-06-02", desktop: 470, mobile: 410 }, + { date: "2024-06-03", desktop: 103, mobile: 160 }, + { date: "2024-06-04", desktop: 439, mobile: 380 }, + { date: "2024-06-05", desktop: 88, mobile: 140 }, + { date: "2024-06-06", desktop: 294, mobile: 250 }, + { date: "2024-06-07", desktop: 323, mobile: 370 }, + { date: "2024-06-08", desktop: 385, mobile: 320 }, + { date: "2024-06-09", desktop: 438, mobile: 480 }, + { date: "2024-06-10", desktop: 155, mobile: 200 }, + { date: "2024-06-11", desktop: 92, mobile: 150 }, + { date: "2024-06-12", desktop: 492, mobile: 420 }, + { date: "2024-06-13", desktop: 81, mobile: 130 }, + { date: "2024-06-14", desktop: 426, mobile: 380 }, + { date: "2024-06-15", desktop: 307, mobile: 350 }, + { date: "2024-06-16", desktop: 371, mobile: 310 }, + { date: "2024-06-17", desktop: 475, mobile: 520 }, + { date: "2024-06-18", desktop: 107, mobile: 170 }, + { date: "2024-06-19", desktop: 341, mobile: 290 }, + { date: "2024-06-20", desktop: 408, mobile: 450 }, + { date: "2024-06-21", desktop: 169, mobile: 210 }, + { date: "2024-06-22", desktop: 317, mobile: 270 }, + { date: "2024-06-23", desktop: 480, mobile: 530 }, + { date: "2024-06-24", desktop: 132, mobile: 180 }, + { date: "2024-06-25", desktop: 141, mobile: 190 }, + { date: "2024-06-26", desktop: 434, mobile: 380 }, + { date: "2024-06-27", desktop: 448, mobile: 490 }, + { date: "2024-06-28", desktop: 149, mobile: 200 }, + { date: "2024-06-29", desktop: 103, mobile: 160 }, + { date: "2024-06-30", desktop: 446, mobile: 400 }, +]; + +const chartConfig = { + views: { + label: "Page Views", + }, + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + const [activeChart, setActiveChart] = + React.useState("desktop"); + + const total = React.useMemo( + () => ({ + desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), + mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), + }), + [], + ); + + return ( + + +
+ Line Chart - Interactive + + Showing total visitors for the last 3 months + +
+
+ {["desktop", "mobile"].map((key) => { + const chart = key as keyof typeof chartConfig; + return ( + + ); + })} +
+ + + + + + { + const date = new Date(value); + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + }); + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }); + }} + /> + } + /> + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-label-custom.tsx b/packages/ui-react/src/registry/default/block/chart-line-label-custom.tsx new file mode 100644 index 00000000..c3d5a75f --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-label-custom.tsx @@ -0,0 +1,123 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, LabelList, Line, LineChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart with a custom label"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + color: "hsl(var(--chart-2))", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Custom Label + January - June 2024 + + + + + + + } + /> + + + chartConfig[value]?.label + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-label.tsx b/packages/ui-react/src/registry/default/block/chart-line-label.tsx new file mode 100644 index 00000000..56b25b94 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-label.tsx @@ -0,0 +1,105 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart with a label"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Label + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-linear.tsx b/packages/ui-react/src/registry/default/block/chart-line-linear.tsx new file mode 100644 index 00000000..3d68f8cd --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-linear.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A linear line chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Linear + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-multiple.tsx b/packages/ui-react/src/registry/default/block/chart-line-multiple.tsx new file mode 100644 index 00000000..36313d55 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-multiple.tsx @@ -0,0 +1,100 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A multiple line chart"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-line-step.tsx b/packages/ui-react/src/registry/default/block/chart-line-step.tsx new file mode 100644 index 00000000..def5b81e --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-line-step.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A line chart with step"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Line Chart - Step + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-donut-active.tsx b/packages/ui-react/src/registry/default/block/chart-pie-donut-active.tsx new file mode 100644 index 00000000..2ef3783a --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-donut-active.tsx @@ -0,0 +1,102 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Label, Pie, PieChart, Sector } from "recharts"; +import { PieSectorDataItem } from "recharts/types/polar/Pie"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A donut chart with an active sector"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Donut Active + January - June 2024 + + + + + } + /> + ( + + )} + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-donut-text.tsx b/packages/ui-react/src/registry/default/block/chart-pie-donut-text.tsx new file mode 100644 index 00000000..46d743d5 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-donut-text.tsx @@ -0,0 +1,129 @@ +"use client"; + +import * as React from "react"; +import { TrendingUp } from "lucide-react"; +import { Label, Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A donut chart with text"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 190, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + const totalVisitors = React.useMemo(() => { + return chartData.reduce((acc, curr) => acc + curr.visitors, 0); + }, []); + + return ( + + + Pie Chart - Donut with Text + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-donut.tsx b/packages/ui-react/src/registry/default/block/chart-pie-donut.tsx new file mode 100644 index 00000000..dd5b4b83 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-donut.tsx @@ -0,0 +1,93 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A donut chart"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Donut + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-interactive.tsx b/packages/ui-react/src/registry/default/block/chart-pie-interactive.tsx new file mode 100644 index 00000000..b907c256 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-interactive.tsx @@ -0,0 +1,192 @@ +"use client"; + +import * as React from "react"; +import { Label, Pie, PieChart, Sector } from "recharts"; +import { PieSectorDataItem } from "recharts/types/polar/Pie"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartStyle, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "#registry/default/ui/select"; + +export const description = "An interactive pie chart"; + +const desktopData = [ + { month: "january", desktop: 186, fill: "var(--color-january)" }, + { month: "february", desktop: 305, fill: "var(--color-february)" }, + { month: "march", desktop: 237, fill: "var(--color-march)" }, + { month: "april", desktop: 173, fill: "var(--color-april)" }, + { month: "may", desktop: 209, fill: "var(--color-may)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + }, + mobile: { + label: "Mobile", + }, + january: { + label: "January", + color: "hsl(var(--chart-1))", + }, + february: { + label: "February", + color: "hsl(var(--chart-2))", + }, + march: { + label: "March", + color: "hsl(var(--chart-3))", + }, + april: { + label: "April", + color: "hsl(var(--chart-4))", + }, + may: { + label: "May", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + const id = "pie-interactive"; + const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month); + + const activeIndex = React.useMemo( + () => desktopData.findIndex((item) => item.month === activeMonth), + [activeMonth], + ); + const months = React.useMemo(() => desktopData.map((item) => item.month), []); + + return ( + + + +
+ Pie Chart - Interactive + January - June 2024 +
+ + + + + + } + /> + ( + + + + + )} + > + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-label-custom.tsx b/packages/ui-react/src/registry/default/block/chart-pie-label-custom.tsx new file mode 100644 index 00000000..fdd0d95d --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-label-custom.tsx @@ -0,0 +1,110 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A pie chart with a custom label"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Custom Label + January - June 2024 + + + + + } + /> + { + return ( + + {`${ + chartConfig[payload.browser as keyof typeof chartConfig] + ?.label + } (${payload.visitors})`} + + ); + }} + nameKey="browser" + /> + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-label-list.tsx b/packages/ui-react/src/registry/default/block/chart-pie-label-list.tsx new file mode 100644 index 00000000..75aee840 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-label-list.tsx @@ -0,0 +1,97 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { LabelList, Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A pie chart with a label list"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Label List + January - June 2024 + + + + + } + /> + + + chartConfig[value]?.label + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-label.tsx b/packages/ui-react/src/registry/default/block/chart-pie-label.tsx new file mode 100644 index 00000000..af95e3da --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-label.tsx @@ -0,0 +1,85 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A pie chart with a label"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Label + January - June 2024 + + + + + } /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-legend.tsx b/packages/ui-react/src/registry/default/block/chart-pie-legend.tsx new file mode 100644 index 00000000..7d7e1ad0 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-legend.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, +} from "#registry/default/ui/chart"; + +export const description = "A pie chart with a legend"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Legend + January - June 2024 + + + + + + } + className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-separator-none.tsx b/packages/ui-react/src/registry/default/block/chart-pie-separator-none.tsx new file mode 100644 index 00000000..ddfcf59d --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-separator-none.tsx @@ -0,0 +1,93 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A pie chart with no separator"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Separator None + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-simple.tsx b/packages/ui-react/src/registry/default/block/chart-pie-simple.tsx new file mode 100644 index 00000000..a810ca1a --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-simple.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A simple pie chart"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-pie-stacked.tsx b/packages/ui-react/src/registry/default/block/chart-pie-stacked.tsx new file mode 100644 index 00000000..71b41b32 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-pie-stacked.tsx @@ -0,0 +1,119 @@ +"use client"; + +import * as React from "react"; +import { TrendingUp } from "lucide-react"; +import { Label, Pie, PieChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A pie chart with stacked sections"; + +const desktopData = [ + { month: "january", desktop: 186, fill: "var(--color-january)" }, + { month: "february", desktop: 305, fill: "var(--color-february)" }, + { month: "march", desktop: 237, fill: "var(--color-march)" }, + { month: "april", desktop: 173, fill: "var(--color-april)" }, + { month: "may", desktop: 209, fill: "var(--color-may)" }, +]; + +const mobileData = [ + { month: "january", mobile: 80, fill: "var(--color-january)" }, + { month: "february", mobile: 200, fill: "var(--color-february)" }, + { month: "march", mobile: 120, fill: "var(--color-march)" }, + { month: "april", mobile: 190, fill: "var(--color-april)" }, + { month: "may", mobile: 130, fill: "var(--color-may)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + desktop: { + label: "Desktop", + }, + mobile: { + label: "Mobile", + }, + january: { + label: "January", + color: "hsl(var(--chart-1))", + }, + february: { + label: "February", + color: "hsl(var(--chart-2))", + }, + march: { + label: "March", + color: "hsl(var(--chart-3))", + }, + april: { + label: "April", + color: "hsl(var(--chart-4))", + }, + may: { + label: "May", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Pie Chart - Stacked + January - June 2024 + + + + + { + return chartConfig[ + payload?.[0].dataKey as keyof typeof chartConfig + ].label; + }} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-default.tsx b/packages/ui-react/src/registry/default/block/chart-radar-default.tsx new file mode 100644 index 00000000..96fb61ed --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-default.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-dots.tsx b/packages/ui-react/src/registry/default/block/chart-radar-dots.tsx new file mode 100644 index 00000000..fc701330 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-dots.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with dots"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Dots + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-grid-circle-fill.tsx b/packages/ui-react/src/registry/default/block/chart-radar-grid-circle-fill.tsx new file mode 100644 index 00000000..aa404c52 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-grid-circle-fill.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a grid and circle fill"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 285 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 264 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Grid Circle Filled + + Showing total visitors for the last 6 months + + + + + + } /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-grid-circle-no-lines.tsx b/packages/ui-react/src/registry/default/block/chart-radar-grid-circle-no-lines.tsx new file mode 100644 index 00000000..34af166e --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-grid-circle-no-lines.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a grid and circle fill"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Grid Circle - No lines + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-grid-circle.tsx b/packages/ui-react/src/registry/default/block/chart-radar-grid-circle.tsx new file mode 100644 index 00000000..1750c63b --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-grid-circle.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a grid and circle"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Grid Circle + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-grid-custom.tsx b/packages/ui-react/src/registry/default/block/chart-radar-grid-custom.tsx new file mode 100644 index 00000000..d6b2f1a8 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-grid-custom.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a custom grid"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Grid Custom + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-grid-fill.tsx b/packages/ui-react/src/registry/default/block/chart-radar-grid-fill.tsx new file mode 100644 index 00000000..7779e877 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-grid-fill.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a grid filled"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 285 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 203 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 264 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Grid Filled + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-grid-none.tsx b/packages/ui-react/src/registry/default/block/chart-radar-grid-none.tsx new file mode 100644 index 00000000..3ce38aa0 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-grid-none.tsx @@ -0,0 +1,81 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with no grid"; + +const chartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 273 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Grid None + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-icons.tsx b/packages/ui-react/src/registry/default/block/chart-radar-icons.tsx new file mode 100644 index 00000000..b182d2a4 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-icons.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with icons"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + icon: ArrowDownFromLine, + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + icon: ArrowUpFromLine, + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Icons + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + } /> + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-label-custom.tsx b/packages/ui-react/src/registry/default/block/chart-radar-label-custom.tsx new file mode 100644 index 00000000..bb593ee9 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-label-custom.tsx @@ -0,0 +1,120 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a custom label"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Custom Label + + Showing total visitors for the last 6 months + + + + + + } + /> + { + const data = chartData[index]; + + return ( + + {data.desktop} + / + {data.mobile} + + {data.month} + + + ); + }} + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-legend.tsx b/packages/ui-react/src/registry/default/block/chart-radar-legend.tsx new file mode 100644 index 00000000..29ed7edb --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-legend.tsx @@ -0,0 +1,92 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartLegend, + ChartLegendContent, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a legend"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Legend + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + } /> + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-lines-only.tsx b/packages/ui-react/src/registry/default/block/chart-radar-lines-only.tsx new file mode 100644 index 00000000..9c7c7ce8 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-lines-only.tsx @@ -0,0 +1,91 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with lines only"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 160 }, + { month: "February", desktop: 185, mobile: 170 }, + { month: "March", desktop: 207, mobile: 180 }, + { month: "April", desktop: 173, mobile: 160 }, + { month: "May", desktop: 160, mobile: 190 }, + { month: "June", desktop: 174, mobile: 204 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Lines Only + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-multiple.tsx b/packages/ui-react/src/registry/default/block/chart-radar-multiple.tsx new file mode 100644 index 00000000..899f8f52 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-multiple.tsx @@ -0,0 +1,83 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with multiple data"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Multiple + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radar-radius.tsx b/packages/ui-react/src/registry/default/block/chart-radar-radius.tsx new file mode 100644 index 00000000..2d3098b5 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radar-radius.tsx @@ -0,0 +1,96 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { + PolarAngleAxis, + PolarGrid, + PolarRadiusAxis, + Radar, + RadarChart, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radar chart with a radius axis"; + +const chartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radar Chart - Radius Axis + + Showing total visitors for the last 6 months + + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radial-grid.tsx b/packages/ui-react/src/registry/default/block/chart-radial-grid.tsx new file mode 100644 index 00000000..f62a593d --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radial-grid.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { PolarGrid, RadialBar, RadialBarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radial chart with a grid"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radial Chart - Grid + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radial-label.tsx b/packages/ui-react/src/registry/default/block/chart-radial-label.tsx new file mode 100644 index 00000000..a06e33d0 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radial-label.tsx @@ -0,0 +1,101 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { LabelList, RadialBar, RadialBarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radial chart with a label"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radial Chart - Label + January - June 2024 + + + + + } + /> + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radial-shape.tsx b/packages/ui-react/src/registry/default/block/chart-radial-shape.tsx new file mode 100644 index 00000000..b0933704 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radial-shape.tsx @@ -0,0 +1,108 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { ChartConfig, ChartContainer } from "#registry/default/ui/chart"; + +export const description = "A radial chart with a custom shape"; + +const chartData = [ + { browser: "safari", visitors: 1260, fill: "var(--color-safari)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radial Chart - Shape + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radial-simple.tsx b/packages/ui-react/src/registry/default/block/chart-radial-simple.tsx new file mode 100644 index 00000000..aff15f3f --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radial-simple.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { RadialBar, RadialBarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radial chart"; + +const chartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 90, fill: "var(--color-other)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "hsl(var(--chart-1))", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, + firefox: { + label: "Firefox", + color: "hsl(var(--chart-3))", + }, + edge: { + label: "Edge", + color: "hsl(var(--chart-4))", + }, + other: { + label: "Other", + color: "hsl(var(--chart-5))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radial Chart + January - June 2024 + + + + + } + /> + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radial-stacked.tsx b/packages/ui-react/src/registry/default/block/chart-radial-stacked.tsx new file mode 100644 index 00000000..4136fa87 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radial-stacked.tsx @@ -0,0 +1,113 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A radial chart with stacked sections"; + +const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]; + +const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + const totalVisitors = chartData[0].desktop + chartData[0].mobile; + + return ( + + + Radial Chart - Stacked + January - June 2024 + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-radial-text.tsx b/packages/ui-react/src/registry/default/block/chart-radial-text.tsx new file mode 100644 index 00000000..1f3aa062 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-radial-text.tsx @@ -0,0 +1,109 @@ +"use client"; + +import { TrendingUp } from "lucide-react"; +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { ChartConfig, ChartContainer } from "#registry/default/ui/chart"; + +export const description = "A radial chart with text"; + +const chartData = [ + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, +]; + +const chartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Radial Chart - Text + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-advanced.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-advanced.tsx new file mode 100644 index 00000000..8ba483ef --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-advanced.tsx @@ -0,0 +1,123 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Advanced + + Tooltip with custom formatter and total. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + ( + <> +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+ {/* Add this after the last item */} + {index === 1 && ( +
+ Total +
+ {item.payload.running + item.payload.swimming} + + kcal + +
+
+ )} + + )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-default.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-default.tsx new file mode 100644 index 00000000..a2b684c4 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-default.tsx @@ -0,0 +1,86 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Default + + Default tooltip with ChartTooltipContent. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-formatter.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-formatter.tsx new file mode 100644 index 00000000..a112b7ca --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-formatter.tsx @@ -0,0 +1,100 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Formatter + Tooltip with custom formatter . + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + ( +
+ {chartConfig[name as keyof typeof chartConfig]?.label || + name} +
+ {value} + + kcal + +
+
+ )} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-icons.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-icons.tsx new file mode 100644 index 00000000..96adafa2 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-icons.tsx @@ -0,0 +1,87 @@ +"use client"; + +import { Footprints, Waves } from "lucide-react"; +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + icon: Footprints, + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + icon: Waves, + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Icons + Tooltip with icons. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-indicator-line.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-indicator-line.tsx new file mode 100644 index 00000000..71608871 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-indicator-line.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Line Indicator + Tooltip with line indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-indicator-none.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-indicator-none.tsx new file mode 100644 index 00000000..600a4065 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-indicator-none.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - No Indicator + Tooltip with no indicator. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-label-custom.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-label-custom.tsx new file mode 100644 index 00000000..1c21b2a2 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-label-custom.tsx @@ -0,0 +1,91 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + activities: { + label: "Activities", + }, + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Custom label + + Tooltip with custom label from chartConfig. + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-label-formatter.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-label-formatter.tsx new file mode 100644 index 00000000..cbb62b28 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-label-formatter.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - Label Formatter + Tooltip with label formatter. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }); + }} + /> + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/chart-tooltip-label-none.tsx b/packages/ui-react/src/registry/default/block/chart-tooltip-label-none.tsx new file mode 100644 index 00000000..bc6b782a --- /dev/null +++ b/packages/ui-react/src/registry/default/block/chart-tooltip-label-none.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { Bar, BarChart, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export const description = "A stacked bar chart with a legend"; + +const chartData = [ + { date: "2024-07-15", running: 450, swimming: 300 }, + { date: "2024-07-16", running: 380, swimming: 420 }, + { date: "2024-07-17", running: 520, swimming: 120 }, + { date: "2024-07-18", running: 140, swimming: 550 }, + { date: "2024-07-19", running: 600, swimming: 350 }, + { date: "2024-07-20", running: 480, swimming: 400 }, +]; + +const chartConfig = { + running: { + label: "Running", + color: "hsl(var(--chart-1))", + }, + swimming: { + label: "Swimming", + color: "hsl(var(--chart-2))", + }, +} satisfies ChartConfig; + +export default function Component() { + return ( + + + Tooltip - No Label + Tooltip with no label. + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + + } + cursor={false} + defaultIndex={1} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-0.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-0.tsx new file mode 100644 index 00000000..abdbc20a --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-0.tsx @@ -0,0 +1,154 @@ +"use client"; + +import { + Bar, + BarChart, + Label, + Rectangle, + ReferenceLine, + XAxis, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + + Today + + 12,584{" "} + + steps + + + + + + + } + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }); + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305 steps. + + + You need 12,584{" "} + more steps to reach your goal. + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-1.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-1.tsx new file mode 100644 index 00000000..42da077e --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-1.tsx @@ -0,0 +1,140 @@ +"use client"; + +import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }); + }} + /> + } + cursor={false} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-2.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-2.tsx new file mode 100644 index 00000000..c9de16a0 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-2.tsx @@ -0,0 +1,129 @@ +"use client"; + +import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { ChartContainer } from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-3.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-3.tsx new file mode 100644 index 00000000..70ac6920 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-3.tsx @@ -0,0 +1,99 @@ +"use client"; + +import { Bar, BarChart, Rectangle, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { ChartContainer } from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 miles per + day. + + + +
+ 12.5 + + miles/day + +
+ + + } + /> + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-4.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-4.tsx new file mode 100644 index 00000000..7785d13e --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-4.tsx @@ -0,0 +1,117 @@ +"use client"; + +import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts"; + +import { Card, CardContent, CardFooter } from "#registry/default/ui/card"; +import { ChartContainer } from "#registry/default/ui/chart"; +import { Separator } from "#registry/default/ui/separator"; + +export default function Component() { + return ( + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-5.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-5.tsx new file mode 100644 index 00000000..3a70bc85 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-5.tsx @@ -0,0 +1,99 @@ +"use client"; + +import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"; + +import { Card, CardContent } from "#registry/default/ui/card"; +import { ChartContainer } from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-6.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-6.tsx new file mode 100644 index 00000000..5f93f967 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-6.tsx @@ -0,0 +1,98 @@ +"use client"; + +import { Bar, BarChart, Rectangle, XAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { ChartContainer } from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + } + /> + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01-chunk-7.tsx b/packages/ui-react/src/registry/default/block/charts-01-chunk-7.tsx new file mode 100644 index 00000000..4789c32e --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01-chunk-7.tsx @@ -0,0 +1,125 @@ +"use client"; + +import { Area, AreaChart, XAxis, YAxis } from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; + +export default function Component() { + return ( + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/charts-01.tsx b/packages/ui-react/src/registry/default/block/charts-01.tsx new file mode 100644 index 00000000..0bd4833f --- /dev/null +++ b/packages/ui-react/src/registry/default/block/charts-01.tsx @@ -0,0 +1,895 @@ +"use client"; + +import { + Area, + AreaChart, + Bar, + BarChart, + CartesianGrid, + Label, + LabelList, + Line, + LineChart, + PolarAngleAxis, + RadialBar, + RadialBarChart, + Rectangle, + ReferenceLine, + XAxis, + YAxis, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "#registry/default/ui/chart"; +import { Separator } from "#registry/default/ui/separator"; + +export const description = "A collection of health charts."; + +export const iframeHeight = "900px"; + +export const containerClassName = "min-h-screen py-12"; + +export default function Charts() { + return ( +
+
+ + + Today + + 12,584{" "} + + steps + + + + + + + } + /> + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }); + }} + /> + } + cursor={false} + /> + + + + + + + + Over the past 7 days, you have walked{" "} + 53,305 steps. + + + You need{" "} + 12,584 more + steps to reach your goal. + + + + + +
+ Resting HR + + 62 + + bpm + + +
+
+ Variability + + 35 + + ms + + +
+ + + + + + + { + return new Date(value).toLocaleDateString("en-US", { + weekday: "short", + }); + }} + /> + + { + return new Date(value).toLocaleDateString("en-US", { + day: "numeric", + month: "long", + year: "numeric", + }); + }} + /> + } + cursor={false} + /> + + + + +
+
+ + + Progress + + You're average more steps a day this year than last year. + + + +
+
+ 12,453 + + steps/day + +
+ + + + + + + + + +
+
+
+ 10,103 + + steps/day + +
+ + + + + + + + + +
+ + + + + Walking Distance + + Over the last 7 days, your distance walked and run was 12.5 miles + per day. + + + +
+ 12.5 + + miles/day + +
+ + + } + /> + + + + + + + + + + + + + + + + + + +
+
+
Move
+
+ 562 + + kcal + +
+
+ +
+
Exercise
+
+ 73 + + min + +
+
+ +
+
Stand
+
+ 14 + + hr + +
+
+
+ + +
+
+ + +
+
+
Move
+
+ 562/600 + + kcal + +
+
+
+
Exercise
+
+ 73/120 + + min + +
+
+
+
Stand
+
+ 8/12 + + hr + +
+
+
+ + + + + + + + + + + Active Energy + + You're burning an average of 754 calories per day. Good job! + + + +
+ 1,254 + + kcal/day + +
+ + + } + /> + + + + + + + + Time in Bed + + 8 + + hr + + 35 + + min + + + + + + + + + + + + + + + + } + formatter={(value) => ( +
+ Time in bed +
+ {value} + + hr + +
+
+ )} + /> + + + + +
+
+ ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01-chunk-0.tsx b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-0.tsx new file mode 100644 index 00000000..9bd7a516 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-0.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { DollarSign } from "lucide-react"; + +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; + +export default function Component() { + return ( + + + Total Revenue + + + +
$45,231.89
+

+20.1% from last month

+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01-chunk-1.tsx b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-1.tsx new file mode 100644 index 00000000..4277709a --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-1.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { Users } from "lucide-react"; + +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; + +export default function Component() { + return ( + + + Subscriptions + + + +
+2350
+

+180.1% from last month

+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01-chunk-2.tsx b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-2.tsx new file mode 100644 index 00000000..5aaf822c --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-2.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { CreditCard } from "lucide-react"; + +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; + +export default function Component() { + return ( + + + Sales + + + +
+12,234
+

+19% from last month

+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01-chunk-3.tsx b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-3.tsx new file mode 100644 index 00000000..78a12e75 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-3.tsx @@ -0,0 +1,25 @@ +"use client"; + +import { Activity } from "lucide-react"; + +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; + +export default function Component() { + return ( + + + Active Now + + + +
+573
+

+201 since last hour

+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01-chunk-4.tsx b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-4.tsx new file mode 100644 index 00000000..45048170 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-4.tsx @@ -0,0 +1,150 @@ +"use client"; + +import Link from "next/link"; +import { ArrowUpRight } from "lucide-react"; + +import { Badge } from "#registry/default/ui/badge"; +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "#registry/default/ui/table"; + +export default function Component() { + return ( + + +
+ Transactions + + Recent transactions from your store. + +
+ + + + + + + Customer + Type + Status + Date + Amount + + + + + +
Liam Johnson
+
+ liam@example.com +
+ + Sale + + + Approved + + + + 2023-06-23 + + $250.00 + + + +
Olivia Smith
+
+ olivia@example.com +
+ + Refund + + + Declined + + + + 2023-06-24 + + $150.00 + + + +
Noah Williams
+
+ noah@example.com +
+ + + Subscription + + + + Approved + + + + 2023-06-25 + + $350.00 + + + +
Emma Brown
+
+ emma@example.com +
+ + Sale + + + Approved + + + + 2023-06-26 + + $450.00 + + + +
Liam Johnson
+
+ liam@example.com +
+ + Sale + + + Approved + + + + 2023-06-27 + + $550.00 + + +
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01-chunk-5.tsx b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-5.tsx new file mode 100644 index 00000000..9174d8b9 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01-chunk-5.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "#registry/default/ui/avatar"; +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; + +export default function Component() { + return ( + + + Recent Sales + + +
+ + + OM + +
+

Olivia Martin

+

+ olivia.martin@email.com +

+
+
+$1,999.00
+
+
+ + + JL + +
+

Jackson Lee

+

+ jackson.lee@email.com +

+
+
+$39.00
+
+
+ + + IN + +
+

Isabella Nguyen

+

+ isabella.nguyen@email.com +

+
+
+$299.00
+
+
+ + + WK + +
+

William Kim

+

will@email.com

+
+
+$99.00
+
+
+ + + SD + +
+

Sofia Davis

+

+ sofia.davis@email.com +

+
+
+$39.00
+
+ + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-01.tsx b/packages/ui-react/src/registry/default/block/dashboard-01.tsx new file mode 100644 index 00000000..e852d6d6 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-01.tsx @@ -0,0 +1,458 @@ +import Link from "next/link"; +import { + Activity, + ArrowUpRight, + CircleUser, + CreditCard, + DollarSign, + Menu, + Package2, + Search, + Users, +} from "lucide-react"; + +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "#registry/default/ui/avatar"; +import { Badge } from "#registry/default/ui/badge"; +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "#registry/default/ui/dropdown-menu"; +import { Input } from "#registry/default/ui/input"; +import { Sheet, SheetContent, SheetTrigger } from "#registry/default/ui/sheet"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "#registry/default/ui/table"; + +export const description = + "An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image."; + +export const iframeHeight = "825px"; + +export const containerClassName = "w-full h-full"; + +export default function Dashboard() { + return ( +
+
+ + + + + + + + + +
+
+
+ + +
+
+ + + + + + My Account + + Settings + Support + + Logout + + +
+
+
+
+ + + + Total Revenue + + + + +
$45,231.89
+

+ +20.1% from last month +

+ + + + + + Subscriptions + + + + +
+2350
+

+ +180.1% from last month +

+ + + + + Sales + + + +
+12,234
+

+ +19% from last month +

+ + + + + Active Now + + + +
+573
+

+ +201 since last hour +

+ + +
+
+ + +
+ Transactions + + Recent transactions from your store. + +
+ + + + + + + Customer + + Type + + + Status + + + Date + + Amount + + + + + +
Liam Johnson
+
+ liam@example.com +
+ + + Sale + + + + Approved + + + + 2023-06-23 + + $250.00 + + + +
Olivia Smith
+
+ olivia@example.com +
+ + + Refund + + + + Declined + + + + 2023-06-24 + + $150.00 + + + +
Noah Williams
+
+ noah@example.com +
+ + + Subscription + + + + Approved + + + + 2023-06-25 + + $350.00 + + + +
Emma Brown
+
+ emma@example.com +
+ + + Sale + + + + Approved + + + + 2023-06-26 + + $450.00 + + + +
Liam Johnson
+
+ liam@example.com +
+ + + Sale + + + + Approved + + + + 2023-06-27 + + $550.00 + + +
+ + + + + Recent Sales + + +
+ + + OM + +
+

+ Olivia Martin +

+

+ olivia.martin@email.com +

+
+
+$1,999.00
+
+
+ + + JL + +
+

+ Jackson Lee +

+

+ jackson.lee@email.com +

+
+
+$39.00
+
+
+ + + IN + +
+

+ Isabella Nguyen +

+

+ isabella.nguyen@email.com +

+
+
+$299.00
+
+
+ + + WK + +
+

+ William Kim +

+

+ will@email.com +

+
+
+$99.00
+
+
+ + + SD + +
+

+ Sofia Davis +

+

+ sofia.davis@email.com +

+
+
+$39.00
+
+ + +
+
+
+ ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-02-chunk-0.tsx b/packages/ui-react/src/registry/default/block/dashboard-02-chunk-0.tsx new file mode 100644 index 00000000..c824bc19 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-02-chunk-0.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; + +export default function Component() { + return ( + + + Upgrade to Pro + + Unlock all features and get unlimited access to our support team. + + + + + + + ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-02-chunk-1.tsx b/packages/ui-react/src/registry/default/block/dashboard-02-chunk-1.tsx new file mode 100644 index 00000000..64ba2f9c --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-02-chunk-1.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { Button } from "#registry/default/ui/button"; + +export default function Component() { + return ( +
+
+

+ You have no products +

+

+ You can start selling as soon as you add a product. +

+ +
+
+ ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-02.tsx b/packages/ui-react/src/registry/default/block/dashboard-02.tsx new file mode 100644 index 00000000..b4e1ef70 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-02.tsx @@ -0,0 +1,247 @@ +import Link from "next/link"; +import { + Bell, + CircleUser, + Home, + LineChart, + Menu, + Package, + Package2, + Search, + ShoppingCart, + Users, +} from "lucide-react"; + +import { Badge } from "#registry/default/ui/badge"; +import { Button } from "#registry/default/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "#registry/default/ui/card"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "#registry/default/ui/dropdown-menu"; +import { Input } from "#registry/default/ui/input"; +import { Sheet, SheetContent, SheetTrigger } from "#registry/default/ui/sheet"; + +export const description = + "A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action."; + +export const iframeHeight = "800px"; + +export const containerClassName = "w-full h-full"; + +export default function Dashboard() { + return ( +
+
+
+
+ + + Acme Inc + + +
+
+ +
+
+ + + Upgrade to Pro + + Unlock all features and get unlimited access to our support + team. + + + + + + +
+
+
+
+
+ + + + + + +
+ + + Upgrade to Pro + + Unlock all features and get unlimited access to our + support team. + + + + + + +
+ + +
+
+
+ + +
+
+
+ + + + + + My Account + + Settings + Support + + Logout + + +
+
+
+

Inventory

+
+
+
+

+ You have no products +

+

+ You can start selling as soon as you add a product. +

+ +
+
+
+
+
+ ); +} diff --git a/packages/ui-react/src/registry/default/block/dashboard-03-chunk-0.tsx b/packages/ui-react/src/registry/default/block/dashboard-03-chunk-0.tsx new file mode 100644 index 00000000..0e326120 --- /dev/null +++ b/packages/ui-react/src/registry/default/block/dashboard-03-chunk-0.tsx @@ -0,0 +1,128 @@ +"use client"; + +import { Bird, Rabbit, Turtle } from "lucide-react"; + +import { Input } from "#registry/default/ui/input"; +import { Label } from "#registry/default/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "#registry/default/ui/select"; +import { Textarea } from "#registry/default/ui/textarea"; + +export default function Component() { + return ( +
+
+
+ Settings +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ Messages +
+ + +
+
+ +