@nexa-ui-kit/theme-default 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +50 -0
  2. package/components/accordion.css +29 -0
  3. package/components/alert-dialog.css +33 -0
  4. package/components/alert.css +33 -0
  5. package/components/aspect-ratio.css +15 -0
  6. package/components/avatar-group.css +30 -0
  7. package/components/avatar.css +25 -0
  8. package/components/badge.css +21 -0
  9. package/components/breadcrumb.css +35 -0
  10. package/components/button.css +47 -0
  11. package/components/calendar.css +124 -0
  12. package/components/card.css +25 -0
  13. package/components/carousel.css +79 -0
  14. package/components/chart.css +124 -0
  15. package/components/checkbox.css +13 -0
  16. package/components/collapsible.css +5 -0
  17. package/components/combobox.css +13 -0
  18. package/components/command.css +49 -0
  19. package/components/context-menu.css +87 -0
  20. package/components/date-picker.css +13 -0
  21. package/components/dialog.css +29 -0
  22. package/components/dropdown-menu.css +98 -0
  23. package/components/empty-state.css +21 -0
  24. package/components/field.css +145 -0
  25. package/components/form.css +26 -0
  26. package/components/hover-card.css +5 -0
  27. package/components/index.css +78 -0
  28. package/components/input-group.css +91 -0
  29. package/components/input-otp.css +25 -0
  30. package/components/input.css +5 -0
  31. package/components/item.css +75 -0
  32. package/components/kbd.css +9 -0
  33. package/components/label.css +5 -0
  34. package/components/menubar.css +100 -0
  35. package/components/multi-select.css +37 -0
  36. package/components/navigation-menu.css +37 -0
  37. package/components/number-input.css +26 -0
  38. package/components/pagination.css +29 -0
  39. package/components/popover.css +30 -0
  40. package/components/progress.css +28 -0
  41. package/components/radio-group.css +17 -0
  42. package/components/scroll-area.css +25 -0
  43. package/components/scrollytelling.css +418 -0
  44. package/components/select.css +74 -0
  45. package/components/separator.css +5 -0
  46. package/components/sheet.css +45 -0
  47. package/components/sidebar.css +65 -0
  48. package/components/skeleton.css +5 -0
  49. package/components/slider.css +49 -0
  50. package/components/sonner.css +103 -0
  51. package/components/spinner.css +5 -0
  52. package/components/stat-card.css +33 -0
  53. package/components/stepper.css +137 -0
  54. package/components/switch.css +9 -0
  55. package/components/table.css +42 -0
  56. package/components/tabs.css +37 -0
  57. package/components/textarea.css +17 -0
  58. package/components/toast.css +45 -0
  59. package/components/toggle-group.css +25 -0
  60. package/components/toggle.css +21 -0
  61. package/components/toolbar.css +25 -0
  62. package/components/tooltip.css +9 -0
  63. package/package.json +85 -0
  64. package/tailwind.config.mjs +83 -0
  65. package/tokens/colors.css +93 -0
  66. package/tokens/index.css +18 -0
  67. package/tokens/spacing.css +36 -0
  68. package/tokens/typography.css +38 -0
package/README.md ADDED
@@ -0,0 +1,50 @@
1
+ # @nexa-ui-kit/theme-default
2
+
3
+ Default theme for Nexa UI components with CSS variables and Tailwind CSS configuration.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @nexa-ui-kit/theme-default
9
+ # or
10
+ bun add @nexa-ui-kit/theme-default
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### Import CSS Tokens
16
+
17
+ ```css
18
+ /* In your global CSS */
19
+ @import '@nexa-ui-kit/theme-default';
20
+ ```
21
+
22
+ ### Extend Tailwind Config
23
+
24
+ ```javascript
25
+ // tailwind.config.js
26
+ import nexaTheme from '@nexa-ui-kit/theme-default/tailwind'
27
+
28
+ export default {
29
+ presets: [nexaTheme],
30
+ // your config...
31
+ }
32
+ ```
33
+
34
+ ### Dark Mode
35
+
36
+ Add `.dark` class to `<html>` or `<body>` for dark mode:
37
+
38
+ ```html
39
+ <html class="dark">
40
+ ```
41
+
42
+ ## Tokens
43
+
44
+ - **Colors**: Primary, secondary, muted, accent, destructive
45
+ - **Typography**: Font families, sizes, weights
46
+ - **Spacing**: Border radius, layout tokens
47
+
48
+ ## License
49
+
50
+ MIT
package/components/accordion.css ADDED
@@ -0,0 +1,29 @@
1
+ /* Accordion Component Styles */
2
+
3
+ [data-slot="accordion-item"] {
4
+ @apply border-b;
5
+ }
6
+
7
+ [data-slot="accordion-trigger"] {
8
+ @apply flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left cursor-pointer;
9
+ }
10
+
11
+ [data-slot="accordion-trigger"][data-disabled] {
12
+ @apply opacity-50 cursor-not-allowed;
13
+ }
14
+
15
+ [data-slot="accordion-trigger"][data-state="open"] > svg {
16
+ @apply rotate-180;
17
+ }
18
+
19
+ [data-slot="accordion-trigger"] > svg {
20
+ @apply h-4 w-4 shrink-0 transition-transform duration-200;
21
+ }
22
+
23
+ [data-slot="accordion-content"] {
24
+ @apply overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down;
25
+ }
26
+
27
+ [data-slot="accordion-content"] > div {
28
+ @apply pb-4 pt-0;
29
+ }
package/components/alert-dialog.css ADDED
@@ -0,0 +1,33 @@
1
+ /* Alert Dialog Component Styles */
2
+
3
+ [data-slot="alert-dialog-overlay"] {
4
+ @apply fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
5
+ }
6
+
7
+ [data-slot="alert-dialog-content"] {
8
+ @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg;
9
+ }
10
+
11
+ [data-slot="alert-dialog-header"] {
12
+ @apply flex flex-col space-y-2 text-center sm:text-left;
13
+ }
14
+
15
+ [data-slot="alert-dialog-footer"] {
16
+ @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
17
+ }
18
+
19
+ [data-slot="alert-dialog-title"] {
20
+ @apply text-lg font-semibold;
21
+ }
22
+
23
+ [data-slot="alert-dialog-description"] {
24
+ @apply text-sm text-muted-foreground;
25
+ }
26
+
27
+ [data-slot="alert-dialog-action"] {
28
+ @apply inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
29
+ }
30
+
31
+ [data-slot="alert-dialog-cancel"] {
32
+ @apply inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-semibold ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:mt-0;
33
+ }
package/components/alert.css ADDED
@@ -0,0 +1,33 @@
1
+ /* Alert Component Styles */
2
+
3
+ [data-slot="alert"] {
4
+ @apply relative w-full rounded-lg border p-4;
5
+ }
6
+
7
+ [data-slot="alert"][data-variant="default"] {
8
+ @apply bg-background text-foreground;
9
+ }
10
+
11
+ [data-slot="alert"][data-variant="destructive"] {
12
+ @apply border-destructive/50 text-destructive dark:border-destructive;
13
+ }
14
+
15
+ [data-slot="alert"][data-variant="warning"] {
16
+ @apply border-yellow-500/50 text-yellow-600 dark:text-yellow-500;
17
+ }
18
+
19
+ [data-slot="alert"][data-variant="info"] {
20
+ @apply border-blue-500/50 text-blue-600 dark:text-blue-500;
21
+ }
22
+
23
+ [data-slot="alert-title"] {
24
+ @apply mb-1 font-medium leading-none tracking-tight;
25
+ }
26
+
27
+ [data-slot="alert-description"] {
28
+ @apply text-sm;
29
+ }
30
+
31
+ [data-slot="alert"][data-variant="default"] [data-slot="alert-description"] {
32
+ @apply text-muted-foreground;
33
+ }
package/components/aspect-ratio.css ADDED
@@ -0,0 +1,15 @@
1
+ /* Aspect Ratio Component Styles */
2
+
3
+ [data-slot="aspect-ratio"] {
4
+ @apply relative w-full;
5
+ }
6
+
7
+ [data-slot="aspect-ratio"] > [data-slot="aspect-ratio-content"] {
8
+ @apply absolute top-0 left-0 h-full w-full;
9
+ }
10
+
11
+ [data-slot="aspect-ratio"] > img[data-slot="aspect-ratio-content"],
12
+ [data-slot="aspect-ratio"] > video[data-slot="aspect-ratio-content"],
13
+ [data-slot="aspect-ratio"] > iframe[data-slot="aspect-ratio-content"] {
14
+ @apply object-cover;
15
+ }
package/components/avatar-group.css ADDED
@@ -0,0 +1,30 @@
1
+ /* Avatar Group Component Styles */
2
+
3
+ [data-slot="avatar-group"] {
4
+ @apply flex -space-x-2;
5
+ }
6
+
7
+ [data-slot="avatar-group"] [data-slot="avatar"] {
8
+ @apply ring-2 ring-background;
9
+ }
10
+
11
+ [data-slot="avatar-group-overflow"] {
12
+ @apply relative inline-flex items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background;
13
+ }
14
+
15
+ [data-slot="avatar-group-overflow"][data-size="sm"] {
16
+ @apply h-8 w-8 text-[10px];
17
+ }
18
+
19
+ [data-slot="avatar-group-overflow"][data-size="md"],
20
+ [data-slot="avatar-group-overflow"]:not([data-size]) {
21
+ @apply h-10 w-10 text-xs;
22
+ }
23
+
24
+ [data-slot="avatar-group-overflow"][data-size="lg"] {
25
+ @apply h-12 w-12 text-sm;
26
+ }
27
+
28
+ [data-slot="avatar-group-overflow"][data-size="xl"] {
29
+ @apply h-16 w-16 text-base;
30
+ }
package/components/avatar.css ADDED
@@ -0,0 +1,25 @@
1
+ /* Avatar Component Styles */
2
+
3
+ [data-slot="avatar"] {
4
+ @apply relative inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full bg-muted text-muted-foreground font-medium uppercase;
5
+ }
6
+
7
+ [data-slot="avatar-image"] {
8
+ @apply aspect-square h-full w-full object-cover;
9
+ }
10
+
11
+ [data-slot="avatar"][data-size="sm"] {
12
+ @apply h-8 w-8 text-xs;
13
+ }
14
+
15
+ [data-slot="avatar"][data-size="md"] {
16
+ @apply h-10 w-10 text-sm;
17
+ }
18
+
19
+ [data-slot="avatar"][data-size="lg"] {
20
+ @apply h-12 w-12 text-base;
21
+ }
22
+
23
+ [data-slot="avatar"][data-size="xl"] {
24
+ @apply h-16 w-16 text-xl;
25
+ }
package/components/badge.css ADDED
@@ -0,0 +1,21 @@
1
+ /* Badge Component Styles */
2
+
3
+ [data-slot="badge"] {
4
+ @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
5
+ }
6
+
7
+ [data-slot="badge"][data-variant="default"] {
8
+ @apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
9
+ }
10
+
11
+ [data-slot="badge"][data-variant="secondary"] {
12
+ @apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
13
+ }
14
+
15
+ [data-slot="badge"][data-variant="destructive"] {
16
+ @apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
17
+ }
18
+
19
+ [data-slot="badge"][data-variant="outline"] {
20
+ @apply text-foreground;
21
+ }
package/components/breadcrumb.css ADDED
@@ -0,0 +1,35 @@
1
+ /* Breadcrumb Component Styles */
2
+
3
+ [data-slot="breadcrumb"] {
4
+ @apply relative;
5
+ }
6
+
7
+ [data-slot="breadcrumb-list"] {
8
+ @apply flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5;
9
+ }
10
+
11
+ [data-slot="breadcrumb-item"] {
12
+ @apply inline-flex items-center gap-1.5;
13
+ }
14
+
15
+ [data-slot="breadcrumb-link"] {
16
+ @apply transition-colors hover:text-foreground;
17
+ }
18
+
19
+ [data-slot="breadcrumb-page"] {
20
+ @apply font-normal text-foreground;
21
+ }
22
+
23
+ [data-slot="breadcrumb-separator"] {
24
+ @apply flex items-center text-muted-foreground [&>svg]:size-3.5;
25
+ }
26
+
27
+ [data-slot="breadcrumb-ellipsis"] {
28
+ @apply flex h-9 w-9 items-center justify-center;
29
+ }
30
+
31
+ /* Screen reader only utility for ellipsis */
32
+ [data-slot="breadcrumb-ellipsis"] .sr-only {
33
+ @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
34
+ clip: rect(0, 0, 0, 0);
35
+ }
package/components/button.css ADDED
@@ -0,0 +1,47 @@
1
+ /* Button Component Styles */
2
+
3
+ [data-slot="button"] {
4
+ @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
5
+ }
6
+
7
+ /* Variants */
8
+ [data-slot="button"][data-variant="default"] {
9
+ @apply bg-primary text-primary-foreground hover:bg-primary/90;
10
+ }
11
+
12
+ [data-slot="button"][data-variant="destructive"] {
13
+ @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
14
+ }
15
+
16
+ [data-slot="button"][data-variant="outline"] {
17
+ @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
18
+ }
19
+
20
+ [data-slot="button"][data-variant="secondary"] {
21
+ @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
22
+ }
23
+
24
+ [data-slot="button"][data-variant="ghost"] {
25
+ @apply hover:bg-accent hover:text-accent-foreground;
26
+ }
27
+
28
+ [data-slot="button"][data-variant="link"] {
29
+ @apply text-primary underline-offset-4 hover:underline;
30
+ }
31
+
32
+ /* Sizes */
33
+ [data-slot="button"][data-size="default"] {
34
+ @apply h-10 px-4 py-2;
35
+ }
36
+
37
+ [data-slot="button"][data-size="sm"] {
38
+ @apply h-9 rounded-md px-3;
39
+ }
40
+
41
+ [data-slot="button"][data-size="lg"] {
42
+ @apply h-11 rounded-md px-8;
43
+ }
44
+
45
+ [data-slot="button"][data-size="icon"] {
46
+ @apply h-10 w-10;
47
+ }
package/components/calendar.css ADDED
@@ -0,0 +1,124 @@
1
+ /* Calendar Component Styles */
2
+ /* Uses react-day-picker with custom data-slot attributes */
3
+
4
+ [data-slot="calendar"] {
5
+ @apply bg-background p-3 w-fit;
6
+ --cell-size: 2rem;
7
+ }
8
+
9
+ /* RTL support for chevron icons */
10
+ :where([dir="rtl"]) [data-slot="calendar-chevron"][data-orientation="left"],
11
+ :where([dir="rtl"]) [data-slot="calendar-chevron"][data-orientation="right"] {
12
+ transform: rotate(180deg);
13
+ }
14
+
15
+ /* React Day Picker default class overrides */
16
+ [data-slot="calendar"] .rdp-months {
17
+ @apply relative flex flex-col gap-4 md:flex-row;
18
+ }
19
+
20
+ [data-slot="calendar"] .rdp-month {
21
+ @apply flex w-full flex-col gap-4;
22
+ }
23
+
24
+ [data-slot="calendar"] .rdp-nav {
25
+ @apply absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1;
26
+ }
27
+
28
+ [data-slot="calendar"] .rdp-button_previous,
29
+ [data-slot="calendar"] .rdp-button_next {
30
+ @apply flex h-[--cell-size] w-[--cell-size] select-none items-center justify-center rounded-md p-0 opacity-50 transition-opacity hover:opacity-100 aria-disabled:pointer-events-none aria-disabled:opacity-50;
31
+ }
32
+
33
+ [data-slot="calendar"] .rdp-month_caption {
34
+ @apply flex h-[--cell-size] w-full items-center justify-center px-[--cell-size];
35
+ }
36
+
37
+ [data-slot="calendar"] .rdp-dropdowns {
38
+ @apply flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium;
39
+ }
40
+
41
+ [data-slot="calendar"] .rdp-dropdown_root {
42
+ @apply relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px];
43
+ }
44
+
45
+ [data-slot="calendar"] .rdp-dropdown {
46
+ @apply absolute inset-0 bg-popover opacity-0;
47
+ }
48
+
49
+ [data-slot="calendar"] .rdp-caption_label {
50
+ @apply select-none text-sm font-medium;
51
+ }
52
+
53
+ [data-slot="calendar"] .rdp-weekdays {
54
+ @apply flex;
55
+ }
56
+
57
+ [data-slot="calendar"] .rdp-weekday {
58
+ @apply flex h-[--cell-size] flex-1 select-none items-center justify-center rounded-md text-[0.8rem] font-normal text-muted-foreground;
59
+ }
60
+
61
+ [data-slot="calendar"] .rdp-week {
62
+ @apply mt-2 flex w-full;
63
+ }
64
+
65
+ [data-slot="calendar"] .rdp-day {
66
+ @apply relative aspect-square h-full w-full select-none p-0 text-center;
67
+ }
68
+
69
+ [data-slot="calendar"] .rdp-range_start {
70
+ @apply rounded-l-md bg-accent;
71
+ }
72
+
73
+ [data-slot="calendar"] .rdp-range_middle {
74
+ @apply rounded-none;
75
+ }
76
+
77
+ [data-slot="calendar"] .rdp-range_end {
78
+ @apply rounded-r-md bg-accent;
79
+ }
80
+
81
+ [data-slot="calendar"] .rdp-today {
82
+ @apply rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none;
83
+ }
84
+
85
+ [data-slot="calendar"] .rdp-outside {
86
+ @apply text-muted-foreground aria-selected:text-muted-foreground;
87
+ }
88
+
89
+ [data-slot="calendar"] .rdp-disabled {
90
+ @apply text-muted-foreground opacity-50;
91
+ }
92
+
93
+ [data-slot="calendar"] .rdp-hidden {
94
+ @apply invisible;
95
+ }
96
+
97
+ /* Calendar Day Button */
98
+ [data-slot="calendar-day-button"] {
99
+ @apply relative flex h-[--cell-size] w-[--cell-size] items-center justify-center rounded-md p-0 text-sm font-normal outline-none transition-colors;
100
+ @apply hover:bg-accent hover:text-accent-foreground;
101
+ @apply focus-visible:relative focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
102
+ }
103
+
104
+ [data-slot="calendar-day-button"][data-selected-single="true"] {
105
+ @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
106
+ }
107
+
108
+ [data-slot="calendar-day-button"][data-range-start="true"],
109
+ [data-slot="calendar-day-button"][data-range-end="true"] {
110
+ @apply bg-primary text-primary-foreground;
111
+ }
112
+
113
+ [data-slot="calendar-day-button"][data-range-middle="true"] {
114
+ @apply bg-accent text-accent-foreground;
115
+ }
116
+
117
+ /* Week Number */
118
+ [data-slot="calendar-week-number"] {
119
+ @apply text-muted-foreground text-[0.8rem] font-normal;
120
+ }
121
+
122
+ [data-slot="calendar-week-number"] > div {
123
+ @apply flex h-[--cell-size] w-[--cell-size] items-center justify-center;
124
+ }
package/components/card.css ADDED
@@ -0,0 +1,25 @@
1
+ /* Card Component Styles */
2
+
3
+ [data-slot="card"] {
4
+ @apply rounded-xl border bg-card text-card-foreground shadow;
5
+ }
6
+
7
+ [data-slot="card-header"] {
8
+ @apply flex flex-col space-y-1.5 p-6;
9
+ }
10
+
11
+ [data-slot="card-title"] {
12
+ @apply font-semibold leading-none tracking-tight;
13
+ }
14
+
15
+ [data-slot="card-description"] {
16
+ @apply text-sm text-muted-foreground;
17
+ }
18
+
19
+ [data-slot="card-content"] {
20
+ @apply p-6 pt-0;
21
+ }
22
+
23
+ [data-slot="card-footer"] {
24
+ @apply flex items-center p-6 pt-0;
25
+ }
package/components/carousel.css ADDED
@@ -0,0 +1,79 @@
1
+ /* Carousel Component Styles */
2
+ /* Uses embla-carousel with data-slot attributes */
3
+
4
+ [data-slot="carousel"] {
5
+ @apply relative;
6
+ }
7
+
8
+ [data-slot="carousel-viewport"] {
9
+ @apply overflow-hidden;
10
+ }
11
+
12
+ [data-slot="carousel-content"] {
13
+ @apply flex;
14
+ }
15
+
16
+ [data-slot="carousel-content"][data-orientation="horizontal"] {
17
+ @apply -ml-4;
18
+ }
19
+
20
+ [data-slot="carousel-content"][data-orientation="vertical"] {
21
+ @apply -mt-4 flex-col;
22
+ }
23
+
24
+ [data-slot="carousel-item"] {
25
+ @apply min-w-0 shrink-0 grow-0 basis-full;
26
+ }
27
+
28
+ [data-slot="carousel-item"][data-orientation="horizontal"] {
29
+ @apply pl-4;
30
+ }
31
+
32
+ [data-slot="carousel-item"][data-orientation="vertical"] {
33
+ @apply pt-4;
34
+ }
35
+
36
+ /* Carousel Navigation Buttons */
37
+ [data-slot="carousel-previous"],
38
+ [data-slot="carousel-next"] {
39
+ @apply absolute flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-sm transition-colors;
40
+ @apply hover:bg-accent hover:text-accent-foreground;
41
+ @apply disabled:pointer-events-none disabled:opacity-50;
42
+ }
43
+
44
+ [data-slot="carousel-previous"][data-orientation="horizontal"] {
45
+ @apply -left-12 top-1/2 -translate-y-1/2;
46
+ }
47
+
48
+ [data-slot="carousel-previous"][data-orientation="vertical"] {
49
+ @apply -top-12 left-1/2 -translate-x-1/2 rotate-90;
50
+ }
51
+
52
+ [data-slot="carousel-next"][data-orientation="horizontal"] {
53
+ @apply -right-12 top-1/2 -translate-y-1/2;
54
+ }
55
+
56
+ [data-slot="carousel-next"][data-orientation="vertical"] {
57
+ @apply -bottom-12 left-1/2 -translate-x-1/2 rotate-90;
58
+ }
59
+
60
+ [data-slot="carousel-previous-icon"],
61
+ [data-slot="carousel-next-icon"] {
62
+ @apply h-4 w-4;
63
+ }
64
+
65
+ [data-slot="carousel-dots"] {
66
+ @apply flex justify-center gap-2 pt-4;
67
+ }
68
+
69
+ [data-slot="carousel-dot"] {
70
+ @apply relative h-2 w-2 rounded-full bg-muted transition-colors;
71
+ }
72
+
73
+ [data-slot="carousel-dot"][data-active="true"] {
74
+ @apply bg-primary;
75
+ }
76
+
77
+ [data-slot="carousel-counter"] {
78
+ @apply flex justify-center pt-4 text-sm text-muted-foreground;
79
+ }
package/components/chart.css ADDED
@@ -0,0 +1,124 @@
1
+ /* Chart Component Styles */
2
+ /* Uses recharts with data-slot attributes */
3
+
4
+ [data-slot="chart"] {
5
+ @apply flex aspect-video justify-center text-xs;
6
+ }
7
+
8
+ /* Recharts internal element overrides */
9
+ [data-slot="chart"] .recharts-cartesian-axis-tick text {
10
+ @apply fill-muted-foreground;
11
+ }
12
+
13
+ [data-slot="chart"] .recharts-cartesian-grid line[stroke="#ccc"] {
14
+ @apply stroke-border/50;
15
+ }
16
+
17
+ [data-slot="chart"] .recharts-curve.recharts-tooltip-cursor {
18
+ @apply stroke-border;
19
+ }
20
+
21
+ [data-slot="chart"] .recharts-polar-grid .recharts-polar-grid-concentric-circle {
22
+ @apply stroke-border;
23
+ }
24
+
25
+ [data-slot="chart"] .recharts-radial-bar-background-sector {
26
+ @apply fill-muted;
27
+ }
28
+
29
+ [data-slot="chart"] .recharts-rectangle.recharts-tooltip-cursor {
30
+ @apply fill-muted;
31
+ }
32
+
33
+ [data-slot="chart"] .recharts-reference-line .recharts-cartesian-grid-tick-line {
34
+ @apply stroke-border;
35
+ }
36
+
37
+ [data-slot="chart"] .recharts-sector[stroke="#fff"] {
38
+ @apply stroke-transparent;
39
+ }
40
+
41
+ [data-slot="chart"] .recharts-surface {
42
+ outline: none;
43
+ }
44
+
45
+ /* Chart Tooltip Content */
46
+ [data-slot="chart-tooltip-content"] {
47
+ @apply grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl;
48
+ }
49
+
50
+ [data-slot="chart-tooltip-label"] {
51
+ @apply font-medium text-foreground;
52
+ }
53
+
54
+ [data-slot="chart-tooltip-items"] {
55
+ @apply grid gap-1.5;
56
+ }
57
+
58
+ [data-slot="chart-tooltip-item"] {
59
+ @apply flex w-full flex-wrap items-stretch gap-2;
60
+ }
61
+
62
+ [data-slot="chart-tooltip-item"] > svg {
63
+ @apply h-2.5 w-2.5 text-muted-foreground;
64
+ }
65
+
66
+ [data-slot="chart-tooltip-indicator"] {
67
+ @apply shrink-0 rounded-[2px];
68
+ border-width: 1px;
69
+ border-color: var(--color-border);
70
+ background-color: var(--color-bg);
71
+ }
72
+
73
+ [data-slot="chart-tooltip-indicator"][data-indicator="dot"] {
74
+ @apply h-2.5 w-2.5;
75
+ }
76
+
77
+ [data-slot="chart-tooltip-indicator"][data-indicator="line"] {
78
+ @apply w-1;
79
+ }
80
+
81
+ [data-slot="chart-tooltip-indicator"][data-indicator="dashed"] {
82
+ @apply w-0 border-l-[1.5px] border-dashed bg-transparent;
83
+ }
84
+
85
+ [data-slot="chart-tooltip-item-content"] {
86
+ @apply flex flex-1 items-baseline justify-between gap-2 leading-none;
87
+ }
88
+
89
+ [data-slot="chart-tooltip-item-label"] {
90
+ @apply flex items-baseline gap-0.5;
91
+ }
92
+
93
+ [data-slot="chart-tooltip-item-name"] {
94
+ @apply text-muted-foreground;
95
+ }
96
+
97
+ [data-slot="chart-tooltip-item-value"] {
98
+ @apply font-mono font-medium tabular-nums text-foreground;
99
+ }
100
+
101
+ /* Chart Legend */
102
+ [data-slot="chart-legend"] {
103
+ @apply flex items-center justify-center gap-4;
104
+ }
105
+
106
+ [data-slot="chart-legend"][data-vertical-align="top"] {
107
+ @apply pb-3;
108
+ }
109
+
110
+ [data-slot="chart-legend"][data-vertical-align="bottom"] {
111
+ @apply pt-3;
112
+ }
113
+
114
+ [data-slot="chart-legend-item"] {
115
+ @apply flex items-center gap-1.5;
116
+ }
117
+
118
+ [data-slot="chart-legend-item"] > svg {
119
+ @apply h-3 w-3 text-muted-foreground;
120
+ }
121
+
122
+ [data-slot="chart-legend-indicator"] {
123
+ @apply h-2 w-2 shrink-0 rounded-[2px];
124
+ }
package/components/checkbox.css ADDED
@@ -0,0 +1,13 @@
1
+ /* Checkbox Component Styles */
2
+
3
+ [data-slot="checkbox"] {
4
+ @apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
5
+ }
6
+
7
+ [data-slot="checkbox-indicator"] {
8
+ @apply flex items-center justify-center text-current;
9
+ }
10
+
11
+ [data-slot="checkbox-indicator"] svg {
12
+ @apply h-4 w-4;
13
+ }