@betfin/ui 0.1.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 (160) hide show
  1. package/dist/chunk-3CAXHUAL.js +23 -0
  2. package/dist/chunk-3CAXHUAL.js.map +1 -0
  3. package/dist/chunk-3YCD2QLS.js +113 -0
  4. package/dist/chunk-3YCD2QLS.js.map +1 -0
  5. package/dist/chunk-5CXIFF6J.js +46 -0
  6. package/dist/chunk-5CXIFF6J.js.map +1 -0
  7. package/dist/chunk-EP6DYU4N.js +26 -0
  8. package/dist/chunk-EP6DYU4N.js.map +1 -0
  9. package/dist/chunk-FHYW2QBY.js +21 -0
  10. package/dist/chunk-FHYW2QBY.js.map +1 -0
  11. package/dist/chunk-HRFMTZ55.js +49 -0
  12. package/dist/chunk-HRFMTZ55.js.map +1 -0
  13. package/dist/chunk-ILNHKDYA.js +107 -0
  14. package/dist/chunk-ILNHKDYA.js.map +1 -0
  15. package/dist/chunk-JTVU6ANA.js +37 -0
  16. package/dist/chunk-JTVU6ANA.js.map +1 -0
  17. package/dist/chunk-K7JWN6NH.js +21 -0
  18. package/dist/chunk-K7JWN6NH.js.map +1 -0
  19. package/dist/chunk-QZIKXMHP.js +131 -0
  20. package/dist/chunk-QZIKXMHP.js.map +1 -0
  21. package/dist/chunk-SSC2M625.js +24 -0
  22. package/dist/chunk-SSC2M625.js.map +1 -0
  23. package/dist/chunk-TLULUIYC.js +14 -0
  24. package/dist/chunk-TLULUIYC.js.map +1 -0
  25. package/dist/chunk-VJ6P5FFS.js +90 -0
  26. package/dist/chunk-VJ6P5FFS.js.map +1 -0
  27. package/dist/chunk-Y2TKUANL.js +11 -0
  28. package/dist/chunk-Y2TKUANL.js.map +1 -0
  29. package/dist/components/accordion.d.ts +6 -0
  30. package/dist/components/accordion.js +59 -0
  31. package/dist/components/accordion.js.map +1 -0
  32. package/dist/components/alert-dialog.d.ts +18 -0
  33. package/dist/components/alert-dialog.js +144 -0
  34. package/dist/components/alert-dialog.js.map +1 -0
  35. package/dist/components/app-header.d.ts +19 -0
  36. package/dist/components/app-header.js +17 -0
  37. package/dist/components/app-header.js.map +1 -0
  38. package/dist/components/badge.d.ts +7 -0
  39. package/dist/components/badge.js +47 -0
  40. package/dist/components/badge.js.map +1 -0
  41. package/dist/components/bet-value.d.ts +49 -0
  42. package/dist/components/bet-value.js +12 -0
  43. package/dist/components/bet-value.js.map +1 -0
  44. package/dist/components/breadcrumb.d.ts +10 -0
  45. package/dist/components/breadcrumb.js +65 -0
  46. package/dist/components/breadcrumb.js.map +1 -0
  47. package/dist/components/button.d.ts +8 -0
  48. package/dist/components/button.js +10 -0
  49. package/dist/components/button.js.map +1 -0
  50. package/dist/components/calendar.d.ts +10 -0
  51. package/dist/components/calendar.js +145 -0
  52. package/dist/components/calendar.js.map +1 -0
  53. package/dist/components/carousel.d.ts +28 -0
  54. package/dist/components/carousel.js +153 -0
  55. package/dist/components/carousel.js.map +1 -0
  56. package/dist/components/chart.d.ts +39 -0
  57. package/dist/components/chart.js +219 -0
  58. package/dist/components/chart.js.map +1 -0
  59. package/dist/components/checkbox.d.ts +3 -0
  60. package/dist/components/checkbox.js +26 -0
  61. package/dist/components/checkbox.js.map +1 -0
  62. package/dist/components/collapsible.d.ts +5 -0
  63. package/dist/components/collapsible.js +20 -0
  64. package/dist/components/collapsible.js.map +1 -0
  65. package/dist/components/command.d.ts +19 -0
  66. package/dist/components/command.js +130 -0
  67. package/dist/components/command.js.map +1 -0
  68. package/dist/components/context-menu.d.ts +29 -0
  69. package/dist/components/context-menu.js +186 -0
  70. package/dist/components/context-menu.js.map +1 -0
  71. package/dist/components/dialog.d.ts +17 -0
  72. package/dist/components/dialog.js +28 -0
  73. package/dist/components/dialog.js.map +1 -0
  74. package/dist/components/drawer.d.ts +16 -0
  75. package/dist/components/drawer.js +164 -0
  76. package/dist/components/drawer.js.map +1 -0
  77. package/dist/components/dropdown-menu.d.ts +29 -0
  78. package/dist/components/dropdown-menu.js +207 -0
  79. package/dist/components/dropdown-menu.js.map +1 -0
  80. package/dist/components/input-group.d.ts +18 -0
  81. package/dist/components/input-group.js +22 -0
  82. package/dist/components/input-group.js.map +1 -0
  83. package/dist/components/input.d.ts +3 -0
  84. package/dist/components/input.js +8 -0
  85. package/dist/components/input.js.map +1 -0
  86. package/dist/components/loading.d.ts +9 -0
  87. package/dist/components/loading.js +26 -0
  88. package/dist/components/loading.js.map +1 -0
  89. package/dist/components/member-profile.d.ts +79 -0
  90. package/dist/components/member-profile.js +342 -0
  91. package/dist/components/member-profile.js.map +1 -0
  92. package/dist/components/popover.d.ts +9 -0
  93. package/dist/components/popover.js +52 -0
  94. package/dist/components/popover.js.map +1 -0
  95. package/dist/components/progress.d.ts +7 -0
  96. package/dist/components/progress.js +40 -0
  97. package/dist/components/progress.js.map +1 -0
  98. package/dist/components/radio-group.d.ts +5 -0
  99. package/dist/components/radio-group.js +31 -0
  100. package/dist/components/radio-group.js.map +1 -0
  101. package/dist/components/scroll-area.d.ts +4 -0
  102. package/dist/components/scroll-area.js +42 -0
  103. package/dist/components/scroll-area.js.map +1 -0
  104. package/dist/components/select.d.ts +15 -0
  105. package/dist/components/select.js +136 -0
  106. package/dist/components/select.js.map +1 -0
  107. package/dist/components/separator.d.ts +3 -0
  108. package/dist/components/separator.js +8 -0
  109. package/dist/components/separator.js.map +1 -0
  110. package/dist/components/sheet.d.ts +14 -0
  111. package/dist/components/sheet.js +23 -0
  112. package/dist/components/sheet.js.map +1 -0
  113. package/dist/components/sidebar.d.ts +63 -0
  114. package/dist/components/sidebar.js +536 -0
  115. package/dist/components/sidebar.js.map +1 -0
  116. package/dist/components/skeleton.d.ts +2 -0
  117. package/dist/components/skeleton.js +8 -0
  118. package/dist/components/skeleton.js.map +1 -0
  119. package/dist/components/slider.d.ts +3 -0
  120. package/dist/components/slider.js +45 -0
  121. package/dist/components/slider.js.map +1 -0
  122. package/dist/components/sonner.d.ts +3 -0
  123. package/dist/components/sonner.js +39 -0
  124. package/dist/components/sonner.js.map +1 -0
  125. package/dist/components/switch.d.ts +5 -0
  126. package/dist/components/switch.js +36 -0
  127. package/dist/components/switch.js.map +1 -0
  128. package/dist/components/table.d.ts +12 -0
  129. package/dist/components/table.js +56 -0
  130. package/dist/components/table.js.map +1 -0
  131. package/dist/components/tabs.d.ts +10 -0
  132. package/dist/components/tabs.js +63 -0
  133. package/dist/components/tabs.js.map +1 -0
  134. package/dist/components/textarea.d.ts +3 -0
  135. package/dist/components/textarea.js +8 -0
  136. package/dist/components/textarea.js.map +1 -0
  137. package/dist/components/toggle-group.d.ts +11 -0
  138. package/dist/components/toggle-group.js +80 -0
  139. package/dist/components/toggle-group.js.map +1 -0
  140. package/dist/components/toggle.d.ts +8 -0
  141. package/dist/components/toggle.js +11 -0
  142. package/dist/components/toggle.js.map +1 -0
  143. package/dist/components/tooltip.d.ts +6 -0
  144. package/dist/components/tooltip.js +14 -0
  145. package/dist/components/tooltip.js.map +1 -0
  146. package/dist/hooks/use-mobile.d.ts +1 -0
  147. package/dist/hooks/use-mobile.js +7 -0
  148. package/dist/hooks/use-mobile.js.map +1 -0
  149. package/dist/lib/date.d.ts +14 -0
  150. package/dist/lib/date.js +24 -0
  151. package/dist/lib/date.js.map +1 -0
  152. package/dist/lib/format.d.ts +16 -0
  153. package/dist/lib/format.js +9 -0
  154. package/dist/lib/format.js.map +1 -0
  155. package/dist/lib/utils.d.ts +2 -0
  156. package/dist/lib/utils.js +7 -0
  157. package/dist/lib/utils.js.map +1 -0
  158. package/package.json +71 -0
  159. package/src/styles/globals.css +151 -0
  160. package/src/styles/theme.css +144 -0
package/package.json ADDED
@@ -0,0 +1,71 @@
1
+ {
2
+ "name": "@betfin/ui",
3
+ "version": "0.1.0",
4
+ "type": "module",
5
+ "description": "Betfin design system — shadcn/base-ui components, hooks, and the Tailwind v4 theme, for federated remotes.",
6
+ "license": "MIT",
7
+ "sideEffects": [
8
+ "**/*.css"
9
+ ],
10
+ "files": [
11
+ "dist",
12
+ "src/styles"
13
+ ],
14
+ "exports": {
15
+ "./globals.css": "./src/styles/globals.css",
16
+ "./theme.css": "./src/styles/theme.css",
17
+ "./lib/*": {
18
+ "types": "./dist/lib/*.d.ts",
19
+ "import": "./dist/lib/*.js"
20
+ },
21
+ "./components/*": {
22
+ "types": "./dist/components/*.d.ts",
23
+ "import": "./dist/components/*.js"
24
+ },
25
+ "./hooks/*": {
26
+ "types": "./dist/hooks/*.d.ts",
27
+ "import": "./dist/hooks/*.js"
28
+ }
29
+ },
30
+ "publishConfig": {
31
+ "access": "public"
32
+ },
33
+ "scripts": {
34
+ "build": "tsup && tsc -p tsconfig.build.json",
35
+ "dev": "tsup --watch",
36
+ "typecheck": "tsc --noEmit",
37
+ "prepublishOnly": "bun run build"
38
+ },
39
+ "peerDependencies": {
40
+ "react": "^19",
41
+ "react-dom": "^19"
42
+ },
43
+ "dependencies": {
44
+ "@base-ui/react": "^1.6.0",
45
+ "@fontsource-variable/quicksand": "^5.2.10",
46
+ "class-variance-authority": "^0.7.1",
47
+ "clsx": "^2.1.1",
48
+ "cmdk": "^1.1.1",
49
+ "date-fns": "^4.4.0",
50
+ "embla-carousel-react": "^8.6.0",
51
+ "lucide-react": "^1.23.0",
52
+ "react-day-picker": "^10.0.1",
53
+ "recharts": "^2",
54
+ "shadcn": "^4.13.0",
55
+ "sonner": "^2.0.7",
56
+ "tailwind-merge": "^3.6.0",
57
+ "tw-animate-css": "^1.4.0"
58
+ },
59
+ "devDependencies": {
60
+ "@tailwindcss/vite": "^4",
61
+ "@turbo/gen": "^2.9.15",
62
+ "@types/node": "^26",
63
+ "@types/react": "^19.2.17",
64
+ "@types/react-dom": "^19.2.3",
65
+ "react": "^19.2.7",
66
+ "react-dom": "^19.2.7",
67
+ "tailwindcss": "^4",
68
+ "tsup": "^8",
69
+ "typescript": "~7"
70
+ }
71
+ }
package/src/styles/globals.css ADDED
@@ -0,0 +1,151 @@
1
+ @import "tailwindcss";
2
+ @import "tw-animate-css";
3
+ @import "shadcn/tailwind.css";
4
+ @import "@fontsource-variable/quicksand";
5
+
6
+ @custom-variant dark (&:is(.dark *));
7
+ @source "../../../../apps/**/*.{ts,tsx}";
8
+ @source "../../../../packages/**/*.{ts,tsx}";
9
+ @source "../**/*.{ts,tsx}";
10
+
11
+ @theme inline {
12
+ --font-heading: var(--font-sans);
13
+ --color-sidebar-ring: var(--sidebar-ring);
14
+ --color-sidebar-border: var(--sidebar-border);
15
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
16
+ --color-sidebar-accent: var(--sidebar-accent);
17
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
18
+ --color-sidebar-primary: var(--sidebar-primary);
19
+ --color-sidebar-foreground: var(--sidebar-foreground);
20
+ --color-sidebar: var(--sidebar);
21
+ --color-chart-5: var(--chart-5);
22
+ --color-chart-4: var(--chart-4);
23
+ --color-chart-3: var(--chart-3);
24
+ --color-chart-2: var(--chart-2);
25
+ --color-chart-1: var(--chart-1);
26
+ --color-ring: var(--ring);
27
+ --color-input: var(--input);
28
+ --color-border: var(--border);
29
+ --color-destructive: var(--destructive);
30
+ --color-accent-foreground: var(--accent-foreground);
31
+ --color-accent: var(--accent);
32
+ --color-muted-foreground: var(--muted-foreground);
33
+ --color-muted: var(--muted);
34
+ --color-secondary-foreground: var(--secondary-foreground);
35
+ --color-secondary: var(--secondary);
36
+ --color-primary-foreground: var(--primary-foreground);
37
+ --color-primary: var(--primary);
38
+ --color-popover-foreground: var(--popover-foreground);
39
+ --color-popover: var(--popover);
40
+ --color-card-foreground: var(--card-foreground);
41
+ --color-card: var(--card);
42
+ --color-foreground: var(--foreground);
43
+ --color-background: var(--background);
44
+ --radius-sm: calc(var(--radius) * 0.6);
45
+ --radius-md: calc(var(--radius) * 0.8);
46
+ --radius-lg: var(--radius);
47
+ --radius-xl: calc(var(--radius) * 1.4);
48
+ --radius-2xl: calc(var(--radius) * 1.8);
49
+ --radius-3xl: calc(var(--radius) * 2.2);
50
+ --radius-4xl: calc(var(--radius) * 2.6);
51
+ --font-sans: "Quicksand Variable", sans-serif;
52
+ }
53
+
54
+ /* Single dark palette. The app is dark-only — there is no light theme, so these
55
+ tokens live directly on :root and render before any JS runs. The `.dark` class
56
+ is still stamped on <html> by @workspace/theme so the `dark:` variant utilities
57
+ stay active; it resolves to the same values defined here. */
58
+ :root {
59
+ --background: oklch(0.147 0.004 49.25);
60
+ --foreground: oklch(0.985 0.001 106.423);
61
+ --card: oklch(0.216 0.006 56.043);
62
+ --card-foreground: oklch(0.985 0.001 106.423);
63
+ --popover: oklch(0.216 0.006 56.043);
64
+ --popover-foreground: oklch(0.985 0.001 106.423);
65
+ --primary: oklch(0.795 0.184 86.047);
66
+ --primary-foreground: oklch(0.421 0.095 57.708);
67
+ --secondary: oklch(0.274 0.006 286.033);
68
+ --secondary-foreground: oklch(0.985 0 0);
69
+ --muted: oklch(0.268 0.007 34.298);
70
+ --muted-foreground: oklch(0.709 0.01 56.259);
71
+ --accent: oklch(0.268 0.007 34.298);
72
+ --accent-foreground: oklch(0.985 0.001 106.423);
73
+ --destructive: oklch(0.704 0.191 22.216);
74
+ --border: oklch(1 0 0 / 10%);
75
+ --input: oklch(1 0 0 / 15%);
76
+ --ring: oklch(0.553 0.013 58.071);
77
+ --chart-1: oklch(0.809 0.105 251.813);
78
+ --chart-2: oklch(0.623 0.214 259.815);
79
+ --chart-3: oklch(0.546 0.245 262.881);
80
+ --chart-4: oklch(0.488 0.243 264.376);
81
+ --chart-5: oklch(0.424 0.199 265.638);
82
+ --radius: 0.45rem;
83
+ /* Responsive horizontal page padding — the host shell owns page width/padding
84
+ and consumes this via `px-[var(--page-x)]`. Narrows on smaller viewports. */
85
+ --page-x: 16px;
86
+ --sidebar: oklch(0.216 0.006 56.043);
87
+ --sidebar-foreground: oklch(0.985 0.001 106.423);
88
+ --sidebar-primary: oklch(0.795 0.184 86.047);
89
+ --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
90
+ --sidebar-accent: oklch(0.268 0.007 34.298);
91
+ --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
92
+ --sidebar-border: oklch(1 0 0 / 10%);
93
+ --sidebar-ring: oklch(0.553 0.013 58.071);
94
+ }
95
+
96
+ /**
97
+ * Horizontal scroll affordance for wide data tables. Edge fade + shadow that
98
+ * appears ONLY while there is off-screen content, so a table that fits shows
99
+ * nothing. Pure CSS (Lea Verou technique): opaque `--card` covers are attached
100
+ * `local` so they scroll with the content and mask the shadow at each end; the
101
+ * shadows are attached `scroll` so they stay pinned to the element and reveal
102
+ * whenever content is scrolled past an edge. Works on both single-axis and
103
+ * dual-axis (sticky-header) scroll containers — covers span the full content
104
+ * height, so vertical scrolling never exposes them. Apply to the scroll box.
105
+ */
106
+ @utility scroll-shadow-x {
107
+ background:
108
+ linear-gradient(to right, var(--card), color-mix(in oklab, var(--card), transparent)) 0 0 / 28px 100% no-repeat local,
109
+ linear-gradient(to left, var(--card), color-mix(in oklab, var(--card), transparent)) 100% 0 / 28px 100% no-repeat local,
110
+ radial-gradient(farthest-side at 0 50%, color-mix(in oklab, black 24%, transparent), transparent) 0 0 / 14px 100% no-repeat scroll,
111
+ radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, black 24%, transparent), transparent) 100% 0 / 14px 100% no-repeat scroll;
112
+ background-color: var(--card);
113
+ }
114
+
115
+ @layer base {
116
+ * {
117
+ @apply border-border outline-ring/50;
118
+ }
119
+ body {
120
+ @apply bg-background text-foreground;
121
+ }
122
+ button:not(:disabled),
123
+ [role="button"]:not(:disabled) {
124
+ cursor: pointer;
125
+ }
126
+ }
127
+
128
+ /* Responsive page padding token (see --page-x in :root). */
129
+ @media (max-width: 1023px) {
130
+ :root {
131
+ --page-x: 12px;
132
+ }
133
+ }
134
+ @media (max-width: 639px) {
135
+ :root {
136
+ --page-x: 8px;
137
+ }
138
+ }
139
+
140
+ /* Live-ticker "flash" — a new item lights up in brand primary, then fades back to
141
+ its base style over ~2.5s. One-shot (no fill-mode), so it settles to normal. */
142
+ @keyframes bet-flash {
143
+ from {
144
+ background-color: var(--primary);
145
+ border-color: var(--primary);
146
+ color: var(--primary-foreground);
147
+ }
148
+ }
149
+ .animate-bet-flash {
150
+ animation: bet-flash 2.5s ease-out;
151
+ }
package/src/styles/theme.css ADDED
@@ -0,0 +1,144 @@
1
+ /*
2
+ * @betfin/ui — external theme entry.
3
+ *
4
+ * For apps OUTSIDE this monorepo. Import it AFTER Tailwind in your own stylesheet:
5
+ *
6
+ * @import "tailwindcss";
7
+ * @import "@betfin/ui/theme.css";
8
+ *
9
+ * It brings the Betfin design tokens + base layer, and `@source`s the shipped
10
+ * component bundles so their utility classes are generated in YOUR build. (The
11
+ * monorepo-scanning `globals.css` is for internal apps only.)
12
+ */
13
+ @import "tw-animate-css";
14
+ @import "shadcn/tailwind.css";
15
+ @import "@fontsource-variable/quicksand";
16
+
17
+ @custom-variant dark (&:is(.dark *));
18
+
19
+ /* Scan the shipped component JS (class strings survive the build) so their
20
+ utilities are generated. Relative to this file: src/styles -> package/dist. */
21
+ @source "../../dist/**/*.js";
22
+
23
+ @theme inline {
24
+ --font-heading: var(--font-sans);
25
+ --color-sidebar-ring: var(--sidebar-ring);
26
+ --color-sidebar-border: var(--sidebar-border);
27
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
28
+ --color-sidebar-accent: var(--sidebar-accent);
29
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
30
+ --color-sidebar-primary: var(--sidebar-primary);
31
+ --color-sidebar-foreground: var(--sidebar-foreground);
32
+ --color-sidebar: var(--sidebar);
33
+ --color-chart-5: var(--chart-5);
34
+ --color-chart-4: var(--chart-4);
35
+ --color-chart-3: var(--chart-3);
36
+ --color-chart-2: var(--chart-2);
37
+ --color-chart-1: var(--chart-1);
38
+ --color-ring: var(--ring);
39
+ --color-input: var(--input);
40
+ --color-border: var(--border);
41
+ --color-destructive: var(--destructive);
42
+ --color-accent-foreground: var(--accent-foreground);
43
+ --color-accent: var(--accent);
44
+ --color-muted-foreground: var(--muted-foreground);
45
+ --color-muted: var(--muted);
46
+ --color-secondary-foreground: var(--secondary-foreground);
47
+ --color-secondary: var(--secondary);
48
+ --color-primary-foreground: var(--primary-foreground);
49
+ --color-primary: var(--primary);
50
+ --color-popover-foreground: var(--popover-foreground);
51
+ --color-popover: var(--popover);
52
+ --color-card-foreground: var(--card-foreground);
53
+ --color-card: var(--card);
54
+ --color-foreground: var(--foreground);
55
+ --color-background: var(--background);
56
+ --radius-sm: calc(var(--radius) * 0.6);
57
+ --radius-md: calc(var(--radius) * 0.8);
58
+ --radius-lg: var(--radius);
59
+ --radius-xl: calc(var(--radius) * 1.4);
60
+ --radius-2xl: calc(var(--radius) * 1.8);
61
+ --radius-3xl: calc(var(--radius) * 2.2);
62
+ --radius-4xl: calc(var(--radius) * 2.6);
63
+ --font-sans: "Quicksand Variable", sans-serif;
64
+ }
65
+
66
+ :root {
67
+ --background: oklch(0.147 0.004 49.25);
68
+ --foreground: oklch(0.985 0.001 106.423);
69
+ --card: oklch(0.216 0.006 56.043);
70
+ --card-foreground: oklch(0.985 0.001 106.423);
71
+ --popover: oklch(0.216 0.006 56.043);
72
+ --popover-foreground: oklch(0.985 0.001 106.423);
73
+ --primary: oklch(0.795 0.184 86.047);
74
+ --primary-foreground: oklch(0.421 0.095 57.708);
75
+ --secondary: oklch(0.274 0.006 286.033);
76
+ --secondary-foreground: oklch(0.985 0 0);
77
+ --muted: oklch(0.268 0.007 34.298);
78
+ --muted-foreground: oklch(0.709 0.01 56.259);
79
+ --accent: oklch(0.268 0.007 34.298);
80
+ --accent-foreground: oklch(0.985 0.001 106.423);
81
+ --destructive: oklch(0.704 0.191 22.216);
82
+ --border: oklch(1 0 0 / 10%);
83
+ --input: oklch(1 0 0 / 15%);
84
+ --ring: oklch(0.553 0.013 58.071);
85
+ --chart-1: oklch(0.809 0.105 251.813);
86
+ --chart-2: oklch(0.623 0.214 259.815);
87
+ --chart-3: oklch(0.546 0.245 262.881);
88
+ --chart-4: oklch(0.488 0.243 264.376);
89
+ --chart-5: oklch(0.424 0.199 265.638);
90
+ --radius: 0.45rem;
91
+ --page-x: 16px;
92
+ --sidebar: oklch(0.216 0.006 56.043);
93
+ --sidebar-foreground: oklch(0.985 0.001 106.423);
94
+ --sidebar-primary: oklch(0.795 0.184 86.047);
95
+ --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
96
+ --sidebar-accent: oklch(0.268 0.007 34.298);
97
+ --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
98
+ --sidebar-border: oklch(1 0 0 / 10%);
99
+ --sidebar-ring: oklch(0.553 0.013 58.071);
100
+ }
101
+
102
+ @utility scroll-shadow-x {
103
+ background:
104
+ linear-gradient(to right, var(--card), color-mix(in oklab, var(--card), transparent)) 0 0 / 28px 100% no-repeat local,
105
+ linear-gradient(to left, var(--card), color-mix(in oklab, var(--card), transparent)) 100% 0 / 28px 100% no-repeat local,
106
+ radial-gradient(farthest-side at 0 50%, color-mix(in oklab, black 24%, transparent), transparent) 0 0 / 14px 100% no-repeat scroll,
107
+ radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, black 24%, transparent), transparent) 100% 0 / 14px 100% no-repeat scroll;
108
+ background-color: var(--card);
109
+ }
110
+
111
+ @layer base {
112
+ * {
113
+ @apply border-border outline-ring/50;
114
+ }
115
+ body {
116
+ @apply bg-background text-foreground;
117
+ }
118
+ button:not(:disabled),
119
+ [role="button"]:not(:disabled) {
120
+ cursor: pointer;
121
+ }
122
+ }
123
+
124
+ @media (max-width: 1023px) {
125
+ :root {
126
+ --page-x: 12px;
127
+ }
128
+ }
129
+ @media (max-width: 639px) {
130
+ :root {
131
+ --page-x: 8px;
132
+ }
133
+ }
134
+
135
+ @keyframes bet-flash {
136
+ from {
137
+ background-color: var(--primary);
138
+ border-color: var(--primary);
139
+ color: var(--primary-foreground);
140
+ }
141
+ }
142
+ .animate-bet-flash {
143
+ animation: bet-flash 2.5s ease-out;
144
+ }