@sarunyu/system-one 4.9.6 → 4.9.8

package/llms.txt

@@ -330,15 +330,13 @@ Single-select dropdown.
   options={[
     { label: "Option A", value: "a" },
     { label: "Option B", value: "b" },
-    { label: "Disabled", value: "c", disabled: true },
   ]}
   value={selected}
   onChange={setSelected}
 />
 ```
 
-Props: `placeholder`, `options: { label, value, disabled? }[]`, `value`, `onChange(value)`,
-`disabled`, `className`.
+Props: `placeholder`, `label`, `required`, `forceState` (`"default"` | `"focus"` | `"error"` | `"disabled"`), `errorMessage`, `helperText`, `options: { label, value }[]`, `value`, `onChange(value)`, `className`. To disable, pass `forceState="disabled"` — there is no top-level `disabled` prop.
 
 ### DropdownMultiple
 
@@ -348,24 +346,24 @@ Multi-select dropdown with checkboxes.
 <DropdownMultiple
   placeholder="Select tags"
   options={tagOptions}
-  values={selected}
+  value={selected}
   onChange={setSelected}
 />
 ```
 
-Props: `placeholder`, `options`, `values: string[]`, `onChange(values)`, `disabled`, `className`.
+Props: `placeholder`, `label`, `required`, `forceState`, `errorMessage`, `helperText`, `options`, `value: string[]`, `onChange(value: string[])`, `className`. The controlled prop is `value` (not `values`). To disable, use `forceState="disabled"`.
 
 ---
 
 ### Checkbox
 
 ```tsx
-<Checkbox checked={agreed} onCheckedChange={setAgreed} label="I agree to the terms" />
-<Checkbox checked="indeterminate" onCheckedChange={setAll} label="Select all" />
-<Checkbox checked={sub} onCheckedChange={setSub} label="Subscribe" disabled />
+<Checkbox checked={agreed} onChange={setAgreed} label="I agree to the terms" />
+<Checkbox checked="indeterminate" onChange={setAll} label="Select all" />
+<Checkbox checked={sub} onChange={setSub} label="Subscribe" disabled />
 ```
 
-`checked` is `boolean | "indeterminate"`. Always provide `label` — don't wrap Checkbox in a `<label>`.
+`checked` is `boolean | "indeterminate"`. `onChange` receives a boolean (`(next: boolean) => void`) — NOT an event, NOT `onCheckedChange`. Always provide `label` — don't wrap Checkbox in a `<label>`.
 
 ### Toggle
 
@@ -395,11 +393,13 @@ Render a group — use `name` to bind siblings.
 
 ```tsx
 <div className="flex flex-col gap-2">
-  <Radio name="plan" value="free" checked={plan === "free"} onChange={setPlan} label="Free" />
-  <Radio name="plan" value="pro"  checked={plan === "pro"}  onChange={setPlan} label="Pro" />
+  <Radio name="plan" value="free" checked={plan === "free"} onChange={() => setPlan("free")} label="Free" />
+  <Radio name="plan" value="pro"  checked={plan === "pro"}  onChange={() => setPlan("pro")}  label="Pro" />
 </div>
 ```
 
+`onChange` receives a boolean (`(next: boolean) => void`) — fires with `true` when the radio becomes selected. To track which value was picked, ignore the arg and set the value directly: `onChange={() => setPlan("pro")}`.
+
 ---
 
 ### Tag
@@ -412,11 +412,13 @@ type TagVariant = "blue" | "green" | "yellow" | "red" | "gray" | "lime";
 
 <Tag text="Active" variant="green" />
 <Tag text="Draft" variant="yellow" />
-<Tag text="Filter: Design" close onClose={remove} />
+<Tag text="Filter: Design" close />
 <Tag text="Small" variant="blue" size="small" />
 ```
 
-Props: `text`, `variant`, `size` (`"large"` default | `"small"`), `close`, `onClose`, `className`.
+Props: `text`, `variant`, `size` (`"large"` default | `"small"`), `state` (`"default"` | `"hover"` | `"disabled"`), `icon` (boolean — leading dot), `close` (boolean — visual × button only), `className`.
+
+**Note** — `close` is purely visual; the Tag does not handle dismiss. To make a removable tag, wrap it in a clickable parent (`<button onClick={remove}><Tag close text="…" /></button>`) or use `<DropdownMultiple>`'s built-in removable chips.
 
 ### StatusTag
 
@@ -674,15 +676,33 @@ Props:
 
 ### DateInput / TimeInput
 
+Modes: `"single"` (default) | `"range"`. There is **no `"multiple"` mode**.
+
+Each mode uses different value props — single mode uses `value` + `onChange`, range mode uses `dateRange` + `onRangeChange` (or `startTime`/`endTime` + `onStartChange`/`onEndChange` for TimeInput).
+
 ```tsx
+// DateInput — single
 <DateInput placeholder="Select date" mode="single" value={date} onChange={setDate} />
-<DateInput mode="range"    value={range} onChange={setRange} />
-<DateInput mode="multiple" value={dates} onChange={setDates} />
 
+// DateInput — range (different prop names!)
+<DateInput mode="range" dateRange={range} onRangeChange={setRange} />
+
+// TimeInput — single
 <TimeInput placeholder="Start time" value={time} onChange={setTime} />
-<TimeInput mode="range" value={timeRange} onChange={setTimeRange} />
+
+// TimeInput — range (different prop names!)
+<TimeInput
+  mode="range"
+  startTime={start}
+  endTime={end}
+  onStartChange={setStart}
+  onEndChange={setEnd}
+/>
 ```
 
+DateInput types: `value: Date | undefined`, `dateRange: DateRange` (re-exported from react-day-picker — `{ from?: Date; to?: Date }`).
+TimeInput types: `value: TimeValue` where `TimeValue = { hour: 0–23, minute: 0–59 }`.
+
 Always format `"DD MMM YYYY"` for display (system format). Don't mix Thai month names with C.E. year.
 
 ### OptionList
@@ -825,13 +845,23 @@ Centered overlay surface for confirmations, richer content, or status alerts.
 Caller owns open/close state and supplies the backdrop — `<Modal>` only renders
 the dialog panel.
 
+**CRITICAL — choose the correct variant before writing any code:**
+
+| Variant | Use when | Has children? |
+|---|---|---|
+| `"dialog"` | Simple confirmation: title + description text + up to 2 buttons. NO custom UI. | No |
+| `"content"` | Any modal with custom content: filters, forms, inputs, lists, date pickers, etc. | Yes — required |
+| `"alert"` | Status moments only: success / warning / danger with icon. | No |
+
+**Rule: if the modal contains ANYTHING other than a title + plain description text → use `variant="content"` and pass the body as `children`. Never use `variant="dialog"` with custom UI inside.**
+
 ```tsx
 type ModalVariant      = "dialog" | "content" | "alert";
 type ModalActionLayout = "none" | "single" | "double";
 type ModalResponsive   = "mobile" | "desktop";
 type ModalAlertStatus  = "warning" | "success" | "danger";
 
-// Dialog — short confirmation (title + text + up to 2 buttons)
+// Dialog — ONLY for title + plain text + buttons. No custom children.
 <Modal
   variant="dialog"
   actionLayout="double"
@@ -844,7 +874,24 @@ type ModalAlertStatus  = "warning" | "success" | "danger";
   onClose={close}
 />
 
-// Content — custom body (pass children)
+// Content — filters, forms, inputs, any custom UI. Always pass children.
+<Modal
+  variant="content"
+  actionLayout="double"
+  title="Filters"
+  primaryLabel="Apply"
+  secondaryLabel="Reset"
+  onPrimaryClick={apply}
+  onSecondaryClick={reset}
+  onClose={close}
+>
+  <div className="flex flex-col gap-4">
+    <Dropdown placeholder="Category" ... />
+    <DateInput mode="range" ... />
+  </div>
+</Modal>
+
+// Content desktop — right-aligns action buttons
 <Modal variant="content" actionLayout="single" responsive="desktop" title="Edit profile" onClose={close}>
   <Input placeholder="Name" value={name} onChange={setName} />
 </Modal>
@@ -866,7 +913,9 @@ type ModalAlertStatus  = "warning" | "success" | "danger";
 ```tsx
 {open ? (
   <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-    <Modal variant="dialog" actionLayout="double" onClose={close} {...rest} />
+    <Modal variant="content" title="Filters" actionLayout="double" onClose={close}>
+      {/* your content */}
+    </Modal>
   </div>
 ) : null}
 ```
@@ -987,7 +1036,7 @@ export function LoginSheet({
     <div className="flex flex-col gap-4">
       <Input placeholder="Email"    value={email} onChange={setEmail} required />
       <Input placeholder="Password" value={pw}    onChange={setPw}    type="password" required />
-      <Checkbox checked={remember} onCheckedChange={setRmb} label="Remember me" />
+      <Checkbox checked={remember} onChange={setRmb} label="Remember me" />
       <Button variant="primary" size="xl" className="w-full" onClick={() => onOpenChange(false)}>
         Sign in
       </Button>
@@ -1109,7 +1158,7 @@ export function LoginPage() {
         <div className="flex flex-col gap-4">
           <Input placeholder="Email" type="email" value={email} onChange={setEmail} required />
           <Input placeholder="Password" type="password" value={pw} onChange={setPw} required />
-          <Checkbox checked={remember} onCheckedChange={setRmb} label="Remember me" />
+          <Checkbox checked={remember} onChange={setRmb} label="Remember me" />
         </div>
         <Button variant="primary" size="lg" className="w-full">Sign in</Button>
         <p className="text-center text-sm text-muted-foreground">
@@ -1199,7 +1248,7 @@ export function SettingsPage() {
         <DropdownMultiple
           placeholder="Interests"
           options={interests}
-          values={picked}
+          value={picked}
           onChange={setPicked}
         />
         <DateInput placeholder="Birthday" mode="single" value={dob} onChange={setDob} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.9.6",
+  "version": "4.9.8",
   "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": [