@mast-ai/react-ui 0.1.2 → 0.3.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.
@@ -0,0 +1,55 @@
1
+ /*
2
+ * @mast-ai/react-ui — Tailwind / shadcn theme preset
3
+ *
4
+ * Maps every --mast-* token onto the standard shadcn HSL CSS variables
5
+ * (--background, --foreground, --primary, --muted, --border, --destructive,
6
+ * etc.) so library components inherit the consuming app's theme.
7
+ *
8
+ * Usage:
9
+ * import '@mast-ai/react-ui/styles.css';
10
+ * import '@mast-ai/react-ui/themes/tailwind-shadcn.css';
11
+ *
12
+ * The shadcn variables must be raw HSL triples (e.g. --background: 0 0% 100%)
13
+ * for hsl(var(--background)) to evaluate correctly. This is the default for
14
+ * shadcn projects scaffolded with `shadcn-ui add`. Tailwind v4 / shadcn v4
15
+ * setups that store full color() values should drop the hsl() wrapper.
16
+ *
17
+ * Two non-obvious tricks this preset relies on:
18
+ *
19
+ * 1. Listing all three selectors with equal specificity so source order
20
+ * tie-breaks in the consumer's favor. A bare [data-mast-root] block loses
21
+ * to the library's [data-mast-root][data-mast-theme='dark'] block in dark
22
+ * mode and the dark theme would keep the library's hardcoded colors.
23
+ *
24
+ * 2. Setting data-mast-theme={theme} on the panel root in your app keeps the
25
+ * library's dark detection in sync with shadcn's class-based dark mode
26
+ * (.dark on <html>). Without it, the library follows OS preference and
27
+ * can mismatch the app theme.
28
+ *
29
+ * See docs/react-ui/USAGE.md §5 for the full integration guide.
30
+ */
31
+
32
+ [data-mast-root],
33
+ [data-mast-root][data-mast-theme='dark'],
34
+ [data-mast-root][data-mast-theme='light'] {
35
+ --mast-bg: hsl(var(--background));
36
+ --mast-bg-subtle: hsl(var(--muted) / 0.2);
37
+ --mast-fg: hsl(var(--foreground));
38
+ --mast-fg-muted: hsl(var(--muted-foreground));
39
+ --mast-border: hsl(var(--border));
40
+ --mast-accent: hsl(var(--primary));
41
+ --mast-accent-fg: hsl(var(--primary-foreground));
42
+ --mast-thinking-bg: hsl(var(--muted));
43
+ --mast-thinking-fg: hsl(var(--muted-foreground));
44
+ --mast-tool-bg: hsl(var(--muted) / 0.4);
45
+ --mast-tool-fg: hsl(var(--muted-foreground));
46
+ --mast-tool-pending: hsl(var(--primary));
47
+ --mast-tool-error-bg: hsl(var(--destructive) / 0.1);
48
+ --mast-tool-error-fg: hsl(var(--destructive));
49
+ --mast-tool-cancelled-bg: hsl(var(--muted));
50
+ --mast-tool-cancelled-fg: hsl(var(--muted-foreground));
51
+ --mast-user-bubble: hsl(var(--primary));
52
+ --mast-user-fg: hsl(var(--primary-foreground));
53
+ --mast-mention-chip-bg: hsl(var(--primary) / 0.1);
54
+ --mast-mention-chip-fg: hsl(var(--primary));
55
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mast-ai/react-ui",
3
- "version": "0.1.2",
3
+ "version": "0.3.0",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -10,7 +10,8 @@
10
10
  "import": "./dist/index.js",
11
11
  "types": "./dist/index.d.ts"
12
12
  },
13
- "./styles.css": "./dist/styles.css"
13
+ "./styles.css": "./dist/styles.css",
14
+ "./themes/tailwind-shadcn.css": "./dist/themes/tailwind-shadcn.css"
14
15
  },
15
16
  "files": [
16
17
  "dist"
@@ -34,7 +35,7 @@
34
35
  "format": "prettier --write src"
35
36
  },
36
37
  "peerDependencies": {
37
- "@mast-ai/core": "^0.1.2",
38
+ "@mast-ai/core": "^0.3.0",
38
39
  "@tanstack/react-virtual": ">=3.0.0",
39
40
  "react": ">=19.0.0",
40
41
  "react-dom": ">=19.0.0"