npm - @sarunyu/system-one - Versions diffs - 4.9.35 → 4.9.37 - Mend

@sarunyu/system-one 4.9.35 → 4.9.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/AGENTS.md CHANGED Viewed

@@ -90,6 +90,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`,
@@ -117,14 +135,26 @@ utilities (`p-6`, `gap-4`, `max-w-*`, etc.) win over host-written ones.
 ## Dark mode
-Add `.dark` to any ancestor (usually `<html>`). All tokens adapt automatically.
+**Global dark mode** — add `.dark` to `<html>`. All tokens adapt automatically.
+**Section-level dark mode** — add `data-theme="dark"` to any container with a
+dark background. All child components automatically switch to dark tokens.
+Never use `class="dark"` for sections — that resets the entire page theme.
+```tsx
+// ✅ section on a dark background
+<div data-theme="dark" className="bg-bg-brand-primary rounded-2xl p-8">
+  <Button>ติดต่อ Online Service</Button>
+  <p className="text-text-default-primary">สีปรับอัตโนมัติ</p>
+</div>
+```
 ## Theming
 Override CSS custom properties after the stylesheet import.
-**Both `:root` (light) and `.dark` (dark) must be overridden separately** —
-the library hard-codes dark-mode colors in its `.dark` block, so a `:root`-only
-override leaves dark mode unchanged.
+**Both `:root` (light) and `.dark, [data-theme="dark"]` (dark) must be overridden
+separately** — the library hard-codes dark-mode colors in its `.dark` block,
+so a `:root`-only override leaves dark mode unchanged.
 ```css
 :root {
@@ -134,7 +164,7 @@ override leaves dark mode unchanged.
   --font-sans: "Inter", sans-serif;
 }
-.dark {
+.dark, [data-theme="dark"] {
   --primary-action: #a78bfa;
   --primary-action-hover: #c4b5fd;
   --primary-action-active: #8b5cf6;

package/DESIGN.md CHANGED Viewed

@@ -236,6 +236,7 @@ Use sparingly. Corporate UIs prefer border separation over heavy elevation.
 | Do | Don't |
 |---|---|
 | Use `bg-background`, `bg-card` for surfaces | Hard-code `#ffffff` or `bg-white` |
+| Use `data-theme="dark"` on dark-background sections | Use `class="dark"` on a section (resets the whole page) |
 | Use `text-foreground` for body text | Use `text-gray-900` or `text-black` |
 | Use `border-border` for dividers | Use `border-gray-200` |
 | Use `rounded` (4px) by default | Use `rounded-xl` or `rounded-2xl` on data elements |

package/dist/index.cjs CHANGED Viewed

@@ -3068,7 +3068,7 @@ function RemovableTag({
               react.X,
               {
                 size: 12,
-                weight: "bold",
+                weight: "regular",
                 color: iconColor,
                 className: "shrink-0"
               }
@@ -3607,7 +3607,7 @@ const DropdownMultiple = React.forwardRef(
                                   react.Check,
                                   {
                                     size: 12,
-                                    weight: "bold",
+                                    weight: "regular",
                                     className: "text-primary-action"
                                   }
                                 )
@@ -4250,7 +4250,7 @@ function ToastCloseButton({
         colorClass
       ),
       onClick: onClose,
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 12, weight: "bold" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 12, weight: "regular" })
     }
   );
 }
@@ -4441,7 +4441,7 @@ const OptionList = React.forwardRef(
                   react.Check,
                   {
                     size: 16,
-                    weight: "bold",
+                    weight: "regular",
                     className: "text-primary-action"
                   }
                 ) })
@@ -4811,7 +4811,7 @@ const Tag = React.forwardRef(function Tag2({
             className: cn(
               "inline-flex items-center justify-center rounded-[2px] transition-colors",
               s.closeButton,
-              !isDisabled && "cursor-pointer hover:bg-black/10"
+              !isDisabled && "cursor-pointer hover:bg-black/10 dark:hover:bg-white/10"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { disabled: isDisabled, className: s.closeIcon })
           }
@@ -4889,7 +4889,7 @@ function StickyShadowEdge({ direction }) {
         "aria-hidden": "true",
         className: "pointer-events-none absolute inset-y-0 left-[-10px] w-2.5",
         style: {
-          background: "linear-gradient(90deg, rgba(16,24,40,0.00) 0%, rgba(16,24,40,0.03) 55%, rgba(16,24,40,0.08) 100%)"
+          background: "linear-gradient(90deg, rgba(var(--scroll-shadow-rgb),0.00) 0%, rgba(var(--scroll-shadow-rgb),0.03) 55%, rgba(var(--scroll-shadow-rgb),0.08) 100%)"
         }
       }
     );
@@ -4900,7 +4900,7 @@ function StickyShadowEdge({ direction }) {
       "aria-hidden": "true",
       className: "pointer-events-none absolute inset-y-0 right-[-10px] w-2.5",
       style: {
-        background: "linear-gradient(90deg, rgba(16,24,40,0.08) 0%, rgba(16,24,40,0.03) 45%, rgba(16,24,40,0.00) 100%)"
+        background: "linear-gradient(90deg, rgba(var(--scroll-shadow-rgb),0.08) 0%, rgba(var(--scroll-shadow-rgb),0.03) 45%, rgba(var(--scroll-shadow-rgb),0.00) 100%)"
       }
     }
   );
@@ -6180,7 +6180,7 @@ function PaginationBanner({
           onClick: () => onIndexChange == null ? void 0 : onIndexChange(i),
           className: cn(
             "h-1.5 rounded-[12px] transition-all duration-200",
-            i === activeIndex ? "w-8 bg-bg-brand" : "w-1.5 bg-black/10 hover:bg-black/20"
+            i === activeIndex ? "w-8 bg-bg-brand" : "w-1.5 bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
           )
         },
         i
@@ -6205,7 +6205,7 @@ function PaginationCarousel({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10",
+          className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10 dark:bg-white/10",
           style: { width: trackWidth },
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",