@sarunyu/system-one 4.9.36 → 4.9.39

package/AGENTS.md

@@ -29,6 +29,10 @@ in this package.** This file is the short version: the rules you must follow.
    - Custom numbered pagination, banner slide dots, or carousel progress bars → use `<Pagination>` / `<PaginationBanner>` / `<PaginationCarousel>`.
    - Custom tooltips, `title` attributes, or hand-rolled hover popovers → use `<Tooltip>`.
    - Custom floating panels triggered by click, hand-rolled popovers with `useState` + absolute positioning → use `<Popover>`.
+   - Custom range inputs / sliders → use `<Slider>`. Never `<input type="range">` with utility classes.
+   - Custom progress bars or circular progress rings → use `<LinearProgress>` / `<CircleProgress>`. Never `<progress>` or hand-rolled SVG rings.
+   - Custom file upload dropzones or upload file rows → use `<UploadArea>` / `<UploadItem>`.
+   - Custom vertical list rows (settings menus, nav lists, data rows with icons) → use `<List>` + `<ListItem>`. Never hand-roll `<ul>` / `<li>` or `<div>` rows for this pattern.
 
 2. **Use token-backed Tailwind classes for color.** Never emit hard-coded colors:
    - Hex (`#3b82f6`), arbitrary (`bg-[#...]`), and palette utilities
@@ -90,6 +94,24 @@ in this package.** This file is the short version: the rules you must follow.
    share one `const body = …` between the two branches. See the `LoginSheet`
    recipe in `llms.txt`.
 
+8. **`<BottomSheet>` MUST use the lazy-mount pattern.** Vaul mounts its portal
+   immediately when `<BottomSheet>` enters the React tree — even with
+   `open={false}`. Always guard with an `everOpened` flag so the component
+   never mounts until the user first opens it.
+   ```tsx
+   // button-triggered
+   const [everOpened, setEverOpened] = useState(false);
+   const [open, setOpen] = useState(false);
+   <Button onClick={() => { setEverOpened(true); setOpen(true); }}>Open</Button>
+   {everOpened && <BottomSheet open={open} onOpenChange={setOpen}>…</BottomSheet>}
+
+   // prop-driven (receiving open from parent)
+   const [everOpened, setEverOpened] = useState(false);
+   useEffect(() => { if (open) setEverOpened(true); }, [open]);
+   if (!everOpened) return null;
+   return <BottomSheet open={open} onOpenChange={…}>…</BottomSheet>;
+   ```
+
 ## Setup check
 
 Required one-liner in the app entry (App Router: `app/layout.tsx`,

package/DESIGN.md

@@ -249,9 +249,9 @@ Use sparingly. Corporate UIs prefer border separation over heavy elevation.
 
 ## Component library
 
-This design system ships 30 pre-built components. **Always use them — never recreate with raw HTML.**
+This design system ships 35 pre-built components. **Always use them — never recreate with raw HTML.**
 
-Key components: `Button`, `Input`, `TextArea`, `SearchInput`, `Dropdown`, `DropdownMultiple`, `Checkbox`, `Radio`, `Toggle`, `DateInput`, `TimeInput`, `Avatar`, `AvatarStack`, `Breadcrumb`, `Pagination`, `PaginationBanner`, `PaginationCarousel`, `Tag`, `StatusTag`, `Chip`, `TabGroup`, `Card`, `Table` + `TableRow` + `TableHeaderCell` + `TableCell`, `Modal`, `BottomSheet`, `Alert`, `Toast`, `ToastStack`, `Notification`, `Badge`, `Tooltip`, `Popover`.
+Key components: `Button`, `Input`, `TextArea`, `SearchInput`, `Dropdown`, `DropdownMultiple`, `Checkbox`, `Radio`, `Toggle`, `DateInput`, `TimeInput`, `Avatar`, `AvatarStack`, `Breadcrumb`, `Pagination`, `PaginationBanner`, `PaginationCarousel`, `Tag`, `StatusTag`, `Chip`, `TabGroup`, `Card`, `Table` + `TableRow` + `TableHeaderCell` + `TableCell`, `Modal`, `BottomSheet`, `Alert`, `Toast`, `ToastStack`, `Notification`, `Badge`, `Tooltip`, `Popover`, `Slider`, `LinearProgress`, `CircleProgress`, `UploadArea`, `UploadItem`, `List` + `ListItem`.
 
 For props, variants, and usage rules → read `AGENTS.md` and `llms.txt` in this package.