shru-design-system 0.0.5 → 0.0.7

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.
@@ -59,6 +59,8 @@
59
59
 
60
60
  :root {
61
61
  --radius: 0.625rem;
62
+ /* Spacing variable - required for Tailwind v4's generated utilities */
63
+ --spacing: 0.25rem; /* 1 unit = 0.25rem (4px), so px-4 = calc(0.25rem * 4) = 1rem */
62
64
 
63
65
  /* Color palette variables - required for chart and other components */
64
66
  --color-blue-50: #eff6ff;
@@ -241,54 +243,28 @@
241
243
  }
242
244
 
243
245
  /*
244
- * Force generation of utilities used by design system components
245
- * Since components are bundled, Tailwind can't scan them automatically.
246
- * This ensures all required utilities are generated.
246
+ * Override broken Tailwind v4 generated utilities
247
+ * Tailwind v4 has bugs with some utility generation (e.g., rounded-full generates infinity)
248
+ * We explicitly define these to ensure they work correctly
247
249
  */
250
+
251
+ /*
252
+ * Pre-generated utility classes for design system components
253
+ * These utilities are explicitly defined to ensure they work in consuming apps
254
+ * without requiring Tailwind configuration or scanning
255
+ *
256
+ * Generated from 98 component files
257
+ * Total classes: 423
258
+ */
259
+
248
260
  @layer utilities {
249
- /* These classes are used by design system components but can't be scanned from bundled JS */
250
- .rounded-md { border-radius: var(--radius-md); }
251
- .rounded-lg { border-radius: var(--radius-lg); }
252
- .rounded-sm { border-radius: var(--radius-sm); }
253
- .rounded-xl { border-radius: var(--radius-xl); }
254
- .rounded-full { border-radius: 9999px; }
255
- .px-4 { padding-left: 1rem; padding-right: 1rem; }
256
- .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
257
- .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
258
- .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
259
- .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
260
- .p-4 { padding: 1rem; }
261
- .p-6 { padding: 1.5rem; }
262
- .gap-2 { gap: 0.5rem; }
263
- .gap-4 { gap: 1rem; }
264
- .mb-8 { margin-bottom: 2rem; }
265
- .mb-4 { margin-bottom: 1rem; }
266
- .mb-2 { margin-bottom: 0.5rem; }
267
- .mt-4 { margin-top: 1rem; }
268
- .h-9 { height: 2.25rem; }
269
- .h-8 { height: 2rem; }
270
- .h-10 { height: 2.5rem; }
271
- .h-12 { height: 3rem; }
272
- .min-h-screen { min-height: 100vh; }
273
- .inline-flex { display: inline-flex; }
274
- .flex { display: flex; }
275
- .items-center { align-items: center; }
276
- .justify-center { justify-content: center; }
277
- .flex-wrap { flex-wrap: wrap; }
278
- .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
279
- .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
280
- .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
281
- .text-2xl { font-size: 1.5rem; line-height: 2rem; }
282
- .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
283
- .font-medium { font-weight: 500; }
284
- .font-semibold { font-weight: 600; }
285
- .font-bold { font-weight: 700; }
286
- .whitespace-nowrap { white-space: nowrap; }
287
- .shrink-0 { flex-shrink: 0; }
288
- .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
289
- .disabled\:pointer-events-none:disabled { pointer-events: none; }
290
- .disabled\:opacity-50:disabled { opacity: 0.5; }
291
- .outline-none { outline: 2px solid transparent; outline-offset: 2px; }
261
+ .rounded-2xl { border-radius: calc(var(--radius) + 8px) !important; }
262
+ .rounded-full { border-radius: 9999px !important; }
263
+ .rounded-lg { border-radius: var(--radius-lg) !important; }
264
+ .rounded-md { border-radius: var(--radius-md) !important; }
265
+ .rounded-none { border-radius: 0 !important; }
266
+ .rounded-sm { border-radius: var(--radius-sm) !important; }
267
+ .rounded-xl { border-radius: var(--radius-xl) !important; }
292
268
  }
293
269
 
294
270
  @layer components {