@sarunyu/system-one 4.9.18 → 4.9.22

package/llms.txt

@@ -751,9 +751,13 @@ type AlertStatus = "normal" | "information" | "success" | "warning" | "critical"
 <Alert status="warning"     message="Incomplete profile — some features are limited." />
 <Alert status="critical"    message="Authentication failed. Please try again." />
 <Alert status="warning"     message="A longer message that wraps to a second line." multiline />
+
+// With title — for notices, disclaimers, info boxes with a heading
+<Alert status="normal"   title="คำเตือนความเสี่ยง" message="การลงทุนมีความเสี่ยง ผู้ลงทุนควรศึกษาข้อมูลก่อนตัดสินใจลงทุน" multiline />
+<Alert status="warning"  title="ข้อมูลสำคัญ"       message="บัญชีของคุณจะถูกระงับหากไม่ยืนยันภายใน 7 วัน" />
 ```
 
-Props: `status?` (default `"normal"`), `message` (required), `multiline?` (default `false` — `false` truncates to one line, `true` clamps to 2 lines), `className`.
+Props: `status?` (default `"normal"`), `title?` (bold header line above message), `message` (required), `multiline?` (default `false` — `false` truncates to one line, `true` clamps to 2 lines), `className`.
 
 ---
 
@@ -1370,8 +1374,9 @@ defaults live in `tokens/color.json` (P1 blue). Replace with your own values.
   --primary-action: #7c3aed;        /* your brand 600 */
   --primary-action-hover: #6d28d9;  /* your brand 700 */
   --primary-action-active: #5b21b6; /* your brand 800 */
-  /* -light / -muted derive from --primary-action via color-mix(), so they
-     cascade automatically in :root. No need to override them here. */
+  /* Use rgb(r g b / alpha%) — NOT color-mix() which is unsupported in some renderers */
+  --primary-action-light: rgb(124 58 237 / 6%);
+  --primary-action-muted: rgb(124 58 237 / 10%);
 
   --font-sans: "Inter", sans-serif;  /* replace default Noto Sans Thai */
 }
@@ -1382,8 +1387,8 @@ defaults live in `tokens/color.json` (P1 blue). Replace with your own values.
   --primary-action: #a78bfa;        /* your brand 400 */
   --primary-action-hover: #c4b5fd;  /* your brand 300 */
   --primary-action-active: #8b5cf6; /* your brand 500 */
-  --primary-action-light: color-mix(in srgb, #a78bfa 10%, transparent);
-  --primary-action-muted: color-mix(in srgb, #a78bfa 15%, transparent);
+  --primary-action-light: rgb(167 139 250 / 10%);
+  --primary-action-muted: rgb(167 139 250 / 15%);
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.9.18",
+  "version": "4.9.22",
   "type": "module",
   "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
   "keywords": [