@sarunyu/system-one 4.9.39 → 4.9.40

package/dist/index.cjs

@@ -6011,7 +6011,7 @@ const avatarPlaceholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAB
 const TEXT_GRADIENT = "linear-gradient(to top right, #B5D3F8, #E6F6FB)";
 const TEXT_COLOR = "#00A2D9";
 const SIZE_CONFIG$1 = {
-  xxs: { container: "size-4", fontSize: "text-[11px]", dotSize: "size-[5px]", dotRing: "ring-[1.5px]" },
+  xxs: { container: "size-4", fontSize: "text-[11px]", dotSize: "size-1", dotRing: "ring-[1.5px]" },
   xs: { container: "size-5", fontSize: "text-sm", dotSize: "size-[5px]", dotRing: "ring-[1.5px]" },
   s: { container: "size-6", fontSize: "text-base", dotSize: "size-[6px]", dotRing: "ring-[1.5px]" },
   m: { container: "size-8", fontSize: "text-xl", dotSize: "size-[7px]", dotRing: "ring-2" },
@@ -6068,7 +6068,7 @@ function Avatar({
         )
       }
     ),
-    status && type === "photo" && /* @__PURE__ */ jsxRuntime.jsx(
+    status && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         "aria-label": "Online",
@@ -6189,33 +6189,71 @@ function PaginationBanner({
   );
 }
 function PaginationCarousel({
-  progress,
-  trackWidth = 40,
+  count: count2,
+  activeIndex,
+  viewRatio,
+  scrollProgress,
+  onIndexChange,
   className
 }) {
-  const clamped = Math.min(1, Math.max(0, progress));
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const clampedCount = Math.max(1, count2);
+  const clampedIndex = Math.min(clampedCount - 1, Math.max(0, activeIndex));
+  const trackWidth = 40;
+  const pillWidth = Math.max(4, Math.round(trackWidth * (viewRatio ?? 1 / clampedCount)));
+  const maxSlide = trackWidth - pillWidth;
+  const pillLeft = scrollProgress !== void 0 ? Math.round(scrollProgress * maxSlide) : clampedCount > 1 ? Math.round(clampedIndex / (clampedCount - 1) * maxSlide) : 0;
+  const goTo = (index2) => {
+    const next = Math.min(clampedCount - 1, Math.max(0, index2));
+    if (next !== clampedIndex) onIndexChange == null ? void 0 : onIndexChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "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) }
-            }
-          )
-        }
-      )
+      className: cn("flex items-center gap-2", className),
+      role: "group",
+      "aria-label": "Carousel pagination",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous slide",
+            onClick: () => goTo(clampedIndex - 1),
+            disabled: clampedIndex <= 0,
+            className: "inline-flex h-6 w-6 items-center justify-center rounded-md text-icon-default transition-colors hover:bg-bg-default-hover disabled:cursor-not-allowed disabled:opacity-40",
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, weight: "regular" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10 dark:bg-white/10",
+            style: { width: trackWidth },
+            role: "progressbar",
+            "aria-valuenow": clampedIndex + 1,
+            "aria-valuemin": 1,
+            "aria-valuemax": clampedCount,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute top-0 h-full rounded-[12px] bg-bg-brand transition-all duration-200",
+                style: { width: pillWidth, left: pillLeft }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next slide",
+            onClick: () => goTo(clampedIndex + 1),
+            disabled: clampedIndex >= clampedCount - 1,
+            className: "inline-flex h-6 w-6 items-center justify-center rounded-md text-icon-default transition-colors hover:bg-bg-default-hover disabled:cursor-not-allowed disabled:opacity-40",
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, weight: "regular" })
+          }
+        )
+      ]
     }
   );
 }
@@ -6255,7 +6293,8 @@ function Pagination({
       setDropdownOpen(false);
     }
   };
-  const cell = "flex h-8 w-[39px] shrink-0 items-center justify-center text-sm leading-5 transition-colors select-none";
+  const cellPage = "box-border flex h-full min-h-0 shrink-0 items-center justify-center px-4 py-1 text-sm font-normal leading-5 text-text-default transition-colors select-none";
+  const cellNav = "box-border inline-flex h-full min-h-0 w-[39px] shrink-0 items-center justify-center p-0 leading-none text-icon-default transition-colors select-none [&_svg]:block [&_svg]:shrink-0";
   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: [
@@ -6263,7 +6302,7 @@ function Pagination({
       "nav",
       {
         "aria-label": "Pagination",
-        className: "inline-flex w-fit overflow-hidden rounded-lg border border-border",
+        className: "box-border inline-flex h-8 w-fit items-stretch overflow-hidden rounded-lg border border-border",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -6273,8 +6312,8 @@ function Pagination({
               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"
+                cellNav,
+                "bg-bg-default hover:bg-bg-default-hover disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, weight: "regular" })
             }
@@ -6290,9 +6329,9 @@ function Pagination({
                 "aria-haspopup": "listbox",
                 onClick: () => setDropdownOpen((v) => !v),
                 className: cn(
-                  cell,
+                  cellPage,
                   divider,
-                  "bg-bg-default text-text-default cursor-pointer hover:bg-bg-default-hover"
+                  "bg-bg-default cursor-pointer hover:bg-bg-default-hover"
                 ),
                 children: "..."
               },
@@ -6305,10 +6344,10 @@ function Pagination({
                 "aria-current": item === currentPage ? "page" : void 0,
                 onClick: () => goTo(item),
                 className: cn(
-                  cell,
+                  cellPage,
                   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"
+                  item === currentPage ? "bg-bg-default font-bold text-text-brand hover:bg-bg-default-hover" : "bg-bg-default hover:bg-bg-default-hover"
                 ),
                 children: item
               },
@@ -6323,9 +6362,9 @@ function Pagination({
               disabled: currentPage >= totalPages,
               onClick: () => goTo(currentPage + 1),
               className: cn(
-                cell,
+                cellNav,
                 divider,
-                "bg-bg-default text-icon-default hover:bg-bg-default-hover disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                "bg-bg-default hover:bg-bg-default-hover disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, weight: "regular" })
             }
@@ -6338,7 +6377,7 @@ function Pagination({
       {
         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",
+        className: "absolute bottom-full z-50 mb-1 flex min-w-[39px] w-max 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",
@@ -6348,8 +6387,8 @@ function Pagination({
             "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"
+              "box-border flex h-8 w-full min-w-full shrink-0 cursor-pointer items-center justify-center px-4 py-1 text-sm leading-5 transition-colors select-none",
+              page === currentPage ? "bg-bg-default font-bold text-text-brand hover:bg-bg-default-hover" : "bg-bg-default font-normal text-text-default hover:bg-bg-default-hover"
             ),
             children: page
           },
@@ -9766,13 +9805,14 @@ function clamp(v, lo, hi) {
 function snapToStep(raw, min2, max2, step) {
   return clamp(Math.round((raw - min2) / step) * step + min2, min2, max2);
 }
-function pctToValue(pct, min2, max2, step) {
-  return snapToStep(min2 + pct / 100 * (max2 - min2), min2, max2, step);
-}
 function valueToPct(value, min2, max2) {
   if (max2 <= min2) return 0;
   return clamp((value - min2) / (max2 - min2) * 100, 0, 100);
 }
+function getStepLabels(min2, max2, step) {
+  const n = step > 0 ? Math.round((max2 - min2) / step) : 0;
+  return n > 0 && n <= 10 ? Array.from({ length: n + 1 }, (_, i) => clamp(min2 + i * step, min2, max2)) : [0, 0.25, 0.5, 0.75, 1].map((f) => Math.round(min2 + (max2 - min2) * f));
+}
 const Slider = React.forwardRef(function Slider2({
   size: size2 = "md",
   type = "single",
@@ -9803,15 +9843,19 @@ const Slider = React.forwardRef(function Slider2({
   const isSingle = type === "single";
   const value = valueProp !== void 0 ? valueProp : internalValue;
   const range = rangeProp !== void 0 ? rangeProp : internalRange;
+  const stepLabels = React.useMemo(() => getStepLabels(min2, max2, step), [min2, max2, step]);
   const getValueFromClientX = React.useCallback(
     (clientX) => {
       const track = trackRef.current;
       if (!track) return min2;
       const { left, width } = track.getBoundingClientRect();
-      const pct = clamp((clientX - left) / width * 100, 0, 100);
-      return pctToValue(pct, min2, max2, step);
+      const raw = min2 + clamp((clientX - left) / width, 0, 1) * (max2 - min2);
+      if (showSteps) {
+        return stepLabels.reduce((best, l) => Math.abs(l - raw) < Math.abs(best - raw) ? l : best);
+      }
+      return snapToStep(raw, min2, max2, step);
     },
-    [min2, max2, step]
+    [min2, max2, step, showSteps, stepLabels]
   );
   const commitSingle = React.useCallback(
     (newValue) => {
@@ -9871,6 +9915,23 @@ const Slider = React.forwardRef(function Slider2({
   const handleKeyDown = React.useCallback(
     (e, thumb) => {
       if (disabled) return;
+      if (showSteps) {
+        const currentVal = isSingle ? value : range[thumb === "start" ? 0 : 1];
+        const idx = stepLabels.reduce(
+          (best, _, i) => Math.abs(stepLabels[i] - currentVal) < Math.abs(stepLabels[best] - currentVal) ? i : best,
+          0
+        );
+        let nextVal;
+        if (e.key === "ArrowRight" || e.key === "ArrowUp") nextVal = stepLabels[Math.min(idx + 1, stepLabels.length - 1)];
+        else if (e.key === "ArrowLeft" || e.key === "ArrowDown") nextVal = stepLabels[Math.max(idx - 1, 0)];
+        else if (e.key === "Home") nextVal = stepLabels[0];
+        else if (e.key === "End") nextVal = stepLabels[stepLabels.length - 1];
+        if (nextVal === void 0) return;
+        e.preventDefault();
+        if (isSingle) commitSingle(nextVal);
+        else commitRange(nextVal, thumb);
+        return;
+      }
       let delta = 0;
       if (e.key === "ArrowRight" || e.key === "ArrowUp") delta = step;
       else if (e.key === "ArrowLeft" || e.key === "ArrowDown") delta = -step;
@@ -9885,20 +9946,17 @@ const Slider = React.forwardRef(function Slider2({
         commitRange(clamp(thumbVal + delta, min2, max2), thumb);
       }
     },
-    [disabled, step, min2, max2, isSingle, value, range, commitSingle, commitRange]
+    [disabled, showSteps, stepLabels, min2, max2, isSingle, value, range, commitSingle, commitRange]
   );
   const startPct = isSingle ? 0 : valueToPct(range[0], min2, max2);
   const endPct = isSingle ? valueToPct(value, min2, max2) : valueToPct(range[1], min2, max2);
   const thumbInteractive = cn(
-    "absolute rounded-full",
+    "absolute rounded-full bg-[var(--fill-white-1000)]",
     "shadow-[0px_1px_3px_0px_rgba(0,0,0,0.10),0px_1px_2px_-1px_rgba(0,0,0,0.10)]",
     THUMB_SIZE_CLASS[size2],
-    disabled ? "bg-[var(--bg-default-secondary)] cursor-not-allowed" : "bg-[var(--fill-white-1000)] cursor-grab active:cursor-grabbing",
+    disabled ? "cursor-not-allowed" : "cursor-grab active:cursor-grabbing",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bg-brand-primary)] focus-visible:ring-offset-2"
   );
-  const stepLabels = [0, 0.25, 0.5, 0.75, 1].map(
-    (f) => Math.round(min2 + (max2 - min2) * f)
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9913,8 +9971,7 @@ const Slider = React.forwardRef(function Slider2({
             className: cn(
               "relative w-full rounded-full",
               TRACK_HEIGHT[size2],
-              "bg-[var(--fill-gray-200)]",
-              disabled ? "cursor-not-allowed" : "cursor-pointer"
+              disabled ? "bg-[var(--fill-gray-200)] dark:bg-[var(--fill-gray-700)] cursor-not-allowed" : "bg-[var(--fill-gray-200)] cursor-pointer"
             ),
             onPointerDown: handlePointerDown,
             onPointerMove: handlePointerMove,
@@ -9993,25 +10050,32 @@ const Slider = React.forwardRef(function Slider2({
             ]
           }
         ),
-        showSteps && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: "relative w-full h-4",
-            children: stepLabels.map((label) => {
-              const pct = valueToPct(label, min2, max2);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "absolute text-xs leading-4 text-[var(--text-default-primary)] whitespace-nowrap",
-                  style: { left: `${pct}%`, transform: "translateX(-50%)" },
-                  children: label
-                },
-                label
-              );
-            })
-          }
-        )
+        showSteps && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "relative w-full h-4", children: stepLabels.map((label) => {
+          const pct = valueToPct(label, min2, max2);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              disabled,
+              onClick: () => {
+                if (isSingle) {
+                  commitSingle(label);
+                } else {
+                  const thumb = Math.abs(label - range[0]) <= Math.abs(label - range[1]) ? "start" : "end";
+                  commitRange(label, thumb);
+                }
+              },
+              className: cn(
+                "absolute text-xs leading-4 whitespace-nowrap",
+                disabled ? "cursor-not-allowed text-[var(--text-default-disabled)]" : "cursor-pointer text-[var(--text-default-primary)]"
+              ),
+              style: { left: `${pct}%`, transform: "translateX(-50%)" },
+              children: label
+            },
+            label
+          );
+        }) })
       ]
     }
   );
@@ -10047,7 +10111,7 @@ LinearProgress.displayName = "LinearProgress";
 const SIZE_CONFIG = {
   lg: { dimension: 128, r: 60, strokeWidth: 8, trackColor: "var(--bg-default-tertiary)", fontSize: 24, lineHeight: 36, showLabel: true },
   md: { dimension: 48, r: 22, strokeWidth: 3, trackColor: "var(--bg-default-tertiary)", fontSize: 14, lineHeight: 20, showLabel: true },
-  sm: { dimension: 24, r: 8, strokeWidth: 2, trackColor: "var(--fill-black-200)", fontSize: 0, lineHeight: 0, showLabel: false }
+  sm: { dimension: 18, r: 8, strokeWidth: 2, trackColor: "var(--fill-black-200)", fontSize: 0, lineHeight: 0, showLabel: false }
 };
 const CircleProgress = React.forwardRef(
   function CircleProgress2({ value, size: size2 = "lg", className }, ref) {
@@ -10158,7 +10222,7 @@ const UploadArea = React.forwardRef(
           }
         },
         className: cn(
-          "flex items-center justify-center gap-2 min-h-12 py-3.5 rounded-lg",
+          "flex h-12 items-center justify-center gap-2 rounded-lg",
           "border border-dashed border-border-default",
           disabled ? "bg-bg-default-secondary cursor-not-allowed" : "bg-background cursor-pointer hover:bg-bg-default-secondary transition-colors",
           className
@@ -10230,7 +10294,7 @@ const UploadItem = React.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(TrashButton, { onDelete })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 px-0.5 text-text-danger", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[7.74px] leading-none", children: "*" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-4", children: "*" }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-4", children: errorText })
               ] })
             ] })
@@ -10238,7 +10302,7 @@ const UploadItem = React.forwardRef(
         }
       );
     }
-    const cardBase = "flex-1 min-w-0 flex items-center gap-2 p-3.5 bg-background border border-border-default rounded-lg text-base leading-6 whitespace-nowrap";
+    const cardBase = "flex-1 min-w-0 flex h-[52px] items-center gap-2 px-3.5 bg-background border border-border-default rounded-lg text-base leading-6 whitespace-nowrap";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -10248,7 +10312,7 @@ const UploadItem = React.forwardRef(
           className
         ),
         children: [
-          isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-1 px-3.5 py-2.5 bg-background border border-border-default rounded-lg", children: [
+          isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex h-12 flex-col justify-center gap-1 px-3.5 bg-background border border-border-default rounded-lg", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center h-5 text-sm leading-5 text-text-default-placeholder", children: [
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 truncate", children: fileName }),
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-right w-[46px]", children: fileSize })
@@ -10297,7 +10361,7 @@ function TrashButton({ onDelete }) {
     {
       type: "button",
       onClick: onDelete,
-      className: "flex items-center justify-center w-5 h-5 shrink-0 text-text-danger cursor-pointer",
+      className: "flex items-center justify-center w-5 h-5 shrink-0 text-icon-danger cursor-pointer",
       "aria-label": "ลบไฟล์",
       children: /* @__PURE__ */ jsxRuntime.jsx(react.TrashIcon, { size: 20 })
     }
@@ -10327,9 +10391,9 @@ const ListItem = React.forwardRef(
         onPointerUp: () => setPressed(false),
         onPointerLeave: () => setPressed(false),
         className: cn(
-          "flex items-center gap-3 p-4 border-b border-border",
+          "flex items-center gap-3 p-4 h-[52px] border-b border-border",
           isHighlighted ? "bg-bg-default-pressed" : "bg-background",
-          onClick && "cursor-pointer select-none",
+          onClick && "cursor-pointer select-none hover:bg-bg-default-pressed",
           className
         ),
         children: [