@trycompai/design-system 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 (71) hide show
  1. package/README.md +110 -0
  2. package/components.json +21 -0
  3. package/hooks/use-mobile.tsx +19 -0
  4. package/lib/utils.ts +6 -0
  5. package/package.json +103 -0
  6. package/postcss.config.mjs +8 -0
  7. package/src/components/ui/accordion.tsx +60 -0
  8. package/src/components/ui/alert-dialog.tsx +161 -0
  9. package/src/components/ui/alert.tsx +109 -0
  10. package/src/components/ui/aspect-ratio.tsx +21 -0
  11. package/src/components/ui/avatar.tsx +74 -0
  12. package/src/components/ui/badge.tsx +48 -0
  13. package/src/components/ui/breadcrumb.tsx +254 -0
  14. package/src/components/ui/button-group.tsx +89 -0
  15. package/src/components/ui/button.tsx +122 -0
  16. package/src/components/ui/calendar.tsx +190 -0
  17. package/src/components/ui/card.tsx +155 -0
  18. package/src/components/ui/carousel.tsx +216 -0
  19. package/src/components/ui/chart.tsx +325 -0
  20. package/src/components/ui/checkbox.tsx +22 -0
  21. package/src/components/ui/collapsible.tsx +17 -0
  22. package/src/components/ui/combobox.tsx +248 -0
  23. package/src/components/ui/command.tsx +189 -0
  24. package/src/components/ui/container.tsx +34 -0
  25. package/src/components/ui/context-menu.tsx +235 -0
  26. package/src/components/ui/dialog.tsx +122 -0
  27. package/src/components/ui/drawer.tsx +102 -0
  28. package/src/components/ui/dropdown-menu.tsx +242 -0
  29. package/src/components/ui/empty.tsx +94 -0
  30. package/src/components/ui/field.tsx +215 -0
  31. package/src/components/ui/grid.tsx +135 -0
  32. package/src/components/ui/heading.tsx +56 -0
  33. package/src/components/ui/hover-card.tsx +46 -0
  34. package/src/components/ui/index.ts +61 -0
  35. package/src/components/ui/input-group.tsx +128 -0
  36. package/src/components/ui/input-otp.tsx +84 -0
  37. package/src/components/ui/input.tsx +15 -0
  38. package/src/components/ui/item.tsx +188 -0
  39. package/src/components/ui/kbd.tsx +26 -0
  40. package/src/components/ui/label.tsx +15 -0
  41. package/src/components/ui/menubar.tsx +163 -0
  42. package/src/components/ui/navigation-menu.tsx +147 -0
  43. package/src/components/ui/page-header.tsx +51 -0
  44. package/src/components/ui/page-layout.tsx +65 -0
  45. package/src/components/ui/pagination.tsx +104 -0
  46. package/src/components/ui/popover.tsx +57 -0
  47. package/src/components/ui/progress.tsx +61 -0
  48. package/src/components/ui/radio-group.tsx +37 -0
  49. package/src/components/ui/resizable.tsx +41 -0
  50. package/src/components/ui/scroll-area.tsx +48 -0
  51. package/src/components/ui/section.tsx +64 -0
  52. package/src/components/ui/select.tsx +166 -0
  53. package/src/components/ui/separator.tsx +17 -0
  54. package/src/components/ui/sheet.tsx +104 -0
  55. package/src/components/ui/sidebar.tsx +707 -0
  56. package/src/components/ui/skeleton.tsx +5 -0
  57. package/src/components/ui/slider.tsx +51 -0
  58. package/src/components/ui/sonner.tsx +43 -0
  59. package/src/components/ui/spinner.tsx +14 -0
  60. package/src/components/ui/stack.tsx +72 -0
  61. package/src/components/ui/switch.tsx +26 -0
  62. package/src/components/ui/table.tsx +65 -0
  63. package/src/components/ui/tabs.tsx +69 -0
  64. package/src/components/ui/text.tsx +59 -0
  65. package/src/components/ui/textarea.tsx +13 -0
  66. package/src/components/ui/toggle-group.tsx +87 -0
  67. package/src/components/ui/toggle.tsx +42 -0
  68. package/src/components/ui/tooltip.tsx +52 -0
  69. package/src/index.ts +3 -0
  70. package/src/styles/globals.css +122 -0
  71. package/tailwind.config.ts +59 -0
package/src/styles/globals.css ADDED
@@ -0,0 +1,122 @@
1
+ @import 'tailwindcss';
2
+ @import 'tw-animate-css';
3
+
4
+ @custom-variant dark (&:is(.dark *));
5
+
6
+ @layer base {
7
+ :root {
8
+ --background: oklch(1 0 0);
9
+ --foreground: oklch(0.145 0 0);
10
+ --card: oklch(1 0 0);
11
+ --card-foreground: oklch(0.145 0 0);
12
+ --popover: oklch(1 0 0);
13
+ --popover-foreground: oklch(0.145 0 0);
14
+ --primary: oklch(0.6 0.13 163);
15
+ --primary-foreground: oklch(0.98 0.02 166);
16
+ --secondary: oklch(0.967 0.001 286.375);
17
+ --secondary-foreground: oklch(0.21 0.006 285.885);
18
+ --muted: oklch(0.97 0 0);
19
+ --muted-foreground: oklch(0.556 0 0);
20
+ --accent: oklch(0.97 0 0);
21
+ --accent-foreground: oklch(0.205 0 0);
22
+ --destructive: oklch(0.58 0.22 27);
23
+ --border: oklch(0.922 0 0);
24
+ --input: oklch(0.922 0 0);
25
+ --ring: oklch(0.708 0 0);
26
+ --chart-1: oklch(0.85 0.13 165);
27
+ --chart-2: oklch(0.77 0.15 163);
28
+ --chart-3: oklch(0.7 0.15 162);
29
+ --chart-4: oklch(0.6 0.13 163);
30
+ --chart-5: oklch(0.51 0.1 166);
31
+ --radius: 0.45rem;
32
+ --sidebar: oklch(0.985 0 0);
33
+ --sidebar-foreground: oklch(0.145 0 0);
34
+ --sidebar-primary: oklch(0.6 0.13 163);
35
+ --sidebar-primary-foreground: oklch(0.98 0.02 166);
36
+ --sidebar-accent: oklch(0.97 0 0);
37
+ --sidebar-accent-foreground: oklch(0.205 0 0);
38
+ --sidebar-border: oklch(0.922 0 0);
39
+ --sidebar-ring: oklch(0.708 0 0);
40
+ }
41
+ .dark {
42
+ --background: oklch(0.145 0 0);
43
+ --foreground: oklch(0.985 0 0);
44
+ --card: oklch(0.205 0 0);
45
+ --card-foreground: oklch(0.985 0 0);
46
+ --popover: oklch(0.205 0 0);
47
+ --popover-foreground: oklch(0.985 0 0);
48
+ --primary: oklch(0.7 0.15 162);
49
+ --primary-foreground: oklch(0.26 0.05 173);
50
+ --secondary: oklch(0.274 0.006 286.033);
51
+ --secondary-foreground: oklch(0.985 0 0);
52
+ --muted: oklch(0.269 0 0);
53
+ --muted-foreground: oklch(0.708 0 0);
54
+ --accent: oklch(0.371 0 0);
55
+ --accent-foreground: oklch(0.985 0 0);
56
+ --destructive: oklch(0.704 0.191 22.216);
57
+ --border: oklch(1 0 0 / 10%);
58
+ --input: oklch(1 0 0 / 15%);
59
+ --ring: oklch(0.556 0 0);
60
+ --chart-1: oklch(0.85 0.13 165);
61
+ --chart-2: oklch(0.77 0.15 163);
62
+ --chart-3: oklch(0.7 0.15 162);
63
+ --chart-4: oklch(0.6 0.13 163);
64
+ --chart-5: oklch(0.51 0.1 166);
65
+ --sidebar: oklch(0.205 0 0);
66
+ --sidebar-foreground: oklch(0.985 0 0);
67
+ --sidebar-primary: oklch(0.77 0.15 163);
68
+ --sidebar-primary-foreground: oklch(0.26 0.05 173);
69
+ --sidebar-accent: oklch(0.269 0 0);
70
+ --sidebar-accent-foreground: oklch(0.985 0 0);
71
+ --sidebar-border: oklch(1 0 0 / 10%);
72
+ --sidebar-ring: oklch(0.556 0 0);
73
+ }
74
+ }
75
+
76
+ @theme inline {
77
+ --color-background: var(--background);
78
+ --color-foreground: var(--foreground);
79
+ --color-card: var(--card);
80
+ --color-card-foreground: var(--card-foreground);
81
+ --color-popover: var(--popover);
82
+ --color-popover-foreground: var(--popover-foreground);
83
+ --color-primary: var(--primary);
84
+ --color-primary-foreground: var(--primary-foreground);
85
+ --color-secondary: var(--secondary);
86
+ --color-secondary-foreground: var(--secondary-foreground);
87
+ --color-muted: var(--muted);
88
+ --color-muted-foreground: var(--muted-foreground);
89
+ --color-accent: var(--accent);
90
+ --color-accent-foreground: var(--accent-foreground);
91
+ --color-destructive: var(--destructive);
92
+ --color-destructive-foreground: var(--destructive-foreground);
93
+ --color-border: var(--border);
94
+ --color-input: var(--input);
95
+ --color-ring: var(--ring);
96
+ --color-chart-1: var(--chart-1);
97
+ --color-chart-2: var(--chart-2);
98
+ --color-chart-3: var(--chart-3);
99
+ --color-chart-4: var(--chart-4);
100
+ --color-chart-5: var(--chart-5);
101
+ --radius-sm: calc(var(--radius) - 4px);
102
+ --radius-md: calc(var(--radius) - 2px);
103
+ --radius-lg: var(--radius);
104
+ --radius-xl: calc(var(--radius) + 4px);
105
+ --color-sidebar: var(--sidebar);
106
+ --color-sidebar-foreground: var(--sidebar-foreground);
107
+ --color-sidebar-primary: var(--sidebar-primary);
108
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109
+ --color-sidebar-accent: var(--sidebar-accent);
110
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
111
+ --color-sidebar-border: var(--sidebar-border);
112
+ --color-sidebar-ring: var(--sidebar-ring);
113
+ }
114
+
115
+ @layer base {
116
+ * {
117
+ @apply border-border outline-ring/50;
118
+ }
119
+ body {
120
+ @apply bg-background text-foreground;
121
+ }
122
+ }
package/tailwind.config.ts ADDED
@@ -0,0 +1,59 @@
1
+ import type { Config } from 'tailwindcss';
2
+
3
+ export default {
4
+ darkMode: 'class',
5
+ content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
6
+ theme: {
7
+ extend: {
8
+ borderRadius: {
9
+ sm: 'var(--radius-sm)',
10
+ md: 'var(--radius-md)',
11
+ lg: 'var(--radius-lg)',
12
+ xl: 'var(--radius-xl)',
13
+ },
14
+ colors: {
15
+ border: 'var(--border)',
16
+ input: 'var(--input)',
17
+ ring: 'var(--ring)',
18
+ background: 'var(--background)',
19
+ foreground: 'var(--foreground)',
20
+ primary: {
21
+ DEFAULT: 'var(--primary)',
22
+ foreground: 'var(--primary-foreground)',
23
+ },
24
+ secondary: {
25
+ DEFAULT: 'var(--secondary)',
26
+ foreground: 'var(--secondary-foreground)',
27
+ },
28
+ destructive: 'var(--destructive)',
29
+ muted: {
30
+ DEFAULT: 'var(--muted)',
31
+ foreground: 'var(--muted-foreground)',
32
+ },
33
+ accent: {
34
+ DEFAULT: 'var(--accent)',
35
+ foreground: 'var(--accent-foreground)',
36
+ },
37
+ popover: {
38
+ DEFAULT: 'var(--popover)',
39
+ foreground: 'var(--popover-foreground)',
40
+ },
41
+ card: {
42
+ DEFAULT: 'var(--card)',
43
+ foreground: 'var(--card-foreground)',
44
+ },
45
+ sidebar: {
46
+ DEFAULT: 'var(--sidebar)',
47
+ foreground: 'var(--sidebar-foreground)',
48
+ primary: 'var(--sidebar-primary)',
49
+ 'primary-foreground': 'var(--sidebar-primary-foreground)',
50
+ accent: 'var(--sidebar-accent)',
51
+ 'accent-foreground': 'var(--sidebar-accent-foreground)',
52
+ border: 'var(--sidebar-border)',
53
+ ring: 'var(--sidebar-ring)',
54
+ },
55
+ },
56
+ },
57
+ },
58
+ plugins: [],
59
+ } satisfies Config;