@sarunyu/system-one 4.9.35 → 4.9.37

package/llms.txt

@@ -20,7 +20,7 @@ that uses this library. The rules are non-negotiable.
 4. **Use `@phosphor-icons/react` for all icons.** Never import from `lucide-react`
    or any other icon library. Install with `npm install @phosphor-icons/react`.
    Import named icons: `import { House, MagnifyingGlass, CaretDown } from "@phosphor-icons/react"`.
-   Every icon accepts `size`, `weight` (`"regular"` | `"bold"` | `"fill"` | `"duotone"` | `"light"` | `"thin"`), and `className` props.
+   Every icon accepts `size`, `weight` (`"regular"` | `"fill"` — no other weights), and `className` props.
 5. **No arbitrary bracket values for spacing / sizing / typography.**
    Use scale utilities, not pixel overrides. The library's shipped stylesheet
    only contains scale utilities + a fixed list of safelisted container widths,
@@ -41,6 +41,17 @@ that uses this library. The rules are non-negotiable.
    + Tailwind utilities (flex, grid, container, max-w-*, gap-*, p-*, mx-auto).
    The library does NOT ship layout primitives. Do not import `Page`, `Section`,
    `Stack`, `CardGrid`, `Toolbar` — they don't exist.
+7. **Dark sections use `data-theme="dark"`.** When a section has a dark background
+   (e.g. brand blue, charcoal, black), wrap it with `data-theme="dark"` — all
+   child components automatically switch to their dark-mode tokens. No props, no
+   variants needed.
+   ```tsx
+   <div data-theme="dark" className="bg-bg-brand-primary rounded-2xl p-8">
+     <Button>ติดต่อ Online Service</Button>
+     <p className="text-text-default-primary">อัตโนมัติ สีตาม token dark</p>
+   </div>
+   ```
+   Never use `class="dark"` for section-level theming — that resets the global theme.
 
 ---
 
@@ -1113,6 +1124,24 @@ type BottomSheetRightSide  = "icon" | "action" | "none";
 - `rightSide="action"` — inline text button (e.g., "Save"), fires `onActionClick`.
 - `rightSide="none"` — nothing on the right.
 
+**CRITICAL — lazy-mount pattern (always required):** Vaul mounts its portal
+immediately when `<BottomSheet>` enters the React tree, even with `open={false}`.
+Always guard with an `everOpened` flag so it never mounts until first opened.
+
+```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 (open comes from parent)
+const [everOpened, setEverOpened] = useState(false);
+useEffect(() => { if (open) setEverOpened(true); }, [open]);
+if (!everOpened) return null;
+return <BottomSheet open={open} onOpenChange={…}>…</BottomSheet>;
+```
+
 `showHandle` (default `true`) shows the grab handle at the top. Hide it only
 when you want a fully formal surface. Do not render a `<BottomSheet>` on desktop
 layouts — use `<Modal>` instead.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.9.35",
+  "version": "4.9.37",
   "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": [
@@ -51,6 +51,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && tailwindcss --input src/styles/globals.css --output dist/style.css --minify && node scripts/strip-layers.mjs",
+    "lint": "eslint src",
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
@@ -103,6 +104,7 @@
     "cmdk": "1.1.1",
     "date-fns": "3.6.0",
     "embla-carousel-react": "8.6.0",
+    "eslint": "^10.3.0",
     "input-otp": "1.4.2",
     "motion": "12.23.24",
     "next-themes": "0.4.6",
@@ -121,6 +123,7 @@
     "tailwindcss": "4.1.12",
     "tw-animate-css": "1.3.8",
     "typescript": "^6.0.2",
+    "typescript-eslint": "^8.59.2",
     "vite": "^6.4.2",
     "vite-plugin-dts": "^4.5.4"
   },