@datum-cloud/datum-ui 0.2.0-alpha.6 → 0.2.0-alpha.8

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.
package/README.md CHANGED
@@ -14,6 +14,11 @@ pnpm add @datum-cloud/datum-ui
14
14
  bun add @datum-cloud/datum-ui
15
15
  ```
16
16
 
17
+ ## Requirements
18
+
19
+ - **React 19**
20
+ - **Tailwind CSS v4.0.7+** (v4.2.1+ recommended)
21
+
17
22
  ## Setup
18
23
 
19
24
  ### 1. Import Styles
@@ -24,9 +29,13 @@ Add datum-ui styles to your CSS file, after Tailwind:
24
29
  /* app.css */
25
30
  @import 'tailwindcss';
26
31
  @import '@datum-cloud/datum-ui/styles';
32
+
33
+ /* Optional — import only if you use these components */
34
+ @import '@datum-cloud/datum-ui/grid';
35
+ @import '@datum-cloud/datum-ui/nprogress';
27
36
  ```
28
37
 
29
- This loads all design tokens, theme variables, fonts, and component styles. Tokens are registered with Tailwind via `@theme inline`, so utilities like `bg-primary` and `text-foreground` work automatically.
38
+ datum-ui ships uncompiled CSS that is processed by your Tailwind build in a single pass. The styles import automatically configures Tailwind to scan datum-ui's components for class usage via `@source`, so utilities like `bg-primary` and `text-foreground` work out of the box.
30
39
 
31
40
  ### 2. Add ThemeProvider
32
41
 
@@ -58,14 +67,16 @@ This keeps your bundle small and means you only install peer dependencies for th
58
67
 
59
68
  ### Shared Exports
60
69
 
61
- | Import Path | Description |
62
- | ------------------------------ | ------------------------------------------------------ |
63
- | `@datum-cloud/datum-ui` | Root barrel — all components (requires all peer deps) |
64
- | `@datum-cloud/datum-ui/styles` | CSS (fonts, tokens, theme variables, component styles) |
65
- | `@datum-cloud/datum-ui/theme` | Theme utilities and types |
66
- | `@datum-cloud/datum-ui/hooks` | `useCopyToClipboard`, `useDebounce` |
67
- | `@datum-cloud/datum-ui/icons` | `CloseIcon`, `IconWrapper`, `SpinnerIcon` |
68
- | `@datum-cloud/datum-ui/utils` | `cn` (className merge utility) |
70
+ | Import Path | Description |
71
+ | --------------------------------- | -------------------------------------------------------------- |
72
+ | `@datum-cloud/datum-ui` | Root barrel — all components (requires all peer deps) |
73
+ | `@datum-cloud/datum-ui/styles` | Core CSS (fonts, tokens, theme variables, component styles) |
74
+ | `@datum-cloud/datum-ui/grid` | Grid system CSS (optional — import if using Grid component) |
75
+ | `@datum-cloud/datum-ui/nprogress` | NProgress CSS (optional — import if using NProgress component) |
76
+ | `@datum-cloud/datum-ui/theme` | Theme utilities and types |
77
+ | `@datum-cloud/datum-ui/hooks` | `useCopyToClipboard`, `useDebounce` |
78
+ | `@datum-cloud/datum-ui/icons` | `CloseIcon`, `IconWrapper`, `SpinnerIcon` |
79
+ | `@datum-cloud/datum-ui/utils` | `cn` (className merge utility) |
69
80
 
70
81
  ### Grouped Exports
71
82
 
@@ -330,7 +341,7 @@ npm install motion
330
341
  ## Tech Stack
331
342
 
332
343
  - **React 19** with server component support
333
- - **Tailwind CSS v4** for styling
344
+ - **Tailwind CSS v4** (v4.0.7+) for styling — ships uncompiled CSS processed by consumer's build
334
345
  - **Radix UI** for accessible primitives
335
346
  - **CVA** (class-variance-authority) for variant-based component APIs
336
347
  - **TypeScript** — fully typed with exported types