@sarunyu/system-one 4.9.13 → 4.9.22

package/llms.txt

@@ -149,7 +149,7 @@ import {
   Table, TableRow, TableHeaderCell, TableCell,
   // Feedback
   Alert,
-  Toast, ToastStack,
+  Toast, Toaster,
   Notification,
   Badge,
   // Overlay
@@ -751,36 +751,42 @@ 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`.
 
 ---
 
-### Toast / ToastStack
+### Toast / Toaster
 
-Transient floating feedback — appears at screen edges, dismissed manually or auto-closes. Place in a `fixed` portal; use `ToastStack` for a queued list.
+Transient floating feedback. **Always use `Toaster` for queued toasts — it handles fixed positioning (top-right desktop, top-center mobile) and auto-dismiss automatically.**
 
 ```tsx
 type ToastVariant = "default" | "broadcast";
 type ToastStatus  = "information" | "success" | "warning" | "critical";
 
-// Default toast
-<Toast status="success"  message="File uploaded." onClose={dismiss} />
-<Toast status="warning"  message="Low storage — 100 MB remaining." actionLabel="Free up space" onActionClick={open} onClose={dismiss} />
-<Toast status="critical" message="Connection lost. Retrying…" multiline onClose={dismiss} />
+// ✅ Correct — place Toaster once at app root (App.tsx or layout)
+const [toasts, setToasts] = useState<Array<ToastProps & { id: string }>>([]);
+const remove = (id: string) => setToasts(t => t.filter(x => x.id !== id));
+const add = (t: Omit<ToastProps, "onClose"> & { id: string }) =>
+  setToasts(p => [...p, t]);
 
-// Broadcast — system announcement banner (no close button)
-<Toast variant="broadcast" status="information" message="Maintenance window: Saturday 02:00–04:00." />
+<Toaster items={toasts} onRemove={remove} />  // fixed-positioned, auto-dismisses after 4s
 
-// Stack — multiple toasts at once
-<div className="fixed bottom-4 right-4 z-50 w-[343px]">
-  <ToastStack items={toasts} />
-</div>
+// Trigger a toast from anywhere:
+add({ id: crypto.randomUUID(), status: "success", message: "Saved." });
+add({ id: crypto.randomUUID(), status: "warning", message: "Low storage.", actionLabel: "Free up", onActionClick: open });
+
+// Broadcast — system-wide banner (no close button, no auto-dismiss)
+<Toast variant="broadcast" status="information" message="Maintenance window: Saturday 02:00–04:00." />
 ```
 
+Props (Toaster): `items`, `onRemove?`, `duration?` (ms, default 4000 — set 0 to disable auto-dismiss), `renderItem?`, `className`.
 Props (Toast): `variant?` (default `"default"`), `status?` (default `"information"`), `message`, `multiline?`, `actionLabel?`, `onActionClick?`, `onClose?`, `className`.
-Props (ToastStack): `items: (ToastProps & { id: string })[]`, `className`, `renderItem?`.
 
 ---
 
@@ -1368,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 */
 }
@@ -1380,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.13",
+  "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": [