npm - @sarunyu/system-one - Versions diffs - 4.9.34 → 4.9.36 - Mend

@sarunyu/system-one 4.9.34 → 4.9.36

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 (11) hide show

package/AGENTS.md CHANGED Viewed

@@ -117,14 +117,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 +146,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%)"
       }
     }
   );
@@ -6158,6 +6158,207 @@ function Breadcrumb({ items, className }) {
     ] }, index2);
   }) });
 }
+function PaginationBanner({
+  count: count2,
+  activeIndex,
+  onIndexChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-1", className),
+      role: "tablist",
+      "aria-label": "Slide indicators",
+      children: Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": i === activeIndex,
+          "aria-label": `Slide ${i + 1}`,
+          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 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
+          )
+        },
+        i
+      ))
+    }
+  );
+}
+function PaginationCarousel({
+  progress,
+  trackWidth = 40,
+  className
+}) {
+  const clamped = Math.min(1, Math.max(0, progress));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center", className),
+      role: "progressbar",
+      "aria-valuenow": Math.round(clamped * 100),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10 dark:bg-white/10",
+          style: { width: trackWidth },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute left-0 top-0 h-full rounded-[12px] bg-bg-brand transition-all duration-200",
+              style: { width: Math.round(clamped * trackWidth) }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function buildPageItems(total) {
+  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);
+  return [1, 2, 3, "...", total];
+}
+function buildHiddenPages(total) {
+  if (total <= 5) return [];
+  return Array.from({ length: total - 4 }, (_, i) => i + 4);
+}
+function Pagination({
+  totalPages,
+  currentPage,
+  onPageChange,
+  className
+}) {
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const ellipsisRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!dropdownOpen) return;
+    function handleOutside(e) {
+      var _a;
+      if (!((_a = containerRef.current) == null ? void 0 : _a.contains(e.target))) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [dropdownOpen]);
+  const pageItems = buildPageItems(totalPages);
+  const hiddenPages = buildHiddenPages(totalPages);
+  const goTo = (page) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange == null ? void 0 : onPageChange(page);
+      setDropdownOpen(false);
+    }
+  };
+  const cell = "flex h-8 w-[39px] shrink-0 items-center justify-center text-sm leading-5 transition-colors select-none";
+  const divider = "border-l border-border";
+  const ellipsisLeft = ellipsisRef.current ? ellipsisRef.current.offsetLeft + ellipsisRef.current.offsetWidth / 2 : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative inline-flex w-fit", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        "aria-label": "Pagination",
+        className: "inline-flex w-fit overflow-hidden rounded-lg border border-border",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Previous page",
+              disabled: currentPage <= 1,
+              onClick: () => goTo(currentPage - 1),
+              className: cn(
+                cell,
+                "bg-bg-default text-icon-default hover:bg-bg-default-hover disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, weight: "regular" })
+            }
+          ),
+          pageItems.map(
+            (item, idx) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ref: ellipsisRef,
+                type: "button",
+                "aria-label": "More pages",
+                "aria-expanded": dropdownOpen,
+                "aria-haspopup": "listbox",
+                onClick: () => setDropdownOpen((v) => !v),
+                className: cn(
+                  cell,
+                  divider,
+                  "bg-bg-default text-text-default cursor-pointer hover:bg-bg-default-hover"
+                ),
+                children: "..."
+              },
+              `ellipsis-${idx}`
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Page ${item}`,
+                "aria-current": item === currentPage ? "page" : void 0,
+                onClick: () => goTo(item),
+                className: cn(
+                  cell,
+                  divider,
+                  "cursor-pointer",
+                  item === currentPage ? "bg-bg-brand font-bold text-text-default-white" : "bg-bg-default font-normal text-text-default hover:bg-bg-default-hover"
+                ),
+                children: item
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Next page",
+              disabled: currentPage >= totalPages,
+              onClick: () => goTo(currentPage + 1),
+              className: cn(
+                cell,
+                divider,
+                "bg-bg-default text-icon-default hover:bg-bg-default-hover disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, weight: "regular" })
+            }
+          )
+        ]
+      }
+    ),
+    dropdownOpen && hiddenPages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Select page",
+        className: "absolute bottom-full mb-1 z-50 flex w-[39px] flex-col overflow-y-auto rounded-lg border border-border bg-bg-default shadow-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        style: { left: ellipsisLeft, transform: "translateX(-50%)", maxHeight: 160 },
+        children: hiddenPages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": page === currentPage,
+            onClick: () => goTo(page),
+            className: cn(
+              "flex h-8 w-full shrink-0 cursor-pointer items-center justify-center text-sm leading-5 transition-colors select-none",
+              page === currentPage ? "bg-bg-brand font-bold text-text-default-white" : "bg-bg-default font-normal text-text-default hover:bg-bg-default-hover"
+            ),
+            children: page
+          },
+          page
+        ))
+      }
+    )
+  ] });
+}
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -9585,6 +9786,9 @@ const index = {
   Avatar,
   AvatarStack,
   Breadcrumb,
+  Pagination,
+  PaginationBanner,
+  PaginationCarousel,
   Tooltip,
   Popover,
   cn,
@@ -9607,6 +9811,9 @@ exports.Input = Input;
 exports.Modal = Modal;
 exports.Notification = Notification;
 exports.OptionList = OptionList;
+exports.Pagination = Pagination;
+exports.PaginationBanner = PaginationBanner;
+exports.PaginationCarousel = PaginationCarousel;
 exports.Popover = Popover;
 exports.Radio = Radio;
 exports.SearchInput = SearchInput;